8-bit Feature 2

1import type { ReactNode } from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import { Badge } from "@/components/ui/8bit/badge";
6import { Separator } from "@/components/ui/8bit/separator";
7 
8import "@/components/ui/8bit/styles/retro.css";
9 
10export interface FeatureRow {
11  badge?: string;
12  description: string;
13  icon: ReactNode;
14  title: string;
15}
16 
17interface Feature2Props {
18  className?: string;
19  description?: string;
20  items?: FeatureRow[];
21  title?: string;
22}
23 
24const defaultItems: FeatureRow[] = [
25  {
26    icon: "01",
27    title: "Create Your Character",
28    description:
29      "Pick a class, customize your stats, and choose your starting gear. Every decision shapes your journey.",
30  },
31  {
32    icon: "02",
33    title: "Explore the World",
34    description:
35      "16 handcrafted biomes with secrets hidden in every corner. No procedural filler — just pure design.",
36  },
37  {
38    icon: "03",
39    title: "Battle Enemies",
40    description:
41      "Turn-based combat with a combo system that rewards skill. Chain attacks for devastating finishers.",
42    badge: "ENHANCED",
43  },
44  {
45    icon: "04",
46    title: "Collect Loot",
47    description:
48      "Over 200 items to discover. Craft legendary weapons from rare drops found in the deepest dungeons.",
49  },
50];
51 
52export default function Feature2({
53  title = "How It Works",
54  description = "Four steps to retro glory",
55  items = defaultItems,
56  className,
57}: Feature2Props) {
58  return (
59    <section className={cn("w-full px-4 py-16", className)}>
60      <div className="mx-auto max-w-3xl">
61        {(title || description) && (
62          <div className="mb-10 text-center">
63            {title && (
64              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
65                {title}
66              </h2>
67            )}
68            {description && (
69              <p className="mx-auto max-w-xl retro text-muted-foreground text-[9px]">
70                {description}
71              </p>
72            )}
73          </div>
74        )}
75 
76        <div className="flex flex-col">
77          {items.map((item, index) => (
78            <div key={item.title}>
79              <div className="flex gap-6 py-6">
80                {/* Icon / number */}
81                <div className="retro flex size-14 shrink-0 items-center justify-center border-2 border-primary text-xl font-bold">
82                  {item.icon}
83                </div>
84 
85                {/* Text */}
86                <div className="flex-1">
87// … truncated