センターニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterCentered001() {
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 py-24 border-t border-border">
15      <div className="mx-auto max-w-2xl px-4 text-center sm:px-6 lg:px-8">
16        {/* Icon */}
17        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full border border-border bg-muted">
18          <svg
19            className="h-6 w-6 text-muted-foreground"
20            fill="none"
21            stroke="currentColor"
22            viewBox="0 0 24 24"
23          >
24            <path
25              strokeLinecap="round"
26              strokeLinejoin="round"
27              strokeWidth={1.5}
28              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
29            />
30          </svg>
31        </div>
32
33        {/* Header */}
34        <h2 className="mt-8 text-2xl font-semibold tracking-wide text-foreground sm:text-3xl">
35          Subscribe to our newsletter
36        </h2>
37        <p className="mt-4 text-sm leading-relaxed tracking-wide text-muted-foreground">
38          Get weekly updates on design, development, and the latest trends in tech.
39          No spam, unsubscribe at any time.
40        </p>
41
42        {/* Form */}
43        <form onSubmit={handleSubmit} className="mt-10">
44          <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
45            <input
46              type="email"
47              value={email}
48              onChange={(e) => setEmail(e.target.value)}
49              placeholder="Enter your email"
50              required
51              className="w-full 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-80"
52            />
53            <button
54              type="submit"
55              className="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"
56            >
57              Subscribe
58            </button>
59          </div>
60        </form>
61
62        {/* Trust Text */}
63        <p className="mt-8 text-xs tracking-wide text-muted-foreground/70">
64          Join <span className="text-muted-foreground">2,000+</span> subscribers
65        </p>
66      </div>
67    </section>
68  );
69}