hiehr

src/components/Values.tsx

@@ -1,59 +1,65 @@
-import { Shield, Clock, Lock, Zap } from "lucide-react";
+import { Users, Cog, MessageSquare, Target, BarChart3, Layers } from "lucide-react";
 
 const Values = () => {
-  const values = [
+  const features = [
     {
-      icon: Shield,
-      title: "Sicherheit",
-      description: "Höchste Datenschutzstandards und moderne Technologien schützen Ihre Daten.",
+      icon: Users,
+      title: "Digitale Kundenplattform",
+      description: "Verwalten Sie Kontakte, Anfragen und Projekte zentral.",
     },
     {
-      icon: Clock,
-      title: "Zuverlässigkeit",
-      description: "Stabile Systeme mit 99.9% Uptime für Ihren kontinuierlichen Erfolg.",
+      icon: Cog,
+      title: "Automatisierte Prozesse",
+      description: "Reduzieren Sie manuelle Arbeit drastisch.",
     },
     {
-      icon: Lock,
-      title: "Datenschutz",
-      description: "DSGVO-konforme Lösungen – Ihre Daten bleiben in Deutschland.",
+      icon: MessageSquare,
+      title: "Intelligente Kundenkommunikation",
+      description: "Keine Anfrage geht mehr verloren.",
     },
     {
-      icon: Zap,
-      title: "Performance",
-      description: "Blitzschnelle Ladezeiten für beste Nutzererfahrung und SEO.",
+      icon: Target,
+      title: "Planbare Neukundengewinnung",
+      description: "Strukturierte Funnels statt Zufall.",
+    },
+    {
+      icon: BarChart3,
+      title: "Echtzeit-Analytics",
+      description: "Treffen Sie Entscheidungen auf Basis klarer Daten.",
+    },
+    {
+      icon: Layers,
+      title: "Skalierbare Infrastruktur",
+      description: "Ihr System wächst mit Ihrem Unternehmen.",
     },
   ];
 
   return (
-    <section id="about" className="py-24 md:py-32 bg-secondary/20 relative">
+    <section id="features" 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 max-w-3xl">
-          <div className="label-tag mb-4">Über uns</div>
+          <div className="label-tag mb-4">Was Sie bekommen</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
+            Alles, was Ihr Unternehmen braucht. In einem System.
           </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 className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feature, index) => (
             <div
-              key={value.title}
-              className="group"
+              key={feature.title}
+              className="group p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
               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" />
+                <feature.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}
+                {feature.title}
               </h3>
               <p className="text-muted-foreground text-sm leading-relaxed">
-                {value.description}
+                {feature.description}
               </p>
             </div>
           ))}