add: more lp stuff

Added timeline to LP

app/assets/styles/footer.css

@@ -12,11 +12,22 @@
 
     & .bottom {
         display: flex;
-        gap: var(--padding-default);
-        justify-content: space-between;
+        justify-content: center;
         color: var(--color-light);
     }
 
+    & .copy {
+        font-size: var(--font-size-xs);
+        color: var(--color-light);
+        margin-top: var(--padding-default);
+        text-align: center;
+
+        & a {
+            color: var(--color-main);
+            text-decoration: none;
+        }
+    }
+
     & .socials {
         font-size: var(--font-size-xl);
         justify-content: center;

app/assets/styles/header.css

@@ -13,10 +13,12 @@
 
     &.lp {
         position: absolute;
+        background: rgba(0,0,0,.5);
         backdrop-filter: blur(10px);
-        mask: linear-gradient(to top, transparent, black 20%);
+        mask: linear-gradient(to top, transparent, black 30%);
         width: 100%;
         top: 0;
+        padding-bottom: var(--padding-xxl);
     }
 
     & .logo {

app/assets/styles/landingpage.css

@@ -28,3 +28,9 @@
     text-align: center;
 }
 
+.timeline {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-default);
+}
+

app/assets/styles/timelineCard.css

@@ -0,0 +1,18 @@
+.TimelineCard {
+    display: flex;
+    align-items: center;
+    gap: var(--padding-default);
+    border: 1px solid var(--color-light);
+    border-radius: var(--radius-default);
+    padding: var(--padding-xs);
+
+    & .icon {
+        font-size: var(--font-size-xxl);
+        flex: 1 0 4rem;
+        color: var(--color-main-dark);
+    }
+
+    & .text {
+        text-align: left;
+    }
+}

app/components/Pp/Footer.vue

@@ -9,7 +9,6 @@
       </li>
     </ul>
     <div class="bottom">
-      <small>&copy; 2025 by webfussel</small>
       <ul class="data-links">
         <li v-for="dataLink in dataLinks">
           <NuxtLink :to="dataLink.to">
@@ -18,6 +17,8 @@
         </li>
       </ul>
     </div>
+    <p class="copy">ProPapier ist ein Gemeinschaftsprojekt von <NuxtLink to="https://webertoire.de" external>webertoire</NuxtLink> und <NuxtLink to="https://webfussel.de" external>webfussel</NuxtLink></p>
+    <p class="copy">&copy; 2025 by webfussel, webertoire</p>
   </footer>
 </template>
 

app/components/Pp/TimelineCard.vue

@@ -0,0 +1,19 @@
+<template>
+  <article class="TimelineCard">
+    <Icon class="icon" :name="icon" mode="svg" />
+    <div class="text">
+      <strong>{{ title }}</strong>
+      <p>{{ description }}</p>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  icon: string
+  title: string
+  description: string
+}
+
+defineProps<Props>()
+</script>

app/pages/index.vue

@@ -15,9 +15,20 @@
     </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.
+        Mit <strong>ProPapier</strong> vergleichst du schnell & unkompliziert Preise für Klopapier und sparst so bares Geld.
       </p>
     </div>
+    <div class="home-text padding ">
+      <h3>
+        Wir haben noch viel vor!
+      </h3>
+      <div class="timeline">
+        <PpTimelineCard
+          v-for="card in timeline"
+          v-bind="card"
+        />
+      </div>
+    </div>
   </section>
 </template>
 
@@ -25,4 +36,43 @@
 definePageMeta({
   layout: 'landingpage'
 })
+
+type Card = {
+  icon: string
+  title: string
+  description: string
+}
+
+const timeline : Card[] = [
+  {
+    icon: 'uil:chart-bar',
+    title: 'Mehr Vergleiche',
+    description: 'Zusätzliche Kategorien für Taschentücher und Küchenrolle',
+  },
+  {
+    icon: 'uil:cloud-database-tree',
+    title: 'Datenbank',
+    description: 'Eine von der Community gestützte Datenbank mit Preisen für alle Produkte'
+  },
+  {
+    icon: 'uil:qrcode-scan',
+    title: 'Barcode Scan',
+    description: 'Ganz einfach Barcode Scannen und Produkt direkt zum Rechner hinzufügen'
+  },
+  {
+    icon: 'uil:user',
+    title: 'Optionale Accounts',
+    description: 'Zur Synchronisierung auf mehreren Geräten'
+  },
+  {
+    icon: 'uil:cog',
+    title: 'Personalisierung',
+    description: 'Persönliche Präferenzen zur Wortwahl, Standardsortierung und mehr'
+  },
+  {
+    icon: 'uil:vector-square',
+    title: 'm² Preise',
+    description: 'Quadratmeterpreise für noch genauere Vergleiche'
+  },
+]
 </script>