H

src/components/Services.tsx

@@ -0,0 +1,71 @@
+import { Lightbulb, Palette, Code, Search } from "lucide-react";
+
+const Services = () => {
+  const services = [
+    {
+      icon: Lightbulb,
+      title: "Strategieberatung",
+      description: "Wir analysieren Ihre Ziele und erstellen ein maßgeschneidertes Konzept für Ihren digitalen Erfolg.",
+      number: "01",
+    },
+    {
+      icon: Palette,
+      title: "UX/UI Design",
+      description: "Modernes, benutzerfreundliches Design, das Ihre Marke perfekt repräsentiert.",
+      number: "02",
+    },
+    {
+      icon: Code,
+      title: "Entwicklung",
+      description: "Professionelle Webentwicklung mit modernsten Technologien. Schnell, sicher und skalierbar.",
+      number: "03",
+    },
+    {
+      icon: Search,
+      title: "SEO & Support",
+      description: "Suchmaschinenoptimierung und kontinuierlicher Support für langfristigen Erfolg.",
+      number: "04",
+    },
+  ];
+
+  return (
+    <section id="services" className="py-24 md:py-32 bg-background relative">
+      <div className="container mx-auto px-6">
+        {/* Section Header */}
+        <div className="mb-16 md:mb-24">
+          <div className="label-tag mb-4">Was wir tun</div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase">
+            Leistungen
+          </h2>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-px bg-border rounded-lg overflow-hidden">
+          {services.map((service) => (
+            <div
+              key={service.title}
+              className="group bg-background p-8 md:p-12 transition-all duration-500 hover:bg-secondary/30"
+            >
+              <div className="flex items-start justify-between mb-8">
+                <div className="w-12 h-12 rounded-full border border-border flex items-center justify-center group-hover:border-foreground/30 transition-colors">
+                  <service.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
+                </div>
+                <span className="text-5xl font-display font-medium text-border group-hover:text-muted-foreground/30 transition-colors">
+                  {service.number}
+                </span>
+              </div>
+              
+              <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-4 uppercase tracking-tight">
+                {service.title}
+              </h3>
+              <p className="text-muted-foreground leading-relaxed">
+                {service.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Services;