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>

app/pages/rechner.vue

@@ -46,19 +46,19 @@
 </template>
 
 <script setup lang="ts">
-import type { Card } from '../../shared/Card'
+import type { PriceCard } from '../../shared/PriceCard'
 import type { Button } from '../../shared/ButtonGroup'
 import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
 
-const cards = useLocalStorage<Card[]>('cards', [])
+const cards = useLocalStorage<PriceCard[]>('cards', [])
 const currentSort = useLocalStorage<number>('sort', 0)
-const currentCard = ref<Card>()
+const currentCard = ref<PriceCard>()
 const currentCardIndex = ref<number>(-1)
 const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
 const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
 const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
 
-const createCard = (uuid : string) : Card => ({
+const createCard = (uuid : string) : PriceCard => ({
   uuid,
   name: '',
   price: '',
@@ -68,7 +68,7 @@ const createCard = (uuid : string) : Card => ({
 })
 
 
-const addCard = (card : Card) => {
+const addCard = (card : PriceCard) => {
   cards.value.unshift({ ...card })
   sort()
 }