feat: added animation to hero section

app/globals.css

@@ -115,3 +115,182 @@ body {
     from { opacity: 0; }
     to { opacity: 1; }
 }
+
+/* ── Interactive Glass Cracks ── */
+
+/* Dim overlay — darkens hero as cracks accumulate */
+.crack-dim-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 29;
+    pointer-events: none;
+    background: radial-gradient(
+        ellipse 120% 100% at 50% 50%,
+        rgba(5, 0, 12, 0.6) 0%,
+        rgba(10, 0, 25, 0.85) 100%
+    );
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+}
+
+/* Subtle glass sheen overlay */
+.glass-pane {
+    position: absolute;
+    inset: 0;
+    z-index: 30;
+    pointer-events: none;
+    background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.025) 0%,
+        transparent 35%,
+        rgba(255, 255, 255, 0.012) 55%,
+        transparent 100%
+    );
+}
+
+/* SVG canvas for persistent crack lines */
+.crack-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 31;
+    pointer-events: none;
+    overflow: visible;
+}
+
+/* Base crack line — responsive via media queries */
+.crack-line {
+    fill: none;
+    stroke: rgba(235, 225, 255, 0.98);
+    stroke-width: 1.5;
+    stroke-linecap: square;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 12;
+    filter: drop-shadow(0 0 7px rgba(150, 90, 255, 0.85))
+            drop-shadow(0 0 4px rgba(255, 255, 255, 0.7))
+            drop-shadow(0 0 16px rgba(170, 100, 255, 0.35))
+            drop-shadow(0 0 24px rgba(130, 70, 220, 0.25));
+}
+
+/* Inner core line to add visible thickness down the middle */
+.crack-core-line {
+    fill: none;
+    stroke: rgba(255, 252, 255, 1);
+    stroke-width: 0.9;
+    stroke-linecap: square;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 12;
+    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8))
+            drop-shadow(0 0 14px rgba(190, 130, 255, 0.45));
+}
+
+/* Main (thickest) crack per click — strong glow */
+.crack-main {
+    stroke: rgba(235, 220, 255, 1);
+    stroke-width: 2.5;
+    filter: drop-shadow(0 0 10px rgba(120, 60, 200, 0.95))
+            drop-shadow(0 0 4px rgba(255, 255, 255, 0.7))
+            drop-shadow(0 0 22px rgba(90, 0, 170, 0.55))
+            drop-shadow(0 0 36px rgba(170, 80, 255, 0.25));
+}
+
+/* Secondary branches */
+.crack-branch {
+    fill: none;
+    stroke: rgba(190, 170, 240, 0.6);
+    stroke-width: 0.9;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    filter: drop-shadow(0 0 4px rgba(120, 60, 200, 0.6))
+            drop-shadow(0 0 8px rgba(160, 90, 255, 0.25));
+}
+
+/* Branches off the main crack */
+.crack-main-branch {
+    stroke: rgba(220, 205, 255, 0.75);
+    stroke-width: 1.3;
+    filter: drop-shadow(0 0 6px rgba(120, 60, 200, 0.75))
+            drop-shadow(0 0 3px rgba(255, 255, 255, 0.35))
+            drop-shadow(0 0 14px rgba(170, 80, 255, 0.25));
+}
+
+/* Concentric ring fragments */
+.crack-ring {
+    fill: none;
+    stroke: rgba(170, 150, 220, 0.45);
+    stroke-width: 0.7;
+    stroke-linecap: round;
+    filter: drop-shadow(0 0 3px rgba(98, 0, 155, 0.35))
+            drop-shadow(0 0 6px rgba(140, 80, 220, 0.15));
+}
+
+/* Yellow impact flash circle */
+.crack-impact {
+    fill: none;
+    stroke: rgba(255, 238, 0, 0.55);
+    stroke-width: 1.5;
+    filter: drop-shadow(0 0 10px rgba(255, 238, 0, 0.4))
+            drop-shadow(0 0 20px rgba(255, 200, 0, 0.2));
+}
+
+/* Radial glow blob at impact center */
+.crack-center-glow {
+    pointer-events: none;
+    mix-blend-mode: screen;
+    opacity: 0;
+}
+
+.crack-center-core {
+    fill: rgba(250, 245, 255, 0.9);
+    stroke: rgba(195, 145, 255, 0.95);
+    stroke-width: 1.1;
+    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7))
+            drop-shadow(0 0 16px rgba(170, 90, 255, 0.45));
+}
+
+/* Persistent glow chip at each impact point */
+.crack-glow {
+    fill: rgba(210, 190, 255, 0.6);
+    filter: drop-shadow(0 0 5px rgba(98, 0, 155, 0.7))
+            drop-shadow(0 0 10px rgba(140, 80, 220, 0.4))
+            drop-shadow(0 0 3px rgba(255, 238, 0, 0.15));
+}
+
+/* ── Cursor-Following Cracks ── */
+.cursor-crack-line {
+    fill: none;
+    filter: drop-shadow(0 0 5px rgba(150, 90, 255, 0.7))
+            drop-shadow(0 0 10px rgba(190, 130, 255, 0.3));
+}
+
+/* ── Responsive crack scaling via stroke-width ── */
+@media (min-width: 768px) {
+    .crack-line { stroke-width: 1.8; }
+    .crack-core-line { stroke-width: 1.1; }
+    .crack-main { stroke-width: 3; }
+    .crack-branch { stroke-width: 1.1; }
+    .crack-main-branch { stroke-width: 1.6; }
+    .crack-ring { stroke-width: 0.9; }
+    .crack-impact { stroke-width: 2; }
+}
+
+@media (min-width: 1280px) {
+    .crack-line { stroke-width: 2.2; }
+    .crack-core-line { stroke-width: 1.35; }
+    .crack-main { stroke-width: 3.5; }
+    .crack-branch { stroke-width: 1.3; }
+    .crack-main-branch { stroke-width: 1.8; }
+    .crack-ring { stroke-width: 1.1; }
+    .crack-impact { stroke-width: 2.5; }
+}
+
+@media (min-width: 1920px) {
+    .crack-line { stroke-width: 2.8; }
+    .crack-core-line { stroke-width: 1.65; }
+    .crack-main { stroke-width: 4.2; }
+    .crack-branch { stroke-width: 1.6; }
+    .crack-main-branch { stroke-width: 2.2; }
+    .crack-ring { stroke-width: 1.3; }
+    .crack-impact { stroke-width: 3; }
+}

