Header 1

1"use client";
2 
3import { ExternalLink } from "lucide-react";
4import { useEffect, useRef, useState } from "react";
5import { AnimatedGroup, AnimatedText, Button, HeroHeader } from "@/components/smoothui/shared";
6import styles from "./hero-grid.module.css";
7 
8const CELL_SIZE = 120; // px
9const COLORS = [
10  "oklch(0.72 0.2 352.53)", // blue
11  "#A764FF",
12  "#4B94FD",
13  "#FD4B4E",
14  "#FF8743",
15];
16 
17function getRandomColor() {
18  return COLORS[Math.floor(Math.random() * COLORS.length)];
19}
20 
21function SubGrid() {
22  const [cellColors, setCellColors] = useState<(string | null)[]>([
23    null,
24    null,
25    null,
26    null,
27  ]);
28  // Add refs for leave timeouts
29  const leaveTimeouts = useRef<(NodeJS.Timeout | null)[]>([
30    null,
31    null,
32    null,
33    null,
34  ]);
35 
36  function handleHover(cellIdx: number) {
37    // Clear any pending timeout for this cell
38    const timeout = leaveTimeouts.current[cellIdx];
39    if (timeout) {
40      clearTimeout(timeout);
41      leaveTimeouts.current[cellIdx] = null;
42    }
43    setCellColors((prev) =>
44      prev.map((c, i) => (i === cellIdx ? getRandomColor() : c))
45    );
46  }
47  function handleLeave(cellIdx: number) {
48    // Add a small delay before removing the color
49    leaveTimeouts.current[cellIdx] = setTimeout(() => {
50      setCellColors((prev) => prev.map((c, i) => (i === cellIdx ? null : c)));
51      leaveTimeouts.current[cellIdx] = null;
52    }, 120);
53  }
54  // Cleanup on unmount
55  useEffect(
56    () => () => {
57      for (const t of leaveTimeouts.current) {
58        if (t) {
59          clearTimeout(t);
60        }
61      }
62    },
63    []
64  );
65 
66  return (
67    <div className={styles.subgrid} style={{ pointerEvents: "none" }}>
68      {[0, 1, 2, 3].map((cellIdx) => (
69        <button
70          className={styles.cell}
71          key={cellIdx}
72          onMouseEnter={() => handleHover(cellIdx)}
73          onMouseLeave={() => handleLeave(cellIdx)}
74          style={{
75            background: cellColors[cellIdx] || "transparent",
76            pointerEvents: "auto",
77          }}
78          type="button"
79        />
80      ))}
81    </div>
82  );
83}
84 
85function InteractiveGrid() {
86  const containerRef = useRef<HTMLDivElement>(null);
87  const [grid, setGrid] = useState({ columns: 0, rows: 0 });
88 
89  useEffect(() => {
90    function updateGrid() {
91      if (containerRef.current) {
92        const { width, height } = containerRef.current.getBoundingClientRect();
93        setGrid({
94          columns: Math.ceil(width / CELL_SIZE),
95          rows: Math.ceil(height / CELL_SIZE),
96// … truncated