add a new accordion element on the front page

frontend/src/lib/components/FrontPageAccordion.svelte

@@ -0,0 +1,16 @@
+<script>
+import { Accordion, AccordionItem } from "flowbite-svelte";
+import { _ } from "svelte-i18n";
+</script>
+
+   <Accordion class="min-w-full px-4 mt-10">
+        <AccordionItem class="bg-additional-color-400 hover:bg-additional-color-50 hover:text-gray-700 text-gray-700 pl-14">
+        <span slot="header">{$_('frontpageAccordion.heading1')}</span>
+      <p class="mb-4 mt-4 px-4 text-gray-700 dark:text-gray-400">{@html $_('frontpageAccordion.summary1')}</p>
+    </AccordionItem>
+
+    <AccordionItem class="bg-additional-color-200 hover:bg-additional-color-50 text-gray-700 pl-14">
+        <span slot="header">{$_('frontpageAccordion.heading2')}</span>
+        <p class="mb-4 mt-4 px-4 text-gray-700 dark:text-gray-400">{@html $_('frontpageAccordion.summary2')}</p>
+      </AccordionItem>
+  </Accordion>

frontend/src/lib/components/FrontPageCard.svelte

@@ -5,7 +5,7 @@ import { _ } from "svelte-i18n";
 </script>
 
 <div class="flex justify-center px-4 mt-6">
-<Card class="flex justify-center text-center max-w-prose bg-additional-color min-w-full">
+<Card class="flex justify-center text-center max-w-prose bg-additional-color-400 min-w-full">
   <h5 class="mb-2 mt-4 text-xl font-bold text-gray-700 dark:text-white tracking-wide">{$_("frontpage.heading")}</h5>
   <p class="mb-5 text-base text-gray-600 sm:text-md dark:text-gray-400">{$_("frontpage.summary")}</p>
   <div class="justify-center mb-1 items-center mt-2">

frontend/src/lib/components/Frontpage.svelte

@@ -5,6 +5,7 @@ import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";
 import FrontPageAbout from "$lib/components/FrontPageAbout.svelte";
 import FrontPageCard from "$lib/components/FrontPageCard.svelte";
 import { _ } from "svelte-i18n";
+import FrontPageAccordion from "./FrontPageAccordion.svelte";
 import FrontPageBookmarks from "./FrontPageBookmarks.svelte";
 
 let { items = [] } = $props();
