add: more lp stuff

Added timeline to LP

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>