imeges

src/components/CountUp.tsx

@@ -0,0 +1,128 @@
+import { useInView, useMotionValue, useSpring } from "motion/react";
+import { useCallback, useEffect, useRef } from "react";
+
+interface CountUpProps {
+  to: number;
+  from?: number;
+  direction?: "up" | "down";
+  delay?: number;
+  duration?: number;
+  className?: string;
+  startWhen?: boolean;
+  separator?: string;
+  suffix?: string;
+  prefix?: string;
+  padMinLength?: number;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
+export default function CountUp({
+  to,
+  from = 0,
+  direction = "up",
+  delay = 0,
+  duration = 2,
+  className = "",
+  startWhen = true,
+  separator = "",
+  suffix = "",
+  prefix = "",
+  padMinLength,
+  onStart,
+  onEnd,
+}: CountUpProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const motionValue = useMotionValue(direction === "down" ? to : from);
+
+  const damping = 20 + 40 * (1 / duration);
+  const stiffness = 100 * (1 / duration);
+
+  const springValue = useSpring(motionValue, {
+    damping,
+    stiffness,
+  });
+
+  const isInView = useInView(containerRef, { once: true, margin: "0px" });
+
+  const getDecimalPlaces = (num: number) => {
+    const str = num.toString();
+    if (str.includes(".")) {
+      const decimals = str.split(".")[1];
+      if (decimals && parseInt(decimals, 10) !== 0) {
+        return decimals.length;
+      }
+    }
+    return 0;
+  };
+
+  const maxDecimals = Math.max(getDecimalPlaces(from), getDecimalPlaces(to));
+
+  const formatValue = useCallback(
+    (latest: number) => {
+      if (padMinLength != null) {
+        const n = Math.round(latest);
+        return n.toString().padStart(padMinLength, "0");
+      }
+      const hasDecimals = maxDecimals > 0;
+      const options: Intl.NumberFormatOptions = {
+        useGrouping: !!separator,
+        minimumFractionDigits: hasDecimals ? maxDecimals : 0,
+        maximumFractionDigits: hasDecimals ? maxDecimals : 0,
+      };
+      let formattedNumber = Intl.NumberFormat("de-DE", options).format(latest);
+      if (separator) {
+        formattedNumber = formattedNumber.replace(/\s/g, separator);
+      }
+      return formattedNumber;
+    },
+    [maxDecimals, separator, padMinLength]
+  );
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.textContent = formatValue(direction === "down" ? to : from);
+    }
+  }, [from, to, direction, formatValue]);
+
+  useEffect(() => {
+    if (isInView && startWhen) {
+      if (typeof onStart === "function") onStart();
+
+      const timeoutId = setTimeout(() => {
+        motionValue.set(direction === "down" ? from : to);
+      }, delay * 1000);
+
+      const durationTimeoutId = setTimeout(
+        () => {
+          if (typeof onEnd === "function") onEnd();
+        },
+        delay * 1000 + duration * 1000
+      );
+
+      return () => {
+        clearTimeout(timeoutId);
+        clearTimeout(durationTimeoutId);
+      };
+    }
+  }, [isInView, startWhen, motionValue, direction, from, to, delay, onStart, onEnd, duration]);
+
+  useEffect(() => {
+    const unsubscribe = springValue.on("change", (latest) => {
+      if (ref.current) {
+        ref.current.textContent = formatValue(latest);
+      }
+    });
+
+    return () => unsubscribe();
+  }, [springValue, formatValue]);
+
+  return (
+    <span ref={containerRef} className={className}>
+      {prefix && <span>{prefix}</span>}
+      <span ref={ref} />
+      {suffix && <span>{suffix}</span>}
+    </span>
+  );
+}

src/components/DifferentiationSection.tsx

