Drop
& Heal
+
+ Welkom bij Drop & Heal. Een veilige plek voor jouw reis door rouwverwerking.
+ Er volgt eerst een introductie en kennismaking, hierna kan je op eigen tempo aan de slag in de omgeving.
+
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 00000000..4750d5f9
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ad Frontend Design & Development - Agency
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/content/CONTENT.md b/content/CONTENT.md
new file mode 100644
index 00000000..aa406040
--- /dev/null
+++ b/content/CONTENT.md
@@ -0,0 +1 @@
+In deze folder kunnen teksten en visuals voor de web app geplaatst worden
diff --git a/design/community-drops.png b/design/community-drops.png
new file mode 100644
index 00000000..ec29d400
Binary files /dev/null and b/design/community-drops.png differ
diff --git a/design/emotioneel-verder-gaan.png b/design/emotioneel-verder-gaan.png
new file mode 100644
index 00000000..4d000d42
Binary files /dev/null and b/design/emotioneel-verder-gaan.png differ
diff --git a/design/verder-in-verandering.png b/design/verder-in-verandering.png
new file mode 100644
index 00000000..271cab1a
Binary files /dev/null and b/design/verder-in-verandering.png differ
diff --git a/docs/INSTRUCTIONS.md b/docs/INSTRUCTIONS.md
deleted file mode 100644
index f4119bed..00000000
--- a/docs/INSTRUCTIONS.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Don't Repeat Yourself - Component Library
-Ontwikkel een website voor een opdrachtgever op basis van een component library.
-
-## Context
-Deze leertaak hoort bij sprint 16 Don't Repeat Yourself. Dit is een opdracht die je deels individueel en deels als team uitvoert voor een opdrachtgever.
-
-Bij deze leertaak hoort de deeltaak:
-
-* [Component Building Block](https://github.com/fdnd-task/dont-repeat-yourself-component-building-block)
-
-## Doel van deze opdracht
-Je leert hoe je herbruikbare stukken code op een systematische manier ontsluit zodat jij en jouw mede frontenders ze kunnen gebruiken in andere projecten.
-
-## Werkwijze
-Bij elke leertaak wordt de development-lifecycle doorlopen. Hierdoor ontwikkel je een standaard aanpak voor frontend praktijkvraagstukken, werk je systematisch aan leertaken, ervaar je de relevantie van het geleerde en verwerf je de kennis, houding en vaardigheden die de beroepspraktijk van je vraagt. De development lifecycle bestaat uit de stappen: Analyseren, Ontwerpen, Bouwen, Integreren en Testen.
-
-De component library (letterlijk: een bibliotheek met componenten) die je gaat maken bestaat uit een serie herbruikbare bouwblokken voor een opdrachtgever in een apart project. Het voordeel van het gebruiken van een component library is dat alle projecten die voor deze opdrachtgever gemaakt worden terug kunnen verwijzen naar dezelfde component library.
-
-Door op deze manier te werken wordt de *developer experience* (hierna DX) beter omdat:
-1. Uniformiteit wordt afgedwongen
-2. Een design strategie wordt omarmd
-3. Herhaling niet meer hoeft (DRY!)
-4. Bugs oplossen eenvoudiger wordt
-5. Samenwerken makkelijker wordt
-
-Het omarmen van deze ontwikkelstrategie vereist wel enig schakelen in de manier waarop je over code denkt. Het wordt abstracter omdat er meer afhankelijkheden en abstracties in je code gaan plaatsvinden. Je gaat bijvoorbeeld denken in termen van NPM packages in plaats van in componenten in één repository. Waarschijnlijk heb je ergens tijdens de vorige sprints de kracht van componenten in een lokaal project al ontdekt, nu is het tijd om externe componenten in te laden!
-
-### Aanpak
-
-In deze leertaak vind je slechts een partiële instructie, namelijk voor het [opzetten van de structuur](#structuur-opzetten-team) die nodig is om een component library als project in NPM te krijgen. Als dit gelukt is begint eigenlijk de leertaak pas. Je gaat je component library inzetten bij de [doorontwikkeling van projecten](#doorontwikkeling-individueel) (lees user-stories) voor jouw opdrachtgever.
-
-#### Structuur opzetten (team)
-
-Het opzetten van de structuur voor een component library is een beetje een gedoe maar het loont als je dit eenmaal gedaan hebt.
-
-1. Fork deze leertaak, in deze leertaak ga je de implementatie van de component library maken. Met andere woorden, je linkt in deze repository een andere repository welke de component library bevat.
-2. Maak een nieuwe repository aan op jouw GitHub omgeving, geef deze een logische naam, bijvoorbeeld: fdnd-components, bij de volgende stappen staat *CLib* als het om deze ‘andere’ repository gaat.
-3. *CLib* Initialiseer een nieuw SvelteKit library project!
-4. *CLib* Check package.json voor de benodigde scripts. Als alles gelukt is zie je het commando `package` bij het lijstje staan.
-5. *CLib* Maak om te testen een nieuw eenvoudig component aan in de /src/lib map, bijvoorbeeld `HelloWorld.svelte`
-6. *CLib* Roep het commando `npm run package` aan om in de repository een package klaar te zetten.
-7. *CLib* Bekijk de nieuw gegenereerde map `/package`
-8. *CLib* Pas in de gegenereerde `package.json` de belangrijke velden aan, zoals `name`, `version`, `description`, enzovoorts.
-9. *CLib* Publiceer gegenereerde package (dus niet het hele project!) als *scoped public package* via npm (zie bronnen). Het kan goed zijn dat je eerst een gebruiker en een organisatie moet aanmaken.
-10. Check npmjs.com en zoek jouw organisatie/package (supertof!)
-11. Initialiseer een SvelteKit skeletten project.
-11. Link jouw package als dependancy door `npm install organisatie/package` uit te voeren.
-12. Importeer jouw component door `import { HelloWorld } from 'organisatie/package`, zet het ergens neer met `
+
+
+
\ No newline at end of file
diff --git a/my-app/src/lib/blurgrad-green.svelte b/my-app/src/lib/blurgrad-green.svelte
new file mode 100644
index 00000000..70fd5883
--- /dev/null
+++ b/my-app/src/lib/blurgrad-green.svelte
@@ -0,0 +1,25 @@
+
+
+
+
\ No newline at end of file
diff --git a/my-app/src/lib/blurgrad-pink.svelte b/my-app/src/lib/blurgrad-pink.svelte
new file mode 100644
index 00000000..b7c500ae
--- /dev/null
+++ b/my-app/src/lib/blurgrad-pink.svelte
@@ -0,0 +1,26 @@
+
+
+
+
\ No newline at end of file
diff --git a/my-app/src/lib/blurgrad-red.svelte b/my-app/src/lib/blurgrad-red.svelte
new file mode 100644
index 00000000..9ac0187f
--- /dev/null
+++ b/my-app/src/lib/blurgrad-red.svelte
@@ -0,0 +1,25 @@
+
+
+
+
\ No newline at end of file
diff --git a/my-app/src/lib/chatbot.svelte b/my-app/src/lib/chatbot.svelte
new file mode 100644
index 00000000..44f32317
--- /dev/null
+++ b/my-app/src/lib/chatbot.svelte
@@ -0,0 +1,228 @@
+
+
+ Deel wat je van de oefening vond, lees ervaringen van anderen en steun elkaar in de reis door rouw. Je bent niet alleen.
+ + + + + + +
+
+
\ 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 00000000..1d0d846d
--- /dev/null
+++ b/my-app/src/lib/meshgrad-blue.svelte
@@ -0,0 +1,27 @@
+
+
+
\ 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 00000000..19b03cd9
--- /dev/null
+++ b/my-app/src/lib/meshgrad-green.svelte
@@ -0,0 +1,27 @@
+
+
+
\ No newline at end of file
diff --git a/my-app/src/lib/meshgrad-pink.svelte b/my-app/src/lib/meshgrad-pink.svelte
new file mode 100644
index 00000000..8f9dd269
--- /dev/null
+++ b/my-app/src/lib/meshgrad-pink.svelte
@@ -0,0 +1,27 @@
+
+
+
\ 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 00000000..fa15732a
--- /dev/null
+++ b/my-app/src/lib/meshgrad-red.svelte
@@ -0,0 +1,28 @@
+
+
+
\ No newline at end of file
diff --git a/my-app/src/lib/messagesStore.js b/my-app/src/lib/messagesStore.js
new file mode 100644
index 00000000..817cb68e
--- /dev/null
+++ b/my-app/src/lib/messagesStore.js
@@ -0,0 +1,17 @@
+// src/lib/messagesStore.js
+import { writable } from 'svelte/store';
+
+// Controleer of we in de browser draaien
+const isBrowser = typeof window !== 'undefined';
+
+// Haal de berichten op uit localStorage als we in de browser zijn
+export const messages = writable(
+ isBrowser ? JSON.parse(localStorage.getItem('messages')) || [] : []
+);
+
+// Subscribe naar de store en sla berichten op in localStorage
+if (isBrowser) {
+ messages.subscribe($messages => {
+ localStorage.setItem('messages', JSON.stringify($messages));
+ });
+}
\ No newline at end of file
diff --git a/my-app/src/routes/+page.js b/my-app/src/routes/+page.js
new file mode 100644
index 00000000..cba219d1
--- /dev/null
+++ b/my-app/src/routes/+page.js
@@ -0,0 +1 @@
+export let csr = true
\ No newline at end of file
diff --git a/my-app/src/routes/+page.svelte b/my-app/src/routes/+page.svelte
new file mode 100644
index 00000000..344c5efd
--- /dev/null
+++ b/my-app/src/routes/+page.svelte
@@ -0,0 +1,104 @@
+
+
+
+
+ Welkom bij Drop & Heal. Een veilige plek voor jouw reis door rouwverwerking.
+ Er volgt eerst een introductie en kennismaking, hierna kan je op eigen tempo aan de slag in de omgeving.
+
{des}
+ +{des}
+ +{des}
+{d1}
+ + +{d2}
+ +{d3}
+ +{d4}
+ +Jouw privacy en comfort zijn onze prioriteit. Alles wat je deelt blijft vertrouwelijk.
+
+ Onze methode is gebaseerd op de erkende rouwtaken van William Worden, Amerikaans rouwexpert,
+ zorgvuldig samengesteld om jou te ondersteunen tijdens je rouwreis.
+ Ontdek met ons de betekenis en steun die het jou kan bieden.
+
+ We hebben tools samengesteld om je te ondersteunen in je reis door rouw. + Straks geven we een rondleiding binnen de omgeving. + Laten we nu eerst samen het landschap van rouw verkennen. +
+
+ Drop & Heal is een metafoor voor het loslaten van de zware last van verdriet en het starten van een helend proces.
+ Als een druppel in het water valt, wordt het onderdeel van een groter, krachtiger geheel, dit gebeurt ook wanneer we ons verdriet delen.
+ 'Drop' verwijst naar het moment waarop je je verdriet of emoties deelt, laat vallen, of erkent.
+ 'Heal' staat voor het genezingsproces dat volgt, waarbij je op je eigen tempo de stappen zet naar herstel en acceptatie.
+ Het is een uitnodiging om je verdriet te erkennen, het los te laten en jezelf toe te staan te helen, stap voor stap, druppel voor druppel.
+