H

src/components/Hero.tsx

@@ -0,0 +1,78 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+
+const Hero = () => {
+  return (
+    <section className="relative min-h-screen flex flex-col justify-center bg-background overflow-hidden pt-20">
+      {/* Subtle grid lines */}
+      <div className="absolute inset-0 grid-lines opacity-30" />
+      
+      <div className="container mx-auto px-6 relative z-10">
+        <div className="max-w-6xl">
+          {/* Label */}
+          <div className="label-tag mb-8 animate-fade-in" style={{ animationDelay: '0.1s' }}>
+            Webentwicklung & Design
+          </div>
+
+          {/* Main Heading - Large Uppercase */}
+          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-display font-medium text-foreground mb-8 leading-[0.95] tracking-tighter uppercase animate-slide-up" style={{ animationDelay: '0.2s' }}>
+            Wir gestalten<br />
+            <span className="text-muted-foreground">digitale</span><br />
+            Erlebnisse
+          </h1>
+
+          {/* Subtitle */}
+          <p className="text-lg md:text-xl text-muted-foreground max-w-xl mb-12 animate-fade-in" style={{ animationDelay: '0.4s' }}>
+            Maßgeschneiderte Webentwicklung für Unternehmen, die sich von der Masse abheben wollen. Strategie, Design & Entwicklung aus einer Hand.
+          </p>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 animate-fade-in" style={{ animationDelay: '0.5s' }}>
+            <Link to="/kontakt">
+              <Button
+                size="lg"
+                className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
+              >
+                Projekt starten
+                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+              </Button>
+            </Link>
+            <Button
+              size="lg"
+              variant="outline"
+              className="btn-outline rounded-full px-8 py-6 text-base font-medium"
+            >
+              Projekte ansehen
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Stats Row */}
+      <div className="container mx-auto px-6 mt-auto pb-12 pt-20 relative z-10">
+        <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">50+</div>
+            <div className="label-tag">Projekte</div>
+          </div>
+          <div className="animate-fade-in" style={{ animationDelay: '0.7s' }}>
+            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">8+</div>
+            <div className="label-tag">Jahre Erfahrung</div>
+          </div>
+          <div className="animate-fade-in" style={{ animationDelay: '0.8s' }}>
+            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">40+</div>
+            <div className="label-tag">Kunden</div>
+          </div>
+          <div className="animate-fade-in" style={{ animationDelay: '0.9s' }}>
+            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">100%</div>
+            <div className="label-tag">Zufriedenheit</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;