add some dummy content to demonstarte workings of abstractcontent

src/lib/components/AbstractContent.svelte

@@ -26,24 +26,26 @@
 	export let showBottomNavbar = true;
 
 	// variables for communication upon hitting the page
-	// FIXME: these are placehorlders and must later be changed using contexts or other better mechanisms for inter component comunication
+	// FIXME: these are placeholders and must later be changed using contexts or other better mechanisms for inter component comunication
 	export let lastpage = '/';
 	export let nextpage = '/';
 	export let infopage = '/';
 
 	// button stylings
-	export const basicBtnForm = 'rounded-lg text-xl p-2';
+	const basicBtnForm = 'rounded-lg text-xl p-2';
 
-	export const basicColorBehavior =
+	const basicColorBehavior =
 		'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';
 
-	export const topBarBtnClass = basicColorBehavior + basicBtnForm;
+	const topBarBtnClass = basicColorBehavior + basicBtnForm;
 
-	export const bottomBarBtnClass = 'w-8 h-8 mb-1' + basicColorBehavior;
+	const bottomBarBtnClass = 'w-8 h-8 mb-1' + basicColorBehavior;
 
 	// styling for the nav
 	const navULclass =
 		'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-lg md:font-medium';
+
+	const contentContainerClass = 'content-container mx-auto max-w-6xl p-4';
 </script>
 
 <!-- Top element-->
@@ -67,8 +69,9 @@
 </Navbar>
 
 <!--Content goes here-->
-<slot></slot>
-<!-- FIXME: check slots again to make sure I use them correctly-->
+<div class={contentContainerClass}>
+	<slot></slot>
+</div>
 
 {#if showBottomNavbar}
 	<!-- bottom element: back, info and next buttons-->

src/lib/components/Frontpage.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { Button, Card, Gallery } from 'flowbite-svelte';
+	import { ArrowRightOutline } from 'flowbite-svelte-icons';
+
+	// Define the styles for the header, paragraph, arrow, and button
+	const headerStyle = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
+	const paragraphStyle = 'mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight';
+	const arrowStyle = 'ms-2 h-6 w-6 text-white';
+	const buttonStyle = 'w-fit';
+</script>
+
+<!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
+<Gallery class="grid-cols-2 gap-4 p-4">
+	<Card>
+		<h5 class={headerStyle}>Was ist Mondey?</h5>
+		<p class={paragraphStyle}>
+			<i>Mondey</i> ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von
+			Kindern bis 6 Jahren.
+		</p>
+		<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
+	</Card>
+
+	<Card>
+		<h5 class={headerStyle}>Wozu ist Mondey gut?</h5>
+		<p class={paragraphStyle}>
+			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 class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
+	</Card>
+
+	<Card>
+		<h5 class={headerStyle}>Was umfasst Mondey?</h5>
+		<p class={paragraphStyle}>
+			<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 class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
+	</Card>
+
+	<Card>
+		<h5 class={headerStyle}>Wie funktioniert Mondey?</h5>
+		<p class={paragraphStyle}>
+			Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer
+			Liste von Fragen.
+		</p>
+		<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
+	</Card>
+
+	<Card>
+		<h5 class={headerStyle}>Wo fange ich an?</h5>
+		<p class={paragraphStyle}>
+			Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.
+		</p>
+		<Button class={buttonStyle}>Los geht's <ArrowRightOutline class={arrowStyle} /></Button>
+	</Card>
+</Gallery>

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script>
-import AbstractContent from "$lib/components/AbstractContent.svelte";
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import Frontpage from '$lib/components/Frontpage.svelte';
 </script>
 
-
-<AbstractContent />
+<AbstractContent showBottomNavbar={false}>
+	<Frontpage />
+</AbstractContent>