8-bit Feature 3

1"use client";
2 
3import type { ReactNode } from "react";
4 
5import { cn } from "@/lib/utils";
6 
7import { Badge } from "@/components/ui/8bit/badge";
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from "@/components/ui/8bit/card";
15import {
16  Carousel,
17  CarouselContent,
18  CarouselItem,
19  CarouselNext,
20  CarouselPrevious,
21} from "@/components/ui/8bit/carousel";
22 
23import "@/components/ui/8bit/styles/retro.css";
24 
25export interface CarouselFeature {
26  badge?: string;
27  description: string;
28  icon: ReactNode;
29  title: string;
30}
31 
32interface Feature3Props {
33  className?: string;
34  description?: string;
35  items?: CarouselFeature[];
36  title?: string;
37}
38 
39const defaultItems: CarouselFeature[] = [
40  {
41    icon: "01",
42    title: "Choose Your Class",
43    description:
44      "Warrior, Mage, or Rogue. Each with unique skill trees, gear sets, and playstyles.",
45  },
46  {
47    icon: "02",
48    title: "Enter the Dungeon",
49    description:
50      "Procedurally placed loot with hand-designed encounters. Every run feels fresh.",
51    badge: "FAN FAVORITE",
52  },
53  {
54    icon: "03",
55    title: "Defeat Bosses",
56    description:
57      "12 legendary bosses, each with unique attack patterns. Learn, adapt, conquer.",
58  },
59  {
60    icon: "04",
61    title: "Upgrade Your Gear",
62    description:
63      "Combine drops at the forge to create legendary items. The grind is the game.",
64  },
65  {
66    icon: "05",
67    title: "Climb the Ranks",
68    description:
69      "Global leaderboards updated in real-time. Prove you are the best.",
70    badge: "COMPETITIVE",
71  },
72];
73 
74export default function Feature3({
75  title = "The Adventure Awaits",
76  description = "Swipe through to discover what makes this game legendary",
77  items = defaultItems,
78  className,
79}: Feature3Props) {
80  return (
81    <section className={cn("w-full px-4 py-16", className)}>
82      <div className="mx-auto max-w-5xl">
83        {(title || description) && (
84          <div className="mb-10 text-center">
85            {title && (
86              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
87                {title}
88              </h2>
89            )}
90            {description && (
91              <span className="mx-auto block max-w-xl retro text-muted-foreground text-[9px]">
92                {description}
93              </span>
94            )}
95          </div>
96        )}
97 
98        <Carousel
99          className="mx-auto w-full max-w-4xl"
100          opts={{ align: "start", loop: true }}
101        >
102// … truncated