ニュースレターCTA

1export function CtaNewsletter001() {
2  return (
3    <section className="bg-background py-24">
4      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
5        <div className="border border-border/50 p-8 sm:p-12 lg:p-16">
6          <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
7            {/* Left - Content */}
8            <div>
9              {/* Eyebrow */}
10              <p className="text-[10px] font-medium uppercase tracking-[0.5em] text-muted-foreground/60">
11                Newsletter
12              </p>
13
14              {/* Heading */}
15              <h2 className="mt-6 text-2xl font-light tracking-tight text-foreground sm:text-3xl md:text-4xl">
16                Stay in the loop
17              </h2>
18
19              {/* Description */}
20              <p className="mt-4 max-w-md text-sm font-light leading-relaxed tracking-wide text-muted-foreground">
21                Get the latest news, updates, and insights delivered straight to
22                your inbox. No spam, unsubscribe anytime.
23              </p>
24
25              {/* Features list */}
26              <ul className="mt-8 space-y-3">
27                <li className="flex items-center gap-3 text-xs tracking-wide text-muted-foreground">
28                  <span className="h-px w-4 bg-border" />
29                  Weekly product updates
30                </li>
31                <li className="flex items-center gap-3 text-xs tracking-wide text-muted-foreground">
32                  <span className="h-px w-4 bg-border" />
33                  Industry insights and trends
34                </li>
35                <li className="flex items-center gap-3 text-xs tracking-wide text-muted-foreground">
36                  <span className="h-px w-4 bg-border" />
37                  Exclusive early access
38                </li>
39              </ul>
40            </div>
41
42            {/* Right - Form */}
43            <div className="flex flex-col justify-center">
44              <form className="space-y-4">
45                {/* Email input */}
46                <div>
47                  <label
48                    htmlFor="email"
49                    className="block text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground/60"
50                  >
51                    Email Address
52                  </label>
53                  <input
54                    type="email"
55                    id="email"
56                    placeholder="your@email.com"
57                    className="mt-3 w-full border-b border-border bg-transparent pb-3 text-sm tracking-wide text-foreground placeholder-muted-foreground/50 transition-colors focus:border-foreground/50 focus:outline-none"
58                  />
59                </div>
60
61                {/* First name input */}
62                <div>
63                  <label
64                    htmlFor="name"
65                    className="block text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground/60"
66                  >
67                    First Name (Optional)
68                  </label>
69                  <input
70                    type="text"
71                    id="name"
72                    placeholder="John"
73                    className="mt-3 w-full border-b border-border bg-transparent pb-3 text-sm tracking-wide text-foreground placeholder-muted-foreground/50 transition-colors focus:border-foreground/50 focus:outline-none"
74                  />
75                </div>
76
77                {/* Submit button */}
78                <button
79                  type="submit"
80                  className="mt-6 w-full border border-foreground bg-foreground py-4 text-xs font-medium uppercase tracking-[0.25em] text-background transition-all hover:bg-transparent hover:text-foreground"
81                >
82                  Subscribe
83                </button>
84
85                {/* Privacy note */}
86                <p className="text-center text-[10px] tracking-wide text-muted-foreground/50">
87                  By subscribing, you agree to our Privacy Policy
88                </p>
89              </form>
90            </div>
91          </div>
92        </div>
93      </div>
94    </section>
95  );
96}