グラデーントニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterGradient001() {
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-5xl px-4 sm:px-6 lg:px-8">
15        <div className="relative overflow-hidden rounded-2xl border border-border bg-muted">
16          {/* 背景グラデーション */}
17          <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.03] via-transparent to-foreground/[0.06]" />
18
19          {/* コーナードット */}
20          <div className="absolute left-5 top-5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
21          <div className="absolute right-5 top-5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
22          <div className="absolute bottom-5 left-5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
23          <div className="absolute bottom-5 right-5 h-1.5 w-1.5 rounded-full bg-foreground/15" />
24
25          <div className="relative px-6 py-16 sm:px-12 sm:py-20 lg:px-20">
26            <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
27              {/* 左カラム: テキスト */}
28              <div className="flex flex-col justify-center">
29                <div className="flex items-center gap-4">
30                  <div className="h-px w-6 bg-foreground/20" />
31                  <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
32                    Newsletter
33                  </p>
34                </div>
35
36                <h2 className="mt-6 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
37                  デザインの最前線を、
38                  <br />
39                  あなたの手元に
40                </h2>
41
42                <p className="mt-5 text-sm font-light leading-relaxed text-muted-foreground">
43                  UIトレンド、プロダクトデザインの考察、厳選されたインスピレーション。月2回、丁寧にお届けします。
44                </p>
45
46                {/* 特徴リスト */}
47                <div className="mt-8 space-y-3">
48                  {[
49                    "最新UIトレンドの解説",
50                    "厳選デザインリソース",
51                    "実践的なケーススタディ",
52                  ].map((item) => (
53                    <div key={item} className="flex items-center gap-3">
54                      <div className="flex h-4 w-4 items-center justify-center">
55                        <div className="h-1 w-1 rounded-full bg-foreground/40" />
56                      </div>
57                      <span className="text-xs font-light tracking-wide text-muted-foreground/80">
58                        {item}
59                      </span>
60                    </div>
61                  ))}
62                </div>
63              </div>
64
65              {/* 右カラム: フォーム */}
66              <div className="flex flex-col justify-center">
67                <div className="rounded-xl border border-border/60 bg-background/60 p-6 backdrop-blur-sm sm:p-8">
68                  <p className="text-xs font-medium tracking-wide text-foreground">
69                    無料で購読する
70                  </p>
71                  <p className="mt-2 text-[10px] tracking-[0.15em] text-muted-foreground/60">
72                    いつでも解除できます
73                  </p>
74
75                  <form onSubmit={handleSubmit} className="mt-6 space-y-4">
76                    <div>
77                      <label
78                        htmlFor="newsletter-email"
79                        className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground/50"
80                      >
81                        Email
82                      </label>
83                      <input
84                        id="newsletter-email"
85                        type="email"
86                        value={email}
87                        onChange={(e) => setEmail(e.target.value)}
88                        placeholder="your@email.com"
89                        required
90                        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/60 focus:outline-none"
91                      />
92                    </div>
93
94                    <button
95                      type="submit"
96                      className="group mt-2 flex w-full items-center justify-center gap-2 rounded-lg border border-foreground/10 bg-foreground/5 py-3.5 text-sm font-medium tracking-wide text-foreground transition-all duration-200 hover:bg-foreground/10"
97                    >
98                      登録する
99                      <svg
100                        className="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5"
101                        fill="none"
102                        stroke="currentColor"
103                        viewBox="0 0 24 24"
104                      >
105                        <path
106                          strokeLinecap="round"
107                          strokeLinejoin="round"
108                          strokeWidth={1.5}
109                          d="M17 8l4 4m0 0l-4 4m4-4H3"
110                        />
111                      </svg>
112                    </button>
113                  </form>
114
115                  <div className="mt-6 flex items-center justify-center gap-4">
116                    <div className="h-1 w-1 rounded-full bg-foreground/10" />
117                    <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
118                      3,200+ デザイナーが購読中
119                    </p>
120                    <div className="h-1 w-1 rounded-full bg-foreground/10" />
121                  </div>
122                </div>
123              </div>
124            </div>
125          </div>
126        </div>
127      </div>
128    </section>
129  );
130}