add: general structure for landingpage design

app/app.vue

@@ -1,11 +1,5 @@
 <template>
-  <div class="page-wrapper">
-    <PpHeader />
-    <div class="page">
-      <NuxtPage />
-    </div>
-    <PpFooter />
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
-<script setup lang="ts">
-</script>

app/assets/styles/general.css

@@ -58,6 +58,7 @@
   --padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));
   --padding-l: calc(var(--padding-default) * var(--scaling-factor));
   --padding-xl: calc(var(--padding-l) * var(--scaling-factor));
+  --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor));
 
   --radius-default: calc(var(--font-size-normal) / 3);
   --radius-border: var(--font-size-normal);
@@ -130,6 +131,10 @@ h3 {
   background-color: var(--color-main-dark);
 }
 
+.bg-main-darkest {
+  background-color: var(--color-main-darkest);
+}
+
 .bg-main-dark-hover:hover {
   background-color: var(--color-main-dark);
 }

app/assets/styles/landingpage.css

@@ -0,0 +1,30 @@
+.home-hero {
+    background-image: url("/img/hero-image.webp");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    color: var(--color-text-invert);
+    text-align: center;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    button {
+        margin: var(--padding-xxl) auto 0;
+    }
+
+    .text {
+        padding: var(--padding-default);
+    }
+
+    h1 {
+        font-size: var(--font-size-xxl);
+    }
+}
+
+.home-text {
+    padding: var(--padding-xxl) var(--padding-default);
+    text-align: center;
+}
+

app/layouts/default.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="page-wrapper">
+      <PpHeader />
+      <div class="page">
+        <NuxtPage />
+      </div>
+      <PpFooter />
+    </div>
+</template>
+<script setup lang="ts">
+</script>

app/layouts/landingpage.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="page-wrapper">
+      <div class="page">
+        <NuxtPage />
+      </div>
+      <PpFooter />
+    </div>
+</template>
+<script setup lang="ts">
+</script>

app/pages/landingpage.vue

@@ -0,0 +1,24 @@
+<template>
+  <section class="Home flex-col content full">
+    <div class="home-hero">
+      <div class="text">
+        <h1>
+          Du zahlst zuviel fürs Papier?
+        </h1>
+        <Button class="cta">Preise vergleichen</Button>
+      </div>
+    </div>
+    <div class="home-text padding ">
+      <p>
+        Mit <strong>ProPapier</strong> vergleichst du schnell & unkompliziert Preise für Klo-, Küchen- und Haushaltspapier und sparst so bares Geld.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import Button from "~/components/Pp/Button.vue";
+definePageMeta({
+  layout: 'landingpage'
+})
+</script>

nuxt.config.ts

@@ -57,6 +57,7 @@ export default defineNuxtConfig({
     './app/assets/styles/toolbar.css',
     './app/assets/styles/page.css',
     './app/assets/styles/dialog.css',
+    './app/assets/styles/landingpage.css',
   ],
 
   site: {