From 1d6c71dcf923ea475d05ab248c2d683b521b019d Mon Sep 17 00:00:00 2001
From: lisavanmansom <lisavanmansom@gmail.com>
Date: Fri, 27 Sep 2024 12:54:55 +0200
Subject: [PATCH] fixes #20

---
 my-app/src/lib/arrow-l.svelte                 |  7 +++
 my-app/src/lib/arrow-r.svelte                 |  7 +++
 my-app/src/lib/meshgrad-blue.svelte           | 12 ++++
 my-app/src/lib/meshgrad-green.svelte          | 12 ++++
 my-app/src/lib/meshgrad-pink.svelte           | 12 ++++
 my-app/src/lib/meshgrad-red.svelte            | 12 ++++
 .../src/routes/introduction-task/+page.svelte | 60 +++++++++++++++++++
 7 files changed, 122 insertions(+)
 create mode 100644 my-app/src/lib/arrow-l.svelte
 create mode 100644 my-app/src/lib/arrow-r.svelte
 create mode 100644 my-app/src/lib/meshgrad-blue.svelte
 create mode 100644 my-app/src/lib/meshgrad-green.svelte
 create mode 100644 my-app/src/lib/meshgrad-pink.svelte
 create mode 100644 my-app/src/lib/meshgrad-red.svelte

