light

src/components/ProblemSection.tsx

@@ -1,4 +1,6 @@
 import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react";
+import { LampTop } from "@/components/ui/lamp";
+import LightRays from "@/components/LightRays";
 
 const ProblemSection = () => {
   const problems = [
@@ -21,8 +23,25 @@ const ProblemSection = () => {
   ];
 
   return (
-    <section className="py-24 md:py-32 bg-background relative">
-      <div className="container mx-auto px-6">
+    <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
+      <div className="absolute inset-0 w-full overflow-hidden z-0">
+        <LightRays
+          raysOrigin="top-center"
+          raysColor="#ef4444"
+          raysSpeed={1}
+          lightSpread={0.5}
+          rayLength={3}
+          followMouse={false}
+          mouseInfluence={0}
+          noiseAmount={0}
+          distortion={0}
+          pulsating
+          fadeDistance={2}
+          saturation={2}
+        />
+      </div>
+      <LampTop />
+      <div className="container mx-auto px-6 relative z-10">
         {/* Section Header */}
         <div className="mb-16 md:mb-20 max-w-4xl">
           <div className="label-tag mb-4">Das Problem</div>