H

src/components/Values.tsx

@@ -0,0 +1,66 @@
+import { Shield, Clock, Lock, Zap } from "lucide-react";
+
+const Values = () => {
+  const values = [
+    {
+      icon: Shield,
+      title: "Sicherheit",
+      description: "Höchste Datenschutzstandards und moderne Technologien schützen Ihre Daten.",
+    },
+    {
+      icon: Clock,
+      title: "Zuverlässigkeit",
+      description: "Stabile Systeme mit 99.9% Uptime für Ihren kontinuierlichen Erfolg.",
+    },
+    {
+      icon: Lock,
+      title: "Datenschutz",
+      description: "DSGVO-konforme Lösungen – Ihre Daten bleiben in Deutschland.",
+    },
+    {
+      icon: Zap,
+      title: "Performance",
+      description: "Blitzschnelle Ladezeiten für beste Nutzererfahrung und SEO.",
+    },
+  ];
+
+  return (
+    <section id="about" className="py-24 md:py-32 bg-secondary/20 relative">
+      <div className="container mx-auto px-6">
+        {/* Section Header */}
+        <div className="mb-16 md:mb-24 max-w-3xl">
+          <div className="label-tag mb-4">Über uns</div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
+            Worauf wir Wert legen
+          </h2>
+          <p className="text-muted-foreground text-lg leading-relaxed">
+            Sicherheit ist für uns keine Nebensache, sondern die Grundlage jeder Website. 
+            Wir setzen auf moderne Technologien und höchste Datenschutzstandards.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {values.map((value, index) => (
+            <div
+              key={value.title}
+              className="group"
+              style={{ animationDelay: `${index * 0.1}s` }}
+            >
+              <div className="w-12 h-12 rounded-full border border-border flex items-center justify-center mb-6 group-hover:border-foreground/30 transition-colors">
+                <value.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
+              </div>
+              <h3 className="text-xl font-display font-medium text-foreground mb-3 uppercase tracking-tight">
+                {value.title}
+              </h3>
+              <p className="text-muted-foreground text-sm leading-relaxed">
+                {value.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Values;