add a footer (#216)

* add a footer * Add to the pull request * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Update frontend/src/locales/de.json Co-authored-by: Liam Keegan <[email protected]> * Update frontend/src/lib/components/Navigation/Footer.svelte Co-authored-by: Liam Keegan <[email protected]> * import svg image instead of passing the local file path --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Liam Keegan <[email protected]>
ssciwr · Jan 10, 2025 · b986ca3 · b986ca3
1 parent 46598e0
commit b986ca3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 0 deletions.
diff --git a/frontend/src/lib/components/Navigation/Footer.svelte b/frontend/src/lib/components/Navigation/Footer.svelte
@@ -0,0 +1,51 @@
+<script>
+import logo_dark from "$lib/assets/mondey_dark.svg";
+import {
+	Footer,
+	FooterBrand,
+	FooterIcon,
+	FooterLink,
+	FooterLinkGroup,
+} from "flowbite-svelte";
+import { FacebookSolid, InstagramSolid } from "flowbite-svelte-icons";
+import { _ } from "svelte-i18n";
+</script>
+
+  <Footer footerType="socialmedia" class="bg-zinc-700">
+    <div class="flex justify-between items-center px-1">
+      <div class="mb-2 mr-5 lg:ml-11 md:ml-10 max-sm:mr-3 max-sm:ml-1">
+        <FooterBrand class="flex" href="/" src={logo_dark} alt="MONDEY logo"/>
+      </div>
+      <div class="grid grid-cols-2 gap-9 sm:grid-cols-2 min-md:mr-20 lg:mr-20 ml-3">
+        <div>
+          <h2 class="mb-6 mt-4 text-sm font-semibold text-white uppercase dark:text-white">{$_("footer.information")}</h2>
+          <FooterLinkGroup>
+            <FooterLink liClass="mb-2 text-sm max-sm:text-xs text-zinc-400" href="/">{$_("footer.research")}</FooterLink>
+            <FooterLink liClass="mb-2 text-sm max-sm:text-xs text-zinc-400" href="/">{$_("footer.imprint")}</FooterLink>
+            <FooterLink liClass="mb-2 text-sm max-sm:text-xs text-zinc-400" href="/">{$_("footer.privacy")}</FooterLink>
+          </FooterLinkGroup>
+        </div>
+        <div>
+          <h2 class="mb-6 mt-4 text-sm font-semibold uppercase text-white dark:text-white">{$_("footer.contact")}</h2>
+          <FooterLinkGroup>
+            <FooterLink liClass="mb-2 text-sm max-sm:text-xs text-zinc-400" href="/">+49 6221 547346</FooterLink>
+            <FooterLink liClass="mb-2 text-sm max-sm:text-xs text-zinc-400" href="/">Hauptstraße 47-51, 69117 Heidelberg</FooterLink>
+            <FooterLink liClass="mb-2 text-sm max-sm:text-xs text-zinc-400 break-words" href="/">E-Mail: [email protected]</FooterLink>
+          </FooterLinkGroup>
+        </div>
+      </div>
+    </div>
+    <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+    <div class="sm:flex sm:items-center sm:justify-between">
+      <div class="flex mt-4 space-x-6 rtl:space-x-reverse sm:mt-0">
+        <span class="block text-xs text-zinc-400 sm:text-center dark:text-gray-400">© 2024 <a href="/" class="hover:underline">{$_("footer.bottom")}</a>
+      </span>
+        <FooterIcon href="/">
+          <FacebookSolid class="w-5 h-5 text-white dark:text-zinc-500 hover:text-gray-900 dark:hover:text-white" />
+        </FooterIcon>
+        <FooterIcon href="/">
+          <InstagramSolid class="w-5 h-5 text-white dark:text-zinc-500 hover:text-gray-900 dark:hover:text-white" />
+        </FooterIcon>
+      </div>
+    </div>
+  </Footer>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -245,5 +245,13 @@
 		"summarySocialDevelopment": "Verfolgen Sie mit, wie Kinder das Verhalten anderer Menschen zunehmend besser verstehen und darauf Einfluss darauf nehmen, aber auch, wie sie lernen, sich in die Gemeinschaft einzufügen. Diese Entwicklung beginnt schon bei den Kleinsten, aber sie ist auch im Erwachsenenalter nie endgültig abgeschlossen...",
 		"summaryInnerStates": "Hier beobachten Sie, wie das Kind die Fähigkeit entwickelt, mit seinen Bedürfnissen, motivationalen Zuständen und mit seinen Gefühlen umzugehen. Einige Meilensteine dieses Bereiches sind erfahrungsgemäß nicht so einfach zu bewerten.",
 		"summarySchool": "Bei älteren Kindergarten- und Vorschulkindern lohnt es sich, genau hinzuschauen, welche geistigen und motorischen Fähigkeiten, die konkret auf die Schule vorbereiten, schon entwickelt wurden."
+	},
+	"footer": {
+		"contact": "Kontakt",
+		"information": "Informationen",
+		"research": "Forschung",
+		"imprint": "Presse und Medien",
+		"privacy": "Datenschutzerklärung",
+		"bottom": "Psychologisches Institut Heidelberg"
 	}
 }
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -7,6 +7,7 @@ import LocaleChooser from "$lib/components/LocaleChooser.svelte";
 import FunctionalIcon from "$lib/components/Navigation/FunctionalIcon.svelte";
 import UserProfile from "$lib/components/UserProfile.svelte";
 import "$lib/i18n";
+import Footer from "$lib/components/Navigation/Footer.svelte";
 import { getTranslations } from "$lib/i18n";
 import { user } from "$lib/stores/userStore.svelte";
 import {
@@ -69,3 +70,5 @@ onMount(async () => {
 >
 	{@render children?.()}
 </div>
+
+<Footer/>