big upgrade

src/components/Process.tsx

@@ -1,4 +1,6 @@
 import CountUp from "@/components/CountUp";
+import { TextHoverEffect } from "@/components/ui/text-hover-effect";
+import PixelBlast from "@/components/PixelBlast";
 
 const Process = () => {
   const steps = [
@@ -25,14 +27,37 @@ const Process = () => {
   ];
 
   return (
-    <section id="process" className="py-24 md:py-32 bg-secondary/20 relative">
-      <div className="container mx-auto px-6">
+    <section id="process" className="pt-8 pb-24 md:pt-12 md:pb-32 bg-secondary/20 relative">
+      {/* PixelBlast animated background */}
+      <div className="absolute inset-0 z-0 w-full h-full">
+        <PixelBlast
+          variant="circle"
+          pixelSize={3}
+          color="#5b5b5b"
+          patternScale={7.75}
+          patternDensity={0.7}
+          pixelSizeJitter={2}
+          enableRipples={false}
+          rippleSpeed={0.4}
+          rippleThickness={0.12}
+          rippleIntensityScale={1.5}
+          liquid={false}
+          liquidStrength={0.12}
+          liquidRadius={1.2}
+          liquidWobbleSpeed={5}
+          speed={0.3}
+          edgeFade={0.5}
+          transparent
+        />
+      </div>
+      {/* TextHoverEffect */}
+      <div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">
+        <TextHoverEffect text="Ablauf" />
+      </div>
+      <div className="container mx-auto px-6 relative z-10">
         {/* Section Header */}
-        <div className="mb-16 md:mb-24">
+        <div className="mb-4">
           <div className="label-tag mb-4">So arbeiten wir</div>
-          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase">
-            Ablauf
-          </h2>
         </div>
 
         <div className="max-w-4xl">