ステップ付きニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterSteps001() {
6  const [email, setEmail] = useState("");
7
8  const handleSubmit = (e: React.FormEvent) => {
9    e.preventDefault();
10  };
11
12  const steps = [
13    {
14      number: "01",
15      title: "メールアドレスを登録",
16      description: "お持ちのメールアドレスを入力するだけ。",
17    },
18    {
19      number: "02",
20      title: "毎週レターが届く",
21      description: "厳選されたデザイン知見を毎週お届け。",
22    },
23    {
24      number: "03",
25      title: "実務に活かす",
26      description: "最新トレンドをプロジェクトに反映。",
27    },
28  ];
29
30  return (
31    <section className="bg-background py-32 border-t border-border">
32      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
33        <div className="flex items-center gap-4">
34          <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
35          <div className="h-px w-12 bg-border/40" />
36        </div>
37
38        <p className="mt-6 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
39          Newsletter
40        </p>
41
42        <h2 className="mt-4 text-3xl font-medium leading-snug tracking-wide text-foreground sm:text-4xl">
43          3ステップで、
44          <br />
45          情報をキャッチアップ。
46        </h2>
47
48        <p className="mt-6 max-w-lg text-sm font-light leading-relaxed text-muted-foreground">
49          デザインとテクノロジーの最前線を、週に一度のレターでお届けします。
50          登録は30秒で完了します。
51        </p>
52
53        <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-2">
54          <div className="space-y-0">
55            {steps.map((step, index) => (
56              <div key={step.number} className="relative flex gap-6 pb-10">
57                {index < steps.length - 1 && (
58                  <div className="absolute left-[11px] top-8 h-full w-px bg-border/40" />
59                )}
60
61                <div className="relative flex h-6 w-6 shrink-0 items-center justify-center">
62                  <div className="h-1.5 w-1.5 rounded-full bg-foreground/40" />
63                </div>
64
65                <div>
66                  <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
67                    Step {step.number}
68                  </span>
69                  <h3 className="mt-1.5 text-sm font-medium tracking-wide text-foreground">
70                    {step.title}
71                  </h3>
72                  <p className="mt-1.5 text-xs font-light leading-relaxed text-muted-foreground">
73                    {step.description}
74                  </p>
75                </div>
76              </div>
77            ))}
78          </div>
79
80          <div className="relative rounded-lg border border-border p-8">
81            <div className="absolute left-2.5 top-2.5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
82            <div className="absolute right-2.5 top-2.5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
83            <div className="absolute bottom-2.5 left-2.5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
84            <div className="absolute bottom-2.5 right-2.5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
85
86            <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
87              Subscribe
88            </p>
89
90            <p className="mt-4 text-xs font-light leading-relaxed text-muted-foreground">
91              週1回、デザインとエンジニアリングの
92              交差点をお届けします。
93            </p>
94
95            <form onSubmit={handleSubmit} className="mt-8 space-y-4">
96              <div>
97                <label htmlFor="newsletter-steps-email" className="sr-only">
98                  メールアドレス
99                </label>
100                <input
101                  type="email"
102                  id="newsletter-steps-email"
103                  value={email}
104                  onChange={(e) => setEmail(e.target.value)}
105                  placeholder="メールアドレスを入力"
106                  required
107                  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"
108                />
109              </div>
110
111              <button
112                type="submit"
113                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"
114              >
115                無料で購読する
116              </button>
117            </form>
118
119            <div className="mt-6 h-px bg-border/30" />
120
121            <div className="mt-5 flex items-center justify-between text-[10px] tracking-[0.1em] text-muted-foreground/50">
122              <span>いつでも解除可能</span>
123              <span>3,200+ が購読中</span>
124            </div>
125          </div>
126        </div>
127      </div>
128    </section>
129  );
130}