センタードフッター

1export function FooterCentered001() {
2  const navGroups = [
3    {
4      label: "プロダクト",
5      links: ["機能一覧", "料金プラン", "導入事例", "アップデート"],
6    },
7    {
8      label: "リソース",
9      links: ["ドキュメント", "ガイド", "API リファレンス", "ステータス"],
10    },
11    {
12      label: "会社情報",
13      links: ["私たちについて", "ブログ", "採用情報", "お問い合わせ"],
14    },
15  ];
16
17  return (
18    <footer className="bg-background border-t border-border">
19      <div className="mx-auto max-w-5xl px-4 py-24 sm:px-6 lg:px-8">
20        {/* ブランド */}
21        <div className="text-center">
22          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
23            Design &amp; Technology
24          </p>
25          <p className="mt-3 text-xl font-medium tracking-wide text-foreground">
26            Arcline
27          </p>
28          <p className="mt-3 text-sm font-light leading-relaxed text-muted-foreground">
29            シンプルで美しいデジタル体験を、すべての人に。
30          </p>
31        </div>
32
33        {/* デコレーション */}
34        <div className="mx-auto mt-12 flex items-center justify-center gap-4">
35          <div className="h-px w-12 bg-border/40" />
36          <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
37          <div className="h-px w-12 bg-border/40" />
38        </div>
39
40        {/* ナビゲーション */}
41        <div className="mt-12 grid grid-cols-1 gap-10 text-center sm:grid-cols-3">
42          {navGroups.map((group) => (
43            <div key={group.label}>
44              <p className="text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
45                {group.label}
46              </p>
47              <ul className="mt-4 space-y-3">
48                {group.links.map((link) => (
49                  <li key={link}>
50                    <a
51                      href="#"
52                      className="text-sm font-light tracking-wide text-foreground/60 transition-colors duration-200 hover:text-foreground"
53                    >
54                      {link}
55                    </a>
56                  </li>
57                ))}
58              </ul>
59            </div>
60          ))}
61        </div>
62
63        {/* ソーシャルアイコン */}
64        <div className="mt-16 flex items-center justify-center gap-6">
65          {[
66            {
67              name: "X",
68              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",
69            },
70            {
71              name: "GitHub",
72              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",
73            },
74            {
75              name: "LinkedIn",
76              path: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
77            },
78          ].map((social) => (
79            <a
80              key={social.name}
81              href="#"
82              aria-label={social.name}
83              className="text-foreground/30 transition-colors duration-200 hover:text-foreground/60"
84            >
85              <svg
86                className="h-4 w-4"
87                fill="currentColor"
88                viewBox="0 0 24 24"
89              >
90                <path d={social.path} />
91              </svg>
92            </a>
93          ))}
94        </div>
95
96        {/* コピーライト */}
97        <div className="mt-12 flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-6">
98          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
99            &copy; 2026 Arcline Inc.
100          </p>
101          <div className="hidden h-3 w-px bg-border/30 sm:block" />
102          <div className="flex gap-6">
103            <a
104              href="#"
105              className="text-[10px] tracking-[0.15em] text-muted-foreground/50 transition-colors duration-200 hover:text-muted-foreground"
106            >
107              プライバシーポリシー
108            </a>
109            <a
110              href="#"
111              className="text-[10px] tracking-[0.15em] text-muted-foreground/50 transition-colors duration-200 hover:text-muted-foreground"
112            >
113              利用規約
114            </a>
115          </div>
116        </div>
117      </div>
118    </footer>
119  );
120}