ダークフッター

1import Link from "next/link";
2
3export function FooterDark001() {
4  const footerSections = [
5    {
6      title: "Product",
7      links: [
8        { label: "Features", href: "#" },
9        { label: "Integrations", href: "#" },
10        { label: "Pricing", href: "#" },
11        { label: "Changelog", href: "#" },
12      ],
13    },
14    {
15      title: "Company",
16      links: [
17        { label: "About", href: "#" },
18        { label: "Blog", href: "#" },
19        { label: "Careers", href: "#" },
20        { label: "Press", href: "#" },
21      ],
22    },
23    {
24      title: "Resources",
25      links: [
26        { label: "Documentation", href: "#" },
27        { label: "Help Center", href: "#" },
28        { label: "Community", href: "#" },
29        { label: "Status", href: "#" },
30      ],
31    },
32  ];
33
34  return (
35    <footer className="bg-background">
36      <div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
37        {/* Top Section */}
38        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">
39          {/* Brand Column */}
40          <div className="lg:col-span-4">
41            <Link href="#" className="flex items-center gap-3">
42              <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-muted">
43                <span className="text-base font-bold tracking-wider text-foreground">L</span>
44              </div>
45              <span className="text-xl font-semibold tracking-wide text-foreground">
46                Logo
47              </span>
48            </Link>
49            <p className="mt-6 max-w-sm text-sm leading-relaxed tracking-wide text-muted-foreground">
50              Build better products faster with our modern platform. Join thousands of teams who trust us.
51            </p>
52
53            {/* Social Links */}
54            <div className="mt-8 flex gap-4">
55              {["Twitter", "GitHub", "LinkedIn", "Discord"].map((social) => (
56                <Link
57                  key={social}
58                  href="#"
59                  className="flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground transition-all duration-200 hover:border-border hover:text-foreground"
60                >
61                  <span className="text-xs font-medium">{social[0]}</span>
62                </Link>
63              ))}
64            </div>
65          </div>
66
67          {/* Links Columns */}
68          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-8 lg:justify-items-end">
69            {footerSections.map((section) => (
70              <div key={section.title}>
71                <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
72                  {section.title}
73                </h3>
74                <ul className="mt-6 space-y-4">
75                  {section.links.map((link) => (
76                    <li key={link.label}>
77                      <Link
78                        href={link.href}
79                        className="text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
80                      >
81                        {link.label}
82                      </Link>
83                    </li>
84                  ))}
85                </ul>
86              </div>
87            ))}
88          </div>
89        </div>
90
91        {/* Bottom Section */}
92        <div className="mt-16 flex flex-col items-center justify-between gap-6 border-t border-border pt-10 sm:flex-row">
93          <p className="text-xs tracking-widest text-muted-foreground">
94            &copy; {new Date().getFullYear()} Your Company. All rights reserved.
95          </p>
96          <div className="flex gap-8">
97            <Link
98              href="#"
99              className="text-xs tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
100            >
101              Privacy Policy
102            </Link>
103            <Link
104              href="#"
105              className="text-xs tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
106            >
107              Terms of Service
108            </Link>
109            <Link
110              href="#"
111              className="text-xs tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
112            >
113              Cookie Settings
114            </Link>
115          </div>
116        </div>
117      </div>
118    </footer>
119  );
120}