From bd837cf1136916a9b1c3234e909ab118444fc368 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 21 Aug 2024 13:32:57 +0200
Subject: [PATCH 1/5] start componentizing bottom navbar

---
 src/lib/components/AbstractContent.svelte     | 60 +++++++------------
 .../Navigation/BottomNavElement.svelte        | 17 ++++++
 .../components/Navigation/NaviBottom.svelte   |  2 +
 src/lib/components/Navigation/NaviTop.svelte  |  2 +
 4 files changed, 43 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/components/Navigation/BottomNavElement.svelte
 create mode 100644 src/lib/components/Navigation/NaviBottom.svelte
 create mode 100644 src/lib/components/Navigation/NaviTop.svelte

diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
index 21d32d9..2eefaf2 100644
--- a/src/lib/components/AbstractContent.svelte
+++ b/src/lib/components/AbstractContent.svelte
@@ -2,7 +2,6 @@
 	import {
 		Avatar,
 		BottomNav,
-		BottomNavItem,
 		DarkMode,
 		Navbar,
 		NavBrand,
@@ -11,16 +10,11 @@
 		NavUl,
 		Tooltip
 	} from 'flowbite-svelte';
-	import {
-		CaretLeftSolid,
-		CaretRightSolid,
-		LightbulbSolid,
-		MoonSolid,
-		SunSolid
-	} from 'flowbite-svelte-icons';
+	import { CaretLeftSolid, MoonSolid, SunSolid } from 'flowbite-svelte-icons';
 	// logo
 	import logo_dark from '../assets/mondey_dark.svg';
 	import logo_light from '../assets/mondey_light.svg';
+	import BottomNavElement from './Navigation/BottomNavElement.svelte';
 
 	// variables for showing or hiding elements
 	export let showBottomNavbar = true;
@@ -78,35 +72,25 @@
 		class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
 		classInner="grid-cols-3"
 	>
-		<BottomNavItem
-			href={lastpage}
-			btnName="Zurück"
-			btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
-		>
-			<CaretLeftSolid
-				class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
-			/>
-			<Tooltip arrow={false}>Zur letzten Seite</Tooltip>
-		</BottomNavItem>
-		<BottomNavItem
-			href={infopage}
-			btnName="Hilfe"
-			btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
-		>
-			<LightbulbSolid
-				class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
-			/>
-			<Tooltip arrow={false}>Hilfe</Tooltip>
-		</BottomNavItem>
-		<BottomNavItem
-			href={nextpage}
-			btnName="Weiter"
-			btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
-		>
-			<CaretRightSolid
-				class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
-			/>
-			<Tooltip arrow={false}>Zur nächsten Seite</Tooltip>
-		</BottomNavItem>
+		<BottomNavElement
+			href="{lastpage},"
+			description="{'Zurück'},"
+			Icon="{CaretLeftSolid},"
+			tooltip={'Zur letzten Seite'}
+		></BottomNavElement>
+
+		<!-- <BottomNavElement
+			href="{infopage},"
+			description="{'Hilfe'},"
+			Icon="{LightbulbSolid},"
+			tooltip={'Zusätzliche Informationen'}
+		></BottomNavElement>
+
+		<BottomNavElement
+			href="{nextpage},"
+			description="{'Weiter'},"
+			Icon="{CaretLeftSolid},"
+			tooltip={'Zur nächsten Seite'}
+		></BottomNavElement> -->
 	</BottomNav>
 {/if}
