エレガントフッター

1import Link from "next/link";
2
3export function FooterElegant001() {
4  const footerColumns = [
5    {
6      title: "Platform",
7      links: [
8        { label: "Overview", href: "#" },
9        { label: "Features", href: "#" },
10        { label: "Integrations", href: "#" },
11        { label: "Changelog", href: "#" },
12      ],
13    },
14    {
15      title: "Company",
16      links: [
17        { label: "About Us", href: "#" },
18        { label: "Careers", href: "#" },
19        { label: "Press Kit", href: "#" },
20        { label: "Contact", href: "#" },
21      ],
22    },
23    {
24      title: "Legal",
25      links: [
26        { label: "Privacy", href: "#" },
27        { label: "Terms", href: "#" },
28        { label: "Security", href: "#" },
29        { label: "Cookies", href: "#" },
30      ],
31    },
32  ];
33
34  return (
35    <footer className="bg-background">
36      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
37        {/* 上部区切り */}
38        <div className="flex items-center gap-4 pt-24">
39          <div className="h-px flex-1 bg-border/40" />
40          <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
41          <div className="h-px flex-1 bg-border/40" />
42        </div>
43
44        {/* メインコンテンツ */}
45        <div className="grid grid-cols-1 gap-16 py-20 lg:grid-cols-12">
46          {/* ブランドセクション */}
47          <div className="lg:col-span-5">
48            <Link href="#" className="inline-flex items-center gap-3">
49              <div className="flex h-8 w-8 items-center justify-center rounded border border-border">
50                <span className="text-xs font-medium text-foreground">S</span>
51              </div>
52              <span className="text-sm font-medium tracking-wide text-foreground">
53                Studio
54              </span>
55            </Link>
56
57            <p className="mt-8 max-w-sm text-sm font-light leading-relaxed text-muted-foreground">
58              洗練されたデジタル体験をデザインし、
59              ビジネスの成長を加速させるクリエイティブスタジオ。
60            </p>
61
62            <div className="mt-10">
63              <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
64                Follow Us
65              </p>
66              <div className="mt-4 flex gap-3">
67                {["X", "In", "Gh", "Dr"].map((label) => (
68                  <Link
69                    key={label}
70                    href="#"
71                    className="flex h-9 w-9 items-center justify-center rounded border border-border/60 text-muted-foreground transition-all duration-200 hover:border-border hover:text-foreground"
72                  >
73                    <span className="text-[10px] font-medium tracking-wide">
74                      {label}
75                    </span>
76                  </Link>
77                ))}
78              </div>
79            </div>
80          </div>
81
82          {/* リンクカラム */}
83          <div className="grid grid-cols-2 gap-12 sm:grid-cols-3 lg:col-span-7">
84            {footerColumns.map((column) => (
85              <div key={column.title}>
86                <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
87                  {column.title}
88                </p>
89                <ul className="mt-6 space-y-4">
90                  {column.links.map((link) => (
91                    <li key={link.label}>
92                      <Link
93                        href={link.href}
94                        className="text-sm font-light tracking-wide text-foreground/60 transition-colors duration-200 hover:text-foreground"
95                      >
96                        {link.label}
97                      </Link>
98                    </li>
99                  ))}
100                </ul>
101              </div>
102            ))}
103          </div>
104        </div>
105
106        {/* 下部 */}
107        <div className="flex flex-col items-center justify-between gap-6 border-t border-border/40 py-10 sm:flex-row">
108          <p className="text-xs font-light tracking-wide text-muted-foreground">
109            &copy; {new Date().getFullYear()} Studio Inc. All rights reserved.
110          </p>
111          <div className="flex items-center gap-2">
112            <div className="h-1.5 w-1.5 rounded-full bg-emerald-500/80" />
113            <span className="text-xs font-light tracking-wide text-muted-foreground">
114              All systems operational
115            </span>
116          </div>
117        </div>
118      </div>
119    </footer>
120  );
121}