big upgrade

src/components/Values.tsx

@@ -1,4 +1,6 @@
 import { Users, Cog, MessageSquare, Target, BarChart3, Layers } from "lucide-react";
+import BorderGlow from "@/components/BorderGlow";
+import { TextHoverEffect } from "@/components/ui/text-hover-effect";
 
 const Values = () => {
   const features = [
@@ -35,10 +37,14 @@ const Values = () => {
   ];
 
   return (
-    <section id="features" className="py-24 md:py-32 bg-background relative overflow-hidden">
+    <section id="features" className="pt-8 pb-0 md:pt-12 md:pb-0 bg-background relative overflow-hidden">
+      {/* TextHoverEffect */}
+      <div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">
+        <TextHoverEffect text="Leistungen" />
+      </div>
       {/* Hintergrundbild: auf Handy maximale Breite */}
       <div
-        className="values-section-bg absolute inset-0 bg-right bg-no-repeat opacity-[0.3]"
+        className="values-section-bg absolute inset-0 bg-right bg-no-repeat opacity-[0.3] pointer-events-none"
         style={{
           backgroundImage: "url(/backgroud_effect.png)",
         }}
@@ -55,21 +61,32 @@ const Values = () => {
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {features.map((feature, index) => (
-            <div
+            <BorderGlow
               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` }}
+              edgeSensitivity={30}
+              glowColor="40 80 80"
+              backgroundColor="hsl(0 0% 6%)"
+              borderRadius={8}
+              glowRadius={30}
+              glowIntensity={0.8}
+              coneSpread={25}
+              colors={['#c084fc', '#f472b6', '#38bdf8']}
             >
-              <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">
-                <feature.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
+              <div
+                className="group p-6"
+                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">
+                  <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">
+                  {feature.title}
+                </h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  {feature.description}
+                </p>
               </div>
-              <h3 className="text-xl font-display font-medium text-foreground mb-3 uppercase tracking-tight">
-                {feature.title}
-              </h3>
-              <p className="text-muted-foreground text-sm leading-relaxed">
-                {feature.description}
-              </p>
-            </div>
+            </BorderGlow>
           ))}
         </div>
       </div>