8-bit Hero 3

1"use client";
2 
3import Link from "next/link";
4 
5import type { ReactNode } from "react";
6import { useEffect, useState } from "react";
7 
8import { cn } from "@/lib/utils";
9 
10import { Badge } from "@/components/ui/8bit/badge";
11import { Button } from "@/components/ui/8bit/button";
12import {
13  Card,
14  CardContent,
15} from "@/components/ui/8bit/card";
16 
17import "@/components/ui/8bit/styles/retro.css";
18 
19interface HeroStat {
20  label: string;
21  value: string;
22}
23 
24interface HeroAction {
25  href?: string;
26  label: string;
27  onClick?: () => void;
28  variant?: "default" | "destructive" | "ghost" | "outline" | "secondary";
29}
30 
31interface Hero3Props {
32  actions?: HeroAction[];
33  children?: ReactNode;
34  className?: string;
35  description?: string;
36  stats?: HeroStat[];
37  subtitle?: string;
38  title: string;
39}
40 
41function BlinkingText({ children }: { children: ReactNode }) {
42  const [visible, setVisible] = useState(true);
43 
44  useEffect(() => {
45    const interval = setInterval(() => setVisible((v) => !v), 800);
46    return () => clearInterval(interval);
47  }, []);
48 
49  return (
50    <span className={visible ? "opacity-100" : "opacity-0"}>
51      {children}
52    </span>
53  );
54}
55 
56export default function Hero3({
57  title,
58  subtitle,
59  description,
60  actions = [],
61  stats = [],
62  className,
63  children,
64}: Hero3Props) {
65  const defaultStats: HeroStat[] = stats.length > 0 ? stats : [
66    { label: "COMPONENTS", value: "50+" },
67    { label: "GITHUB STARS", value: "1.7K" },
68    { label: "CONTRIBUTORS", value: "100+" },
69  ];
70 
71  return (
72    <section
73      className={cn(
74        "relative w-full overflow-hidden px-4 py-16 md:py-24",
75        className,
76      )}
77    >
78      {/* Scanline overlay */}
79      <div
80        aria-hidden="true"
81        className="pointer-events-none absolute inset-0 opacity-[0.03]"
82        style={{
83          backgroundImage:
84            "repeating-linear-gradient(0deg, transparent, transparent 2px, currentColor 2px, currentColor 3px)",
85        }}
86      />
87 
88      <div className="relative mx-auto max-w-4xl text-center">
89        {/* Subtitle badge */}
90        {subtitle && (
91          <div className="mb-6">
92            <Badge>{subtitle}</Badge>
93          </div>
94        )}
95 
96        {/* Title — large game-style */}
97        <h1 className="retro mb-6 font-bold text-4xl tracking-tight md:text-6xl lg:text-7xl">
98          {title}
99        </h1>
100 
101        {/* Description */}
102        {description && (
103// … truncated