Enhance Contact21, CTA, and Hero235 components with improved structure and localized content; update styles and accessibility features for better user experience.

src/components/cta.tsx

@@ -1,24 +1,68 @@
-import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const trustAnchors = [
+  {
+    title: "Direkter Kontakt",
+    description:
+      "Sie sprechen mit dem Menschen, der die Website auch plant und baut.",
+    note: "Keine Vertriebsrunde, keine unklaren Uebergaben.",
+  },
+  {
+    title: "15+ Jahre Erfahrung",
+    description:
+      "Webentwicklung und Software mit Fokus auf robuste, wartbare Loesungen.",
+    note: "Praxis statt Buzzwords und Technik nur dort, wo sie wirklich hilft.",
+  },
+  {
+    title: "Hosting in Sachsen",
+    description:
+      "Deutsche Server, DSGVO-konform und passend fuer regionale Unternehmen.",
+    note: "Greifbar, nachvollziehbar und ohne unnoetiges Zusatztheater.",
+  },
+];
 
 export default function CTASection() {
   return (
-    <section className="py-10 lg:py-16">
-      <div className="mx-auto max-w-5xl px-4">
-        <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">
-              Jetzt Website anfordern
-            </h2>
-            <p className="text-lg text-black/60">
-              Erzählen Sie mir kurz von Ihrem Unternehmen — ich melde mich innerhalb von 24 Stunden mit einem unverbindlichen Angebot.
-            </p>
-          </header>
-
-          {/* CTA Buttons */}
-          <div className="flex flex-wrap gap-4">
-            <Button size="lg">Anfrage senden</Button>
-          </div>
+    <section className="px-4 pb-16 pt-4 sm:px-6 lg:px-8 lg:pb-24">
+      <div className="mx-auto max-w-6xl border-y border-border/80 py-8 lg:grid lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.45fr)] lg:gap-12 lg:py-10">
+        <div className="max-w-md space-y-4">
+          <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+            Vertrauensanker
+          </p>
+          <h2 className="text-2xl font-semibold tracking-tight text-balance lg:text-3xl">
+            Ein ruhiger Startpunkt statt voller Versprechen.
+          </h2>
+          <p className="text-base leading-7 text-muted-foreground">
+            Noch bevor es um Pakete oder Features geht, soll direkt klar sein,
+            warum diese Zusammenarbeit fuer regionale Unternehmen greifbar und
+            verlaesslich wirkt.
+          </p>
         </div>
+        <dl className="mt-8 grid gap-6 sm:grid-cols-3 lg:mt-0 lg:gap-0">
+          {trustAnchors.map((item, index) => (
+            <div
+              key={item.title}
+              className={cn(
+                "space-y-3",
+                index === 0
+                  ? ""
+                  : "border-t border-border/70 pt-4 sm:border-t-0 sm:border-l sm:pl-6 sm:pt-0 lg:pl-8",
+              )}
+            >
+              <dt className="text-sm font-medium text-foreground">
+                {item.title}
+              </dt>
+              <dd className="space-y-2">
+                <p className="text-lg font-semibold leading-7 text-balance text-foreground">
+                  {item.description}
+                </p>
+                <p className="text-sm leading-6 text-muted-foreground">
+                  {item.note}
+                </p>
+              </dd>
+            </div>
+          ))}
+        </dl>
       </div>
     </section>
   );