ミニマルニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterMinimal001() {
6  const [email, setEmail] = useState("");
7
8  const handleSubmit = (e: React.FormEvent) => {
9    e.preventDefault();
10  };
11
12  return (
13    <section className="bg-background py-28 border-t border-border">
14      <div className="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
15        <div className="text-center">
16          {/* デコレーション */}
17          <div className="mx-auto flex items-center justify-center gap-4">
18            <div className="h-px w-8 bg-border/40" />
19            <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
20            <div className="h-px w-8 bg-border/40" />
21          </div>
22
23          {/* ヘッダー */}
24          <p className="mt-8 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
25            Newsletter
26          </p>
27          <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
28            最新情報をお届け
29          </h2>
30          <p className="mt-4 text-sm font-light leading-relaxed text-muted-foreground">
31            デザインとテクノロジーに関する最新の知見を、週1回お届けします。
32          </p>
33        </div>
34
35        {/* フォーム */}
36        <form onSubmit={handleSubmit} className="mt-12">
37          <div className="flex flex-col gap-3 sm:flex-row">
38            <input
39              type="email"
40              value={email}
41              onChange={(e) => setEmail(e.target.value)}
42              placeholder="メールアドレスを入力"
43              required
44              className="flex-1 border-b border-border bg-transparent px-1 py-3.5 text-sm font-light tracking-wide text-foreground placeholder-muted-foreground/40 transition-colors duration-200 focus:border-foreground focus:outline-none"
45            />
46            <button
47              type="submit"
48              className="group inline-flex items-center justify-center gap-2 border-b border-foreground py-3.5 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 hover:border-muted-foreground hover:text-muted-foreground sm:px-2"
49            >
50              購読する
51              <svg
52                className="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5"
53                fill="none"
54                stroke="currentColor"
55                viewBox="0 0 24 24"
56              >
57                <path
58                  strokeLinecap="round"
59                  strokeLinejoin="round"
60                  strokeWidth={1.5}
61                  d="M17 8l4 4m0 0l-4 4m4-4H3"
62                />
63              </svg>
64            </button>
65          </div>
66        </form>
67
68        {/* 補足 */}
69        <div className="mt-10 flex items-center justify-center gap-6">
70          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
71            スパムは送りません
72          </p>
73          <div className="h-3 w-px bg-border/40" />
74          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
75            いつでも解除可能
76          </p>
77        </div>
78      </div>
79    </section>
80  );
81}