Landing Page: Hero, Steps und Features auf Prüfbetriebe als Zielgruppe ausgerichtet

This commit is contained in:
rene 2026-05-17 15:29:36 +02:00
parent 6d4f4c6867
commit e30bef40ea

View file

@ -3,19 +3,19 @@
const features = [ const features = [
{ {
icon: '📱', icon: '🏷️',
title: 'Kein App-Store', title: 'Ihr Name, Ihr Brand',
text: 'QR-Code scannen — fertig. Die App öffnet direkt im Browser, ohne Installation.' text: 'Ihre Kunden sehen nur Ihr Logo, Ihre Farben, Ihre Domain. checkflo bleibt unsichtbar im Hintergrund.'
}, },
{ {
icon: '📶', icon: '📶',
title: 'Offline-fähig', title: 'Keine Installation nötig',
text: 'Kein Empfang im Keller? Kein Problem. Daten werden lokal gespeichert und automatisch synchronisiert.' text: 'Ihre Kunden scannen den QR-Code und füllen die Checkliste direkt im Browser aus — kein App-Store, kein MDM-Problem.'
}, },
{ {
icon: '📄', icon: '📄',
title: 'PDF auf Knopfdruck', title: 'Protokolle auf Knopfdruck',
text: 'Monatsprotokolle für Lebensmittelkontrolleure automatisch generieren — rechtssicher und vollständig.' text: 'Monatsprotokolle als PDF für Lebensmittelkontrollen — automatisch generiert, rechtssicher, ohne Aufwand für Sie.'
} }
]; ];
</script> </script>
@ -31,15 +31,16 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="hero-inner"> <div class="hero-inner">
<p class="eyebrow">HACCP-Dokumentation für die Gastronomie</p> <p class="eyebrow">White-Label-Software für Prüf- und Wartungsbetriebe</p>
<h1>Prüfprotokolle.<br />Ohne Papier.<br />Ohne App-Store.</h1> <h1>Ihre eigene<br />HACCP-App —<br />unter Ihrem Namen.</h1>
<p class="subtitle"> <p class="subtitle">
Kühlschranktemperaturen, Hygienekontrollen und Wartungsnachweise — Bieten Sie Ihren Kunden digitale Prüfprotokolle als gebrandete App an.
digital erfasst, automatisch protokolliert, jederzeit abrufbar. Kein App-Store. Keine Installation. Läuft offline.
Und Ihre Kunden sehen nur Ihr Logo.
</p> </p>
<div class="hero-actions"> <div class="hero-actions">
<a href="mailto:hallo@checkflo.de" class="btn-primary">Kostenlose Demo anfragen</a> <a href="mailto:hallo@checkflo.de" class="btn-primary">Kostenlose Demo vereinbaren</a>
<a href="#funktionen" class="btn-ghost">Wie es funktioniert</a> <a href="#funktionen" class="btn-ghost">So funktioniert es</a>
</div> </div>
</div> </div>
</section> </section>
@ -47,22 +48,22 @@
<!-- HOW IT WORKS --> <!-- HOW IT WORKS -->
<section class="steps" id="funktionen"> <section class="steps" id="funktionen">
<div class="container"> <div class="container">
<h2>In 3 Schritten zum digitalen Protokoll</h2> <h2>In 3 Schritten zur eigenen HACCP-App</h2>
<div class="steps-grid"> <div class="steps-grid">
<div class="step"> <div class="step">
<div class="step-num">1</div> <div class="step-num">1</div>
<h3>QR-Code aufkleben</h3> <h3>Lizenz buchen & branden</h3>
<p>Robuste NFC/QR-Tags direkt am Kühlschrank, Warmhaltebehälter oder an der Hygiene-Station.</p> <p>Sie erhalten Ihre App unter Ihrem Logo, Ihren Farben und Ihrer Domain — fertig in 48 Stunden.</p>
</div> </div>
<div class="step"> <div class="step">
<div class="step-num">2</div> <div class="step-num">2</div>
<h3>Scannen & ausfüllen</h3> <h3>Kunden einrichten</h3>
<p>Techniker scannt den Code, trägt Temperatur ein, macht bei Abweichung ein Foto — fertig.</p> <p>Stationen anlegen, QR-Codes ausdrucken, beim Kunden aufkleben. Ihr Kunde braucht nichts installieren.</p>
</div> </div>
<div class="step"> <div class="step">
<div class="step-num">3</div> <div class="step-num">3</div>
<h3>Protokoll abrufen</h3> <h3>Protokolle abrufen</h3>
<p>Vollständiges Monatsprotokoll als PDF — für Lebensmittelkontrolle, Franchise-Geber oder eigene Dokumentation.</p> <p>Ihre Kunden erfassen täglich — Sie sehen alles in Echtzeit und exportieren Protokolle per Knopfdruck als PDF.</p>
</div> </div>
</div> </div>
</div> </div>
@ -71,7 +72,7 @@
<!-- FEATURES --> <!-- FEATURES -->
<section class="features"> <section class="features">
<div class="container"> <div class="container">
<h2>Warum checkflo?</h2> <h2>Was checkflo für Sie leistet</h2>
<div class="features-grid"> <div class="features-grid">
{#each features as f} {#each features as f}
<div class="feature-card"> <div class="feature-card">