diff --git a/src/lib/components/Navigation/BottomNavElement.svelte b/src/lib/components/Navigation/BottomNavElement.svelte
new file mode 100644
index 0000000..9806e1a
--- /dev/null
+++ b/src/lib/components/Navigation/BottomNavElement.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { BottomNavItem, Tooltip } from 'flowbite-svelte';
+
+	export let description;
+	export let href;
+	export let Icon;
+	export let tooltip;
+</script>
+
+<BottomNavItem
+	{href}
+	btnName={description}
+	btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
+>
+	<svelte:component this={Icon} />
+	<Tooltip arrow={false}>{tooltip}</Tooltip>
+</BottomNavItem>
diff --git a/src/lib/components/Navigation/NaviBottom.svelte b/src/lib/components/Navigation/NaviBottom.svelte
new file mode 100644
index 0000000..49f5fcd
--- /dev/null
+++ b/src/lib/components/Navigation/NaviBottom.svelte
@@ -0,0 +1,2 @@
+<script>
+</script>
diff --git a/src/lib/components/Navigation/NaviTop.svelte b/src/lib/components/Navigation/NaviTop.svelte
new file mode 100644
index 0000000..49f5fcd
--- /dev/null
+++ b/src/lib/components/Navigation/NaviTop.svelte
@@ -0,0 +1,2 @@
+<script>
+</script>

From 85c32969cfb1e086972ba02172bacfc572653cc4 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 21 Aug 2024 14:37:09 +0200
Subject: [PATCH 2/5] add icon component, work on styling

---
 src/lib/components/AbstractContent.svelte     | 71 +++++++++----------
 .../Navigation/FunctionalIcon.svelte          | 39 ++++++++++
 .../components/Navigation/NaviBottom.svelte   |  2 -
 src/lib/components/Navigation/NaviTop.svelte  |  2 -
 4 files changed, 74 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/components/Navigation/FunctionalIcon.svelte
 delete mode 100644 src/lib/components/Navigation/NaviBottom.svelte
 delete mode 100644 src/lib/components/Navigation/NaviTop.svelte

diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
index 2eefaf2..08f0ef1 100644
--- a/src/lib/components/AbstractContent.svelte
+++ b/src/lib/components/AbstractContent.svelte
@@ -7,14 +7,21 @@
 		NavBrand,
 		NavHamburger,
 		NavLi,
-		NavUl,
-		Tooltip
+		NavUl
 	} from 'flowbite-svelte';
-	import { CaretLeftSolid, MoonSolid, SunSolid } from 'flowbite-svelte-icons';
+
+	import {
+		CaretLeftSolid,
+		CaretRightSolid,
+		LightbulbSolid,
+		MoonSolid,
+		SunSolid
+	} from 'flowbite-svelte-icons';
 	// logo
 	import logo_dark from '../assets/mondey_dark.svg';
 	import logo_light from '../assets/mondey_light.svg';
 	import BottomNavElement from './Navigation/BottomNavElement.svelte';
+	import FunctionalIcon from './Navigation/FunctionalIcon.svelte';
 
 	// variables for showing or hiding elements
 	export let showBottomNavbar = true;
@@ -24,8 +31,6 @@
 	export let lastpage = '/';
 	export let nextpage = '/';
 	export let infopage = '/';
-
-	export let userName = 'Registrieren';
 </script>
 
 <!-- Top element: basic navigation-->
@@ -36,28 +41,23 @@
 			<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
 		</NavBrand>
 		<NavHamburger />
-		<NavUl ulClass="flex flex-row space-x-4 rtl:space-x-reverse md:text-lg md:font-medium">
+		<NavUl ulClass="flex flex-row space-x-4 rtl:space-x-reverse md:text-lg md:font-medium ml-auto">
 			<NavLi href="/" active={true}>Home</NavLi>
 			<NavLi href="/">Aktuelles</NavLi>
 			<NavLi href="/">Downloads</NavLi>
 			<NavLi href="/">Kontakt</NavLi>
-			<DarkMode
-				class="rounded-lg p-2 text-xl text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
-			>
-				<MoonSolid slot="darkIcon" />
-				<SunSolid slot="lightIcon" />
-			</DarkMode>
-			<Tooltip arrow={false}>Darkmode ein- oder ausschalten</Tooltip>
+
+			<FunctionalIcon tooltip={'Darkmode ein- oder ausschalten'}>
+				<DarkMode class="apply-icon-style">
+					<MoonSolid slot="darkIcon" />
+					<SunSolid slot="lightIcon" />
+				</DarkMode>
+			</FunctionalIcon>
+
+			<FunctionalIcon tooltip={'Registrieren oder einloggen'}>
+				<Avatar rounded border class="apply-icon-style" />
+			</FunctionalIcon>
 		</NavUl>
-		<div class="flex items-center space-x-4 rtl:space-x-reverse">
-			<Avatar
-				class="space-y-1 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
-				rounded
-				border
-			/>
-			<div class="flex items-center space-x-4 rtl:space-x-reverse">{userName}</div>
-			<Tooltip>Registrieren oder einloggen</Tooltip>
-		</div>
 	</div>
 </Navbar>
 
@@ -67,30 +67,29 @@
 </div>
 
 {#if showBottomNavbar}
-	<!-- bottom element: back, info and next buttons-->
 	<BottomNav
 		class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
 		classInner="grid-cols-3"
 	>
 		<BottomNavElement
-			href="{lastpage},"
-			description="{'Zurück'},"
-			Icon="{CaretLeftSolid},"
+			href={lastpage}
+			description={'Zurück'}
+			Icon={CaretLeftSolid}
 			tooltip={'Zur letzten Seite'}
-		></BottomNavElement>
+		/>
 
-		<!-- <BottomNavElement
-			href="{infopage},"
-			description="{'Hilfe'},"
-			Icon="{LightbulbSolid},"
+		<BottomNavElement
+			href={infopage}
+			description={'Hilfe'}
+			Icon={LightbulbSolid}
 			tooltip={'Zusätzliche Informationen'}
-		></BottomNavElement>
+		/>
 
 		<BottomNavElement
-			href="{nextpage},"
-			description="{'Weiter'},"
-			Icon="{CaretLeftSolid},"
+			href={nextpage}
+			description={'Weiter'}
+			Icon={CaretRightSolid}
 			tooltip={'Zur nächsten Seite'}
-		></BottomNavElement> -->
+		/>
 	</BottomNav>
 {/if}
diff --git a/src/lib/components/Navigation/FunctionalIcon.svelte b/src/lib/components/Navigation/FunctionalIcon.svelte
new file mode 100644
index 0000000..dce6748
--- /dev/null
+++ b/src/lib/components/Navigation/FunctionalIcon.svelte
@@ -0,0 +1,39 @@
+<script>
+	import { Tooltip } from 'flowbite-svelte';
+	export let tooltip;
+</script>
+
+<div class="functional-icon-container">
+	<slot></slot>
+	<Tooltip arrow={false}>{tooltip}</Tooltip>
+</div>
+
+<style>
+	:global(.functional-icon-container) {
+		@apply flex items-center space-x-4 rtl:space-x-reverse;
+	}
+
+	:global(.apply-icon-style) {
+		@apply rounded-lg p-2 text-xl text-gray-500 transition-colors;
+	}
+
+	:global(.apply-icon-style:hover) {
+		@apply text-primary-800;
+	}
+
+	:global(.apply-icon-style.group-hover) {
+		@apply text-primary-800;
+	}
+
+	:global(.apply-icon-style.dark) {
+		@apply text-gray-400;
+	}
+
+	:global(.apply-icon-style.dark:hover) {
+		@apply text-primary-500;
+	}
+
+	:global(.apply-icon-style.dark.group-hover) {
+		@apply text-primary-500;
+	}
+</style>
diff --git a/src/lib/components/Navigation/NaviBottom.svelte b/src/lib/components/Navigation/NaviBottom.svelte
deleted file mode 100644
index 49f5fcd..0000000
--- a/src/lib/components/Navigation/NaviBottom.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
-<script>
-</script>
diff --git a/src/lib/components/Navigation/NaviTop.svelte b/src/lib/components/Navigation/NaviTop.svelte
deleted file mode 100644
index 49f5fcd..0000000
--- a/src/lib/components/Navigation/NaviTop.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
-<script>
-</script>

From b4884e7a657e64842ee74e07f302acc3868e12dc Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 21 Aug 2024 15:12:56 +0200
Subject: [PATCH 3/5] work on styling

---
 src/lib/components/AbstractContent.svelte     | 44 +++++++++----------
 .../Navigation/FunctionalIcon.svelte          |  2 +-
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
index 08f0ef1..7b3421b 100644
--- a/src/lib/components/AbstractContent.svelte
+++ b/src/lib/components/AbstractContent.svelte
@@ -34,31 +34,29 @@
 </script>
 
 <!-- Top element: basic navigation-->
-<Navbar class="overflow-x-auto whitespace-nowrap">
-	<div class="flex flex-nowrap items-center space-x-4 rtl:space-x-reverse">
-		<NavBrand href="/">
-			<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
-			<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
-		</NavBrand>
-		<NavHamburger />
-		<NavUl ulClass="flex flex-row space-x-4 rtl:space-x-reverse md:text-lg md:font-medium ml-auto">
-			<NavLi href="/" active={true}>Home</NavLi>
-			<NavLi href="/">Aktuelles</NavLi>
-			<NavLi href="/">Downloads</NavLi>
-			<NavLi href="/">Kontakt</NavLi>
+<Navbar>
+	<NavBrand href="/">
+		<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
+		<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
+	</NavBrand>
+	<NavHamburger />
+	<NavUl ulClass="flex space-x-4 text-lg ">
+		<NavLi href="/" active={true}>Home</NavLi>
+		<NavLi href="/">Aktuelles</NavLi>
+		<NavLi href="/">Downloads</NavLi>
+		<NavLi href="/">Kontakt</NavLi>
 
-			<FunctionalIcon tooltip={'Darkmode ein- oder ausschalten'}>
-				<DarkMode class="apply-icon-style">
-					<MoonSolid slot="darkIcon" />
-					<SunSolid slot="lightIcon" />
-				</DarkMode>
-			</FunctionalIcon>
+		<FunctionalIcon tooltip={'Darkmode ein- oder ausschalten'}>
+			<DarkMode class="apply-icon-style">
+				<MoonSolid slot="darkIcon" />
+				<SunSolid slot="lightIcon" />
+			</DarkMode>
+		</FunctionalIcon>
 
-			<FunctionalIcon tooltip={'Registrieren oder einloggen'}>
-				<Avatar rounded border class="apply-icon-style" />
-			</FunctionalIcon>
-		</NavUl>
-	</div>
+		<FunctionalIcon tooltip={'Registrieren oder einloggen'}>
+			<Avatar rounded class="apply-icon-style" />
+		</FunctionalIcon>
+	</NavUl>
 </Navbar>
 
 <!--Page content goes here-->
diff --git a/src/lib/components/Navigation/FunctionalIcon.svelte b/src/lib/components/Navigation/FunctionalIcon.svelte
index dce6748..bc30f5f 100644
--- a/src/lib/components/Navigation/FunctionalIcon.svelte
+++ b/src/lib/components/Navigation/FunctionalIcon.svelte
@@ -14,7 +14,7 @@
 	}
 
 	:global(.apply-icon-style) {
-		@apply rounded-lg p-2 text-xl text-gray-500 transition-colors;
+		@apply rounded-lg p-2 text-xl text-gray-500;
 	}
 
 	:global(.apply-icon-style:hover) {

From 0b9fbc933c7b0d5a8ce45f26d2194e4d8800d6da Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 21 Aug 2024 15:45:47 +0200
Subject: [PATCH 4/5] reorganize basic layout

---
 src/lib/components/AbstractContent.svelte     |  46 +----
 .../components/DataDisplay/CardDisplay.svelte |  20 ++
 src/lib/components/Frontpage.svelte           | 186 +++++++-----------
 src/routes/+layout.svelte                     |  35 +++-
 src/routes/firstdropdown/+layout.svelte       |   5 -
 src/routes/firstdropdown/+layout.ts           |   1 -
 src/routes/firstdropdown/+page.svelte         |   2 +-
 src/routes/info/+layout.svelte                |   5 -
 src/routes/info/+layout.ts                    |   1 -
 src/routes/nextdropdown/+layout.svelte        |   5 -
 src/routes/nextdropdown/+layout.ts            |   1 -
 11 files changed, 125 insertions(+), 182 deletions(-)
 create mode 100644 src/lib/components/DataDisplay/CardDisplay.svelte
 delete mode 100644 src/routes/firstdropdown/+layout.svelte
 delete mode 100644 src/routes/firstdropdown/+layout.ts
 delete mode 100644 src/routes/info/+layout.svelte
 delete mode 100644 src/routes/info/+layout.ts
 delete mode 100644 src/routes/nextdropdown/+layout.svelte
 delete mode 100644 src/routes/nextdropdown/+layout.ts

diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
index 7b3421b..7eda68a 100644
--- a/src/lib/components/AbstractContent.svelte
+++ b/src/lib/components/AbstractContent.svelte
@@ -1,27 +1,9 @@
 <script>
-	import {
-		Avatar,
-		BottomNav,
-		DarkMode,
-		Navbar,
-		NavBrand,
-		NavHamburger,
-		NavLi,
-		NavUl
-	} from 'flowbite-svelte';
+	import { BottomNav } from 'flowbite-svelte';
 
-	import {
-		CaretLeftSolid,
-		CaretRightSolid,
-		LightbulbSolid,
-		MoonSolid,
-		SunSolid
-	} from 'flowbite-svelte-icons';
+	import { CaretLeftSolid, CaretRightSolid, LightbulbSolid } from 'flowbite-svelte-icons';
 	// logo
-	import logo_dark from '../assets/mondey_dark.svg';
-	import logo_light from '../assets/mondey_light.svg';
 	import BottomNavElement from './Navigation/BottomNavElement.svelte';
-	import FunctionalIcon from './Navigation/FunctionalIcon.svelte';
 
 	// variables for showing or hiding elements
 	export let showBottomNavbar = true;
@@ -34,30 +16,6 @@
 </script>
 
 <!-- Top element: basic navigation-->
-<Navbar>
-	<NavBrand href="/">
-		<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
-		<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
-	</NavBrand>
-	<NavHamburger />
-	<NavUl ulClass="flex space-x-4 text-lg ">
-		<NavLi href="/" active={true}>Home</NavLi>
-		<NavLi href="/">Aktuelles</NavLi>
-		<NavLi href="/">Downloads</NavLi>
-		<NavLi href="/">Kontakt</NavLi>
-
-		<FunctionalIcon tooltip={'Darkmode ein- oder ausschalten'}>
-			<DarkMode class="apply-icon-style">
-				<MoonSolid slot="darkIcon" />
-				<SunSolid slot="lightIcon" />
-			</DarkMode>
-		</FunctionalIcon>
-
-		<FunctionalIcon tooltip={'Registrieren oder einloggen'}>
-			<Avatar rounded class="apply-icon-style" />
-		</FunctionalIcon>
-	</NavUl>
-</Navbar>
 
 <!--Page content goes here-->
 <div class="mx-auto max-w-6xl flex-1 overflow-y-auto p-4 pb-20">
diff --git a/src/lib/components/DataDisplay/CardDisplay.svelte b/src/lib/components/DataDisplay/CardDisplay.svelte
new file mode 100644
index 0000000..bedc9d1
--- /dev/null
+++ b/src/lib/components/DataDisplay/CardDisplay.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { Button, Card } from 'flowbite-svelte';
+	import { ArrowRightOutline } from 'flowbite-svelte-icons';
+	export let header = 'header';
+	export let summary = 'summary';
+	export let button = 'button';
+	export let link = '/';
+</script>
+
+<Card class="m-4 w-full p-6">
+	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+		{header}
+	</h5>
+	<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
+		{summary}
+	</p>
+	<Button href={link} class="w-fit"
+		>{button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+	>
+</Card>
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
index 0458179..72e86c0 100644
--- a/src/lib/components/Frontpage.svelte
+++ b/src/lib/components/Frontpage.svelte
@@ -1,126 +1,76 @@
 <script>
-	import { Button, Card, Gallery } from 'flowbite-svelte';
-	import { ArrowRightOutline } from 'flowbite-svelte-icons';
+	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
+	import { Gallery } from 'flowbite-svelte';
 	export let getStarted = '/';
 	console.log('get started: ', getStarted);
+
+	export let items = [
+		{
+			header: 'Was ist Mondey?',
+			summary:
+				'Mondey ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von Kindern bis 6 Jahren.',
+			link: '/info',
+			buttonName: 'Mehr Info'
+		},
+		{
+			header: 'Wozu ist Mondey gut?',
+			summary:
+				'Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt einem übersichtlichen Ampelsystem.',
+			link: '/info',
+			buttonName: 'Mehr Info'
+		},
+		{
+			header: 'Was umfasst Mondey?',
+			summary:
+				'Mondey umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis 6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale Beziehungen.',
+			link: '/info',
+			buttonName: 'Mehr Info'
+		},
+		{
+			header: 'Wie funktioniert Mondey?',
+			summary:
+				'Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer Liste von Fragen.',
+			link: '/info',
+			buttonName: 'Mehr Info'
+		},
+		{
+			header: 'Wo fange ich an?',
+			summary: 'Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.',
+			link: '/firstdropdown',
+			buttonName: 'Los geht´s'
+		},
+		{
+			header: 'dummy?',
+			summary:
+				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
+			link: '/info',
+			buttonName: 'Mehr Info'
+		},
+		{
+			header: 'dummy?',
+			summary:
+				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
+			link: '/info',
+			buttonName: 'Mehr Info'
+		},
+		{
+			header: 'dummy?',
+			summary:
+				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
+			link: '/info',
+			buttonName: 'Mehr Info'
+		}
+	];
 </script>
 
 <!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
 <Gallery class="grid-cols-1 gap-y-12 md:grid-cols-2">
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-			Was ist Mondey?
-		</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			<i>Mondey</i> ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von
-			Kindern bis 6 Jahren.
-		</p>
-		<Button href="/info" class="w-fit"
-			>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
-
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-			Wozu ist Mondey gut?
-		</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum
-			Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt
-			einem übersichtlichen Ampelsystem.
-		</p>
-		<Button href="/info" class="w-fit"
-			>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
-
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-			Was umfasst Mondey?
-		</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			<i>Mondey</i> umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis
-			6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale
-			Beziehungen.
-		</p>
-		<Button href="/info" class="w-fit"
-			>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-			Wie funktioniert Mondey?
-		</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer
-			Liste von Fragen.
-		</p>
-		<Button href="/info" class="w-fit"
-			>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
-
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-			Wo fange ich an?
-		</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.
-		</p>
-		<Button class="w-fit" href={getStarted}
-			>Los geht's <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
-
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			<i
-				>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
-				facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
-			</i>
-		</p>
-		<Button href="/info" class="w-fit"
-			>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
-
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			<i
-				>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
-				facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
-			</i>
-		</p>
-		<Button href="/info" class="w-fit"
-			>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
-
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			<i
-				>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
-				facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
-			</i>
-		</p>
-		<Button href="/info" class="w-fit"
-			>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
-
-	<Card class="m-4 w-full p-6">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
-		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-			<i
-				>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
-				facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
-			</i>
-		</p>
-		<Button href="/info" class="w-fit"
-			>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-		>
-	</Card>
+	{#each items as item}
+		<CardDisplay
+			header={item.header}
+			summary={item.summary}
+			link={item.link}
+			button={item.buttonName}
+		/>
+	{/each}
 </Gallery>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e551b53..f42f2bd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,38 @@
 <script>
+	import logo_dark from '$lib/assets/mondey_dark.svg';
+	import logo_light from '$lib/assets/mondey_light.svg';
+	import FunctionalIcon from '$lib/components/Navigation/FunctionalIcon.svelte';
+	import { Avatar, DarkMode, Navbar, NavBrand, NavHamburger, NavLi, NavUl } from 'flowbite-svelte';
+	import { MoonSolid, SunSolid } from 'flowbite-svelte-icons';
 	import '../app.css';
+	// logo
 </script>
 
-<slot></slot>
+<Navbar>
+	<NavBrand href="/">
+		<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
+		<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
+	</NavBrand>
+	<NavHamburger />
+	<NavUl ulClass="flex space-x-4 text-lg ">
+		<NavLi href="/" active={true}>Home</NavLi>
+		<NavLi href="/">Aktuelles</NavLi>
+		<NavLi href="/">Downloads</NavLi>
+		<NavLi href="/">Kontakt</NavLi>
+
+		<FunctionalIcon tooltip={'Darkmode ein- oder ausschalten'}>
+			<DarkMode class="apply-icon-style">
+				<MoonSolid slot="darkIcon" />
+				<SunSolid slot="lightIcon" />
+			</DarkMode>
+		</FunctionalIcon>
+
+		<FunctionalIcon tooltip={'Registrieren oder einloggen'}>
+			<Avatar rounded class="apply-icon-style" />
+		</FunctionalIcon>
+	</NavUl>
+</Navbar>
+
+<div class="mx-auto max-w-6xl flex-1 overflow-y-auto p-4 pb-20">
+	<slot></slot>
+</div>
diff --git a/src/routes/firstdropdown/+layout.svelte b/src/routes/firstdropdown/+layout.svelte
deleted file mode 100644
index e87af49..0000000
--- a/src/routes/firstdropdown/+layout.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import '../../app.css';
-</script>
-
-<slot></slot>
diff --git a/src/routes/firstdropdown/+layout.ts b/src/routes/firstdropdown/+layout.ts
deleted file mode 100644
index 189f71e..0000000
--- a/src/routes/firstdropdown/+layout.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/src/routes/firstdropdown/+page.svelte b/src/routes/firstdropdown/+page.svelte
index 03a2c4a..4b28b19 100644
--- a/src/routes/firstdropdown/+page.svelte
+++ b/src/routes/firstdropdown/+page.svelte
@@ -31,6 +31,6 @@
 	const heading = 'some initial dummy dropdown page';
 </script>
 
-<AbstractContent showBottomNavbar={true} lastPage="/" nextPage="/nextdropdown" infoPage="/info">
+<AbstractContent showBottomNavbar={true} lastpage="/" nextpage="/nextdropdown" infopage="/info">
 	<AbstractDataInput data={data_to_display} {heading} itemComponent={AbstractDropdownItem} />
 </AbstractContent>
diff --git a/src/routes/info/+layout.svelte b/src/routes/info/+layout.svelte
deleted file mode 100644
index e87af49..0000000
--- a/src/routes/info/+layout.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import '../../app.css';
-</script>
-
-<slot></slot>
diff --git a/src/routes/info/+layout.ts b/src/routes/info/+layout.ts
deleted file mode 100644
index 189f71e..0000000
--- a/src/routes/info/+layout.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/src/routes/nextdropdown/+layout.svelte b/src/routes/nextdropdown/+layout.svelte
deleted file mode 100644
index e87af49..0000000
--- a/src/routes/nextdropdown/+layout.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import '../../app.css';
-</script>
-
-<slot></slot>
diff --git a/src/routes/nextdropdown/+layout.ts b/src/routes/nextdropdown/+layout.ts
deleted file mode 100644
index 189f71e..0000000
--- a/src/routes/nextdropdown/+layout.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;

From 2ed7a2df0791ffbaa89943fb85dce4065b4308c4 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 21 Aug 2024 15:55:20 +0200
Subject: [PATCH 5/5] remove old comment

---
 src/routes/+layout.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f42f2bd..169e0f3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,6 @@
 	import { Avatar, DarkMode, Navbar, NavBrand, NavHamburger, NavLi, NavUl } from 'flowbite-svelte';
 	import { MoonSolid, SunSolid } from 'flowbite-svelte-icons';
 	import '../app.css';
-	// logo
 </script>
 
 <Navbar>