97 lines
No EOL
2.3 KiB
Vue
97 lines
No EOL
2.3 KiB
Vue
<template>
|
|
<section class="Home flex-col content full">
|
|
<div class="home-hero">
|
|
<div class="text">
|
|
<h1>
|
|
Du zahlst zuviel fürs Papier?
|
|
</h1>
|
|
<NuxtLink to="/rechner">
|
|
<PpButton class="cta">Preise vergleichen</PpButton>
|
|
</NuxtLink>
|
|
<h2>
|
|
Mit ProPapier Preise vergleichen und sparen.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<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"
|
|
v-bind="card"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { TimelineCard } from '../../shared/TimelineCard'
|
|
|
|
definePageMeta({
|
|
layout: 'landingpage'
|
|
})
|
|
|
|
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',
|
|
state: {
|
|
value: 'planned',
|
|
message: '2025',
|
|
}
|
|
},
|
|
{
|
|
icon: 'uil:qrcode-scan',
|
|
title: 'Barcode Scan',
|
|
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',
|
|
state: {
|
|
value: 'planned',
|
|
}
|
|
},
|
|
{
|
|
icon: 'uil:cog',
|
|
title: 'Personalisierung',
|
|
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',
|
|
state: {
|
|
value: 'planned',
|
|
}
|
|
},
|
|
]
|
|
</script> |