8-bit Hero 2

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 Hero2Props {
24  actions?: HeroAction[];
25  badges?: HeroBadge[];
26  children?: ReactNode;
27  className?: string;
28  description?: string;
29  subtitle?: string;
30  title: string;
31  visual?: ReactNode;
32}
33 
34export default function Hero2({
35  title,
36  subtitle,
37  description,
38  actions = [],
39  badges = [],
40  className,
41  children,
42  visual,
43}: Hero2Props) {
44  return (
45    <section
46      className={cn(
47        "relative w-full overflow-hidden px-4 py-16 md:py-24",
48        className,
49      )}
50    >
51      <div className="relative mx-auto flex max-w-5xl flex-col gap-8 md:flex-row md:items-center md:gap-12">
52        {/* Text side */}
53        <div className="flex-1">
54          {/* Badges */}
55          {badges.length > 0 && (
56            <div className="mb-6 flex flex-wrap gap-4">
57              {badges.map((badge) => (
58                <Badge key={badge.label} variant={badge.variant}>
59                  {badge.label}
60                </Badge>
61              ))}
62            </div>
63          )}
64 
65          {/* Title */}
66          <h1 className="retro mb-4 font-bold text-3xl tracking-tight md:text-5xl">
67            {title}
68          </h1>
69 
70          {/* Subtitle */}
71          {subtitle && (
72            <p className="retro mb-4 text-muted-foreground text-xs md:text-sm">
73              {subtitle}
74            </p>
75          )}
76 
77          {/* Description */}
78          {description && (
79            <p className="mb-8 text-muted-foreground retro text-[9px] leading-relaxed">
80              {description}
81            </p>
82          )}
83 
84          {/* Actions */}
85          {actions.length > 0 && (
86            <div className="flex flex-wrap gap-4">
87              {actions.map((action) =>
88                action.href ? (
89                  <Button asChild key={action.label} variant={action.variant}>
90                    <Link href={action.href}>{action.label}</Link>
91                  </Button>
92                ) : (
93                  <Button
94// … truncated