749 lines
20 KiB
Svelte
749 lines
20 KiB
Svelte
<script lang="ts">
|
||
import logo from '$lib/assets/checkflo-logo.png';
|
||
import hafnerLogo from '$lib/assets/hafner-logo.png';
|
||
import { pb } from '$lib/pb';
|
||
import { onMount } from 'svelte';
|
||
import { browser } from '$app/environment';
|
||
|
||
const DEMO_TENANT = 'mengbzc3ajxpccz';
|
||
|
||
const STATUS_LABEL: Record<string, string> = { ok: 'OK', abweichung: 'Abweichung', kritisch: 'Kritisch' };
|
||
const STATUS_CLASS: Record<string, string> = { ok: 'ok', abweichung: 'warn', kritisch: 'crit' };
|
||
|
||
let liveLogs = $state<any[]>([]);
|
||
let liveStats = $state({ total: 0, ok: 0, warn: 0, crit: 0 });
|
||
let lastUpdate = $state('');
|
||
|
||
async function fetchLiveData() {
|
||
try {
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
const dateStr = today.toISOString().slice(0, 19).replace('T', ' ');
|
||
|
||
const result = await pb.collection('check_logs').getList(1, 3, {
|
||
filter: `tenant = '${DEMO_TENANT}' && created >= '${dateStr}'`,
|
||
expand: 'station',
|
||
sort: '-created'
|
||
});
|
||
|
||
liveLogs = result.items;
|
||
liveStats.total = result.totalItems;
|
||
liveStats.ok = result.items.filter((l: any) => l.status === 'ok').length;
|
||
liveStats.warn = result.items.filter((l: any) => l.status === 'abweichung').length;
|
||
liveStats.crit = result.items.filter((l: any) => l.status === 'kritisch').length;
|
||
lastUpdate = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
||
} catch { /* public endpoint, sollte immer klappen */ }
|
||
}
|
||
|
||
onMount(() => {
|
||
if (!browser) return;
|
||
fetchLiveData();
|
||
const iv = setInterval(fetchLiveData, 30_000);
|
||
return () => clearInterval(iv);
|
||
});
|
||
|
||
function formatTime(iso: string) {
|
||
if (!iso) return '';
|
||
const d = new Date(iso);
|
||
return isNaN(d.getTime()) ? '' : d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
|
||
const features = [
|
||
{
|
||
icon: '🏷️',
|
||
title: 'Ihr Name, Ihr Brand',
|
||
text: 'Ihre Kunden sehen nur Ihr Logo, Ihre Farben, Ihre Domain. checkflo bleibt unsichtbar im Hintergrund.'
|
||
},
|
||
{
|
||
icon: '📶',
|
||
title: 'Keine Installation nötig',
|
||
text: 'Ihre Kunden scannen den QR-Code und füllen die Checkliste direkt im Browser aus — kein App-Store, kein MDM-Problem.'
|
||
},
|
||
{
|
||
icon: '📄',
|
||
title: 'Protokolle auf Knopfdruck',
|
||
text: 'Monatsprotokolle als PDF für Lebensmittelkontrollen — automatisch generiert, rechtssicher, ohne Aufwand für Sie.'
|
||
}
|
||
];
|
||
</script>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<a href="/" class="logo">
|
||
<img src={logo} alt="checkflo" height="36" />
|
||
</a>
|
||
<a href="/admin" class="btn-nav">Anmelden</a>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-inner">
|
||
<p class="eyebrow">White-Label-Software für Prüf- und Wartungsbetriebe</p>
|
||
<h1>Ihre eigene<br />HACCP-App —<br />unter Ihrem Namen.</h1>
|
||
<p class="subtitle">
|
||
Bieten Sie Ihren Kunden digitale Prüfprotokolle als gebrandete App an.
|
||
Kein App-Store. Keine Installation. Läuft offline.
|
||
Und Ihre Kunden sehen nur Ihr Logo.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="mailto:hallo@checkflo.de" class="btn-primary">Kostenlose Demo vereinbaren</a>
|
||
<a href="#funktionen" class="btn-ghost">So funktioniert es ↓</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MOCKUPS -->
|
||
<section class="mockups">
|
||
<div class="container">
|
||
<p class="eyebrow-dark">So sieht Ihre gebrandete App aus</p>
|
||
<h2>Dashboard für Sie — Checkliste für Ihre Kunden</h2>
|
||
|
||
<div class="devices">
|
||
|
||
<!-- Desktop: CSS Dashboard Schmidt Hygiene -->
|
||
<div class="device-browser">
|
||
<div class="browser-bar">
|
||
<div class="browser-dots">
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
<div class="browser-url">app.hafner-pruefdienste.de/admin</div>
|
||
</div>
|
||
<div class="browser-screen">
|
||
<div class="dash-sidebar">
|
||
<img src={hafnerLogo} alt="Hafner Prüftechnik" class="dash-brand-logo" />
|
||
<div class="dash-nav-item active schmidt">Dashboard</div>
|
||
<div class="dash-nav-item">Protokoll</div>
|
||
<div class="dash-nav-item">Stationen</div>
|
||
</div>
|
||
<div class="dash-main">
|
||
<div class="dash-title">Dashboard</div>
|
||
<div class="dash-date">
|
||
{new Date().toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||
{#if lastUpdate}<span class="dash-refresh">· {lastUpdate}</span>{/if}
|
||
</div>
|
||
<div class="dash-stats">
|
||
<div class="dash-stat">
|
||
<div class="dash-num">{liveStats.total}</div>
|
||
<div class="dash-label">Heute</div>
|
||
</div>
|
||
<div class="dash-stat ok">
|
||
<div class="dash-num">{liveStats.ok}</div>
|
||
<div class="dash-label">OK</div>
|
||
</div>
|
||
<div class="dash-stat warn">
|
||
<div class="dash-num">{liveStats.warn}</div>
|
||
<div class="dash-label">Abw.</div>
|
||
</div>
|
||
<div class="dash-stat crit">
|
||
<div class="dash-num">{liveStats.crit}</div>
|
||
<div class="dash-label">Kritisch</div>
|
||
</div>
|
||
</div>
|
||
<div class="dash-entries-title">Letzte Einträge</div>
|
||
{#each liveLogs as log}
|
||
<div class="dash-entry">
|
||
<span class="entry-badge {STATUS_CLASS[log.status] ?? 'ok'}">{STATUS_LABEL[log.status] ?? log.status}</span>
|
||
<span class="entry-station">{log.expand?.station?.name ?? '—'}</span>
|
||
<span class="entry-temp">{log.temperature ? log.temperature + ' °C' : ''}</span>
|
||
<span class="entry-who">{log.checked_by} · {formatTime(log.created)}</span>
|
||
</div>
|
||
{:else}
|
||
<div class="dash-empty">Noch keine Einträge heute</div>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile: Live-Iframe Schmidt Hygiene (blau) -->
|
||
<div class="device-phone">
|
||
<div class="phone-frame">
|
||
<div class="phone-notch"></div>
|
||
<div class="phone-screen">
|
||
<iframe
|
||
src="https://checkflo.de/s/b6b30daf-8bfe-4648-ba2b-6c42916d2264"
|
||
title="Musterküche Demo"
|
||
scrolling="no"
|
||
></iframe>
|
||
</div>
|
||
<div class="phone-home"></div>
|
||
</div>
|
||
<p class="phone-caption">Ihr Kunde erfasst — Sie sehen es sofort</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- HOW IT WORKS -->
|
||
<section class="steps" id="funktionen">
|
||
<div class="container">
|
||
<h2>In 3 Schritten zur eigenen HACCP-App</h2>
|
||
<div class="steps-grid">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<h3>Lizenz buchen & branden</h3>
|
||
<p>Sie erhalten Ihre App unter Ihrem Logo, Ihren Farben und Ihrer Domain — fertig in 48 Stunden.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h3>Kunden einrichten</h3>
|
||
<p>Stationen anlegen, QR-Codes ausdrucken, beim Kunden aufkleben. Ihr Kunde braucht nichts installieren.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h3>Protokolle abrufen</h3>
|
||
<p>Ihre Kunden erfassen täglich — Sie sehen alles in Echtzeit und exportieren Protokolle per Knopfdruck als PDF.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEATURES -->
|
||
<section class="features">
|
||
<div class="container">
|
||
<h2>Was checkflo für Sie leistet</h2>
|
||
<div class="features-grid">
|
||
{#each features as f}
|
||
<div class="feature-card">
|
||
<span class="feature-icon">{f.icon}</span>
|
||
<h3>{f.title}</h3>
|
||
<p>{f.text}</p>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRICING -->
|
||
<section class="pricing">
|
||
<div class="container">
|
||
<div class="pricing-intro">
|
||
<h2>White-Label-Lizenz für Prüf- und Wartungsbetriebe</h2>
|
||
<p class="pricing-sub">
|
||
Sie treten gegenüber Ihren Kunden mit einer <strong>eigenen gebrandeten App</strong> auf —
|
||
checkflo läuft im Hintergrund. Ihre Kunden sehen nur Ihr Logo, Ihre Farben, Ihre Domain.
|
||
</p>
|
||
<div class="pricing-math">
|
||
<span class="math-example">10 Kunden × 30 €/Monat</span>
|
||
<span class="math-arrow">→</span>
|
||
<span class="math-result">300 € MRR bei 249 € Lizenz</span>
|
||
</div>
|
||
</div>
|
||
<div class="pricing-grid">
|
||
<div class="plan">
|
||
<div class="plan-name">Basic White-Label</div>
|
||
<div class="plan-price">249 €<span>/Monat</span></div>
|
||
<p class="plan-desc">Für den Einstieg — bis zu 10 Kundenbetriebe</p>
|
||
<ul class="plan-features">
|
||
<li>✓ Ihr Logo & CI-Farben in der App</li>
|
||
<li>✓ Subdomain (app.ihr-betrieb.de)</li>
|
||
<li>✓ Bis zu 500 Assets / QR-Tags gesamt</li>
|
||
<li>✓ HACCP-Protokoll-Templates</li>
|
||
<li>✓ PDF-Export für Ihre Kunden</li>
|
||
<li>✓ Offline-fähige PWA</li>
|
||
</ul>
|
||
<a href="mailto:hallo@checkflo.de?subject=Basic White-Label Anfrage" class="btn-plan">Demo vereinbaren</a>
|
||
</div>
|
||
<div class="plan plan-featured">
|
||
<div class="plan-badge">Empfohlen</div>
|
||
<div class="plan-name">Pro White-Label</div>
|
||
<div class="plan-price">499 €<span>/Monat</span></div>
|
||
<p class="plan-desc">Für wachsende Betriebe ohne Asset-Limit</p>
|
||
<ul class="plan-features">
|
||
<li>✓ Eigene Custom Domain Ihrer Kunden</li>
|
||
<li>✓ Unlimitierte Assets & Kundenbetriebe</li>
|
||
<li>✓ Individueller Formular-Generator</li>
|
||
<li>✓ API-Zugang (ERP, Excel-Export)</li>
|
||
<li>✓ Dynamisches Branding je Kunde</li>
|
||
<li>✓ Prioritäts-Support</li>
|
||
</ul>
|
||
<a href="mailto:hallo@checkflo.de?subject=Pro White-Label Anfrage" class="btn-plan btn-plan-featured">Demo vereinbaren</a>
|
||
</div>
|
||
<div class="plan">
|
||
<div class="plan-name">Enterprise</div>
|
||
<div class="plan-price">ab 1.500 €<span>/Monat</span></div>
|
||
<p class="plan-desc">Für Ketten, Verbände & große Facility-Manager</p>
|
||
<ul class="plan-features">
|
||
<li>✓ Dedizierte Server-Infrastruktur</li>
|
||
<li>✓ SAP / MS Dynamics Anbindung</li>
|
||
<li>✓ On-Premise Installation möglich</li>
|
||
<li>✓ SLA & dedizierter Ansprechpartner</li>
|
||
<li>✓ Individuelle Entwicklung</li>
|
||
<li>✓ Schulung & Onboarding</li>
|
||
</ul>
|
||
<a href="mailto:hallo@checkflo.de?subject=Enterprise Anfrage" class="btn-plan">Angebot anfragen</a>
|
||
</div>
|
||
</div>
|
||
<p class="pricing-note">Keine Einrichtungsgebühr · Monatlich kündbar · Alle Pläne inkl. Updates</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta">
|
||
<div class="container">
|
||
<h2>Bieten Sie Ihren Kunden eine eigene HACCP-App an.</h2>
|
||
<p>Für Prüfbetriebe, Ingenieurbüros und Facility-Management-Firmen.</p>
|
||
<a href="mailto:hallo@checkflo.de" class="btn-primary btn-large">Kostenlose Demo vereinbaren</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="container">
|
||
<span class="logo"><span class="logo-check">check</span><span class="logo-flo">flo</span></span>
|
||
|
||
<span>© 2026 checkflo · <a href="mailto:hallo@checkflo.de">hallo@checkflo.de</a></span>
|
||
</div>
|
||
</footer>
|
||
|
||
<style>
|
||
/* NAV */
|
||
nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 72px;
|
||
padding: 0 2rem;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
position: sticky;
|
||
top: 0;
|
||
background: #fff;
|
||
z-index: 10;
|
||
}
|
||
|
||
.logo { display: flex; align-items: center; }
|
||
.logo img { height: 44px; width: auto; }
|
||
|
||
.btn-nav {
|
||
padding: 0.5rem 1.25rem;
|
||
border: 1.5px solid #0B1023;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
transition: all 0.15s;
|
||
}
|
||
.btn-nav:hover { background: #0B1023; color: #fff; }
|
||
|
||
/* MOCKUPS */
|
||
.mockups {
|
||
padding: 5rem 2rem;
|
||
background: #0B1023;
|
||
color: #fff;
|
||
overflow: hidden;
|
||
}
|
||
.mockups .eyebrow-dark {
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
color: #F97316;
|
||
text-align: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.mockups h2 { color: #fff; text-align: center; margin-bottom: 3rem; }
|
||
|
||
.devices {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
gap: 3rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Browser Mockup */
|
||
.device-browser {
|
||
flex: 1;
|
||
min-width: 320px;
|
||
max-width: 580px;
|
||
background: #1a2035;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
|
||
border: 1px solid #2a3347;
|
||
}
|
||
.browser-bar {
|
||
background: #252d42;
|
||
padding: 0.6rem 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
.browser-dots { display: flex; gap: 5px; }
|
||
.browser-dots span {
|
||
width: 10px; height: 10px;
|
||
border-radius: 50%;
|
||
background: #3a4055;
|
||
}
|
||
.browser-url {
|
||
flex: 1;
|
||
background: #1a2035;
|
||
border-radius: 4px;
|
||
padding: 0.2rem 0.6rem;
|
||
font-size: 0.7rem;
|
||
color: #6b7a9a;
|
||
font-family: monospace;
|
||
}
|
||
.browser-screen { display: flex; height: 300px; overflow: hidden; }
|
||
|
||
/* CSS Dashboard */
|
||
.dash-sidebar {
|
||
width: 120px;
|
||
background: #0B1023;
|
||
padding: 1rem 0.75rem;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
}
|
||
.dash-brand-logo { width: 100%; margin-bottom: 1rem; }
|
||
.dash-nav-item.schmidt { background: rgba(42,155,87,0.15); color: #2A9B57; }
|
||
.dash-nav-item {
|
||
padding: 0.4rem 0.5rem;
|
||
border-radius: 5px;
|
||
font-size: 0.65rem;
|
||
color: #6b7a9a;
|
||
}
|
||
.dash-nav-item.active {
|
||
background: rgba(249,115,22,0.15);
|
||
color: #F97316;
|
||
}
|
||
|
||
.dash-main {
|
||
flex: 1;
|
||
padding: 1rem;
|
||
background: #F5F7FA;
|
||
overflow: hidden;
|
||
}
|
||
.dash-title { font-size: 0.9rem; font-weight: 800; color: #0B1023; }
|
||
.dash-date { font-size: 0.65rem; color: #888; margin-bottom: 0.75rem; }
|
||
|
||
.dash-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 0.4rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.dash-stat {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 0.4rem;
|
||
border-left: 2.5px solid #ddd;
|
||
}
|
||
.dash-stat.ok { border-color: #16a34a; }
|
||
.dash-stat.warn { border-color: #ea580c; }
|
||
.dash-stat.crit { border-color: #dc2626; }
|
||
.dash-num { font-size: 1rem; font-weight: 800; color: #0B1023; line-height: 1; }
|
||
.dash-label { font-size: 0.5rem; color: #888; margin-top: 0.15rem; }
|
||
|
||
.dash-refresh { font-size: 0.55rem; color: #aaa; }
|
||
.dash-entries-title { font-size: 0.7rem; font-weight: 700; color: #0B1023; margin-bottom: 0.4rem; }
|
||
.dash-empty { font-size: 0.65rem; color: #aaa; padding: 0.5rem 0; }
|
||
.dash-entry {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 0.4rem 0.5rem;
|
||
font-size: 0.6rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
.entry-badge {
|
||
padding: 0.1rem 0.35rem;
|
||
border-radius: 10px;
|
||
font-weight: 700;
|
||
font-size: 0.55rem;
|
||
white-space: nowrap;
|
||
}
|
||
.entry-badge.ok { background: #dcfce7; color: #16a34a; }
|
||
.entry-badge.warn { background: #ffedd5; color: #ea580c; }
|
||
.entry-station { flex: 1; font-weight: 600; color: #0B1023; }
|
||
.entry-temp { color: #555; }
|
||
.entry-who { color: #aaa; white-space: nowrap; }
|
||
|
||
/* Phone Mockup */
|
||
.device-phone {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
.phone-frame {
|
||
width: 220px;
|
||
background: #1a1a2e;
|
||
border-radius: 36px;
|
||
padding: 12px;
|
||
box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 0 0 1px #2a2a4a;
|
||
}
|
||
.phone-notch {
|
||
width: 60px;
|
||
height: 20px;
|
||
background: #1a1a2e;
|
||
border-radius: 10px;
|
||
margin: 0 auto 8px;
|
||
border: 1.5px solid #2a2a4a;
|
||
}
|
||
.phone-screen {
|
||
background: #fff;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
height: 480px;
|
||
position: relative;
|
||
}
|
||
.phone-screen iframe {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 390px;
|
||
height: 960px;
|
||
border: none;
|
||
transform: scale(0.502);
|
||
transform-origin: top left;
|
||
pointer-events: auto;
|
||
}
|
||
.phone-home {
|
||
width: 60px;
|
||
height: 4px;
|
||
background: #3a3a5a;
|
||
border-radius: 2px;
|
||
margin: 10px auto 0;
|
||
}
|
||
.phone-caption {
|
||
font-size: 0.8rem;
|
||
color: #6b7a9a;
|
||
text-align: center;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.device-browser { display: none; }
|
||
.devices { justify-content: center; }
|
||
}
|
||
|
||
/* HERO */
|
||
.hero {
|
||
background: linear-gradient(135deg, #0B1023 0%, #16213e 100%);
|
||
color: #fff;
|
||
padding: 5rem 2rem 6rem;
|
||
text-align: center;
|
||
}
|
||
.hero-inner { max-width: 720px; margin: 0 auto; }
|
||
|
||
.eyebrow {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
color: #F97316;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(2.2rem, 6vw, 3.5rem);
|
||
font-weight: 800;
|
||
line-height: 1.15;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.15rem;
|
||
color: #b0b8cc;
|
||
max-width: 560px;
|
||
margin: 0 auto 2.5rem;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* BUTTONS */
|
||
.btn-primary {
|
||
background: #F97316;
|
||
color: #fff;
|
||
padding: 0.85rem 2rem;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
transition: background 0.15s;
|
||
display: inline-block;
|
||
}
|
||
.btn-primary:hover { background: #ea6c10; }
|
||
.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }
|
||
|
||
.btn-ghost {
|
||
color: #b0b8cc;
|
||
padding: 0.85rem 1.5rem;
|
||
font-size: 1rem;
|
||
transition: color 0.15s;
|
||
display: inline-block;
|
||
}
|
||
.btn-ghost:hover { color: #fff; }
|
||
|
||
/* STEPS */
|
||
.steps {
|
||
padding: 5rem 2rem;
|
||
background: #F5F7FA;
|
||
}
|
||
.container { max-width: 1000px; margin: 0 auto; }
|
||
|
||
h2 {
|
||
font-size: 1.9rem;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.steps-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.step {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||
}
|
||
.step-num {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
background: #F97316;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.step h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
|
||
.step p { color: #555; font-size: 0.95rem; }
|
||
|
||
/* FEATURES */
|
||
.features { padding: 5rem 2rem; }
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.feature-card {
|
||
border: 1.5px solid #eee;
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.feature-card:hover { border-color: #F97316; }
|
||
.feature-icon { font-size: 2rem; display: block; margin-bottom: 1rem; }
|
||
.feature-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
|
||
.feature-card p { color: #555; font-size: 0.95rem; }
|
||
|
||
/* PRICING */
|
||
.pricing { padding: 5rem 2rem; background: #F5F7FA; }
|
||
|
||
.pricing-intro { text-align: center; margin-bottom: 3rem; }
|
||
.pricing-sub { color: #555; margin-top: 1rem; margin-bottom: 1.5rem; font-size: 1.05rem; max-width: 640px; margin-left: auto; margin-right: auto; }
|
||
|
||
.pricing-math {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
background: #fff;
|
||
border: 1.5px solid #F97316;
|
||
border-radius: 10px;
|
||
padding: 0.6rem 1.25rem;
|
||
font-size: 0.9rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
.math-example { color: #555; }
|
||
.math-arrow { color: #F97316; font-size: 1.2rem; }
|
||
.math-result { font-weight: 700; color: #0B1023; }
|
||
|
||
.plan-desc { font-size: 0.85rem; color: #888; margin-bottom: 1.25rem; margin-top: -0.75rem; }
|
||
.pricing-note { text-align: center; margin-top: 2rem; font-size: 0.85rem; color: #aaa; }
|
||
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.plan {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
padding: 2rem;
|
||
border: 1.5px solid #eee;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
.plan-featured {
|
||
border-color: #F97316;
|
||
box-shadow: 0 4px 24px rgba(249,115,22,0.12);
|
||
}
|
||
.plan-badge {
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #F97316;
|
||
color: #fff;
|
||
padding: 0.2rem 0.9rem;
|
||
border-radius: 20px;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
}
|
||
.plan-name { font-size: 0.85rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; }
|
||
.plan-price { font-size: 2rem; font-weight: 800; color: #0B1023; margin-bottom: 1.5rem; }
|
||
.plan-price span { font-size: 1rem; font-weight: 400; color: #888; }
|
||
|
||
.plan-features { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
|
||
.plan-features li { font-size: 0.9rem; color: #444; }
|
||
|
||
.btn-plan {
|
||
display: block;
|
||
text-align: center;
|
||
padding: 0.75rem;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 0.95rem;
|
||
border: 1.5px solid #0B1023;
|
||
color: #0B1023;
|
||
transition: all 0.15s;
|
||
}
|
||
.btn-plan:hover { background: #0B1023; color: #fff; }
|
||
.btn-plan-featured { background: #F97316; border-color: #F97316; color: #fff; }
|
||
.btn-plan-featured:hover { background: #ea6c10; border-color: #ea6c10; }
|
||
|
||
/* CTA */
|
||
.cta {
|
||
background: #0B1023;
|
||
color: #fff;
|
||
padding: 5rem 2rem;
|
||
text-align: center;
|
||
}
|
||
.cta h2 { color: #fff; margin-bottom: 1rem; }
|
||
.cta p { color: #b0b8cc; margin-bottom: 2rem; }
|
||
|
||
/* FOOTER */
|
||
footer {
|
||
padding: 1.5rem 2rem;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
footer .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
font-size: 0.9rem;
|
||
color: #888;
|
||
}
|
||
footer a:hover { color: #F97316; }
|
||
</style>
|