8-bit Footer 1

1import Link from "next/link";
2 
3import { cn } from "@/lib/utils";
4 
5import { Button } from "@/components/ui/8bit/button";
6 
7import "@/components/ui/8bit/styles/retro.css";
8 
9interface FooterLink {
10  href: string;
11  label: string;
12}
13 
14interface FooterColumn {
15  links: FooterLink[];
16  title: string;
17}
18 
19interface Footer1Props {
20  className?: string;
21  columns?: FooterColumn[];
22  copyright?: string;
23  description?: string;
24  title?: string;
25}
26 
27const defaultColumns: FooterColumn[] = [
28  {
29    title: "Product",
30    links: [
31      { label: "Components", href: "#" },
32      { label: "Blocks", href: "#" },
33      { label: "Templates", href: "#" },
34      { label: "Changelog", href: "#" },
35    ],
36  },
37  {
38    title: "Resources",
39    links: [
40      { label: "Documentation", href: "#" },
41      { label: "GitHub", href: "#" },
42      { label: "Discord", href: "#" },
43      { label: "Contributing", href: "#" },
44    ],
45  },
46  {
47    title: "Legal",
48    links: [
49      { label: "Privacy", href: "#" },
50      { label: "Terms", href: "#" },
51      { label: "License", href: "#" },
52    ],
53  },
54];
55 
56export default function Footer1({
57  title = "8bitcn",
58  description = "The retro component library for modern builders.",
59  columns = defaultColumns,
60  copyright = "2026 8bitcn. All rights reserved.",
61  className,
62}: Footer1Props) {
63  return (
64    <footer className={cn("w-full border-t px-4 py-12", className)}>
65      <div className="mx-auto max-w-5xl">
66        <div className="grid gap-8 md:grid-cols-4">
67          {/* Brand column */}
68          <div>
69            <h3 className="retro mb-2 font-bold text-sm">{title}</h3>
70            <p className="retro mb-4 text-muted-foreground text-[8px] leading-relaxed">
71              {description}
72            </p>
73            <Button className="text-[9px]">
74              GET STARTED
75            </Button>
76          </div>
77 
78          {/* Link columns */}
79          {columns.map((col) => (
80            <div key={col.title}>
81              <h4 className="retro mb-3 font-bold text-[10px] uppercase tracking-widest text-muted-foreground">
82                {col.title}
83              </h4>
84              <ul className="space-y-2">
85                {col.links.map((link) => (
86                  <li key={link.label}>
87                    <Link
88                      className="retro text-[10px] transition-colors hover:text-foreground text-muted-foreground"
89                      href={link.href}
90                    >
91                      {link.label}
92                    </Link>
93// … truncated