add an element Aboout on the front page

ssciwr · Nov 19, 2024 · 90c8dd8 · 90c8dd8
1 parent e355a44
commit 90c8dd8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/frontend/src/lib/assets/babyFlower.jpg b/frontend/src/lib/assets/babyFlower.jpg
diff --git a/frontend/src/lib/components/FrontPageAbout.svelte b/frontend/src/lib/components/FrontPageAbout.svelte
@@ -0,0 +1,12 @@
+<script>
+    import { Card } from 'flowbite-svelte';
+    import { _ } from "svelte-i18n";
+</script>
+
+  <div class="flex mt-4 justify-center min-w-full">
+    <Card img="/lib/assets/babyFlower.jpg" horizontal size="full" class="shadow-none border-none">
+      <h5 class="mb-8 mt-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-white">{$_("frontpageAbout.heading")}</h5>
+      <p class="mb-3 font-normal max-w-prose text-gray-700 dark:text-gray-400">{$_("frontpageAbout.summary1")}</p>
+      <p class="mb-3 font-normal max-w-prose text-gray-700 dark:text-gray-400">{$_("frontpageAbout.summary2")}</p>
+    </Card>
+  </div>
diff --git a/frontend/src/lib/components/Frontpage.svelte b/frontend/src/lib/components/Frontpage.svelte
@@ -3,13 +3,17 @@
 import CardDisplay from "$lib/components//DataDisplay/CardDisplay.svelte";
 import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";
 import FrontPageCard from "$lib/components/FrontPageCard.svelte";
+import FrontPageAbout from "$lib/components/FrontPageAbout.svelte";
 
 let { items = [] } = $props();
 </script>
 
 <FrontPageCard
 />
 
+<FrontPageAbout
+/>
+
 <GalleryDisplay
 	withSearch={false}
 	itemComponent={CardDisplay}

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -188,5 +188,10 @@
 		"summary": "Hier sind Sie genau richtig!",
 		"buttonLabel": "Anmeldung",
 		"toolTip": "Anmelden oder ein neues Konto erstellen"
+	},
+	"frontpageAbout": {
+		"heading": "Was ist MONDEY?",
+		"summary1": "Ein mit Eltern und Fachkräften entwickeltes, wissenschaftlich geprüftes Program zur Beobachtung und Dokumentation der Entwicklung von Kindern bis 6 Jahre.",
+		"summary2": "Sie bewerten, wie gut das Kind bestimmte Alltagshandlungen ausführen kann. Auf dieser Basis bietet MONDEY Ihnen Feedback zum Entwicklungsstand des Kindes."
 	}
 }