8-bit Advanced 3

1import { cn } from "@/lib/utils";
2 
3import { Badge } from "@/components/ui/8bit/badge";
4import { Button } from "@/components/ui/8bit/button";
5import {
6  Card,
7  CardContent,
8} from "@/components/ui/8bit/card";
9import { Input } from "@/components/ui/8bit/input";
10 
11import "@/components/ui/8bit/styles/retro.css";
12 
13interface Advanced3Props {
14  badge?: string;
15  className?: string;
16  cta?: string;
17  description?: string;
18  placeholder?: string;
19  title?: string;
20}
21 
22export default function Advanced3({
23  title = "Join the Guild",
24  description = "Get notified when new components and blocks drop. No spam, just pixels.",
25  placeholder = "warrior@email.com",
26  cta = "SUBSCRIBE",
27  badge = "FREE",
28  className,
29}: Advanced3Props) {
30  return (
31    <section className={cn("w-full px-4 py-16", className)}>
32      <div className="mx-auto max-w-xl">
33        <Card>
34          <CardContent className="pt-8 pb-8">
35            <div className="text-center">
36              {badge && (
37                <div className="mb-4">
38                  <Badge>{badge}</Badge>
39                </div>
40              )}
41 
42              <h2 className="retro mb-3 font-bold text-2xl tracking-tight">
43                {title}
44              </h2>
45 
46              <p className="mx-auto mb-6 max-w-sm text-muted-foreground retro text-[9px] leading-relaxed">
47                {description}
48              </p>
49 
50              <div className="flex flex-col md:flex-row items-center gap-4">
51                <Input
52                  aria-label="Email address"
53                  autoComplete="email"
54                  className="retro flex-1 text-xs"
55                  name="email"
56                  placeholder={placeholder}
57                  type="email"
58                />
59                <Button className="text-xs">{cta}</Button>
60              </div>
61 
62              <p className="retro mt-3 text-muted-foreground text-[10px]">
63                No spam. Unsubscribe anytime.
64              </p>
65            </div>
66          </CardContent>
67        </Card>
68      </div>
69    </section>
70  );
71}