Revise content across multiple components for enhanced clarity and user engagement; update About19, Contact21, CTA, FAQ, Footer, Hero, Pricing, and Stats sections with localized messaging and improved structure.
This commit is contained in:
@@ -12,8 +12,8 @@ import { cn } from "@/lib/utils";
|
||||
interface PricingPlan {
|
||||
name: string;
|
||||
badge: string;
|
||||
monthlyPrice: string;
|
||||
yearlyPrice: string;
|
||||
price: string;
|
||||
description?: string;
|
||||
features: string[];
|
||||
buttonText: string;
|
||||
isPopular?: boolean;
|
||||
@@ -27,54 +27,57 @@ interface Pricing4Props {
|
||||
}
|
||||
|
||||
const Pricing4 = ({
|
||||
title = "Pakete für Ihre Unternehmenswebsite",
|
||||
title = "Entwicklungspakete",
|
||||
description =
|
||||
"Sie wählen den passenden Leistungsumfang. Preise nenne ich transparent im Angebot - abgestimmt auf Ziele, Inhalte und Umfang.",
|
||||
"Alle Websites laufen auf deutschen Servern, sind DSGVO-konform und kommen ohne Cookie-Banner aus. Auf Wunsch erhalten Sie monatlich einen Einblick, wie viele Menschen Ihre Website besuchen haben — und woher sie kommen.",
|
||||
plans = [
|
||||
{
|
||||
name: "Basis",
|
||||
badge: "Basis",
|
||||
monthlyPrice: "auf Anfrage",
|
||||
yearlyPrice: "auf Anfrage",
|
||||
name: "BASIS",
|
||||
badge: "799 €",
|
||||
price: "799 €",
|
||||
features: [
|
||||
"Bis zu 5 Inhaltsseiten",
|
||||
"Individuelles Design auf Basis Ihres Unternehmensauftritts",
|
||||
"Kontaktformular und rechtliche Standardseiten",
|
||||
"Responsive Umsetzung für alle geraetetypischen Ansichten",
|
||||
"Eine Seite, fünf Sektionen",
|
||||
"Kontaktformular",
|
||||
"Impressum & Datenschutz",
|
||||
"Mobilfreundlich & für Google optimiert",
|
||||
"DSGVO-konformes Kontaktformular",
|
||||
"Cookiefreies Analytics — ohne Abmahnrisiko",
|
||||
],
|
||||
buttonText: "Paket anfragen",
|
||||
buttonText: "Kostenloses Angebot anfordern",
|
||||
},
|
||||
{
|
||||
name: "Plus",
|
||||
badge: "Plus",
|
||||
monthlyPrice: "auf Anfrage",
|
||||
yearlyPrice: "auf Anfrage",
|
||||
name: "PROFI",
|
||||
badge: "1.499 € ⭐ Empfehlung",
|
||||
price: "1.499 €",
|
||||
features: [
|
||||
"Alles aus Basis plus mehr Seitenumfang",
|
||||
"Unterstuetzung bei Struktur und Textfeinschliff",
|
||||
"Grundlagen für SEO und schnelle Ladezeiten",
|
||||
"Korrekturschleifen mit klarer Abstimmung",
|
||||
"Bis zu 5 Unterseiten",
|
||||
"Google Maps Integration",
|
||||
"SEO-Basis (bessere Auffindbarkeit bei Google)",
|
||||
"Optionaler Blog",
|
||||
"DSGVO-konformes Kontaktformular",
|
||||
"Cookiefreies Analytics — ohne Abmahnrisiko",
|
||||
"Alles aus Basis inklusive",
|
||||
],
|
||||
buttonText: "Paket anfragen",
|
||||
},
|
||||
{
|
||||
name: "Komplett",
|
||||
badge: "Komplett",
|
||||
monthlyPrice: "auf Anfrage",
|
||||
yearlyPrice: "auf Anfrage",
|
||||
features: [
|
||||
"Alles aus Plus plus erweiterte Inhaltsstruktur",
|
||||
"Priorisierte Abstimmung waehrend der Umsetzung",
|
||||
"Optionales Pflegepaket für Updates und laufende Anpassungen",
|
||||
"Technische Basis fuer eine langfristig wartbare Website",
|
||||
],
|
||||
buttonText: "Paket anfragen",
|
||||
buttonText: "Kostenloses Angebot anfordern",
|
||||
isPopular: true,
|
||||
},
|
||||
{
|
||||
name: "MASSARBEIT",
|
||||
badge: "2.499 €",
|
||||
price: "2.499 €",
|
||||
features: [
|
||||
"Individuelles Design nach Ihren Wünschen",
|
||||
"CMS — Sie pflegen Inhalte selbst",
|
||||
"DSGVO-konformes Kontaktformular",
|
||||
"Cookiefreies Analytics — ohne Abmahnrisiko",
|
||||
"Alles aus Profi inklusive",
|
||||
],
|
||||
buttonText: "Kostenloses Angebot anfordern",
|
||||
},
|
||||
],
|
||||
className,
|
||||
}: Pricing4Props) => {
|
||||
const [isAnnually, setIsAnnually] = useState(false);
|
||||
const [isMonthly, setIsMonthly] = useState(false);
|
||||
return (
|
||||
<section className={cn("py-32", className)}>
|
||||
<div className="container mx-auto">
|
||||
@@ -87,9 +90,9 @@ const Pricing4 = ({
|
||||
{description}
|
||||
</p>
|
||||
<Tabs
|
||||
value={isAnnually ? "annually" : "monthly"}
|
||||
value={isMonthly ? "monthly" : "yearly"}
|
||||
onValueChange={(value: string) =>
|
||||
setIsAnnually(value === "annually")
|
||||
setIsMonthly(value === "monthly")
|
||||
}
|
||||
className="w-fit shrink-0"
|
||||
aria-label="Leistungsvariante"
|
||||
@@ -99,53 +102,119 @@ const Pricing4 = ({
|
||||
value="monthly"
|
||||
className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
|
||||
>
|
||||
Projekt
|
||||
Entwicklung
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="annually"
|
||||
value="yearly"
|
||||
className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
|
||||
>
|
||||
Projekt + Pflege
|
||||
Hosting & Wartung
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-stretch gap-6 md:flex-row">
|
||||
{plans.map((plan) => (
|
||||
<div
|
||||
key={plan.name}
|
||||
className={`flex w-full flex-col rounded-xl border shadow-sm p-6 text-left ${
|
||||
plan.isPopular ? "bg-muted" : ""
|
||||
}`}
|
||||
>
|
||||
<Badge className="mb-8 block w-fit uppercase">
|
||||
{plan.badge}
|
||||
</Badge>
|
||||
<h3 className="font-mono text-4xl lg:text-5xl">
|
||||
{isAnnually ? plan.yearlyPrice : plan.monthlyPrice}
|
||||
</h3>
|
||||
<p className="text-muted-foreground">
|
||||
{isAnnually
|
||||
? "Variante: Projekt + Pflege"
|
||||
: "Variante: Projekt"}
|
||||
</p>
|
||||
<Separator className="my-6" />
|
||||
<div className="flex h-full flex-col justify-between gap-20">
|
||||
<ul className="space-y-4 text-muted-foreground md:leading-snug">
|
||||
{plan.features.map((feature, featureIndex) => (
|
||||
<li
|
||||
key={featureIndex}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Check className="size-4 shrink-0" aria-hidden="true" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button className="w-full">{plan.buttonText}</Button>
|
||||
{isMonthly ? (
|
||||
plans.map((plan) => (
|
||||
<div
|
||||
key={plan.name}
|
||||
className={`flex w-full flex-col rounded-xl border shadow-sm p-6 text-left ${
|
||||
plan.isPopular ? "bg-muted" : ""
|
||||
}`}
|
||||
>
|
||||
<Badge className="mb-8 block w-fit uppercase">
|
||||
{plan.badge}
|
||||
</Badge>
|
||||
<h3 className="font-mono text-4xl lg:text-5xl">
|
||||
{plan.price}
|
||||
</h3>
|
||||
<p className="text-muted-foreground">Einmalpreis</p>
|
||||
<Separator className="my-6" />
|
||||
<div className="flex h-full flex-col justify-between gap-20">
|
||||
<ul className="space-y-4 text-muted-foreground md:leading-snug">
|
||||
{plan.features.map((feature, featureIndex) => (
|
||||
<li
|
||||
key={featureIndex}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Check className="size-4 shrink-0" aria-hidden="true" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button className="w-full">{plan.buttonText}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
[
|
||||
{
|
||||
name: "BASIC HOSTING",
|
||||
badge: "19 €/Monat",
|
||||
price: "19 €",
|
||||
features: [
|
||||
"Hosting auf deutschen Servern in Sachsen",
|
||||
"Grünes Schloss im Browser (SSL) — sicher & von Google bevorzugt",
|
||||
"Tägliche Backups — Ihre Daten sind immer geschützt",
|
||||
"Domain inklusive",
|
||||
"Monatlicher Einblick in Ihre Besucherzahlen",
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "WARTUNG",
|
||||
badge: "39 €/Monat ⭐ Empfehlung",
|
||||
price: "39 €",
|
||||
features: [
|
||||
"Alles aus Basic Hosting inklusive",
|
||||
"Regelmäßige Updates & Sicherheitschecks",
|
||||
"1 Stunde Support pro Monat",
|
||||
"Monitoring — ich merke bevor Sie es tun, wenn etwas nicht stimmt",
|
||||
"Wöchentlicher Einblick in Ihre Besucherzahlen",
|
||||
],
|
||||
isPopular: true,
|
||||
},
|
||||
{
|
||||
name: "FULL SERVICE",
|
||||
badge: "69 €/Monat",
|
||||
price: "69 €",
|
||||
features: [
|
||||
"Alles aus Wartung inklusive",
|
||||
"Kleinere Inhaltsänderungen (bis 2 Stunden/Monat)",
|
||||
"Täglicher Einblick in Ihre Besucherzahlen",
|
||||
],
|
||||
},
|
||||
].map((plan) => (
|
||||
<div
|
||||
key={plan.name}
|
||||
className={`flex w-full flex-col rounded-xl border shadow-sm p-6 text-left ${
|
||||
plan.isPopular ? "bg-muted" : ""
|
||||
}`}
|
||||
>
|
||||
<Badge className="mb-8 block w-fit uppercase">
|
||||
{plan.badge}
|
||||
</Badge>
|
||||
<h3 className="font-mono text-4xl lg:text-5xl">
|
||||
{plan.price}
|
||||
</h3>
|
||||
<p className="text-muted-foreground">Monatlicher Preis</p>
|
||||
<Separator className="my-6" />
|
||||
<div className="flex h-full flex-col justify-between gap-20">
|
||||
<ul className="space-y-4 text-muted-foreground md:leading-snug">
|
||||
{plan.features.map((feature, featureIndex) => (
|
||||
<li
|
||||
key={featureIndex}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Check className="size-4 shrink-0" aria-hidden="true" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button className="w-full">Kostenloses Angebot anfordern</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user