8-bit game-cta1

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 {
8  Card,
9  CardContent,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/8bit/card";
13 
14import "@/components/ui/8bit/styles/retro.css";
15 
16interface GameCTA1Props {
17  bossDescription?: string;
18  bossTitle?: string;
19  className?: string;
20  ctaHref?: string;
21  ctaLabel?: string;
22  description?: string;
23  powerUpDescription?: string;
24  powerUpTitle?: string;
25  title?: string;
26}
27 
28export default function GameCTA1({
29  title = "Face the Final Boss",
30  description = "Every builder faces the same enemy. Here is your power-up.",
31  bossTitle = "THE PROBLEM",
32  bossDescription = "Building landing pages from scratch. Hours of layout work. Generic templates that all look the same. Wasted time.",
33  powerUpTitle = "THE POWER-UP",
34  powerUpDescription = "27 copy-paste blocks. Retro aesthetic that stands out. Dark mode built-in. Ship in minutes, not days.",
35  ctaLabel = "EQUIP POWER-UP",
36  ctaHref = "/docs",
37  className,
38}: GameCTA1Props) {
39  return (
40    <section className={cn("w-full px-4 py-16", className)}>
41      <div className="mx-auto max-w-3xl">
42        {(title || description) && (
43          <div className="mb-10 text-center">
44            {title && (
45              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
46                {title}
47              </h2>
48            )}
49            {description && (
50              <p className="retro text-muted-foreground text-[9px]">{description}</p>
51            )}
52          </div>
53        )}
54 
55        <div className="grid gap-x-4 gap-y-1 md:grid-cols-2">
56          {/* Boss */}
57          <Card>
58            <CardHeader className="pb-2">
59              <Badge variant="destructive">{bossTitle}</Badge>
60              <CardTitle className="retro mt-2 text-sm">The Boss</CardTitle>
61            </CardHeader>
62            <CardContent>
63              <p className="text-muted-foreground retro text-[9px] leading-relaxed">
64                {bossDescription}
65              </p>
66            </CardContent>
67          </Card>
68 
69          {/* Power-up */}
70          <Card className="border-primary">
71            <CardHeader className="pb-2">
72              <Badge>{powerUpTitle}</Badge>
73              <CardTitle className="retro mt-2 text-sm">Your Weapon</CardTitle>
74            </CardHeader>
75            <CardContent>
76// … truncated