Professionalize landing page design

src/components/stats11.tsx

@@ -5,59 +5,39 @@ interface Stats11Props {
 }
 
 const Stats11 = ({ className }: Stats11Props) => {
-  return (
-    <section className={cn("py-32", className)}>
-      <div className="container">
-        <div className="relative isolate overflow-hidden bg-linear-to-b from-primary/10 to-transparent md:border-x md:border-border">
-          <div className="absolute right-0 -left-px -z-20 h-full w-full bg-[linear-gradient(90deg,var(--muted-foreground)_1px,transparent_1px)] mask-[linear-gradient(transparent_25%,black_25%,black_75%,transparent_75%)] bg-size-[calc(100%/16)_100%] mask-size-[100%_16px] opacity-20 [-webkit-mask-image:linear-gradient(transparent_25%,black_25%,black_75%,transparent_75%)] [-webkit-mask-size:100%_16px]" />
+  const stats = [
+    ["SEO-ready", "Leistungsseiten, Region und Kontakt sauber strukturiert."],
+    ["< 1 Sek.", "Auf schnelle Ladezeiten und klare Technik ausgelegt."],
+    ["ab 799 €", "Transparente Einstiegspreise ohne Paketnebel."],
+    ["2 Wochen", "Typischer Zeitraum vom Startgespräch bis zur Vorschau."],
+  ];
 
+  return (
+    <section className={cn("px-4 py-20 sm:px-6 lg:px-8 lg:py-28", className)}>
+      <div className="mx-auto max-w-6xl">
+        <div className="rounded-lg border border-border bg-primary p-6 text-primary-foreground sm:p-8 lg:grid lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.45fr)] lg:gap-12 lg:p-10">
           <div>
-            <h2 className="mb-16 max-w-3xl text-3xl leading-10 font-semibold sm:mb-24 md:mx-10">
-              Für Google optimiert, schnell geladen und klar kalkulierbar.
-              <span className="font-medium text-primary/50">
-                {" "}
-                Genau die Zahlen, die bei einer Website wirklich zählen.
-              </span>
+            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary-foreground/65">
+              Messbare Grundlagen
+            </p>
+            <h2 className="mt-4 max-w-xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+              Gute Websites fühlen sich ruhig an, weil die Basis stimmt.
             </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">
-              <div className="absolute inset-0 top-[-1100px] -left-[calc(1000px-22vw)] -z-10 size-[1500px] rounded-full border border-primary bg-background sm:top-[-480%] sm:left-[-185%] sm:size-[2000px] md:top-[-906%] md:left-[-294%] md:size-[3500px] lg:top-[-1186%] lg:left-[-380%] lg:size-[4500px] xl:top-[-1200%] xl:left-[-350%] 2xl:top-[-1196%] 2xl:left-[-345%]"></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>
-                  SEO-ready
-                </span>
-                <p className="pl-5 font-medium text-muted-foreground/80">
-                  Für Google optimiert
+          </div>
+          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:mt-0">
+            {stats.map(([value, label]) => (
+              <div
+                key={value}
+                className="rounded-md border border-primary-foreground/15 bg-primary-foreground/[0.06] p-5"
+              >
+                <p className="text-3xl font-semibold tracking-tight">
+                  {value}
+                </p>
+                <p className="mt-3 text-sm leading-6 text-primary-foreground/72">
+                  {label}
                 </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>
-                  {"< 1 Sek."}
-                </span>
-                <p className="pl-5 font-medium text-muted-foreground/80">
-                  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>
-                  ab 799 €
-                </span>
-                <p className="pl-5 font-medium text-muted-foreground/80">
-                  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>
-                  2 Wochen
-                </span>
-                <p className="pl-5 font-medium text-muted-foreground/80">
-                  Bis zum Go-Live
-                </p>
-              </div>
-            </div>
+            ))}
           </div>
         </div>
       </div>