Header 4

1/**
2 * Header 4 - Interactive 3D Grid Hero
3 *
4 * Inspired by the beautiful interactive grid design from rauno.me 2024 website.
5 * Features a 3D-perspective grid with customizable hover colors that respond
6 * to user interaction, creating an engaging and modern hero section.
7 *
8 * @see https://rauno.me
9 */
10 
11"use client";
12 
13import { ExternalLink } from "lucide-react";
14import { useEffect, useRef } from "react";
15import { AnimatedGroup, AnimatedText, Button, HeroHeader } from "@/components/smoothui/shared";
16import styles from "./hero-grid.module.css";
17 
18interface InteractiveGridProps {
19  hoverColors?: string | [string, string, string, string];
20}
21 
22const TOTAL_TILES = 1600;
23const INITIAL_TILE = 1;
24const TILES_TO_CLONE = TOTAL_TILES - INITIAL_TILE;
25 
26function InteractiveGrid({ hoverColors }: InteractiveGridProps) {
27  const containerRef = useRef<HTMLDivElement>(null);
28  const tileRef = useRef<HTMLDivElement>(null);
29 
30  useEffect(() => {
31    if (!(containerRef.current && tileRef.current)) {
32      return;
33    }
34 
35    // Clone the first tile to create a 40x40 grid (1600 tiles total)
36    for (let i = 0; i < TILES_TO_CLONE; i++) {
37      const clonedTile = tileRef.current.cloneNode(true);
38      containerRef.current.appendChild(clonedTile);
39    }
40  }, []);
41 
42  // Prepare CSS variables for hover colors
43  const style = hoverColors
44    ? {
45        "--hero-grid-hover-color-1": Array.isArray(hoverColors)
46          ? hoverColors[0]
47          : hoverColors,
48        "--hero-grid-hover-color-2": Array.isArray(hoverColors)
49          ? (hoverColors[1] ?? hoverColors[0])
50          : hoverColors,
51        "--hero-grid-hover-color-3": Array.isArray(hoverColors)
52          ? (hoverColors[2] ?? hoverColors[0])
53          : hoverColors,
54        "--hero-grid-hover-color-4": Array.isArray(hoverColors)
55          ? (hoverColors[3] ?? hoverColors[0])
56          : hoverColors,
57      }
58    : undefined;
59 
60  return (
61    <div
62      aria-hidden="true"
63      className={styles.gridContainer}
64      style={style as React.CSSProperties}
65    >
66      <div className={styles.mainGrid} ref={containerRef}>
67        <div className={styles.tile} ref={tileRef} />
68      </div>
69    </div>
70  );
71}
72 
73interface HeroGridProps {
74  hoverColors?: string | [string, string, string, string];
75}
76 
77export function HeroGrid({ hoverColors }: HeroGridProps) {
78  return (
79    <div className="relative">
80      <HeroHeader />
81      <main>
82        <section className="relative overflow-hidden py-36">
83// … truncated