スプリット型ニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterSplit001() {
6  const [email, setEmail] = useState("");
7
8  const handleSubmit = (e: React.FormEvent) => {
9    e.preventDefault();
10  };
11
12  const topics = [
13    { label: "UI/UXトレンド", desc: "最新のデザイン潮流を解説" },
14    { label: "技術ノート", desc: "実践的なフロントエンド技法" },
15    { label: "事例紹介", desc: "優れたWebサイトの分析" },
16  ];
17
18  return (
19    <section className="bg-background py-28 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 gap-16 lg:grid-cols-2 lg:gap-20">
22          {/* 左カラム: コンテンツ */}
23          <div>
24            <div className="flex items-center gap-4">
25              <div className="h-px w-8 bg-border/40" />
26              <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
27            </div>
28
29            <p className="mt-8 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
30              Newsletter
31            </p>
32            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
33              デザインの最前線を
34              <br />
35              お届けします
36            </h2>
37            <p className="mt-5 text-sm font-light leading-relaxed text-muted-foreground">
38              厳選されたデザインとテクノロジーの知見を、毎週お届け。
39              <br />
40              あなたのクリエイティブワークに新しい視点を。
41            </p>
42
43            {/* トピック一覧 */}
44            <div className="mt-10 space-y-4">
45              {topics.map((topic) => (
46                <div key={topic.label} className="flex items-start gap-3">
47                  <div className="mt-1.5 h-1 w-1 flex-shrink-0 rounded-full bg-foreground/30" />
48                  <div>
49                    <p className="text-xs font-medium tracking-wide text-foreground">
50                      {topic.label}
51                    </p>
52                    <p className="mt-0.5 text-[11px] font-light tracking-wide text-muted-foreground/60">
53                      {topic.desc}
54                    </p>
55                  </div>
56                </div>
57              ))}
58            </div>
59          </div>
60
61          {/* 右カラム: フォーム */}
62          <div className="flex flex-col justify-center">
63            <div className="rounded-lg border border-border p-8 sm:p-10">
64              <p className="text-xs font-medium tracking-wide text-foreground">
65                無料で購読する
66              </p>
67              <p className="mt-2 text-[11px] font-light leading-relaxed text-muted-foreground/60">
68                2,500名以上のデザイナー・エンジニアが購読中
69              </p>
70
71              <form onSubmit={handleSubmit} className="mt-8 space-y-5">
72                <div>
73                  <label
74                    htmlFor="newsletter-split-email"
75                    className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
76                  >
77                    メールアドレス
78                  </label>
79                  <input
80                    id="newsletter-split-email"
81                    type="email"
82                    value={email}
83                    onChange={(e) => setEmail(e.target.value)}
84                    placeholder="you@example.com"
85                    required
86                    className="mt-2 w-full border-b border-border bg-transparent px-0 py-3 text-sm font-light tracking-wide text-foreground placeholder-muted-foreground/30 transition-colors duration-200 focus:border-foreground focus:outline-none"
87                  />
88                </div>
89
90                <button
91                  type="submit"
92                  className="group flex w-full items-center justify-center gap-2 border border-foreground py-3.5 text-xs font-medium uppercase tracking-[0.2em] text-foreground transition-all duration-200 hover:bg-foreground hover:text-background"
93                >
94                  購読を開始
95                  <svg
96                    className="h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"
97                    fill="none"
98                    stroke="currentColor"
99                    viewBox="0 0 24 24"
100                  >
101                    <path
102                      strokeLinecap="round"
103                      strokeLinejoin="round"
104                      strokeWidth={1.5}
105                      d="M17 8l4 4m0 0l-4 4m4-4H3"
106                    />
107                  </svg>
108                </button>
109              </form>
110
111              {/* 補足 */}
112              <div className="mt-8 flex items-center gap-4">
113                <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
114                  スパムは送りません
115                </p>
116                <div className="h-2.5 w-px bg-border/40" />
117                <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
118                  いつでも解除可能
119                </p>
120              </div>
121            </div>
122          </div>
123        </div>
124      </div>
125    </section>
126  );
127}