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.

src/components/about19.tsx

@@ -20,34 +20,20 @@ const About19 = ({ className }: About19Props) => {
 
           <div className="col-span-3 ml-auto max-w-4xl space-y-15 lg:pl-15">
             <h1 className="text-2xl font-medium tracking-tight">
-              Ich bin Matthias Meister und begleite KMU auf dem Weg zu einem
+              Hallo, ich bin Matthias.
-              professionellen Online-Auftritt, der klar kommuniziert und
-              Vertrauen aufbaut.
             </h1>
             <p className="text-base text-foreground/40 lg:text-lg">
-              Mein Fokus liegt auf Websites, die nicht ueberladen wirken,
+              Ich bin in der Region aufgewachsen, war durch die Bundeswehr viele Jahre weg — und bin jetzt zurück. Und ich plane zu bleiben.
-              sondern Orientierung geben und den naechsten Kontakt einfach
+            </p>
-              machen.
+            <p className="text-base text-foreground/40 lg:text-lg">
+              Seit über 15 Jahren beschäftige ich mich mit Webentwicklung und Software. Einen Großteil davon intern für die Bundeswehr — Projekte die ich Ihnen leider nicht zeigen kann. Was ich Ihnen zeigen kann: Wie ich arbeite. Zuverlässig, präzise und ohne unnötigen Schnickschnack.
+            </p>
+            <p className="text-base text-foreground/40 lg:text-lg">
+              Neben Websites für regionale Unternehmen entwickle ich eigene Software und Apps. Das bedeutet: Wenn Ihre Anforderungen irgendwann über eine einfache Website hinausgehen, bin ich noch immer der richtige Ansprechpartner.
+            </p>
+            <p className="text-base text-foreground/40 lg:text-lg">
+              Mein Ziel ist es, Unternehmen aus der Region — Handwerker, Friseure, Ärzte — mit dem auszustatten, was Großstadtagenturen ihren Kunden für viel mehr Geld verkaufen. Eine Website die funktioniert, gefunden wird und Ihnen keine Kopfschmerzen macht.
             </p>
-            <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
-              <p className="flex-1 text-sm text-foreground/40">
-                Sie erhalten direkte Abstimmung, klare Schritte und eine
-                Umsetzung, die zu Ihrem Geschaeft passt.
-              </p>
-              <div className="flex w-fit items-center gap-2">
-                <img
-                  src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/avatar1.png"
-                  className="size-10"
-                  alt="avatr"
-                />
-                <div>
-                  <h3 className="font-medium tracking-tight">Matthias Meister</h3>
-                  <p className="text-sm text-foreground/40">
-                    Freelance Webdesigner
-                  </p>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>

src/components/contact21.tsx

@@ -73,9 +73,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
         <div className="mt-20 flex flex-col justify-between gap-15 md:gap-10 lg:flex-row">
           <div className="flex w-full max-w-lg flex-col justify-between gap-10">
             <p className="indent-[22%] text-3xl font-medium tracking-tight text-muted-foreground/50 lg:text-4xl">
-              Ich unterstuetze Unternehmen dabei, online professionell
+              Erzählen Sie mir kurz von Ihrem Unternehmen — ich melde mich innerhalb von 24 Stunden mit einem unverbindlichen Angebot.
-              aufzutreten. Schreiben Sie mir kurz, worum es geht.{" "}
-              <span className="text-foreground">Ich melde mich zeitnah</span>
             </p>
             <div className="mt-5 flex items-center gap-4 lg:mt-20">
               <img
@@ -95,24 +93,24 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
           </div>
           <div className="col-span-4 flex w-full flex-col gap-2 lg:pl-10">
             <h1 className="mb-7 text-6xl font-semibold tracking-tight lg:text-5xl">
-              Projekt anfragen
+              Jetzt Website anfordern
             </h1>
 
-            {isSubmitted && (
+                {isSubmitted && (
-              <div
+                  <div
-                className={cn(
+                    className={cn(
-                  "mb-4 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                      "mb-4 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
-                  showSuccess ? "opacity-100" : "opacity-0",
+                      showSuccess ? "opacity-100" : "opacity-0",
+                    )}
+                  >
+                    <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                      Vielen Dank! Ich melde mich in Kürze bei Ihnen.
+                    </p>
+                  </div>
                 )}
-              >
-                <p className="text-sm font-medium text-green-600 dark:text-green-400">
-                  Vielen Dank! Ich melde mich in Kuerze bei Ihnen.
-                </p>
-              </div>
-            )}
 
-            <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+                <form onSubmit={form.handleSubmit(handleFormSubmit)}>
-              <FieldGroup className="gap-0">
+                  <FieldGroup className="gap-0">
                 <Controller
                   control={form.control}
                   name="name"
@@ -125,7 +123,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
                         {...field}
                         id={field.name}
                         aria-invalid={fieldState.invalid}
-                        placeholder="Name*"
+                        placeholder="Ihr Name*"
                         className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
                       />
                       {fieldState.invalid && (
@@ -148,7 +146,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
                         id={field.name}
                         type="email"
                         aria-invalid={fieldState.invalid}
-                        placeholder="E-Mail*"
+                        placeholder="Ihre E-Mail*"
                         className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
                       />
                       {fieldState.invalid && (
@@ -170,7 +168,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
                         {...field}
                         id={field.name}
                         aria-invalid={fieldState.invalid}
-                        placeholder="Nachricht (Worum geht es bei Ihrem Projekt?)"
+                        placeholder="Nachricht: Worum geht es bei Ihrem Projekt?"
                         className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
                       />
                       {fieldState.invalid && (
@@ -198,7 +196,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
                   ) : (
                     <>
                       <CornerDownRight className="size-5" />
-                      Unverbindlich anfragen
+                      Anfrage senden
                     </>
                   )}
                 </Button>

src/components/cta.tsx

@@ -7,20 +7,16 @@ export default function CTASection() {
         <div className="rounded-2xl bg-linear-to-r bg-[url('https://images.unsplash.com/photo-1739785890803-7a2191a37ef5?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-bottom px-8 py-10 md:px-16 md:py-20">
           <header className="mb-8 max-w-2xl space-y-4">
             <h2 className="font-heading text-4xl leading-10 text-black lg:text-4xl">
-              Lassen Sie uns ueber Ihre neue Website sprechen
+              Jetzt Website anfordern
             </h2>
             <p className="text-lg text-black/60">
-              Ob Neuprojekt oder Redesign: Sie erhalten eine klare Empfehlung
+              Erzählen Sie mir kurz von Ihrem Unternehmen — ich melde mich innerhalb von 24 Stunden mit einem unverbindlichen Angebot.
-              und einen realistischen naechsten Schritt.
             </p>
           </header>
 
           {/* CTA Buttons */}
           <div className="flex flex-wrap gap-4">
-            <Button size="lg">Unverbindlich anfragen</Button>
+            <Button size="lg">Anfrage senden</Button>
-            <Button size="lg" variant="secondary">
-              Erstgespraech vereinbaren
-            </Button>
           </div>
         </div>
       </div>

src/components/faq7.tsx

@@ -9,29 +9,29 @@ import { cn } from "@/lib/utils";
 
 const faqs = [
   {
-    question: "Wie lange dauert die Umsetzung einer neuen Website?",
+    question: "Wie lange dauert es bis meine Website fertig ist?",
     answer:
-      "Das haengt vom Umfang ab. Nach einem kurzen Erstgespraech erhalten Sie einen klaren Ablauf mit realistischem Zeitrahmen.",
+      "In der Regel ist Ihre Website innerhalb von zwei Wochen fertig — vom ersten Gespräch bis zum Go-Live. Nach der Entwicklung bekommen Sie einen Vorschau-Link, damit Sie alles in Ruhe prüfen können. Erst wenn Sie zufrieden sind, geht die Seite online.",
   },
   {
-    question: "Unterstuetzen Sie auch bei Struktur und Texten?",
+    question: "Was passiert wenn ich das Hosting kündige?",
     answer:
-      "Ja. Ich helfe Ihnen dabei, Inhalte sinnvoll zu ordnen und Texte klar zu formulieren, damit Besucher schnell verstehen, was Sie anbieten.",
+      "Ihre Website und Ihre Domain gehören Ihnen — immer. Wenn Sie das Hosting kündigen, übertrage ich Ihnen alles ohne Wenn und Aber. Keine versteckten Abhängigkeiten, das ist vertraglich festgehalten.",
   },
   {
-    question: "Ist die Website auch auf dem Smartphone optimiert?",
+    question: "Ich habe schon eine Domain — was passiert damit?",
     answer:
-      "Ja. Jede Website wird responsive umgesetzt und auf gaengigen Bildschirmgroessen sauber dargestellt.",
+      "Kein Problem. Wir zeigen Ihre bestehende Domain einfach auf die neue Website um. Falls Sie möchten, kann ich die Domain auch zu mir umziehen — das macht die Verwaltung einfacher, ist aber kein Muss.",
   },
   {
-    question: "Wie laufen Korrekturen und Abstimmungen ab?",
+    question: "Brauche ich technisches Wissen?",
     answer:
-      "Wir stimmen zentrale Punkte frueh ab und arbeiten mit klaren Feedbackrunden, damit der Prozess planbar und effizient bleibt.",
+      "Keins. Sie kümmern Sie um Ihr Geschäft, ich um alles Technische. Von der Domain über die E-Mails bis zu Updates — das liegt bei mir.",
   },
   {
-    question: "Was kostet eine Website fuer mein Unternehmen?",
+    question: "Kümmern Sie sich auch um Impressum und Datenschutz?",
     answer:
-      "Die Kosten richten sich nach Ziel, Seitenumfang und gewuenschten Funktionen. Sie erhalten ein transparentes Angebot statt pauschaler Standardpreise.",
+      "Ja, jede Website die ich baue kommt mit einem rechtssicheren Impressum und einer DSGVO-konformen Datenschutzerklärung. Kein Cookie-Banner-Chaos, kein Abmahnrisiko.",
   },
 ];
 

src/components/footer27.tsx

@@ -49,18 +49,18 @@ const Footer27 = ({ className }: Footer27Props) => {
               viewport={{ once: true }}
               className="flex flex-col justify-between md:flex-row md:items-center"
             >
-              <div className="space-y-8">
+               <div className="space-y-8">
                 <motion.div variants={itemVariants} className="space-y-6">
                   <h2 className="text-4xl leading-tight font-bold text-foreground lg:text-5xl">
-                    Bereit fuer einen professionellen Webauftritt?
+                    Bereit für eine Website, die Kunden bringt?
                   </h2>
                   <p className="max-w-md text-lg leading-relaxed text-muted-foreground">
-                    Unverbindlich, klar und ohne Verkaufsdruck.
+                    Erzählen Sie mir kurz von Ihrem Unternehmen — ich melde mich innerhalb von 24 Stunden mit einem unverbindlichen Angebot.
                   </p>
                 </motion.div>
 
                 <motion.div variants={itemVariants}>
-                  <Button size="lg">Erstgespraech vereinbaren</Button>
+                  <Button size="lg">Kostenloses Angebot anfordern</Button>
                 </motion.div>
               </div>
 
@@ -105,29 +105,36 @@ const Footer27 = ({ className }: Footer27Props) => {
                 <Separator className="mb-8" />
               </motion.div>
 
-              <motion.div
+               <motion.div
-                variants={itemVariants}
+                 variants={itemVariants}
-                className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center"
+                 className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center"
-              >
+               >
-                <p className="text-sm text-muted-foreground">
+                 <p className="text-sm text-muted-foreground">
-                  © 2025 Matthias Meister. Alle Rechte vorbehalten.
+                   © 2025 Matthias Meister Webdesign — Crimmitschau
-                </p>
+                 </p>
 
-                <div className="flex items-center gap-6 text-sm">
+                 <div className="flex items-center gap-6 text-sm">
                   <span className="text-muted-foreground">
-                    Website von{" "}
+                    Kontakt:{" "}
-                    <motion.a
+                    <a href="mailto:info@matthias-meister-webdesign.de" className="underline underline-offset-4 transition-colors hover:text-foreground">
-                      href="#"
+                      info@matthias-meister-webdesign.de
-                      className="underline underline-offset-4 transition-colors hover:text-foreground"
+                    </a>
-                      whileHover={{ scale: 1.05 }}
+                  </span>
-                      transition={{
+                  <span className="text-muted-foreground">
-                        type: "spring",
+                    Tel:{" "}
-                        stiffness: 300,
+                    <a href="tel:037627984400" className="underline underline-offset-4 transition-colors hover:text-foreground">
-                        damping: 20,
+                      03762 798 4400
-                      }}
+                    </a>
-                    >
+                  </span>
-                      Matthias Meister
+                  <span className="text-muted-foreground">
-                    </motion.a>
+                    <a href="/impressum" className="underline underline-offset-4 transition-colors hover:text-foreground">
+                      Impressum
+                    </a>
+                  </span>
+                  <span className="text-muted-foreground">
+                    <a href="/datenschutz" className="underline underline-offset-4 transition-colors hover:text-foreground">
+                      Datenschutz
+                    </a>
                   </span>
                 </div>
               </motion.div>

src/components/hero235.tsx

@@ -1,4 +1,4 @@
-import { ArrowDown, BookOpen, LayoutGrid, Sparkles } from "lucide-react";
+import { ArrowDown } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -7,27 +7,6 @@ interface Hero235Props {
   className?: string;
 }
 
-const SERVICES = [
-  {
-    icon: Sparkles,
-    title: "Webdesign mit Klarheit",
-    description:
-      "Ein moderner Auftritt, der Ihr Unternehmen auf den ersten Blick professionell wirken laesst.",
-  },
-  {
-    icon: LayoutGrid,
-    title: "Struktur und Texte",
-    description:
-      "Ich unterstuetze bei Seitenstruktur und Inhalten, damit Besucher schnell verstehen, was Sie anbieten.",
-  },
-  {
-    icon: BookOpen,
-    title: "Pflege und Weiterentwicklung",
-    description:
-      "Auf Wunsch betreue ich Ihre Website weiter, halte Inhalte aktuell und passe Details laufend an.",
-  },
-];
-
 const Hero235 = ({ className }: Hero235Props) => {
   return (
     <section
@@ -60,42 +39,17 @@ const Hero235 = ({ className }: Hero235Props) => {
         <div className="flex flex-1 items-center justify-center">
           <div className="mx-auto flex max-w-4xl flex-col items-center text-center">
             <h1 className="text-4xl font-semibold tracking-tight text-balance text-foreground md:text-5xl lg:text-8xl">
-              Eine moderne Webseite kostet kein Vermögen.
+              Hallo, ich bin Matthias - ich baue Websites, die Kunden bringen.
             </h1>
             <p className="mt-8 max-w-xl text-pretty text-muted-foreground md:text-lg">
-              Ich gestalte klare Unternehmenswebsites, die Vertrauen aufbauen,
+              Moderne, blitzschnelle Auftritte für Handwerker, Friseure und Unternehmen aus der Region. Kein Agentur-Preisschild. Kein Overkill. Einfach eine Website, die funktioniert.
-              Ihre Leistungen verständlich zeigen und Anfragen einfacher
-              machen.
             </p>
             <Button size="lg" className="mt-10">
-              Projekt anfragen
+              Kostenloses Angebot
               <ArrowDown className="shrink-0" aria-hidden />
             </Button>
           </div>
         </div>
-        <div className="pt-16">
-          <div className="grid gap-12 lg:grid-cols-3 lg:gap-0">
-            {SERVICES.map((service) => {
-              const Icon = service.icon;
-              return (
-                <div
-                  key={service.title}
-                  className={cn(
-                    "flex flex-col border-l border-primary px-6 md:px-8",
-                  )}
-                >
-                  <Icon className="mb-4 size-6" aria-hidden />
-                  <h2 className="font-semibold text-foreground">
-                    {service.title}
-                  </h2>
-                  <p className="mt-2 text-sm text-muted-foreground">
-                    {service.description}
-                  </p>
-                </div>
-              );
-            })}
-          </div>
-        </div>
       </div>
     </section>
   );

src/components/pricing4.tsx

@@ -12,8 +12,8 @@ import { cn } from "@/lib/utils";
 interface PricingPlan {
   name: string;
   badge: string;
-  monthlyPrice: string;
+  price: string;
-  yearlyPrice: 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",
+      name: "BASIS",
-      badge: "Basis",
+      badge: "799 €",
-      monthlyPrice: "auf Anfrage",
+      price: "799 €",
-      yearlyPrice: "auf Anfrage",
       features: [
-        "Bis zu 5 Inhaltsseiten",
+        "Eine Seite, fünf Sektionen",
-        "Individuelles Design auf Basis Ihres Unternehmensauftritts",
+        "Kontaktformular",
-        "Kontaktformular und rechtliche Standardseiten",
+        "Impressum & Datenschutz",
-        "Responsive Umsetzung für alle geraetetypischen Ansichten",
+        "Mobilfreundlich & für Google optimiert",
+        "DSGVO-konformes Kontaktformular",
+        "Cookiefreies Analytics — ohne Abmahnrisiko",
       ],
-      buttonText: "Paket anfragen",
+      buttonText: "Kostenloses Angebot anfordern",
     },
     {
-      name: "Plus",
+      name: "PROFI",
-      badge: "Plus",
+      badge: "1.499 € ⭐ Empfehlung",
-      monthlyPrice: "auf Anfrage",
+      price: "1.499 €",
-      yearlyPrice: "auf Anfrage",
       features: [
-        "Alles aus Basis plus mehr Seitenumfang",
+        "Bis zu 5 Unterseiten",
-        "Unterstuetzung bei Struktur und Textfeinschliff",
+        "Google Maps Integration",
-        "Grundlagen für SEO und schnelle Ladezeiten",
+        "SEO-Basis (bessere Auffindbarkeit bei Google)",
-        "Korrekturschleifen mit klarer Abstimmung",
+        "Optionaler Blog",
+        "DSGVO-konformes Kontaktformular",
+        "Cookiefreies Analytics — ohne Abmahnrisiko",
+        "Alles aus Basis inklusive",
       ],
-      buttonText: "Paket anfragen",
+      buttonText: "Kostenloses Angebot anfordern",
-    },
-    {
-      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",
       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) => (
+            {isMonthly ? (
-              <div
+              plans.map((plan) => (
-                key={plan.name}
+                <div
-                className={`flex w-full flex-col rounded-xl border shadow-sm p-6 text-left ${
+                  key={plan.name}
-                  plan.isPopular ? "bg-muted" : ""
+                  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 className="mb-8 block w-fit uppercase">
-                </Badge>
+                    {plan.badge}
-                <h3 className="font-mono text-4xl lg:text-5xl">
+                  </Badge>
-                  {isAnnually ? plan.yearlyPrice : plan.monthlyPrice}
+                  <h3 className="font-mono text-4xl lg:text-5xl">
-                </h3>
+                    {plan.price}
-                <p className="text-muted-foreground">
+                  </h3>
-                  {isAnnually
+                  <p className="text-muted-foreground">Einmalpreis</p>
-                    ? "Variante: Projekt + Pflege"
+                  <Separator className="my-6" />
-                    : "Variante: Projekt"}
+                  <div className="flex h-full flex-col justify-between gap-20">
-                </p>
+                    <ul className="space-y-4 text-muted-foreground md:leading-snug">
-                <Separator className="my-6" />
+                      {plan.features.map((feature, featureIndex) => (
-                <div className="flex h-full flex-col justify-between gap-20">
+                        <li
-                  <ul className="space-y-4 text-muted-foreground md:leading-snug">
+                          key={featureIndex}
-                    {plan.features.map((feature, featureIndex) => (
+                          className="flex items-center gap-2"
-                      <li
+                        >
-                        key={featureIndex}
+                          <Check className="size-4 shrink-0" aria-hidden="true" />
-                        className="flex items-center gap-2"
+                          <span>{feature}</span>
-                      >
+                        </li>
-                        <Check className="size-4 shrink-0" aria-hidden="true" />
+                      ))}
-                        <span>{feature}</span>
+                    </ul>
-                      </li>
+                    <Button className="w-full">{plan.buttonText}</Button>
-                    ))}
+                  </div>
-                  </ul>
-                  <Button className="w-full">{plan.buttonText}</Button>
                 </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>

src/components/stats11.tsx

@@ -13,12 +13,10 @@ const Stats11 = ({ className }: Stats11Props) => {
 
           <div>
             <h2 className="mb-16 max-w-3xl text-3xl leading-10 font-semibold sm:mb-24 md:mx-10">
-              Eine gute Unternehmenswebsite braucht keinen Hype, sondern einen
+              Für Google optimiert, schnell geladen und klar kalkulierbar.
-              klaren Ablauf.
               <span className="font-medium text-primary/50">
                 {" "}
-                Von der Struktur bis zur Veroeffentlichung arbeite ich
+                Genau die Zahlen, die bei einer Website wirklich zählen.
-                transparent und nachvollziehbar.
               </span>
             </h2>
             <div className="relative grid max-w-2xl gap-4 border-x border-border pb-32 sm:grid-cols-2 sm:gap-10 sm:pb-44 md:ml-10 md:border-0">
@@ -26,37 +24,37 @@ const Stats11 = ({ className }: Stats11Props) => {
               <div className="flex flex-col gap-2">
                 <span className="flex gap-5 text-3xl font-semibold">
                   <span className="relative -left-px w-px bg-primary/50"></span>
-                  1
+                  SEO-ready
                 </span>
                 <p className="pl-5 font-medium text-muted-foreground/80">
-                  Ansprechpartner
+                  Für Google optimiert
                 </p>
               </div>
               <div className="flex flex-col gap-2">
                 <span className="flex gap-5 text-3xl font-semibold">
                   <span className="relative -left-px w-px bg-primary/50"></span>
-                  3
+                  {"< 1 Sek."}
                 </span>
                 <p className="pl-5 font-medium text-muted-foreground/80">
-                  Klare Schritte
+                  Ladezeit
                 </p>
               </div>
               <div className="flex flex-col gap-2">
                 <span className="flex gap-5 text-3xl font-semibold">
                   <span className="relative -left-px w-px bg-primary/50"></span>
-                  100 %
+                  ab 799 €
                 </span>
                 <p className="pl-5 font-medium text-muted-foreground/80">
-                  Responsive
+                  Transparenter Einmalpreis
                 </p>
               </div>
               <div className="flex flex-col gap-2">
                 <span className="flex gap-5 text-3xl font-semibold">
                   <span className="relative -left-px w-px bg-primary/50"></span>
-                  Klar
+                  2 Wochen
                 </span>
                 <p className="pl-5 font-medium text-muted-foreground/80">
-                  Angebot und Umfang
+                  Bis zum Go-Live
                 </p>
               </div>
             </div>

src/pages/index.astro

@@ -18,7 +18,7 @@ import "@/styles/global.css";
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    <title>Webdesign für KMU | Matthias Meister Webdesign</title>
+    <title>Matthias Meister Webdesign | Websites für KMU aus der Region</title>
     <script
       src="https://rybbit.matthias.lol/api/script.js"
       data-site-id="60abc81e438a"