8-bit game-hero1

1import Link from "next/link";
2 
3import { cn } from "@/lib/utils";
4 
5import { Badge } from "@/components/ui/8bit/badge";
6import { Button } from "@/components/ui/8bit/button";
7import { Progress } from "@/components/ui/8bit/progress";
8 
9import "@/components/ui/8bit/styles/retro.css";
10 
11interface GameHero1Props {
12  actions?: Array<{
13    href?: string;
14    label: string;
15    variant?: "default" | "destructive" | "ghost" | "outline" | "secondary";
16  }>;
17  className?: string;
18  description?: string;
19  xpLabel?: string;
20  xpValue?: number;
21  subtitle?: string;
22  title: string;
23}
24 
25export default function GameHero1({
26  title = "LAUNCH SEQUENCE INITIATED",
27  subtitle = "v2.0 — Now Live",
28  description = "Your product is ready for battle. Ship it before the competition respawns.",
29  actions = [
30    { label: "DEPLOY NOW", variant: "default", href: "/docs" },
31    { label: "VIEW ARSENAL", variant: "outline", href: "/v2" },
32  ],
33  xpLabel = "XP to Next Level",
34  xpValue = 72,
35  className,
36}: GameHero1Props) {
37  return (
38    <section
39      className={cn("relative w-full px-4 py-16 md:py-24", className)}
40    >
41      <div className="mx-auto max-w-2xl text-center">
42        {subtitle && (
43          <div className="mb-6">
44            <Badge >{subtitle}</Badge>
45          </div>
46        )}
47 
48        <h1 className="retro mb-4 font-bold text-3xl tracking-tight md:text-5xl">
49          {title}
50        </h1>
51 
52        {description && (
53          <p className="mx-auto mb-8 max-w-lg text-muted-foreground retro text-[9px] leading-relaxed">
54            {description}
55          </p>
56        )}
57 
58        {actions.length > 0 && (
59          <div className="mb-8 flex flex-wrap justify-center gap-4">
60            {actions.map((action) =>
61              action.href ? (
62                <Button asChild key={action.label} variant={action.variant}>
63                  <Link href={action.href}>{action.label}</Link>
64                </Button>
65              ) : (
66                <Button key={action.label} variant={action.variant}>
67                  {action.label}
68                </Button>
69              ),
70            )}
71          </div>
72        )}
73 
74        {/* Health bar */}
75        <div className="mx-auto max-w-sm">
76          <div className="retro mb-2 flex justify-between text-[10px]">
77            <span>{xpLabel}</span>
78            <span>{xpValue}%</span>
79          </div>
80          <Progress className="h-3" value={xpValue} />
81        </div>
82      </div>
83    </section>
84  );
85}