add an element "About" to the front page (#170)

* add an element Aboout on the front page * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix image import --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Liam Keegan <[email protected]>
ssciwr · Nov 20, 2024 · dca2681 · dca2681
1 parent e355a44
commit dca2681
Show file tree

Hide file tree

Showing 4 changed files with 22 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,13 @@
+<script>
+import babyFlower from "$lib/assets/babyFlower.jpg";
+import { Card } from "flowbite-svelte";
+import { _ } from "svelte-i18n";
+</script>
+
+  <div class="flex mt-4 justify-center min-w-full">
+    <Card img={babyFlower} 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
@@ -2,6 +2,7 @@
 <script lang='ts'>
 import CardDisplay from "$lib/components//DataDisplay/CardDisplay.svelte";
 import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";
+import FrontPageAbout from "$lib/components/FrontPageAbout.svelte";
 import FrontPageCard from "$lib/components/FrontPageCard.svelte";
 
 let { items = [] } = $props();
@@ -10,6 +11,9 @@ let { items = [] } = $props();
 <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."
 	}
 }