シンプルニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterSimple001() {
6  const [email, setEmail] = useState("");
7
8  const handleSubmit = (e: React.FormEvent) => {
9    e.preventDefault();
10    // Handle newsletter subscription
11  };
12
13  return (
14    <section className="bg-background border-y border-border">
15      <div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-24">
16        <div className="flex flex-col gap-10 lg:flex-row lg:items-center lg:justify-between">
17          {/* Text Content */}
18          <div className="max-w-xl">
19            <h2 className="text-2xl font-semibold tracking-wide text-foreground sm:text-3xl md:text-4xl">
20              Stay in the loop
21            </h2>
22            <p className="mt-4 text-base leading-relaxed tracking-wide text-muted-foreground">
23              Get the latest updates, articles, and resources delivered straight
24              to your inbox. No spam, unsubscribe anytime.
25            </p>
26          </div>
27
28          {/* Form */}
29          <form
30            onSubmit={handleSubmit}
31            className="mt-8 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:ml-8"
32          >
33            <label htmlFor="email-address" className="sr-only">
34              Email address
35            </label>
36            <input
37              id="email-address"
38              name="email"
39              type="email"
40              autoComplete="email"
41              required
42              value={email}
43              onChange={(e) => setEmail(e.target.value)}
44              className="w-full min-w-0 rounded-lg border border-border bg-muted px-4 py-3.5 text-sm tracking-wide text-foreground placeholder-muted-foreground/60 transition-colors duration-200 focus:border-primary focus:outline-none sm:w-72"
45              placeholder="Enter your email"
46            />
47            <button
48              type="submit"
49              className="flex-shrink-0 rounded-lg bg-primary px-6 py-3.5 text-sm font-medium tracking-wide text-primary-foreground transition-all duration-200 hover:bg-primary/90"
50            >
51              Subscribe
52            </button>
53          </form>
54        </div>
55
56        {/* Trust Indicators */}
57        <div className="mt-12 flex flex-wrap items-center gap-x-10 gap-y-4 border-t border-border pt-10">
58          <div className="flex items-center gap-3 text-sm tracking-wide text-muted-foreground">
59            <svg
60              className="h-5 w-5 text-muted-foreground/70"
61              fill="none"
62              stroke="currentColor"
63              viewBox="0 0 24 24"
64            >
65              <path
66                strokeLinecap="round"
67                strokeLinejoin="round"
68                strokeWidth={1.5}
69                d="M5 13l4 4L19 7"
70              />
71            </svg>
72            <span>Free forever</span>
73          </div>
74          <div className="flex items-center gap-3 text-sm tracking-wide text-muted-foreground">
75            <svg
76              className="h-5 w-5 text-muted-foreground/70"
77              fill="none"
78              stroke="currentColor"
79              viewBox="0 0 24 24"
80            >
81              <path
82                strokeLinecap="round"
83                strokeLinejoin="round"
84                strokeWidth={1.5}
85                d="M5 13l4 4L19 7"
86              />
87            </svg>
88            <span>No spam</span>
89          </div>
90          <div className="flex items-center gap-3 text-sm tracking-wide text-muted-foreground">
91            <svg
92              className="h-5 w-5 text-muted-foreground/70"
93              fill="none"
94              stroke="currentColor"
95              viewBox="0 0 24 24"
96            >
97              <path
98                strokeLinecap="round"
99                strokeLinejoin="round"
100                strokeWidth={1.5}
101                d="M5 13l4 4L19 7"
102              />
103            </svg>
104            <span>Unsubscribe anytime</span>
105          </div>
106        </div>
107      </div>
108    </section>
109  );
110}