From 0a71a62af849c00ede2ec7a336cd5cc0be1dbafa Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Thu, 22 May 2025 10:39:06 +0200
Subject: [PATCH] add: more lp stuff

Added timeline to LP
---
 app/assets/styles/footer.css       | 15 +++++++--
 app/assets/styles/header.css       |  4 ++-
 app/assets/styles/landingpage.css  |  6 ++++
 app/assets/styles/timelineCard.css | 18 +++++++++++
 app/components/Pp/Footer.vue       |  3 +-
 app/components/Pp/TimelineCard.vue | 19 +++++++++++
 app/pages/index.vue                | 52 +++++++++++++++++++++++++++++-
 nuxt.config.ts                     |  1 +
 8 files changed, 113 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/styles/timelineCard.css
 create mode 100644 app/components/Pp/TimelineCard.vue

diff --git a/app/assets/styles/footer.css b/app/assets/styles/footer.css
index 5d2f50c..b6420c8 100644
--- a/app/assets/styles/footer.css
+++ b/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;
diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css
index 6b61bc4..5e5226d 100755
--- a/app/assets/styles/header.css
+++ b/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 {
diff --git a/app/assets/styles/landingpage.css b/app/assets/styles/landingpage.css
index 7f31f8d..4aad055 100644
--- a/app/assets/styles/landingpage.css
+++ b/app/assets/styles/landingpage.css
@@ -28,3 +28,9 @@
     text-align: center;
 }
 
+.timeline {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-default);
+}
+
diff --git a/app/assets/styles/timelineCard.css b/app/assets/styles/timelineCard.css
new file mode 100644
index 0000000..033721e
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/app/components/Pp/Footer.vue b/app/components/Pp/Footer.vue
index 4d57be6..183fbaf 100755
--- a/app/components/Pp/Footer.vue
+++ b/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>
 
diff --git a/app/components/Pp/TimelineCard.vue b/app/components/Pp/TimelineCard.vue
new file mode 100644
index 0000000..e62b390
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8bfa9b4..c941169 100644
--- a/app/pages/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 20a9a15..4c44f07 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -46,6 +46,7 @@ export default defineNuxtConfig({
     './app/assets/styles/button.css',
     './app/assets/styles/buttonGroup.css',
     './app/assets/styles/priceCard.css',
+    './app/assets/styles/timelineCard.css',
     './app/assets/styles/form/textfield.css',
     './app/assets/styles/form/search.css',
     './app/assets/styles/toolbar.css',