エレガントニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterElegant001() {
6  const [email, setEmail] = useState("");
7
8  const handleSubmit = (e: React.FormEvent) => {
9    e.preventDefault();
10  };
11
12  const topics = [
13    { label: "デザイントレンド", count: "週1回" },
14    { label: "テクノロジー", count: "月2回" },
15    { label: "ケーススタディ", count: "月1回" },
16  ];
17
18  return (
19    <section className="bg-background py-32 border-t border-border">
20      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
21        <div className="grid grid-cols-1 items-start gap-16 lg:grid-cols-5">
22          {/* 左: テキストコンテンツ */}
23          <div className="lg:col-span-3">
24            {/* デコレーション */}
25            <div className="flex items-center gap-4">
26              <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
27              <div className="h-px w-12 bg-border/40" />
28            </div>
29
30            <p className="mt-6 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
31              Newsletter
32            </p>
33
34            <h2 className="mt-4 text-3xl font-medium leading-snug tracking-wide text-foreground sm:text-4xl">
35              知見を、
36              <br />
37              あなたの受信箱へ。
38            </h2>
39
40            <p className="mt-6 max-w-md text-sm font-light leading-relaxed text-muted-foreground">
41              デザインとテクノロジーの最前線をお届けします。
42              厳選されたインサイトと実践的なナレッジを、
43              定期的にお届けします。
44            </p>
45
46            {/* トピック一覧 */}
47            <div className="mt-10 space-y-3">
48              <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
49                Topics
50              </p>
51              <div className="space-y-2">
52                {topics.map((topic) => (
53                  <div
54                    key={topic.label}
55                    className="flex items-center gap-3"
56                  >
57                    <div className="h-px w-3 bg-foreground/20" />
58                    <span className="text-xs font-light tracking-wide text-foreground/80">
59                      {topic.label}
60                    </span>
61                    <div className="h-px flex-1 bg-border/20" />
62                    <span className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
63                      {topic.count}
64                    </span>
65                  </div>
66                ))}
67              </div>
68            </div>
69          </div>
70
71          {/* 右: フォームカード */}
72          <div className="lg:col-span-2">
73            <div className="relative rounded-lg border border-border p-8">
74              {/* コーナードット */}
75              <div className="absolute left-2.5 top-2.5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
76              <div className="absolute right-2.5 top-2.5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
77              <div className="absolute bottom-2.5 left-2.5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
78              <div className="absolute bottom-2.5 right-2.5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
79
80              <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
81                Subscribe
82              </p>
83
84              <form onSubmit={handleSubmit} className="mt-6 space-y-6">
85                <div>
86                  <label
87                    htmlFor="newsletter-elegant-email"
88                    className="sr-only"
89                  >
90                    メールアドレス
91                  </label>
92                  <input
93                    type="email"
94                    id="newsletter-elegant-email"
95                    value={email}
96                    onChange={(e) => setEmail(e.target.value)}
97                    placeholder="メールアドレスを入力"
98                    required
99                    className="block w-full border-b border-border bg-transparent py-3 text-sm font-light tracking-wide text-foreground placeholder-muted-foreground/40 transition-colors duration-200 focus:border-foreground focus:outline-none"
100                  />
101                </div>
102
103                <button
104                  type="submit"
105                  className="w-full rounded-sm border border-foreground bg-foreground py-3 text-xs font-medium uppercase tracking-[0.15em] text-background transition-all duration-200 hover:bg-foreground/90"
106                >
107                  購読を開始する
108                </button>
109              </form>
110
111              <div className="mt-6 h-px bg-border/30" />
112
113              <div className="mt-5 flex items-center justify-between">
114                <p className="text-[10px] tracking-[0.1em] text-muted-foreground/50">
115                  スパムは送りません
116                </p>
117                <p className="text-[10px] tracking-[0.1em] text-muted-foreground/50">
118                  いつでも解除可能
119                </p>
120              </div>
121
122              {/* 購読者数 */}
123              <div className="mt-6 flex items-center gap-3">
124                <div className="flex -space-x-1.5">
125                  {Array.from({ length: 3 }, (_, i) => (
126                    <div
127                      key={i}
128                      className="h-5 w-5 rounded-full border border-background bg-muted"
129                    />
130                  ))}
131                </div>
132                <p className="text-[10px] font-light tracking-wide text-muted-foreground/60">
133                  2,400+ が購読中
134                </p>
135              </div>
136            </div>
137          </div>
138        </div>
139      </div>
140    </section>
141  );
142}