CTA 04

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4import { ArrowUpRight, Book } from "lucide-react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/components/ui/button";
7import { LogoIcon } from "../social-icons/icons";
8 
9const GRID = 80;
10 
11const GridBackground = () => {
12  const ref = useRef<HTMLDivElement>(null);
13  const [grid, setGrid] = useState({ cols: 0, rows: 0, cellW: 0, cellH: 0 });
14 
15  useEffect(() => {
16    const update = () => {
17      if (!ref.current) return;
18      const { width, height } = ref.current.getBoundingClientRect();
19      const cols = Math.max(1, Math.round(width / GRID));
20      const rows = Math.max(1, Math.round(height / GRID));
21      setGrid({ cols, rows, cellW: width / cols, cellH: height / rows });
22    };
23    update();
24    window.addEventListener("resize", update);
25    return () => window.removeEventListener("resize", update);
26  }, []);
27 
28  const { cols, rows, cellW, cellH } = grid;
29  const total = cols * rows;
30 
31  return (
32    <div ref={ref} className="absolute inset-0 overflow-hidden">
33      {total > 0 && (
34        <div
35          className="h-full w-full"
36          style={{
37            display: "grid",
38            gridTemplateColumns: `repeat(${cols}, ${cellW}px)`,
39            gridTemplateRows: `repeat(${rows}, ${cellH}px)`,
40          }}
41        >
42          {Array.from({ length: total }).map((_, i) => (
43            <div key={i} className="border-r border-b border-white/6" />
44          ))}
45        </div>
46      )}
47    </div>
48  );
49};
50 
51interface Cta04Props {
52  title?: string;
53  description?: string;
54  buttons?: {
55    text: string;
56    url?: string;
57    icon?: React.ReactNode;
58    variant?: "default" | "outline" | "ghost" | "secondary" | "link";
59  }[];
60  icon?: React.ReactNode;
61  className?: string;
62}
63 
64const Cta04 = ({
65  title = "Ship faster. Build better.",
66  description = "Production-ready shadcn/ui blocks for your next project.",
67  icon = <LogoIcon className="size-6 invert" />,
68  buttons = [
69    {
70      text: "Get Started now",
71      url: "#",
72      icon: <ArrowUpRight className="size-4" />,
73      variant: "secondary",
74    },
75    {
76      text: "View Docs",
77      url: "#",
78      icon: <Book className="size-4" />,
79      variant: "outline",
80    },
81  ],
82  className,
83}: Cta04Props) => (
84  <section className={cn("w-full", className)}>
85    <div className="relative flex items-center justify-center overflow-hidden bg-zinc-950 py-16 text-white md:py-24 lg:py-32">
86      <GridBackground />
87// … truncated