big upgrade

src/components/SolutionSection.tsx

@@ -1,10 +1,23 @@
 import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/button";
 import { ArrowRight, CheckCircle2 } from "lucide-react";
 import { LampTop } from "@/components/ui/lamp";
 import LightRays from "@/components/LightRays";
+import PixelBlast from "@/components/PixelBlast";
 
 const SolutionSection = () => {
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const isDark = mounted && resolvedTheme === "dark";
+  const isLight = mounted && resolvedTheme === "light";
+
   const benefits = [
     "Alle Prozesse greifen ineinander.",
     "Informationen fließen automatisch.",
@@ -13,6 +26,23 @@ const SolutionSection = () => {
 
   return (
     <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
+      {/* PixelBlast animated background - nur im Light Mode */}
+      {isLight && (
+        <div className="absolute inset-0 z-0 w-full h-full">
+          <PixelBlast
+            variant="circle"
+            pixelSize={3}
+            color="#06b6d4"
+            patternScale={7.75}
+            patternDensity={0.7}
+            pixelSizeJitter={2}
+            enableRipples={false}
+            speed={0.3}
+            edgeFade={0.5}
+            transparent
+          />
+        </div>
+      )}
       {/* Hintergrundbild mittig, auf Handy maximale Breite */}
       <div
         className="solution-section-bg absolute inset-0 bg-center bg-no-repeat opacity-[0.3] z-0"
@@ -21,22 +51,25 @@ const SolutionSection = () => {
         }}
         aria-hidden
       />
-      <div className="absolute inset-0 w-full overflow-hidden z-0">
-        <LightRays
-          raysOrigin="top-center"
-          raysColor="#22d3ee"
-          raysSpeed={1}
-          lightSpread={0.5}
-          rayLength={3}
-          followMouse={false}
-          mouseInfluence={0}
-          noiseAmount={0}
-          distortion={0}
-          pulsating
-          fadeDistance={2}
-          saturation={2}
-        />
-      </div>
+      {/* LightRays - nur im Dark Mode */}
+      {isDark && (
+        <div className="absolute inset-0 w-full overflow-hidden z-0">
+          <LightRays
+            raysOrigin="top-center"
+            raysColor="#22d3ee"
+            raysSpeed={1}
+            lightSpread={0.5}
+            rayLength={3}
+            followMouse={false}
+            mouseInfluence={0}
+            noiseAmount={0}
+            distortion={0}
+            pulsating
+            fadeDistance={2}
+            saturation={2}
+          />
+        </div>
+      )}
       <LampTop lineClassName="bg-cyan-400" />
       <div className="container mx-auto px-6 relative z-10">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
@@ -74,7 +107,7 @@ const SolutionSection = () => {
 
           {/* Right Content - Visual Element */}
           <div className="relative">
-            <div className="solution-section-tint aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
+            <div className="solution-section-tint aspect-square rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/[0.08] shadow-[0_8px_32px_rgba(0,0,0,0.12)] p-8 md:p-12 flex flex-col justify-center">
               <div className="space-y-6">
                 <div className="text-sm uppercase tracking-wider text-muted-foreground">Das Ergebnis</div>
                 <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground uppercase tracking-tight">