fixing the alignment of elements on the front page (#179)

* fixing the alignment of elements on the front page * Update frontend/src/lib/components/FrontPageAbout.svelte Co-authored-by: Liam Keegan <[email protected]> --------- Co-authored-by: Liam Keegan <[email protected]>
ssciwr · Nov 20, 2024 · 6fed147 · 6fed147
1 parent d7717bd
commit 6fed147
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/frontend/src/lib/components/FrontPageAbout.svelte b/frontend/src/lib/components/FrontPageAbout.svelte
@@ -4,10 +4,13 @@ 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>
+  <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 md:w-1/3 max-md:aspect-[16/8] max-md:object-cover">
+      <div class="flex items-start flex-col">
+      <h5 class="mb-8 mt-5 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>
 
+<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>
+  <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">
       <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>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -192,6 +192,7 @@
 	"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."
+		"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"
 	}
 }