diff --git a/my-app/src/lib/arrow-l.svelte b/my-app/src/lib/arrow-l.svelte
new file mode 100644
index 0000000..9982aba
--- /dev/null
+++ b/my-app/src/lib/arrow-l.svelte
@@ -0,0 +1,7 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.561884 4.55426C0.315712 4.79623 0.3123 5.19194 0.554265 5.43812L4.49731 9.44973C4.73927 9.6959 5.13498 9.69931 5.38116 9.45735C5.62733 9.21539 5.63074 8.81967 5.38878 8.5735L1.88385 5.00762L5.44973 1.50269C5.6959 1.26073 5.69931 0.865016 5.45735 0.618844C5.21539 0.372671 4.81967 0.36926 4.5735 0.611224L0.561884 4.55426ZM15.0755 5.74636C15.4207 5.74934 15.7029 5.47194 15.7059 5.12678C15.7089 4.78161 15.4315 4.49939 15.0863 4.49641L15.0755 5.74636ZM0.994612 5.62498L15.0755 5.74636L15.0863 4.49641L1.00539 4.37502L0.994612 5.62498Z" fill="#F5F5F5"/>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
\ No newline at end of file
diff --git a/my-app/src/lib/arrow-r.svelte b/my-app/src/lib/arrow-r.svelte
new file mode 100644
index 0000000..3df0190
--- /dev/null
+++ b/my-app/src/lib/arrow-r.svelte
@@ -0,0 +1,7 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.4381 4.55426C15.6843 4.79623 15.6877 5.19194 15.4457 5.43812L11.5027 9.44973C11.2607 9.6959 10.865 9.69931 10.6188 9.45735C10.3727 9.21539 10.3693 8.81967 10.6112 8.5735L14.1161 5.00762L10.5503 1.50269C10.3041 1.26073 10.3007 0.865016 10.5426 0.618844C10.7846 0.372671 11.1803 0.36926 11.4265 0.611224L15.4381 4.55426ZM0.924462 5.74636C0.579297 5.74934 0.297073 5.47194 0.294098 5.12678C0.291122 4.78161 0.568522 4.49939 0.913687 4.49641L0.924462 5.74636ZM15.0054 5.62498L0.924462 5.74636L0.913687 4.49641L14.9946 4.37502L15.0054 5.62498Z" fill="#F5F5F5"/>
+    </svg>
+    
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
\ No newline at end of file
diff --git a/my-app/src/lib/meshgrad-blue.svelte b/my-app/src/lib/meshgrad-blue.svelte
new file mode 100644
index 0000000..8356179
--- /dev/null
+++ b/my-app/src/lib/meshgrad-blue.svelte
@@ -0,0 +1,12 @@
+<svg width="224" height="222" viewBox="0 0 224 222" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="224" height="222" fill="url(#pattern0_2_85)"/>
+    <defs>
+    <pattern id="pattern0_2_85" patternContentUnits="objectBoundingBox" width="1" height="1">
+    <use xlink:href="#image0_2_85" transform="scale(0.000824402 0.000831255)"/>
+    </pattern>
+    </defs>
+</svg>
+ 
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
\ No newline at end of file
diff --git a/my-app/src/lib/meshgrad-green.svelte b/my-app/src/lib/meshgrad-green.svelte
new file mode 100644
index 0000000..e97a0ae
--- /dev/null
+++ b/my-app/src/lib/meshgrad-green.svelte
@@ -0,0 +1,12 @@
+<svg width="213" height="258" viewBox="0 0 213 258" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.0671387" y="41.4482" width="160.143" height="223.596" transform="rotate(-15 0.0671387 41.4482)" fill="url(#pattern0_2_237)"/>
+<defs>
+<pattern id="pattern0_2_237" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2_237" transform="scale(0.00101215 0.000863558)"/>
+</pattern>
+</defs>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
diff --git a/my-app/src/lib/meshgrad-pink.svelte b/my-app/src/lib/meshgrad-pink.svelte
new file mode 100644
index 0000000..3651657
--- /dev/null
+++ b/my-app/src/lib/meshgrad-pink.svelte
@@ -0,0 +1,12 @@
+<svg width="229" height="228" viewBox="0 0 229 228" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="228.089" width="227.744" height="228" transform="rotate(90 228.089 0)" fill="url(#pattern0_2_287)"/>
+<defs>
+<pattern id="pattern0_2_287" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2_287" transform="scale(0.000793651 0.000792393)"/>
+</pattern>
+</defs>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
\ No newline at end of file
diff --git a/my-app/src/lib/meshgrad-red.svelte b/my-app/src/lib/meshgrad-red.svelte
new file mode 100644
index 0000000..aaf58ca
--- /dev/null
+++ b/my-app/src/lib/meshgrad-red.svelte
@@ -0,0 +1,12 @@
+<svg width="201" height="244" viewBox="0 0 201 244" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="200.941" height="244" fill="url(#pattern0_2_184)"/>
+<defs>
+<pattern id="pattern0_2_184" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2_184" transform="scale(0.00095511 0.000790514)"/>
+</pattern>
+</defs>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
\ No newline at end of file
diff --git a/my-app/src/routes/introduction-task/+page.svelte b/my-app/src/routes/introduction-task/+page.svelte
index 36a1ce9..89ea34d 100644
--- a/my-app/src/routes/introduction-task/+page.svelte
+++ b/my-app/src/routes/introduction-task/+page.svelte
@@ -1,9 +1,69 @@
 <script>
+    	import MeshgradBlue from '$lib/meshgrad-blue';
+        import MeshgradRed from '$lib/meshgrad-red';
+        import MeshgradGreen from '$lib/meshgrad-green';
+        import MeshgradPink from '$lib/meshgrad-pink';
+        import ArrowL from '$lib/arrow-l';
+        import ArrowR from '$lib/arrow-r';
 
 </script>
 
 
 <main>
+    <header>
+        <h1>Introductie rouwtaken</h1>
+
+        <div aria-busy="true" aria-describedby="progress-bar"></div>
+        <progress id="progress-bar" value="20" max="100"></progress>
+  
+    </header>
+
+    <section id="rt-1">
+        <h2>Rouwtaak 1</h2>
+        <h3>Het verlies aanvaarden</h3>
+        <p>Ontdek hoe je de realiteit van het verlies kunt omarmen.</p>
+        <MeshgradBlue />
+
+        <a href="#rt-2">
+            <ArrowR /></a>
+    </section>
+
+    <section id="rt-2">
+        <h2>Rouwtaak 2</h2>
+        <h3>De pijn doorvoelen</h3>
+        <p>Sta jezelf toe om de pijn te voelen en leer om deze op jouw manier te verwerken. </p>
+        <MeshgradRed />
+
+        <a href="#rt-1">
+            <ArrowL /></a>
+        <a href="#rt-3">
+            <ArrowR /></a>
+    </section>
+
+    <section id="rt-3">
+        <h2>Rouwtaak 3</h2>
+        <h3>Verder in verandering</h3>
+        <p>Vind jouw weg in een wereld die nu anders is door het verlies van je dierbare.</p>
+        <MeshgradGreen />
+
+        <a href="#rt-2">
+            <ArrowL /></a>
+        <a href="#rt-4">
+            <ArrowR /></a>
+    </section>
+
+    <section id="rt-4">
+        <h2>Rouwtaak 4</h2>
+        <h3>Emotioneel verder gaan</h3>
+        <p>Ontdek hoe je een nieuw pad kunt inslaan terwijl je het verlies een betekenisvolle plek geeft in je leven.</p>
+        <MeshgradPink />
+
+        <a href="#rt-3">
+            <ArrowL /></a>
+        <a href="#">
+            <ArrowR /></a>
+
+    </section>
 
 </main>