ニュースレター統合フッター

1export function FooterNewsletter001() {
2  const links = {
3    product: [
4      { label: "機能紹介", href: "#" },
5      { label: "料金プラン", href: "#" },
6      { label: "導入事例", href: "#" },
7      { label: "ロードマップ", href: "#" },
8    ],
9    company: [
10      { label: "会社概要", href: "#" },
11      { label: "採用情報", href: "#" },
12      { label: "ブログ", href: "#" },
13      { label: "お問い合わせ", href: "#" },
14    ],
15    support: [
16      { label: "ヘルプセンター", href: "#" },
17      { label: "ドキュメント", href: "#" },
18      { label: "API リファレンス", href: "#" },
19      { label: "ステータス", href: "#" },
20    ],
21  };
22
23  return (
24    <footer className="bg-background border-t border-border">
25      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
26        {/* ニュースレター */}
27        <div className="grid grid-cols-1 gap-8 border-b border-border/40 py-16 lg:grid-cols-2 lg:items-center lg:gap-16 lg:py-20">
28          <div>
29            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
30              Newsletter
31            </p>
32            <h2 className="mt-3 text-xl font-medium tracking-wide text-foreground sm:text-2xl">
33              最新情報をお届けします
34            </h2>
35            <p className="mt-3 text-sm font-light leading-relaxed text-muted-foreground">
36              デザインとエンジニアリングに関する知見を、月に2回お届けします。いつでも配信停止できます。
37            </p>
38          </div>
39          <div>
40            <div className="flex flex-col gap-3 sm:flex-row">
41              <div className="relative flex-1">
42                <input
43                  type="email"
44                  placeholder="メールアドレス"
45                  className="w-full rounded-lg border border-border bg-muted/50 px-4 py-3 text-sm tracking-wide text-foreground placeholder:text-muted-foreground/50 focus:border-foreground/20 focus:outline-none focus:ring-0 dark:bg-muted/30"
46                  readOnly
47                />
48              </div>
49              <button className="shrink-0 rounded-lg border border-foreground/10 bg-foreground/5 px-6 py-3 text-xs uppercase tracking-[0.2em] text-foreground transition-colors duration-200 hover:bg-foreground/10">
50                購読する
51              </button>
52            </div>
53            <p className="mt-3 text-[10px] tracking-[0.15em] text-muted-foreground/50">
54              登録することでプライバシーポリシーに同意したものとみなされます
55            </p>
56          </div>
57        </div>
58
59        {/* リンク */}
60        <div className="grid grid-cols-1 gap-8 py-12 sm:grid-cols-2 lg:grid-cols-4 lg:py-16">
61          {/* ブランド */}
62          <div>
63            <a href="#" className="flex items-center gap-3">
64              <div className="flex h-8 w-8 items-center justify-center rounded-md border border-border bg-muted">
65                <span className="text-xs font-medium tracking-wider text-foreground">
66                  L
67                </span>
68              </div>
69              <span className="text-sm font-medium tracking-wide text-foreground">
70                Logo
71              </span>
72            </a>
73            <p className="mt-4 text-xs font-light leading-relaxed text-muted-foreground">
74              テクノロジーの力で、ビジネスの可能性を拡げる
75            </p>
76            {/* ソーシャル */}
77            <div className="mt-6 flex gap-4">
78              {["X", "GH", "IN"].map((label) => (
79                <a
80                  key={label}
81                  href="#"
82                  className="flex h-8 w-8 items-center justify-center rounded-md border border-border/40 text-[10px] tracking-wider text-muted-foreground transition-colors duration-200 hover:border-border hover:text-foreground"
83                >
84                  {label}
85                </a>
86              ))}
87            </div>
88          </div>
89
90          {/* リンクカラム */}
91          {Object.entries(links).map(([group, items]) => (
92            <div key={group}>
93              <h3 className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
94                {group === "product"
95                  ? "プロダクト"
96                  : group === "company"
97                    ? "企業情報"
98                    : "サポート"}
99              </h3>
100              <ul className="mt-5 space-y-3">
101                {items.map((link) => (
102                  <li key={link.label}>
103                    <a
104                      href={link.href}
105                      className="text-sm font-light tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
106                    >
107                      {link.label}
108                    </a>
109                  </li>
110                ))}
111              </ul>
112            </div>
113          ))}
114        </div>
115
116        {/* ボトム */}
117        <div className="flex flex-col items-center gap-4 border-t border-border/40 py-8 sm:flex-row sm:justify-between">
118          <p className="text-[10px] tracking-[0.2em] text-muted-foreground/50">
119            &copy; 2024 Company, Inc. All rights reserved.
120          </p>
121          <div className="flex gap-6">
122            {["プライバシー", "利用規約", "Cookie"].map((item) => (
123              <a
124                key={item}
125                href="#"
126                className="text-[10px] tracking-[0.15em] text-muted-foreground/50 transition-colors duration-200 hover:text-muted-foreground"
127              >
128                {item}
129              </a>
130            ))}
131          </div>
132        </div>
133      </div>
134    </footer>
135  );
136}