Initial commit: Vanity Landingpage
This commit is contained in:
commit
a8f993f477
2 changed files with 340 additions and 0 deletions
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"livePreview.defaultPreviewPath": "/index.html"
|
||||||
|
}
|
||||||
337
index.html
Normal file
337
index.html
Normal file
|
|
@ -0,0 +1,337 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Vanity Expense Logbook – iOS App für Camper & Vanlife</title>
|
||||||
|
<meta name="description" content="Behalte Tank-, Gas- und Servicekosten im Griff. Auswertungen, Karte, KPIs – optimiert für Vanlife. Jetzt im App Store laden." />
|
||||||
|
<meta name="robots" content="index,follow" />
|
||||||
|
|
||||||
|
<!-- Open Graph / Twitter -->
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content="Vanity Expense Logbook – iOS App" />
|
||||||
|
<meta property="og:description" content="Behalte Tank-, Gas- und Servicekosten im Griff. Auswertungen, Karte, KPIs – optimiert für Vanlife." />
|
||||||
|
<meta property="og:image" content="/assets/og-vanity-expense.jpg" />
|
||||||
|
<meta property="og:url" content="https://vanityontour.de/vanity-app/" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<!-- Favicon (optional) -->
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
|
||||||
|
<!-- Tailwind CSS (CDN) -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
// Tailwind config – an VanityOnTour angelehnt (hell, klar, mit kräftigem Akzent)
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
DEFAULT: '#2563EB', // blau (an iOS-Accent angelehnt)
|
||||||
|
dark: '#1E40AF'
|
||||||
|
},
|
||||||
|
accent: '#0EA5E9',
|
||||||
|
ink: '#0F172A',
|
||||||
|
soft: '#F1F5F9'
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["ui-sans-serif","system-ui","-apple-system","Segoe UI","Roboto","Helvetica","Arial","Noto Sans","Apple Color Emoji","Segoe UI Emoji"],
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
soft: '0 10px 30px rgba(2,6,23,0.06)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Structured Data -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "SoftwareApplication",
|
||||||
|
"name": "Vanity Expense Logbook",
|
||||||
|
"operatingSystem": "iOS",
|
||||||
|
"applicationCategory": "FinanceApplication",
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"price": "0",
|
||||||
|
"priceCurrency": "EUR"
|
||||||
|
},
|
||||||
|
"publisher": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Vanity on Tour",
|
||||||
|
"url": "https://vanityontour.de"
|
||||||
|
},
|
||||||
|
"url": "https://apps.apple.com/us/app/vanity-expense-logbook/id6742772476",
|
||||||
|
"screenshot": [
|
||||||
|
"/assets/screens/overview.png",
|
||||||
|
"/assets/screens/analytic.png",
|
||||||
|
"/assets/screens/map.png"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Kleinere Veredelungen */
|
||||||
|
.glass { backdrop-filter: blur(6px); background: rgba(255,255,255,0.6); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-sans text-slate-800 bg-white">
|
||||||
|
<!-- Header / Nav -->
|
||||||
|
<header class="sticky top-0 z-40 bg-white/85 backdrop-blur supports-[backdrop-filter]:glass border-b border-slate-100">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
|
||||||
|
<a href="#top" class="flex items-center gap-3 group">
|
||||||
|
<img src="/assets/vanity-logo.svg" alt="Vanity on Tour Logo" class="h-8 w-auto" />
|
||||||
|
<span class="text-lg font-semibold tracking-tight text-ink group-hover:text-primary">Vanity Expense Logbook</span>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden md:flex items-center gap-6">
|
||||||
|
<a href="#features" class="hover:text-primary">Funktionen</a>
|
||||||
|
<a href="#whats-new" class="hover:text-primary">Neu</a>
|
||||||
|
<a href="#screens" class="hover:text-primary">Screenshots</a>
|
||||||
|
<a href="#feedback" class="hover:text-primary">Feedback</a>
|
||||||
|
</nav>
|
||||||
|
<a href="https://apps.apple.com/us/app/vanity-expense-logbook/id6742772476" class="inline-flex items-center gap-2 rounded-xl bg-primary px-4 py-2 text-white shadow-soft hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary/40" aria-label="Im App Store laden">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M17.564 10.06c-.01-2.143 1.768-3.171 1.848-3.218-1.006-1.47-2.568-1.673-3.116-1.694-1.326-.135-2.589.777-3.262.777-.68 0-1.71-.758-2.81-.737-1.44.022-2.775.84-3.507 2.132-1.5 2.598-.382 6.412 1.079 8.506.715 1.03 1.56 2.188 2.674 2.149 1.079-.044 1.487-.696 2.792-.696 1.3 0 1.675.696 2.81.675 1.163-.018 1.901-1.049 2.61-2.083.82-1.203 1.158-2.367 1.175-2.425-.026-.012-2.257-.867-2.293-3.386zM15.436 3.87c.587-.714.982-1.708.874-2.706-.846.034-1.875.563-2.478 1.275-.545.633-1.024 1.655-.898 2.63.952.074 1.914-.485 2.502-1.2z"/></svg>
|
||||||
|
App Store
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative overflow-hidden bg-soft">
|
||||||
|
<div class="absolute inset-0 -z-10 bg-gradient-to-br from-white via-soft to-white"></div>
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-14 lg:py-20 grid lg:grid-cols-2 gap-10 items-center">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-ink">Alle Fahrzeugkosten im Blick – <span class="text-primary">ohne Exceltetris</span>.</h1>
|
||||||
|
<p class="mt-5 text-lg text-slate-700 leading-relaxed">Vanity Expense Logbook ist deine iOS‑App für <strong>Tanken</strong>, <strong>Gas</strong>, <strong>Ver‑/Entsorgung</strong>, Service und mehr. Mit klaren KPIs, Auswertungen als Balken‑ & Liniendiagramm und einer Karte für deine Einträge. Vanlife‑ready, offline‑freundlich, schnörkellos.</p>
|
||||||
|
<div class="mt-8 flex flex-wrap items-center gap-4">
|
||||||
|
<a href="https://apps.apple.com/us/app/vanity-expense-logbook/id6742772476" class="inline-flex items-center gap-3 rounded-2xl bg-black text-white px-5 py-3 shadow hover:opacity-90" aria-label="Im App Store laden">
|
||||||
|
<img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Lade es im App Store" class="h-9 w-auto" />
|
||||||
|
</a>
|
||||||
|
<span class="text-sm text-slate-500">Nur für iOS. Keine Cookies, kein Tracking.</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex items-center gap-6 text-sm text-slate-600">
|
||||||
|
<div class="flex items-center gap-2"><span class="inline-block h-2.5 w-2.5 rounded-full bg-green-500"></span> Einfach & schnell erfassen</div>
|
||||||
|
<div class="flex items-center gap-2"><span class="inline-block h-2.5 w-2.5 rounded-full bg-blue-500"></span> Klaren Überblick behalten</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="relative rounded-3xl shadow-soft bg-white p-3 ring-1 ring-slate-100">
|
||||||
|
<!-- Hero Mockup: ersetze die Pfade durch deine finalen Dateien -->
|
||||||
|
<img src="/assets/screens/overview.png" alt="App‑Screenshot: Übersicht & KPIs" class="rounded-2xl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Value Props -->
|
||||||
|
<section id="features" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-14">
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="p-6 rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||||
|
<h3 class="font-semibold text-lg">Erfassen in Sekunden</h3>
|
||||||
|
<p class="mt-2 text-slate-600">Tank‑, Gas‑, Ver-/Entsorgungs‑ und Serviceeinträge schnell anlegen. Kilometerstand & Kosten sauber getrennt, Notizen inklusive.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||||
|
<h3 class="font-semibold text-lg">KPIs, Charts & Trends</h3>
|
||||||
|
<p class="mt-2 text-slate-600">Verbrauch/100 km, Kostenentwicklung, Monats‑ und Zeitraumfilter. Wähle zwischen Balken- und Liniendiagramm.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||||
|
<h3 class="font-semibold text-lg">Karte mit Einträgen</h3>
|
||||||
|
<p class="mt-2 text-slate-600">Alle betankten Orte auf einen Blick – filterbar nach 1 Monat, 6 Monaten oder 1 Jahr.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||||
|
<h3 class="font-semibold text-lg">Vanlife‑ready</h3>
|
||||||
|
<p class="mt-2 text-slate-600">Schlanke App, klare Strukturen, funktioniert auch wenn das Netz mal dünn ist. Dark‑Mode via iOS‑Einstellung.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Detail Features -->
|
||||||
|
<section class="bg-soft">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 grid lg:grid-cols-2 gap-10 items-center">
|
||||||
|
<div>
|
||||||
|
<img src="/assets/screens/analytic.png" alt="Auswertung mit Balkendiagramm" class="rounded-3xl shadow-soft ring-1 ring-slate-100" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl md:text-3xl font-bold tracking-tight text-ink">Alles, was du für echte Kostenkontrolle brauchst</h2>
|
||||||
|
<ul class="mt-6 space-y-3 text-slate-700">
|
||||||
|
<li>• <strong>Übersicht</strong> mit letzten Belegen und Kennzahlen (Verbrauch/100 km, Tage pro Gasflasche).</li>
|
||||||
|
<li>• <strong>Auswertung</strong> nach Zeitraum & Kategorie (Tankbeleg, Gaskosten, Ver‑/Entsorgung, Sonstige).</li>
|
||||||
|
<li>• <strong>Karte</strong> der Einträge mit Zeitraum‑Quick‑Filter (1 Monat, 6 Monate, 1 Jahr).</li>
|
||||||
|
<li>• <strong>Eintrag</strong>‑Tab für schnelle Erfassung unterwegs – ohne Umwege.</li>
|
||||||
|
<li>• <strong>Stabile Basis</strong> mit klarer Datenstruktur, ideal für Langzeit‑Tracking.</li>
|
||||||
|
</ul>
|
||||||
|
<div class="mt-8">
|
||||||
|
<a href="https://apps.apple.com/us/app/vanity-expense-logbook/id6742772476" class="inline-flex items-center gap-3 rounded-2xl bg-primary px-5 py-3 text-white shadow-soft hover:bg-primary-dark">Jetzt kostenlos laden</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- What's New -->
|
||||||
|
<section id="whats-new" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-10 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl md:text-3xl font-bold tracking-tight text-ink">Was ist neu (v2.3.1)</h2>
|
||||||
|
<div class="mt-6 grid gap-4">
|
||||||
|
<div class="p-5 rounded-xl border border-slate-200 bg-white">
|
||||||
|
<span class="inline-block text-xs font-semibold rounded-full bg-green-100 text-green-700 px-2 py-1">Neu</span>
|
||||||
|
<h3 class="mt-2 font-semibold">Zeitraumfilter & Diagramm‑Switch</h3>
|
||||||
|
<p class="mt-1 text-slate-700">Schnell zwischen <em>Balken</em> und <em>Linie</em> wechseln, Zeitraum setzen – die App merkt sich deine Wahl.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-5 rounded-xl border border-slate-200 bg-white">
|
||||||
|
<span class="inline-block text-xs font-semibold rounded-full bg-blue-100 text-blue-700 px-2 py-1">Verbessert</span>
|
||||||
|
<h3 class="mt-2 font-semibold">Karte mit Quick‑Filtern</h3>
|
||||||
|
<p class="mt-1 text-slate-700">1 Monat / 6 Monate / 1 Jahr – mit klaren Pins für deine letzten Einträge.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-5 rounded-xl border border-slate-200 bg-white">
|
||||||
|
<span class="inline-block text-xs font-semibold rounded-full bg-amber-100 text-amber-700 px-2 py-1">Fix</span>
|
||||||
|
<h3 class="mt-2 font-semibold">Feinschliff an KPIs</h3>
|
||||||
|
<p class="mt-1 text-slate-700">Stabile Kennzahlenanzeige in der Übersicht (Ø‑Verbrauch/100 km, Tage pro Gasflasche).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="/assets/screens/start.png" alt="Willkommen & Version 2.3.1" class="rounded-3xl shadow-soft ring-1 ring-slate-100" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Screenshots -->
|
||||||
|
<section id="screens" class="bg-soft">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-bold tracking-tight text-ink">Screenshots</h2>
|
||||||
|
<p class="mt-2 text-slate-600">Mehr Bilder folgen – diese geben dir einen ersten Einblick.</p>
|
||||||
|
<div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<img src="/assets/screens/overview.png" alt="Übersicht & letzte Belege" class="rounded-2xl shadow-soft ring-1 ring-slate-100" />
|
||||||
|
<img src="/assets/screens/analytic.png" alt="Auswertung – Balkendiagramm" class="rounded-2xl shadow-soft ring-1 ring-slate-100" />
|
||||||
|
<img src="/assets/screens/map.png" alt="Karte – Einträge im Zeitraum" class="rounded-2xl shadow-soft ring-1 ring-slate-100" />
|
||||||
|
<img src="/assets/screens/start.png" alt="Start & Versionshinweis" class="rounded-2xl shadow-soft ring-1 ring-slate-100" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 py-16">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-bold tracking-tight text-ink">FAQ</h2>
|
||||||
|
<div class="mt-8 space-y-6">
|
||||||
|
<details class="group rounded-xl border border-slate-200 p-5 bg-white">
|
||||||
|
<summary class="font-semibold cursor-pointer flex items-center justify-between">Kostet die App etwas? <span class="text-slate-400 group-open:rotate-180 transition">▾</span></summary>
|
||||||
|
<p class="mt-3 text-slate-700">Aktuell kostenlos im App Store. Funktionsumfang wird kontinuierlich erweitert.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group rounded-xl border border-slate-200 p-5 bg-white">
|
||||||
|
<summary class="font-semibold cursor-pointer flex items-center justify-between">Brauche ich einen Account? <span class="text-slate-400 group-open:rotate-180 transition">▾</span></summary>
|
||||||
|
<p class="mt-3 text-slate-700">Nein. Keine Registrierung, kein Tracking, keine Cookies. Deine Daten bleiben auf deinem Gerät.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group rounded-xl border border-slate-200 p-5 bg-white">
|
||||||
|
<summary class="font-semibold cursor-pointer flex items-center justify-between">Gibt es einen Dark Mode? <span class="text-slate-400 group-open:rotate-180 transition">▾</span></summary>
|
||||||
|
<p class="mt-3 text-slate-700">Ja – folgt den iOS‑Systemeinstellungen automatisch.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group rounded-xl border border-slate-200 p-5 bg-white">
|
||||||
|
<summary class="font-semibold cursor-pointer flex items-center justify-between">Funktioniert die App offline? <span class="text-slate-400 group-open:rotate-180 transition">▾</span></summary>
|
||||||
|
<p class="mt-3 text-slate-700">Ja. Du kannst Einträge offline erfassen und später fortführen.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Feedback / Kontaktformular -->
|
||||||
|
<section id="feedback" class="bg-soft">
|
||||||
|
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-16">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-bold tracking-tight text-ink">Dein Feedback</h2>
|
||||||
|
<p class="mt-2 text-slate-600">Wünsche, Bugs, Ideen – hau raus. Die Nachricht geht direkt per E‑Mail an <a href="mailto:oliver@vanityontour.de" class="text-primary underline">oliver@vanityontour.de</a>.</p>
|
||||||
|
|
||||||
|
<form id="contactForm" class="mt-8 grid gap-5" autocomplete="on" aria-describedby="privacyNote">
|
||||||
|
<div class="grid md:grid-cols-2 gap-5">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="block text-sm font-medium text-slate-700">Name</label>
|
||||||
|
<input id="name" name="name" type="text" required class="mt-2 w-full rounded-xl border-slate-300 focus:border-primary focus:ring-primary" placeholder="Max Mustermann" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email" class="block text-sm font-medium text-slate-700">E‑Mail</label>
|
||||||
|
<input id="email" name="email" type="email" required class="mt-2 w-full rounded-xl border-slate-300 focus:border-primary focus:ring-primary" placeholder="du@example.com" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="type" class="block text-sm font-medium text-slate-700">Thema</label>
|
||||||
|
<select id="type" name="type" class="mt-2 w-full rounded-xl border-slate-300 focus:border-primary focus:ring-primary">
|
||||||
|
<option>Bug</option>
|
||||||
|
<option>Feature</option>
|
||||||
|
<option>Allgemein</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="message" class="block text-sm font-medium text-slate-700">Nachricht</label>
|
||||||
|
<textarea id="message" name="message" rows="6" required class="mt-2 w-full rounded-xl border-slate-300 focus:border-primary focus:ring-primary" placeholder="Was ist los? Wie kann ich helfen?"></textarea>
|
||||||
|
</div>
|
||||||
|
<p id="privacyNote" class="text-sm text-slate-500">Hinweis: Die Angaben werden ausschließlich zur Bearbeitung deiner Anfrage verwendet und nicht gespeichert. Keine Cookies, kein Tracking. Details: <a class="underline" href="https://vanityontour.de/datenschutz/">Datenschutz</a>.</p>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-primary px-5 py-3 text-white shadow-soft hover:bg-primary-dark">Absenden</button>
|
||||||
|
<span id="formStatus" role="status" class="text-sm text-slate-600"></span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Mailto‑Submit: erzeugt eine E‑Mail mit vorgefülltem Betreff/Text
|
||||||
|
// Hinweis: Für produktiven Versand kann hier alternativ ein CloudPage‑Endpoint genutzt werden.
|
||||||
|
const form = document.getElementById('contactForm');
|
||||||
|
const statusEl = document.getElementById('formStatus');
|
||||||
|
form.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const name = document.getElementById('name').value.trim();
|
||||||
|
const email = document.getElementById('email').value.trim();
|
||||||
|
const type = document.getElementById('type').value;
|
||||||
|
const message = document.getElementById('message').value.trim();
|
||||||
|
|
||||||
|
const subject = encodeURIComponent(`[Vanity Expense Logbook] ${type} – ${name}`);
|
||||||
|
const body = encodeURIComponent(
|
||||||
|
`Name: ${name}
|
||||||
|
E‑Mail: ${email}
|
||||||
|
Thema: ${type}
|
||||||
|
\nNachricht:\n${message}\n\n---\nGesendet von der Landingpage https://vanityontour.de/vanity-app/`
|
||||||
|
);
|
||||||
|
|
||||||
|
const mailto = `mailto:oliver@vanityontour.de?subject=${subject}&body=${body}`;
|
||||||
|
window.location.href = mailto;
|
||||||
|
statusEl.textContent = 'Dein E‑Mail‑Programm wurde geöffnet. Danke für dein Feedback!';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
|
||||||
|
<div class="rounded-3xl bg-gradient-to-r from-primary to-accent text-white p-10 lg:p-14 shadow-soft">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-8 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl md:text-3xl font-bold tracking-tight">Bereit, die Kosten zu zähmen?</h2>
|
||||||
|
<p class="mt-2 text-white/90">Hol dir Vanity Expense Logbook und behalte deine Ausgaben im Griff – vom ersten Liter bis zum nächsten Abenteuer.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex lg:justify-end items-center gap-4">
|
||||||
|
<a href="https://apps.apple.com/us/app/vanity-expense-logbook/id6742772476" class="inline-flex items-center gap-3 rounded-2xl bg-black text-white px-5 py-3 shadow hover:opacity-90" aria-label="Im App Store laden">
|
||||||
|
<img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Lade es im App Store" class="h-10 w-auto" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="border-t border-slate-200">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10 text-sm text-slate-600 grid md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<strong>Vanity on Tour</strong><br />
|
||||||
|
© <span id="year"></span> Vanity on Tour
|
||||||
|
</div>
|
||||||
|
<div class="space-x-4">
|
||||||
|
<a class="underline" href="https://vanityontour.de/impressum/">Impressum</a>
|
||||||
|
<a class="underline" href="https://vanityontour.de/datenschutz/">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="underline" href="#feedback">Feedback senden</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>document.getElementById('year').textContent = new Date().getFullYear();</script>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue