add: OpenGraph image, timeline card state

Added three states to timeline card, added open graph image and description

app/pages/index.vue

@@ -13,15 +13,18 @@
         </h2>
       </div>
     </div>
-    <div class="home-text padding ">
+    <div class="home-text padding">
       <p>
         Mit <strong>ProPapier</strong> vergleichst du schnell & unkompliziert Preise für Klopapier und sparst so bares Geld.
       </p>
     </div>
-    <div class="home-text padding ">
+    <div class="home-text padding">
       <h3>
         Wir haben noch viel vor!
       </h3>
+      <p class="padding">
+        Für ProPapier sind über die nächste Zeit noch einige weitere Features geplant.
+      </p>
       <div class="timeline">
         <PpTimelineCard
           v-for="card in timeline"
@@ -33,46 +36,62 @@
 </template>
 
 <script setup lang="ts">
+import type { TimelineCard } from '../../shared/TimelineCard'
+
 definePageMeta({
   layout: 'landingpage'
 })
 
-type Card = {
-  icon: string
-  title: string
-  description: string
-}
-
-const timeline : Card[] = [
+const timeline : TimelineCard[] = [
   {
     icon: 'uil:chart-bar',
     title: 'Mehr Vergleiche',
     description: 'Zusätzliche Kategorien für Taschentücher und Küchenrolle',
+    state: {
+      value: 'inProgress',
+    }
   },
   {
     icon: 'uil:cloud-database-tree',
     title: 'Datenbank',
-    description: 'Eine von der Community gestützte Datenbank mit Preisen für alle Produkte'
+    description: 'Eine von der Community gestützte Datenbank mit Preisen für alle Produkte',
+    state: {
+      value: 'planned',
+      message: '2025',
+    }
   },
   {
     icon: 'uil:qrcode-scan',
     title: 'Barcode Scan',
-    description: 'Ganz einfach Barcode Scannen und Produkt direkt zum Rechner hinzufügen'
+    description: 'Ganz einfach Barcode Scannen und Produkt direkt zum Rechner hinzufügen',
+    state: {
+      value: 'planned',
+      message: '2025',
+    }
   },
   {
     icon: 'uil:user',
     title: 'Optionale Accounts',
-    description: 'Zur Synchronisierung auf mehreren Geräten'
+    description: 'Zur Synchronisierung auf mehreren Geräten',
+    state: {
+      value: 'planned',
+    }
   },
   {
     icon: 'uil:cog',
     title: 'Personalisierung',
-    description: 'Persönliche Präferenzen zur Wortwahl, Standardsortierung und mehr'
+    description: 'Persönliche Präferenzen zur Wortwahl, Standardsortierung und mehr',
+    state: {
+      value: 'planned',
+    }
   },
   {
     icon: 'uil:vector-square',
     title: 'm² Preise',
-    description: 'Quadratmeterpreise für noch genauere Vergleiche'
+    description: 'Quadratmeterpreise für noch genauere Vergleiche',
+    state: {
+      value: 'planned',
+    }
   },
 ]
 </script>