バナーニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterBanner001() {
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-24">
14      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
15        <div className="relative border border-border/40 px-6 py-14 sm:px-12 sm:py-16">
16          {/* コーナードット */}
17          <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/20" />
18          <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/20" />
19          <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/20" />
20          <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/20" />
21
22          <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16">
23            {/* 左: テキスト */}
24            <div>
25              <div className="flex items-center gap-3">
26                <svg
27                  className="h-4 w-4 text-foreground/30"
28                  viewBox="0 0 24 24"
29                  fill="none"
30                  stroke="currentColor"
31                  strokeWidth="1.5"
32                  strokeLinecap="round"
33                  strokeLinejoin="round"
34                >
35                  <path d="M4 4h16c1.1 0 2 .9 2 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6c0-1.1.9-2 2-2z" />
36                  <polyline points="22,6 12,13 2,6" />
37                </svg>
38                <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
39                  Newsletter
40                </p>
41              </div>
42              <h2 className="mt-4 text-xl font-medium tracking-tight text-foreground sm:text-2xl">
43                最新のデザイントレンドを
44                <br className="hidden sm:block" />
45                毎週お届けします
46              </h2>
47              <p className="mt-3 text-sm font-light leading-relaxed text-muted-foreground">
48                UI/UXの最新動向、実践的なTips、厳選されたリソースを無料で配信。
49              </p>
50            </div>
51
52            {/* 右: フォーム */}
53            <div>
54              <form onSubmit={handleSubmit} className="space-y-4">
55                <div className="flex flex-col gap-3 sm:flex-row">
56                  <input
57                    type="email"
58                    value={email}
59                    onChange={(e) => setEmail(e.target.value)}
60                    placeholder="メールアドレス"
61                    required
62                    className="flex-1 border border-border/40 bg-transparent px-4 py-3 text-sm font-light tracking-wide text-foreground placeholder-muted-foreground/40 transition-colors duration-200 focus:border-foreground/40 focus:outline-none"
63                  />
64                  <button
65                    type="submit"
66                    className="group inline-flex items-center justify-center gap-2 border border-foreground/80 bg-foreground/5 px-6 py-3 text-xs font-medium uppercase tracking-[0.2em] text-foreground transition-colors duration-200 hover:bg-foreground hover:text-background"
67                  >
68                    購読
69                    <svg
70                      className="h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"
71                      fill="none"
72                      stroke="currentColor"
73                      viewBox="0 0 24 24"
74                    >
75                      <path
76                        strokeLinecap="round"
77                        strokeLinejoin="round"
78                        strokeWidth={1.5}
79                        d="M17 8l4 4m0 0l-4 4m4-4H3"
80                      />
81                    </svg>
82                  </button>
83                </div>
84              </form>
85
86              {/* 補足情報 */}
87              <div className="mt-5 flex items-center gap-4">
88                <div className="h-1 w-1 rounded-full bg-foreground/20" />
89                <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
90                  2,000人以上が購読中
91                </p>
92                <div className="h-3 w-px bg-border/40" />
93                <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
94                  いつでも解除可能
95                </p>
96              </div>
97            </div>
98          </div>
99        </div>
100      </div>
101    </section>
102  );
103}