add an 'about' element to the front page

ssciwr · Nov 18, 2024 · 46ceb7b · 46ceb7b
1 parent 85aadd4
commit 46ceb7b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 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,17 @@
+<script lang='ts'>
+    import { Card } from 'flowbite-svelte';
+    import { _ } from "svelte-i18n";
+    import babyFlower from "$lib/assets/babyFlower.jpg";
+ </script>
+
+
+  <div class="flex mt-6 justify-center min-w-full">
+    <Card horizontal class="max-w-4xl shadow-none border-none flex items-start space-x-6">
+      <img src={babyFlower} alt="{$_("frontpageAbout.alt")}" class="rounded-lg min-[768px]:w-1/3 max-[768px]:aspect-[16/8] max-[768px]:object-cover">
+      <div class="flex items-start flex-col">
+      <h5 class="mb-8 mt-7 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>
+      </div>
+    </Card>
+  </div>
diff --git a/frontend/src/lib/components/FrontPageCard.svelte b/frontend/src/lib/components/FrontPageCard.svelte
@@ -4,13 +4,15 @@ import { Button, Card, Tooltip } from "flowbite-svelte";
 import { _ } from "svelte-i18n";
 </script>
 
-<Card class="flex justify-center text-center max-w-prose bg-additional-color min-w-full">
-  <h5 class="mb-2 mt-4 text-2xl font-bold text-gray-700 dark:text-white tracking-wide">{$_("frontpage.heading")}</h5>
-  <p class="mb-5 text-base text-gray-600 sm:text-lg dark:text-gray-400">{$_("frontpage.summary")}</p>
-  <div class="justify-center mb-1 items-center mt-2">
+<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">
+    <h5 class="mb-2 mt-4 text-2xl font-bold text-gray-700 dark:text-white tracking-wide">{$_("frontpage.heading")}</h5>
+    <p class="mb-5 text-base text-gray-600 sm:text-lg dark:text-gray-400">{$_("frontpage.summary")}</p>
+    <div class="justify-center mb-1 items-center mt-2">
       <Button class="text-bold text-md w-44 hover:text-white dark:text-white bg-white text-gray-700" onclick ={() => {
         goto("/userLand/userRegistration");
       }}>{$_("frontpage.buttonLabel")}</Button>
       <Tooltip>{$_("frontpage.toolTip")}</Tooltip>
-  </div>
-</Card>
+    </div>
+  </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 "./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,11 @@
 		"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.",
+		"alt": "Ein kleines Kind hält ein Gänseblümchen in der Hand"
+	} 
 }