Update components with German translations and localized content; modify About19, Contact21, CTA, FAQ, Feature, Footer, Hero, Pricing, and Stats sections for improved clarity and user engagement.

src/components/pricing4.tsx

@@ -27,46 +27,48 @@ interface Pricing4Props {
 }
 
 const Pricing4 = ({
-  title = "Pricing",
-  description = "Check out our affordable pricing plans.",
+  title = "Pakete für Ihre Unternehmenswebsite",
+  description =
+    "Sie wählen den passenden Leistungsumfang. Preise nenne ich transparent im Angebot - abgestimmt auf Ziele, Inhalte und Umfang.",
   plans = [
     {
-      name: "Free",
-      badge: "Free",
-      monthlyPrice: "$0",
-      yearlyPrice: "$0",
+      name: "Basis",
+      badge: "Basis",
+      monthlyPrice: "auf Anfrage",
+      yearlyPrice: "auf Anfrage",
       features: [
-        "Unlimited Integrations",
-        "Windows, Linux, Mac support",
-        "24/7 Support",
-        "Free updates",
+        "Bis zu 5 Inhaltsseiten",
+        "Individuelles Design auf Basis Ihres Unternehmensauftritts",
+        "Kontaktformular und rechtliche Standardseiten",
+        "Responsive Umsetzung für alle geraetetypischen Ansichten",
       ],
-      buttonText: "Get Started",
+      buttonText: "Paket anfragen",
     },
     {
-      name: "Pro",
-      badge: "Pro",
-      monthlyPrice: "$29",
-      yearlyPrice: "$249",
+      name: "Plus",
+      badge: "Plus",
+      monthlyPrice: "auf Anfrage",
+      yearlyPrice: "auf Anfrage",
       features: [
-        "Everything in FREE",
-        "Live call support every month",
-        "Unlimited Storage",
+        "Alles aus Basis plus mehr Seitenumfang",
+        "Unterstuetzung bei Struktur und Textfeinschliff",
+        "Grundlagen für SEO und schnelle Ladezeiten",
+        "Korrekturschleifen mit klarer Abstimmung",
       ],
-      buttonText: "Purchase",
+      buttonText: "Paket anfragen",
     },
     {
-      name: "Elite",
-      badge: "Elite",
-      monthlyPrice: "$59",
-      yearlyPrice: "$549",
+      name: "Komplett",
+      badge: "Komplett",
+      monthlyPrice: "auf Anfrage",
+      yearlyPrice: "auf Anfrage",
       features: [
-        "Everything in PRO",
-        "Advanced analytics",
-        "Custom branding",
-        "Unlimited users",
+        "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: "Purchase",
+      buttonText: "Paket anfragen",
       isPopular: true,
     },
   ],
@@ -90,20 +92,20 @@ const Pricing4 = ({
                 setIsAnnually(value === "annually")
               }
               className="w-fit shrink-0"
-              aria-label="Billing period"
+              aria-label="Leistungsvariante"
             >
               <TabsList className="grid h-11 w-max grid-cols-2 gap-0 rounded-md p-1 text-lg">
                 <TabsTrigger
                   value="monthly"
                   className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
                 >
-                  Monthly
+                  Projekt
                 </TabsTrigger>
                 <TabsTrigger
                   value="annually"
                   className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
                 >
-                  Yearly
+                  Projekt + Pflege
                 </TabsTrigger>
               </TabsList>
             </Tabs>
@@ -122,10 +124,10 @@ const Pricing4 = ({
                 <h3 className="font-mono text-4xl lg:text-5xl">
                   {isAnnually ? plan.yearlyPrice : plan.monthlyPrice}
                 </h3>
-                <p
-                  className={`text-muted-foreground ${plan.monthlyPrice === "$0" ? "invisible" : ""}`}
-                >
-                  {isAnnually ? "Per year" : "Per month"}
+                <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">