スプリットフッター

1import Link from "next/link";
2
3export function FooterSplit001() {
4  const linkGroups = [
5    {
6      title: "プロダクト",
7      links: [
8        { label: "機能一覧", href: "#" },
9        { label: "料金プラン", href: "#" },
10        { label: "導入事例", href: "#" },
11        { label: "アップデート", href: "#" },
12      ],
13    },
14    {
15      title: "サポート",
16      links: [
17        { label: "ドキュメント", href: "#" },
18        { label: "ヘルプセンター", href: "#" },
19        { label: "API リファレンス", href: "#" },
20        { label: "ステータス", href: "#" },
21      ],
22    },
23    {
24      title: "会社情報",
25      links: [
26        { label: "私たちについて", href: "#" },
27        { label: "採用情報", href: "#" },
28        { label: "ブログ", href: "#" },
29        { label: "お問い合わせ", href: "#" },
30      ],
31    },
32  ];
33
34  return (
35    <footer className="bg-background border-t border-border">
36      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
37        {/* メインエリア：左右スプリット */}
38        <div className="grid grid-cols-1 gap-12 py-16 lg:grid-cols-2 lg:gap-16 lg:py-20">
39          {/* 左側：ブランド情報 */}
40          <div className="flex flex-col justify-between">
41            <div>
42              <Link href="#" className="inline-flex items-center gap-3">
43                <div className="flex h-8 w-8 items-center justify-center rounded-md border border-border">
44                  <div className="h-1.5 w-1.5 rounded-full bg-foreground/60" />
45                </div>
46                <span className="text-base font-medium tracking-wide text-foreground">
47                  Brand
48                </span>
49              </Link>
50              <p className="mt-6 max-w-sm text-sm font-light leading-relaxed text-muted-foreground">
51                プロダクトの可能性を広げ、チームの生産性を高めるプラットフォーム。シンプルで直感的な体験を提供します。
52              </p>
53            </div>
54
55            {/* ソーシャルリンク */}
56            <div className="mt-8 flex items-center gap-5 lg:mt-0">
57              {[
58                {
59                  label: "X",
60                  path: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
61                },
62                {
63                  label: "GitHub",
64                  path: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z",
65                },
66              ].map((social) => (
67                <Link
68                  key={social.label}
69                  href="#"
70                  className="text-muted-foreground/60 transition-colors duration-200 hover:text-foreground"
71                >
72                  <span className="sr-only">{social.label}</span>
73                  <svg
74                    className="h-4 w-4"
75                    fill="currentColor"
76                    viewBox="0 0 24 24"
77                  >
78                    <path d={social.path} />
79                  </svg>
80                </Link>
81              ))}
82            </div>
83          </div>
84
85          {/* 右側：リンクグループ */}
86          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
87            {linkGroups.map((group) => (
88              <div key={group.title}>
89                <h3 className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
90                  {group.title}
91                </h3>
92                <ul className="mt-5 space-y-3.5">
93                  {group.links.map((link) => (
94                    <li key={link.label}>
95                      <Link
96                        href={link.href}
97                        className="text-sm font-light tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
98                      >
99                        {link.label}
100                      </Link>
101                    </li>
102                  ))}
103                </ul>
104              </div>
105            ))}
106          </div>
107        </div>
108
109        {/* 区切り線 */}
110        <div className="h-px bg-border/40" />
111
112        {/* ボトムバー */}
113        <div className="flex flex-col items-center justify-between gap-4 py-6 sm:flex-row">
114          <p className="text-[10px] tracking-[0.2em] text-muted-foreground/50">
115            &copy; {new Date().getFullYear()} Brand Inc. All rights reserved.
116          </p>
117          <div className="flex items-center gap-6">
118            {["プライバシー", "利用規約", "Cookie設定"].map((item) => (
119              <Link
120                key={item}
121                href="#"
122                className="text-[10px] tracking-[0.2em] text-muted-foreground/50 transition-colors duration-200 hover:text-muted-foreground"
123              >
124                {item}
125              </Link>
126            ))}
127          </div>
128        </div>
129      </div>
130    </footer>
131  );
132}