@@ -52,6 +53,8 @@ const bookmarks = [
    <FrontPageBookmarks {bookmarks} />
   </div>
 
+  <FrontPageAccordion/>
+
 <GalleryDisplay
 	withSearch={false}
 	itemComponent={CardDisplay}

frontend/src/locales/de.json

@@ -253,5 +253,11 @@
 		"imprint": "Presse und Medien",
 		"privacy": "Datenschutzerklärung",
 		"bottom": "Psychologisches Institut Heidelberg"
+	},
+	"frontpageAccordion": {
+		"heading1": "Wie funktioniert MONDEY?",
+		"summary1": "<p>Für alle wichtigen Bereiche der Entwicklung bis zum Schulalter haben wir eine Liste von <strong>Meilensteine</strong> zusammengestellt. Jeder Meilenstein steht für eine Kompetenz, die KInder typischerweise irgendwann zwischen 0 und 6 Jahren erreichen. Meilensteine können Sie ohne besondere Ausbildung oder Testmaterial im Alltag gut beobachten und gezielt fördern. Gerne können Sie sich die Liste der Meilensteine vorab anschauen oder herunterladen.<br /><br />Wenn Sie sich anmelden, bitten wir Sie zunächst um einige <strong>Angaben zu Ihrer Person und zum beobachteten Kind</strong>. Diese Information benötigen wir ausschließlich, um ihre Daten richtig einordnen zu können und unsere Stichprobe in wissenschaftlichen Publikationen korrekt beschreiben zu können.<br /><br />Gerne können Sie sich die Liste der Personenbezogenen Daten vorab anschauen oder herunterladen, nach denen wir Sie fragen werden.<br /><br />Anschließend sollen Sie für jeden Entwicklungsbereich alle Meilensteine bewerten, indem Sie beurteilen, ob das Kind die beschriebene Kompetenz:<br /><ul><li>„noch nicht“,</li><li>„in Ansätzen“,</li>\n  <li>„weitgehend“</li><li>oder „zuverlässig“ zeigt.</li></ul><br /><br />Für die Bewertung jedes Meilensteins gibt es zur Unterstützung abrufbare <strong>Beobachtungshinweise</strong>.<br /><br />Bei der ersten <strong>Bestandsaufnahme</strong> werden Sie zunächst durch alle Meilensteine geführt. Je nach Alter des KIndes dauert das etwas länger. Wenn Sie die Entwicklung des gleichen KIndes später <strong>kontinuierlich weiter dokumentiere</strong> möchten, werden nur noch die Meilensteine abgefragt, die zuvor noch nicht als „zuverlässig gekonnt“ bewertet wurden.<br /><br />Am Ende Ihrer Bestandsaufnahme erhalten Sie ein <strong>Ampel-Feedback</strong>. Wir geben Ihnen für jeden Entwicklungsbereich einzeln Rückmeldung, ob das Kind:<br /><ul><li>altergemäß entwickelt ist (Ampel grün),</li><li>ob einzelne Meilensteine verspätet sind (Ampel gelb),</li><li>oder ob in einem Bereich Anzeichen für eine deutlich verzögerte Entwicklung gibt (Ampel rot).</li>\n</ul>\nDas Feedback basiert auf einem Vergleich mit einer großen Standard-Stichprobe. Auch Ihre Daten gehen in diese Vergleichsstichprobe ein. Sie wächst damit ständig und wird immer zuverlässiger.<br /><br />Zusätzlich erhalten Sie auf Wunsch auch Meilenstein-bezogene <strong>Förder-Hinweise</strong>.<br /><br />Wichtig ist, dass Sie Ihre Beobachtung in regelmäßigen Abständen vornehmen, um feststellen zu können, ob sich Änderungen am Entwicklungsstatus ergeben.<br />\nJedes Kind hat sein eigenes Tempo - vieles kann sich schnell ändern.<br /><br /><strong>Mit MONDEY lernen Sie:</strong><ul><li>die Entwicklungsfortschritte von Kindern kontinuierlich genau zu beobachten</li><li>die Kinder beim Erwerb wichtiger neuer Kompetenzen gezielt zu unterstützen</li><li>den Entwicklungsstand eines Kindes einzuschätzen und ggf. rechtzeitig Unterstützung zu geben</li></ul>Außerdem leisten Sie einen wichtigen Beitrag zur Entwicklungspsychologischen Grundlagenforschung!</p>",
+		"heading2": "Häufig gestellte Fragen",
+		"summary2": "Ein mit Eltern und Fachkräften entwickeltes, wissenschaftlich geprüftes Program zur Beobachtung und Dokumentation der Entwicklung von Kindern bis 6 Jahre. Sie bewerten, wie gut das Kind bestimmte Alltagshandlungen ausführen kann."
 	}
 }

frontend/tailwind.config.ts

@@ -33,7 +33,18 @@ export default {
 					900: "#46537E",
 				},
 
-				"additional-color": "#a4d2d0",
+				"additional-color": {
+					50: "#E2F1F0",
+					100: "#D5EAE9",
+					200: "#C7E3E2",
+					300: "#B6DBDA",
+					400: "#A5D2D1",
+					500: "#96BFBE",
+					600: "#7C9E9D",
+					700: "#698584",
+					800: "#556C6B",
+					900: "4D6261",
+				},
 
 				"milestone-answer": {
 					0: "#f2e8cf",