Fix

src/components/marketing/HeroSpotlight.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React, { useState } from "react";
+
+export function HeroSpotlight({ children }: { children: React.ReactNode }) {
+  const [coords, setCoords] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - left) / width) * 100;
+    const y = ((e.clientY - top) / height) * 100;
+    setCoords({ x, y });
+  };
+
+  return (
+    <section 
+      className="relative overflow-hidden bg-white border-b border-slate-150 pb-20 pt-16"
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Grid Container - Handles the fade-out mask at the bottom */}
+      <div 
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          maskImage: 'radial-gradient(ellipse 60% 50% at 50% 0%, black 70%, transparent 100%)',
+          WebkitMaskImage: 'radial-gradient(ellipse 60% 50% at 50% 0%, black 70%, transparent 100%)',
+        }}
+      >
+        {/* Base Grid - light gray lines */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#cbd5e1_1px,transparent_1px),linear-gradient(to_bottom,#cbd5e1_1px,transparent_1px)] bg-[size:3.5rem_3.5rem] opacity-[0.35]" />
+        
+        {/* Active Grid - blue lines, only visible within 120px circle around cursor */}
+        <div 
+          className="absolute inset-0 bg-[linear-gradient(to_right,#3b82f6_1.5px,transparent_1.5px),linear-gradient(to_bottom,#3b82f6_1.5px,transparent_1.5px)] bg-[size:3.5rem_3.5rem] transition-opacity duration-300"
+          style={{
+            opacity: isHovered ? 1 : 0,
+            maskImage: `radial-gradient(120px circle at ${coords.x}% ${coords.y}%, black, transparent)`,
+            WebkitMaskImage: `radial-gradient(120px circle at ${coords.x}% ${coords.y}%, black, transparent)`,
+          }}
+        />
+      </div>
+      
+      <div className="relative z-10">
+        {children}
+      </div>
+    </section>
+  );
+}