CTA 03

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4import { cn } from "@/lib/utils";
5import { Button } from "@/components/ui/button";
6import { Input } from "@/components/ui/input";
7 
8const GRID = 80;
9 
10const GridBackground = () => {
11  const ref = useRef<HTMLDivElement>(null);
12  const [grid, setGrid] = useState({ cols: 0, rows: 0, cellW: 0, cellH: 0 });
13 
14  useEffect(() => {
15    const update = () => {
16      if (!ref.current) return;
17      const { width, height } = ref.current.getBoundingClientRect();
18      const cols = Math.max(1, Math.round(width / GRID));
19      const rows = Math.max(1, Math.round(height / GRID));
20      setGrid({ cols, rows, cellW: width / cols, cellH: height / rows });
21    };
22    update();
23    window.addEventListener("resize", update);
24    return () => window.removeEventListener("resize", update);
25  }, []);
26 
27  const { cols, rows, cellW, cellH } = grid;
28  const total = cols * rows;
29 
30  return (
31    <div ref={ref} className="absolute inset-0 overflow-hidden">
32      {total > 0 && (
33        <div
34          className="h-full w-full"
35          style={{
36            display: "grid",
37            gridTemplateColumns: `repeat(${cols}, ${cellW}px)`,
38            gridTemplateRows: `repeat(${rows}, ${cellH}px)`,
39          }}
40        >
41          {Array.from({ length: total }).map((_, i) => (
42            <div key={i} className="border-r border-b border-white/6" />
43          ))}
44        </div>
45      )}
46    </div>
47  );
48};
49 
50interface Cta03Props {
51  title?: string;
52  description?: string;
53  placeholder?: string;
54  submitText?: string;
55  className?: string;
56}
57 
58const Cta03 = ({
59  title = "Stay Updated",
60  description = "Subscribe to get the latest blocks, updates, and tips directly in your inbox.",
61  placeholder = "Enter your email",
62  submitText = "Subscribe",
63  className,
64}: Cta03Props) => (
65  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
66    <div className="relative overflow-hidden rounded-md bg-zinc-950 p-8 text-white md:p-12">
67      <GridBackground />
68      <div className="relative z-10 grid items-center gap-8 lg:grid-cols-2">
69        <div className="flex flex-col gap-4">
70          <h2 className="text-4xl leading-tight font-medium tracking-tight md:text-5xl">
71            {title}
72          </h2>
73          <p className="text-white/50 md:text-lg">{description}</p>
74        </div>
75        <div className="flex flex-col gap-4">
76          <div className="flex flex-col gap-4 lg:flex-row">
77            <Input
78// … truncated