8-bit Hero 1

1import Link from "next/link";
2import type { ReactNode } from "react";
3 
4import { cn } from "@/lib/utils";
5 
6import { Badge } from "@/components/ui/8bit/badge";
7import { Button } from "@/components/ui/8bit/button";
8 
9import "@/components/ui/8bit/styles/retro.css";
10 
11interface HeroBadge {
12  label: string;
13  variant?: "default" | "destructive" | "outline" | "secondary";
14}
15 
16interface HeroAction {
17  href?: string;
18  label: string;
19  onClick?: () => void;
20  variant?: "default" | "destructive" | "ghost" | "outline" | "secondary";
21}
22 
23interface Hero1Props {
24  actions?: HeroAction[];
25  badges?: HeroBadge[];
26  children?: ReactNode;
27  className?: string;
28  description?: string;
29  subtitle?: string;
30  title: string;
31}
32 
33export default function Hero1({
34  title,
35  subtitle,
36  description,
37  actions = [],
38  badges = [],
39  className,
40  children,
41}: Hero1Props) {
42  return (
43    <section
44      className={cn(
45        "relative w-full overflow-hidden px-4 py-16 md:py-24",
46        className,
47      )}
48    >
49      {/* Scanline overlay */}
50      <div
51        aria-hidden="true"
52        className="pointer-events-none absolute inset-0 opacity-[0.03]"
53        style={{
54          backgroundImage:
55            "repeating-linear-gradient(0deg, transparent, transparent 2px, currentColor 2px, currentColor 3px)",
56        }}
57      />
58 
59      <div className="relative mx-auto max-w-4xl text-center">
60        {/* Badges */}
61        {badges.length > 0 && (
62          <div className="mb-6 flex flex-wrap justify-center gap-4">
63            {badges.map((badge) => (
64              <Badge key={badge.label} variant={badge.variant}>
65                {badge.label}
66              </Badge>
67            ))}
68          </div>
69        )}
70 
71        {/* Title */}
72        <h1 className="retro mb-4 font-bold text-3xl tracking-tight md:text-5xl lg:text-6xl">
73          {title}
74        </h1>
75 
76        {/* Subtitle */}
77        {subtitle && (
78          <p className="retro mb-4 text-muted-foreground text-xs md:text-sm">
79            {subtitle}
80          </p>
81        )}
82 
83        {/* Description */}
84        {description && (
85          <p className="mx-auto mb-8 max-w-2xl text-muted-foreground retro text-[9px] leading-relaxed">
86            {description}
87          </p>
88        )}
89 
90        {/* Actions */}
91        {actions.length > 0 && (
92          <div className="flex flex-wrap justify-center gap-4">
93            {actions.map((action) =>
94              action.href ? (
95// … truncated