components/CursorCracks/index.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useRef, RefObject } from "react";
+
+interface Props {
+  targetRef: RefObject<HTMLDivElement | null>;
+}
+
+export default function CursorGeometry({ targetRef }: Props) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const groupRef = useRef<SVGGElement>(null);
+
+  useEffect(() => {
+    const target = targetRef.current;
+    const svg = svgRef.current;
+    const group = groupRef.current;
+    if (!target || !svg || !group) return;
+
+    const handler = (e: MouseEvent) => {
+      const rect = target.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      /* Move the group to follow cursor */
+      group.setAttribute("transform", `translate(${x} ${y})`);
+    };
+
+    target.addEventListener("mousemove", handler);
+    return () => target.removeEventListener("mousemove", handler);
+  }, [targetRef]);
+
+  /* Sync viewBox on mount and resize */
+  useEffect(() => {
+    const svg = svgRef.current;
+    const target = targetRef.current;
+    if (!svg || !target) return;
+
+    const update = () => {
+      const rect = target.getBoundingClientRect();
+      svg.setAttribute("viewBox", `0 0 ${rect.width} ${rect.height}`);
+    };
+    update();
+
+    const ro = new ResizeObserver(update);
+    ro.observe(target);
+    return () => ro.disconnect();
+  }, [targetRef]);
+
+  return (
+    <svg
+      ref={svgRef}
+      className="cursor-geometry-svg"
+      style={{
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        zIndex: 32,
+        pointerEvents: "none",
+        overflow: "visible",
+      }}
+    >
+      <g ref={groupRef} className="cursor-geometry-group">
+        {/* Zig-zag glowing line */}
+        <polyline
+          points="0,-10 4,-6 -3,-1 5,2 -4,6 6,10 -2,14 4,18"
+          stroke="rgba(230, 200, 255, 0.9)"
+          strokeWidth="1"
+          fill="none"
+          strokeLinecap="square"
+          strokeLinejoin="miter"
+          style={{
+            filter:
+              "drop-shadow(0 0 5px rgba(200, 150, 255, 0.7)) drop-shadow(0 0 12px rgba(180, 100, 255, 0.4))",
+          }}
+        />
+      </g>
+    </svg>
+  );
+}