8-bit CTA1

1import { cn } from "@/lib/utils";
2 
3import {
4  Card,
5  CardContent,
6  CardHeader,
7  CardTitle,
8} from "@/components/ui/8bit/card";
9 
10import "@/components/ui/8bit/styles/retro.css";
11 
12export interface ComparisonRow {
13  feature: string;
14  theirs: string;
15  yours: string;
16}
17 
18interface CTA1Props {
19  className?: string;
20  description?: string;
21  rows?: ComparisonRow[];
22  theirsLabel?: string;
23  title?: string;
24  yoursLabel?: string;
25}
26 
27const defaultRows: ComparisonRow[] = [
28  { feature: "Setup Time", yours: "2 minutes", theirs: "2 hours" },
29  { feature: "Customizable", yours: "+ Full source", theirs: "- Config only" },
30  { feature: "Dependencies", yours: "0 runtime", theirs: "5+ packages" },
31  { feature: "Dark Mode", yours: "+ Built-in", theirs: "- Manual" },
32  { feature: "Pixel Borders", yours: "+ Obviously", theirs: "- Nope" },
33  { feature: "Fun Factor", yours: "MAX", theirs: "Corporate" },
34];
35 
36export default function CTA1({
37  title = "Why Us?",
38  description = "Side-by-side. No fluff.",
39  yoursLabel = "8bitcn",
40  theirsLabel = "Others",
41  rows = defaultRows,
42  className,
43}: CTA1Props) {
44  return (
45    <section className={cn("w-full px-4 py-16", className)}>
46      <div className="mx-auto max-w-3xl">
47        {(title || description) && (
48          <div className="mb-10 text-center">
49            {title && (
50              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
51                {title}
52              </h2>
53            )}
54            {description && (
55              <p className="retro text-muted-foreground text-[9px]">{description}</p>
56            )}
57          </div>
58        )}
59 
60        <Card>
61          <CardHeader>
62            <div className="grid md:grid-cols-3 gap-4">
63              <CardTitle className="retro text-[10px] text-muted-foreground">
64                FEATURE
65              </CardTitle>
66              <CardTitle className="retro text-center text-xs text-primary">
67                {yoursLabel}
68              </CardTitle>
69              <CardTitle className="retro text-center text-xs text-muted-foreground">
70                {theirsLabel}
71              </CardTitle>
72            </div>
73          </CardHeader>
74          <CardContent>
75            <div className="flex flex-col divide-y">
76              {rows.map((row) => (
77                <div className="grid md:grid-cols-3 gap-4 py-3" key={row.feature}>
78                  <span className="text-xs font-medium">{row.feature}</span>
79// … truncated