cee5f470ad
- Hero: Sub-Headline und CTA-Text niedrigschwelliger formuliert - Services: Konkretere, ergebnisorientierte Beschreibungen - Neue About-Section mit persönlichem Pull-Quote - Neue Process-Section als 4-Spalten-Grid (statt Services-Klon) - Packages: Feature-Listen, Profi-Paket hervorgehoben, neue Texte - Contact: Infos links, interaktive mapcn-Karte rechts (Crimmitschau) - Karte rot eingefärbt via sepia/hue-rotate CSS-Filter - Nav um "Ablauf"-Link ergänzt, fehlende IDs gesetzt - Kleinere Copy-Fixes (Opacity, leerer Span, Region konkretisiert) Co-authored-by: Cursor <cursoragent@cursor.com>
111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import { Check } from "lucide-react";
|
|
|
|
const packages = [
|
|
{
|
|
name: "Basis",
|
|
price: "799 EUR",
|
|
detail: "Eine starke Seite für ein klares Angebot.",
|
|
highlighted: false,
|
|
features: [
|
|
"One-Page-Website",
|
|
"Mobil optimiert",
|
|
"Kontaktformular",
|
|
"DSGVO & Impressum",
|
|
"Hosting für 1 Jahr",
|
|
],
|
|
},
|
|
{
|
|
name: "Profi",
|
|
price: "1.499 EUR",
|
|
detail: "Mehrere Seiten für Betriebe mit mehr zu zeigen.",
|
|
highlighted: true,
|
|
features: [
|
|
"Alles aus Basis",
|
|
"Bis zu 5 Unterseiten",
|
|
"Individuelles Design",
|
|
"SEO-Grundoptimierung",
|
|
"Google Maps Einbindung",
|
|
"Kontaktformular",
|
|
"DSGVO & Impressum",
|
|
"Hosting für 1 Jahr",
|
|
],
|
|
},
|
|
{
|
|
name: "Maßarbeit",
|
|
price: "2.499 EUR+",
|
|
detail: "Ihr Betrieb, Ihre Regeln. Inhalte selbst ändern, Seiten ergänzen, wachsen.",
|
|
highlighted: false,
|
|
features: [
|
|
"Alles aus Profi",
|
|
"Unbegrenzte Seiten",
|
|
"Inhalte selbst pflegbar (CMS)",
|
|
"Individuelles Design & Struktur",
|
|
"SEO-Optimierung",
|
|
"Blog oder News-Bereich",
|
|
"Erweiterte Funktionen",
|
|
"DSGVO & Impressum",
|
|
"Hosting für 1 Jahr",
|
|
],
|
|
},
|
|
];
|
|
|
|
const PackagesSection = () => {
|
|
return (
|
|
<section
|
|
id="pakete"
|
|
className="border-b border-border px-5 py-14 sm:px-8 lg:px-12 lg:py-24"
|
|
>
|
|
<div className="grid gap-8 lg:grid-cols-[0.45fr_0.55fr]">
|
|
<div>
|
|
<p className="text-sm uppercase tracking-[0.3em] text-primary">
|
|
Pakete (05)
|
|
</p>
|
|
<h2 className="mt-8 max-w-[9ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
|
|
Festpreis. Punkt.
|
|
</h2>
|
|
</div>
|
|
<div className="grid gap-4">
|
|
{packages.map((item) => (
|
|
<article
|
|
key={item.name}
|
|
className={`grid gap-6 border p-5 sm:grid-cols-[0.5fr_0.5fr] sm:p-6 ${item.highlighted ? "border-primary bg-primary/6" : "border-border"}`}
|
|
>
|
|
<div>
|
|
<div className="flex items-center gap-3">
|
|
<p className="text-sm uppercase tracking-[0.24em] text-primary">
|
|
{item.name}
|
|
</p>
|
|
{item.highlighted ? (
|
|
<span className="bg-primary px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.2em] text-primary-foreground">
|
|
Beliebteste Wahl
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<p className="mt-4 text-4xl font-black uppercase">
|
|
{item.price}
|
|
</p>
|
|
<p className="mt-3 text-lg leading-7 text-muted-foreground">
|
|
{item.detail}
|
|
</p>
|
|
</div>
|
|
<ul className="flex flex-col gap-2.5 self-center">
|
|
{item.features.map((feature) => (
|
|
<li
|
|
key={feature}
|
|
className="flex items-center gap-3 text-sm text-foreground/85"
|
|
>
|
|
<Check className="size-4 shrink-0 text-primary" />
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { PackagesSection };
|