From 7713251fc4bce0039b007d934b900df3e716cd42 Mon Sep 17 00:00:00 2001
From: Igor Zaripov <majapur1@gmail.com>
Date: Wed, 4 Dec 2024 13:28:37 +0100
Subject: [PATCH] add a carousel element with bookmark-tabs at the front page
 (#193)

* add a carousel element with bookmarks-tabs at the front page

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 .../lib/components/FrontPageBookmarks.svelte  | 47 +++++++++++++++++++
 frontend/src/lib/components/Frontpage.svelte  | 38 +++++++++++++++
 frontend/src/locales/de.json                  | 17 +++++++
 3 files changed, 102 insertions(+)
 create mode 100644 frontend/src/lib/components/FrontPageBookmarks.svelte

diff --git a/frontend/src/lib/components/FrontPageBookmarks.svelte b/frontend/src/lib/components/FrontPageBookmarks.svelte
new file mode 100644
index 00000000..bf17516a
--- /dev/null
+++ b/frontend/src/lib/components/FrontPageBookmarks.svelte
@@ -0,0 +1,47 @@
+<script>
+export let bookmarks = [];
+import { _ } from "svelte-i18n";
+
+let activeIndex = 0;
+let interval;
+
+function changeTab() {
+	activeIndex = (activeIndex + 1) % bookmarks.length;
+}
+
+import { onMount } from "svelte";
+onMount(() => {
+	interval = setInterval(changeTab, 4000);
+
+	return () => {
+		clearInterval(interval);
+	};
+});
+
+function selectTab(index) {
+	activeIndex = index;
+	clearInterval(interval);
+}
+</script>
+
+   <div class="w-full min-w-full px-4 mx-auto">
+    <!-- Tabs (Bookmarks) -->
+    <div class="flex max-lg:flex-col max-md:min-w-full lg:flex-row border-b justify-center items-center px-2">
+      {#each bookmarks as { titleKey }, index}
+        <button
+          class="flex-1 rounded-lg text-base text-center lg:min-h-fit max-lg:min-w-80 py-2 px-4 dark:text-white text-gray-600 transition-colors hover:text-grey-900 max-lg:hover:bg-primary-800 dark:hover:text-gray-900 hover:bg-additional-color"
+          class:bg-primary-600={activeIndex === index}
+          class:text-white={activeIndex === index}
+          on:click={() => selectTab(index)}
+        >
+          {titleKey}
+        </button>
+      {/each}
+    </div>
+
+     <div class="p-6 bg-gray-100 dark:bg-gray-800 text-center rounded-lg shadow-md mt-2 space-y-4">
+      <p class="text-gray-700 dark:text-gray-400 text-balance mt-4 mb-4">
+        {bookmarks[activeIndex]?.contentKey}</p>
+    </div>
+
+  </div>
diff --git a/frontend/src/lib/components/Frontpage.svelte b/frontend/src/lib/components/Frontpage.svelte
index ece6a471..cfda714b 100644
--- a/frontend/src/lib/components/Frontpage.svelte
+++ b/frontend/src/lib/components/Frontpage.svelte
@@ -4,8 +4,41 @@ 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";
+import { _ } from "svelte-i18n";
+import FrontPageBookmarks from "./FrontPageBookmarks.svelte";
 
 let { items = [] } = $props();
+
+const bookmarks = [
+	{
+		titleKey: $_("frontpageBookmarks.headingMotor"),
+		contentKey: $_("frontpageBookmarks.summaryMotor"),
+	},
+	{
+		titleKey: $_("frontpageBookmarks.headingFineMotor"),
+		contentKey: $_("frontpageBookmarks.summaryFineMotor"),
+	},
+	{
+		titleKey: $_("frontpageBookmarks.headingThinking"),
+		contentKey: $_("frontpageBookmarks.summaryThinking"),
+	},
+	{
+		titleKey: $_("frontpageBookmarks.headingLanguage"),
+		contentKey: $_("frontpageBookmarks.summaryLanguage"),
+	},
+	{
+		titleKey: $_("frontpageBookmarks.headingSocialDevelopment"),
+		contentKey: $_("frontpageBookmarks.summarySocialDevelopment"),
+	},
+	{
+		titleKey: $_("frontpageBookmarks.headingInnerStates"),
+		contentKey: $_("frontpageBookmarks.summaryInnerStates"),
+	},
+	{
+		titleKey: $_("frontpageBookmarks.headingSchool"),
+		contentKey: $_("frontpageBookmarks.summarySchool"),
+	},
+];
 </script>
 
 <FrontPageCard
@@ -14,6 +47,11 @@ let { items = [] } = $props();
 <FrontPageAbout
 />
 
+<div class="flex mt-7 flex-col text-center justify-center items-center space-y-6">
+  <h1 class="text-2xl dark:text-white justify-center text-center text-balance max-w-prose font-bold text-gray-700">{$_('frontpageBookmarks.title')}</h1>
+   <FrontPageBookmarks {bookmarks} />
+  </div>
+
 <GalleryDisplay
 	withSearch={false}
 	itemComponent={CardDisplay}
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index edb6be53..13c06751 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -200,5 +200,22 @@
 		"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"
+	},
+	"frontpageBookmarks": {
+		"title": "Welche Entwicklungsbereiche werden erfasst?",
+		"headingMotor": "Grobmotorik",
+		"headingFineMotor": "Handmotorik",
+		"headingThinking": "Denken",
+		"headingLanguage": "Sprache",
+		"headingSocialDevelopment": "Soziale Entwicklung",
+		"headingInnerStates": "Innere Zustände",
+		"headingSchool": "Schulische Vorläuferfertigkeiten",
+		"summaryMotor": "Verfolgen Sie, wie das Kind von seiner Geburt bis zum 6. Lebensjahr lernt, seinen Rumpf, seine Arme und seine Beine immer besser zu koordinieren und im Alltag immer komplexere Bewegungsmuster ausführt.",
+		"summaryFineMotor": "Beobachten Sie, wie das Kind lernt, seine Hände und Finger immer geschickter zu nutzen, um damit seine Umwelt zu erkunden und zu verändern.",
+		"summaryThinking": "Das Denken besteht aus Basisprozessen (z.B. wahrnehmen, vergleichen und kategorisieren, sich etwas merken, flexibel umschalten, in Symbolen denken) und aus höheren Prozessen (z.B. planen, analysieren, kreativ sein). Beobachten Sie, wie sich der kindliche Geist entfaltet.",
+		"summaryLanguage": "Zur Sprache gehören das Erkennen und Produzieren von Lauten, Worten und Sätzen. Entdecken Sie, wie das Kind andere Menschen versteht und lernt, sich ihnen verständlich zu machen.",
+		"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."
 	}
 }