@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
+import CountUp from "@/components/CountUp";
 
 const DifferentiationSection = () => {
   return (
@@ -15,7 +16,9 @@ const DifferentiationSection = () => {
           
           <div className="grid md:grid-cols-3 gap-8 mb-12">
             <div className="p-6 border border-border rounded-lg bg-background">
-              <div className="text-4xl font-display font-medium text-foreground mb-2">01</div>
+              <div className="text-4xl font-display font-medium text-foreground mb-2">
+                <CountUp from={0} to={1} duration={1} padMinLength={2} startWhen={true} />
+              </div>
               <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                 Alles aus einer Hand
               </h3>
@@ -25,7 +28,9 @@ const DifferentiationSection = () => {
             </div>
             
             <div className="p-6 border border-border rounded-lg bg-background">
-              <div className="text-4xl font-display font-medium text-foreground mb-2">02</div>
+              <div className="text-4xl font-display font-medium text-foreground mb-2">
+                <CountUp from={0} to={2} duration={1} padMinLength={2} startWhen={true} />
+              </div>
               <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                 Systeme statt Inseln
               </h3>
@@ -35,7 +40,9 @@ const DifferentiationSection = () => {
             </div>
             
             <div className="p-6 border border-border rounded-lg bg-background">
-              <div className="text-4xl font-display font-medium text-foreground mb-2">03</div>
+              <div className="text-4xl font-display font-medium text-foreground mb-2">
+                <CountUp from={0} to={3} duration={1} padMinLength={2} startWhen={true} />
+              </div>
               <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                 Langfristige Partnerschaft
               </h3>

src/components/Header.tsx

@@ -41,7 +41,7 @@ const Header = () => {
             <Link to="/kontakt">
               <NavbarButton
                 as="span"
-                variant="primary"
+                variant="dark"
               >
                 Kontakt
               </NavbarButton>
@@ -84,7 +84,7 @@ const Header = () => {
               <Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
                 <NavbarButton
                   as="span"
-                  variant="primary"
+                  variant="dark"
                   className="block w-full text-center"
                 >
                   Kontakt

src/components/Hero.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { ArrowRight } from "lucide-react";
 import { useState, useEffect } from "react";
 import Silk from "@/components/Silk";
+import CountUp from "@/components/CountUp";
 
 const SPARKLE_SVG = (
   <svg className="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden>
@@ -88,11 +89,11 @@ const Hero = () => {
           </p>
 
           {/* CTA Buttons */}
-          <div className="flex flex-row flex-nowrap items-center gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
+          <div className="flex flex-col sm:flex-row flex-nowrap items-stretch sm:items-center gap-3 sm:gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
-            <div className="btn-wrapper shrink-0">
+            <div className="btn-wrapper shrink-0 w-full sm:w-auto">
               <button
                 type="button"
-                className="btn btn-primary"
+                className="btn btn-primary w-full sm:w-auto justify-center"
                 onClick={() => navigate("/kontakt")}
                 aria-label="Kostenlose Potenzialanalyse sichern"
               >
@@ -110,10 +111,10 @@ const Hero = () => {
                 </div>
               </button>
             </div>
-            <div className="btn-wrapper">
+            <div className="btn-wrapper w-full sm:w-auto">
               <button
                 type="button"
-                className="btn"
+                className="btn w-full sm:w-auto justify-center"
                 onClick={() => navigate("/kontakt")}
                 aria-label="System-Demo anfordern"
               >
@@ -145,7 +146,17 @@ const Hero = () => {
         <div className="divider mb-12" />
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
           <div className="animate-fade-in" style={{ animationDelay: '0.6s' }}>
-            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">10+</div>
+            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">
+              <CountUp
+                from={0}
+                to={10}
+                direction="up"
+                duration={1.2}
+                className="count-up-text"
+                startWhen={true}
+                suffix="+"
+              />
+            </div>
             <div className="label-tag">Projekte</div>
           </div>
           <div className="animate-fade-in" style={{ animationDelay: '0.7s' }}>
@@ -153,7 +164,17 @@ const Hero = () => {
             <div className="label-tag">Am Markt</div>
           </div>
           <div className="animate-fade-in" style={{ animationDelay: '0.8s' }}>
-            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">99,9%</div>
+            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">
+              <CountUp
+                from={0}
+                to={99.9}
+                direction="up"
+                duration={1.5}
+                className="count-up-text"
+                startWhen={true}
+                suffix="%"
+              />
+            </div>
             <div className="label-tag">Systemverfügbarkeit</div>
           </div>
           <div className="animate-fade-in" style={{ animationDelay: '0.9s' }}>

src/components/Process.tsx

@@ -1,22 +1,24 @@
+import CountUp from "@/components/CountUp";
+
 const Process = () => {
   const steps = [
     {
-      number: "01",
+      number: 1,
       title: "Erstgespräch",
       description: "Wir lernen Ihr Unternehmen und Ihre Ziele kennen. In einem unverbindlichen Gespräch besprechen wir Ihre Wünsche.",
     },
     {
-      number: "02",
+      number: 2,
       title: "Konzept & Design",
       description: "Basierend auf unserer Analyse erstellen wir ein individuelles Konzept und Design für Ihre Website.",
     },
     {
-      number: "03",
+      number: 3,
       title: "Entwicklung",
       description: "Unsere Entwickler setzen Ihre Website mit modernsten Technologien um. Sie bleiben informiert.",
     },
     {
-      number: "04",
+      number: 4,
       title: "Launch & Support",
       description: "Nach gründlichen Tests geht Ihre Website live. Wir stehen Ihnen auch danach mit Support zur Seite.",
     },
@@ -45,13 +47,22 @@ const Process = () => {
               {/* Number */}
               <div className="hidden md:block">
                 <span className="stat-number text-6xl text-border group-hover:text-muted-foreground/30 transition-colors">
-                  {step.number}
+                  <CountUp
+                    from={0}
+                    to={step.number}
+                    direction="up"
+                    duration={1}
+                    padMinLength={2}
+                    startWhen={true}
+                  />
                 </span>
               </div>
 
               {/* Content */}
               <div className="flex-1">
-                <span className="md:hidden label-tag mb-2 block">{step.number}</span>
+                <span className="md:hidden label-tag mb-2 block">
+                  <CountUp from={0} to={step.number} duration={1} padMinLength={2} startWhen={true} />
+                </span>
                 <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-4 uppercase tracking-tight">
                   {step.title}
                 </h3>

src/components/Values.tsx

@@ -35,8 +35,17 @@ const Values = () => {
   ];
 
   return (
-    <section id="features" className="py-24 md:py-32 bg-background relative">
+    <section id="features" className="py-24 md:py-32 bg-background relative overflow-hidden">
-      <div className="container mx-auto px-6">
+      {/* Hintergrundbild: kleiner, leicht transparent */}
+      <div
+        className="absolute inset-0 bg-right bg-no-repeat opacity-[0.3]"
+        style={{
+          backgroundImage: "url(/backgroud_effect.png)",
+          backgroundSize: "45%",
+        }}
+        aria-hidden
+      />
+      <div className="container mx-auto px-6 relative z-10">
         {/* Section Header */}
         <div className="mb-16 md:mb-24 max-w-3xl">
           <div className="label-tag mb-4">Was Sie bekommen</div>

src/components/ui/resizable-navbar.tsx

@@ -296,7 +296,7 @@ export const NavbarButton = ({
     primary:
       "bg-[hsl(198,93%,42%)] text-white border border-white/20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),inset_0_2px_2px_rgba(255,255,255,0.2),0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.15)] hover:border-white/40 hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.3),inset_0_2px_2px_rgba(255,255,255,0.25),0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.15)]",
     secondary: "bg-transparent shadow-none dark:text-white",
-    dark: "bg-black text-white shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]",
+    dark: "btn !text-white",
     gradient:
       "bg-gradient-to-b from-blue-500 to-blue-700 text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]",
   };

src/index.css

@@ -595,6 +595,19 @@
     animation: none;
   }
 
+  @media (max-width: 639px) {
+    .btn {
+      font-size: 0.9rem;
+      padding: 0.5em 0.9em;
+      gap: 0.4rem;
+    }
+    .btn-svg,
+    .btn-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
   /* Shared primary button look – for all blue/primary buttons */
   .btn-primary-style {
     padding: 0.5em 1.1em;
@@ -685,6 +698,23 @@
     line-height: 1;
   }
 
+  /* Count-up with gradient */
+  .count-up-text {
+    background: linear-gradient(135deg, hsl(0 0% 92%) 0%, hsl(0 0% 70%) 50%, hsl(0 0% 92%) 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .dark .count-up-text {
+    background: linear-gradient(135deg, hsl(0 0% 98%) 0%, hsl(0 0% 75%) 50%, hsl(0 0% 98%) 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
   /* Grid line decoration */
   .grid-lines {
     background-image: