8-bit Feature 1

1import type { ReactNode } from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import { Badge } from "@/components/ui/8bit/badge";
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/8bit/card";
13 
14import "@/components/ui/8bit/styles/retro.css";
15 
16export interface FeatureItem {
17  badge?: string;
18  description: string;
19  icon: ReactNode;
20  title: string;
21}
22 
23interface FeatureGridProps {
24  className?: string;
25  columns?: 3 | 6 | 9;
26  description?: string;
27  items?: FeatureItem[];
28  title?: string;
29}
30 
31const defaultItems: FeatureItem[] = [
32  {
33    icon: "I",
34    title: "Battle System",
35    description:
36      "Turn-based combat with pixel-perfect hit detection and combo chains.",
37  },
38  {
39    icon: "II",
40    title: "Armor Crafting",
41    description:
42      "Forge legendary gear from rare drops. Each piece boosts unique stats.",
43  },
44  {
45    icon: "III",
46    title: "World Map",
47    description:
48      "Explore 16 biomes, each with hidden dungeons and boss encounters.",
49  },
50  {
51    icon: "IV",
52    title: "Leaderboards",
53    description: "Compete globally. Daily, weekly, and all-time rankings.",
54    badge: "NEW",
55  },
56  {
57    icon: "V",
58    title: "Chiptune Audio",
59    description: "Original 8-bit soundtrack with dynamic battle themes.",
60  },
61  {
62    icon: "VI",
63    title: "Cloud Saves",
64    description:
65      "Your progress syncs across all devices. Never lose a save again.",
66    badge: "COMING SOON",
67  },
68];
69 
70export default function Feature1({
71  title = "Game Features",
72  description = "Everything you need for the ultimate retro experience",
73  items = defaultItems,
74  columns = 3,
75  className,
76}: FeatureGridProps) {
77  const gridCols = {
78    3: "sm:grid-cols-2 lg:grid-cols-3",
79    6: "sm:grid-cols-2 lg:grid-cols-3",
80    9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3",
81  };
82 
83  return (
84    <section className={cn("w-full px-4 py-16", className)}>
85      <div className="mx-auto max-w-5xl">
86        {(title || description) && (
87          <div className="mb-10 text-center">
88            {title && (
89              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
90                {title}
91              </h2>
92            )}
93            {description && (
94              <p className="mx-auto max-w-xl retro text-muted-foreground text-[9px]">
95                {description}
96              </p>
97            )}
98          </div>
99        )}
100 
101        <div className={cn("grid gap-x-4 gap-y-1", gridCols[columns])}>
102// … truncated