b34f45adf8
- Homepage mit Hero, Stats, Features, Pricing, Industries, Waitlist - 5 Branchenseiten (Großhandel, Handwerk, Steuerberater, Inkasso, Lieferanten) - Tailwind CSS mit Brand-Colors (Navy + Signal-Red) - Docker-Build für Coolify Deployment - Component-basierte Architektur
118 lines
3.4 KiB
Plaintext
118 lines
3.4 KiB
Plaintext
---
|
|
const plans = [
|
|
{
|
|
name: "Starter",
|
|
price: "0",
|
|
period: "für immer",
|
|
description: "Für Freelancer und Kleinunternehmer",
|
|
features: [
|
|
"5 Unternehmen überwachen",
|
|
"Tägliche Prüfung",
|
|
"E-Mail Benachrichtigungen",
|
|
"Basis-Support",
|
|
],
|
|
cta: "Kostenlos starten",
|
|
popular: false,
|
|
},
|
|
{
|
|
name: "Professional",
|
|
price: "29",
|
|
period: "pro Monat",
|
|
description: "Für wachsende Unternehmen",
|
|
features: [
|
|
"50 Unternehmen überwachen",
|
|
"Tägliche Prüfung",
|
|
"E-Mail + WhatsApp Alerts",
|
|
"CSV/Excel Import",
|
|
"API-Zugang",
|
|
"Prioritäts-Support",
|
|
],
|
|
cta: "14 Tage kostenlos testen",
|
|
popular: true,
|
|
},
|
|
{
|
|
name: "Business",
|
|
price: "69",
|
|
period: "pro Monat",
|
|
description: "Für mittlere Unternehmen",
|
|
features: [
|
|
"250 Unternehmen überwachen",
|
|
"Echtzeit-Prüfung",
|
|
"Alle Benachrichtigungskanäle",
|
|
"Team-Zugänge (5 Nutzer)",
|
|
"Erweiterte API",
|
|
"Dedizierter Support",
|
|
],
|
|
cta: "14 Tage kostenlos testen",
|
|
popular: false,
|
|
},
|
|
{
|
|
name: "Enterprise",
|
|
price: "149",
|
|
period: "pro Monat",
|
|
description: "Für Großunternehmen",
|
|
features: [
|
|
"Unbegrenzt überwachen",
|
|
"Echtzeit-Prüfung",
|
|
"Alle Kanäle + Webhook",
|
|
"Unbegrenzte Team-Zugänge",
|
|
"White-Label Option",
|
|
"SLA & Account Manager",
|
|
],
|
|
cta: "Kontakt aufnehmen",
|
|
popular: false,
|
|
},
|
|
];
|
|
---
|
|
|
|
<section id="preise" class="section bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-navy mb-4">
|
|
Transparente Preise, ohne versteckte Kosten
|
|
</h2>
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Starten Sie kostenlos. Upgraden Sie, wenn Sie wachsen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{plans.map(plan => (
|
|
<div class={`bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-shadow relative ${plan.popular ? 'ring-2 ring-signal' : ''}`}>
|
|
{plan.popular && (
|
|
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-signal text-white text-xs font-bold px-3 py-1 rounded-full">
|
|
BELIEBT
|
|
</div>
|
|
)}
|
|
|
|
<h3 class="text-xl font-bold text-navy mb-2">{plan.name}</h3>
|
|
<p class="text-gray-500 text-sm mb-4">{plan.description}</p>
|
|
|
|
<div class="mb-6">
|
|
<span class="text-4xl font-bold text-navy">€{plan.price}</span>
|
|
<span class="text-gray-500 text-sm">/{plan.period}</span>
|
|
</div>
|
|
|
|
<ul class="space-y-3 mb-6">
|
|
{plan.features.map(feature => (
|
|
<li class="flex items-start gap-2 text-sm">
|
|
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
|
|
</svg>
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<a
|
|
href="#waitlist"
|
|
class={`btn w-full justify-center ${plan.popular ? 'btn-primary' : 'btn-outline'}`}
|
|
>
|
|
{plan.cta}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|