light

src/components/SolutionSection.tsx

@@ -1,6 +1,8 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { ArrowRight, CheckCircle2 } from "lucide-react";
+import { LampTop } from "@/components/ui/lamp";
+import LightRays from "@/components/LightRays";
 
 const SolutionSection = () => {
   const benefits = [
@@ -10,8 +12,25 @@ const SolutionSection = () => {
   ];
 
   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="#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">
           {/* Left Content */}
           <div>