カード型ニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterCard001() {
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">
14      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
15        <div className="mx-auto max-w-2xl">
16          {/* カード */}
17          <div className="rounded-2xl border border-border bg-muted/30 p-8 sm:p-12">
18            {/* ヘッダー */}
19            <div className="flex items-start gap-4">
20              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-border">
21                <svg
22                  className="h-4 w-4 text-muted-foreground"
23                  fill="none"
24                  stroke="currentColor"
25                  viewBox="0 0 24 24"
26                >
27                  <path
28                    strokeLinecap="round"
29                    strokeLinejoin="round"
30                    strokeWidth={1.5}
31                    d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
32                  />
33                </svg>
34              </div>
35              <div>
36                <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
37                  ニュースレター
38                </p>
39                <h2 className="mt-2 text-xl font-medium tracking-wide text-foreground sm:text-2xl">
40                  最新のデザイントレンドを
41                  <br className="hidden sm:block" />
42                  お届けします
43                </h2>
44              </div>
45            </div>
46
47            {/* 説明文 */}
48            <p className="mt-6 text-sm font-light leading-relaxed text-muted-foreground">
49              UIデザイン、フロントエンド開発、アクセシビリティに関する厳選された情報を毎週配信。実務に役立つインサイトをお届けします。
50            </p>
51
52            {/* 区切り線 */}
53            <div className="my-8 h-px bg-border/40" />
54
55            {/* フォーム */}
56            <form onSubmit={handleSubmit}>
57              <div className="flex flex-col gap-3 sm:flex-row">
58                <input
59                  type="email"
60                  value={email}
61                  onChange={(e) => setEmail(e.target.value)}
62                  placeholder="メールアドレスを入力"
63                  required
64                  className="flex-1 rounded-lg border border-border bg-background px-4 py-3 text-sm tracking-wide text-foreground placeholder:text-muted-foreground/50 transition-colors duration-200 focus:border-foreground/20 focus:outline-none"
65                />
66                <button
67                  type="submit"
68                  className="rounded-lg bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-all duration-200 hover:bg-foreground/90"
69                >
70                  購読する
71                </button>
72              </div>
73            </form>
74
75            {/* フッター情報 */}
76            <div className="mt-6 flex items-center gap-6">
77              <div className="flex items-center gap-2">
78                <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
79                <span className="text-xs tracking-wide text-muted-foreground/60">
80                  毎週月曜配信
81                </span>
82              </div>
83              <div className="flex items-center gap-2">
84                <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
85                <span className="text-xs tracking-wide text-muted-foreground/60">
86                  いつでも解除可能
87                </span>
88              </div>
89            </div>
90          </div>
91        </div>
92      </div>
93    </section>
94  );
95}