フローティングニュースレター

1"use client";
2
3import { useState } from "react";
4
5export function NewsletterFloating001() {
6  const [email, setEmail] = useState("");
7
8  const handleSubmit = (e: React.FormEvent) => {
9    e.preventDefault();
10  };
11
12  return (
13    <section className="relative bg-background py-32">
14      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
15      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
16      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
17      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
18
19      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
20        <div className="relative border border-border bg-muted/10 p-8 sm:p-12 lg:p-16">
21          <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
22          <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
23          <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
24          <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
25
26          <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16">
27            <div>
28              <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
29                Newsletter
30              </p>
31              <h2 className="mt-4 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
32                インサイトを受け取る
33              </h2>
34              <p className="mt-4 text-sm font-light leading-relaxed text-muted-foreground">
35                デザイン・エンジニアリング・プロダクト開発に関する厳選された情報を、隔週でお届けします。
36              </p>
37
38              <div className="mt-6 flex items-center gap-6">
39                <div className="flex items-center gap-2">
40                  <div className="h-1 w-1 rounded-full bg-foreground/30" />
41                  <span className="text-[10px] tracking-[0.15em] text-muted-foreground/60">
42                    隔週配信
43                  </span>
44                </div>
45                <div className="flex items-center gap-2">
46                  <div className="h-1 w-1 rounded-full bg-foreground/30" />
47                  <span className="text-[10px] tracking-[0.15em] text-muted-foreground/60">
48                    厳選コンテンツ
49                  </span>
50                </div>
51                <div className="flex items-center gap-2">
52                  <div className="h-1 w-1 rounded-full bg-foreground/30" />
53                  <span className="text-[10px] tracking-[0.15em] text-muted-foreground/60">
54                    いつでも解除
55                  </span>
56                </div>
57              </div>
58            </div>
59
60            <div>
61              <form onSubmit={handleSubmit} className="space-y-4">
62                <div>
63                  <label
64                    htmlFor="newsletter-floating-email"
65                    className="mb-2 block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
66                  >
67                    Email Address
68                  </label>
69                  <input
70                    id="newsletter-floating-email"
71                    type="email"
72                    value={email}
73                    onChange={(e) => setEmail(e.target.value)}
74                    placeholder="you@example.com"
75                    required
76                    className="w-full border border-border bg-background px-4 py-3 text-sm font-light tracking-wide text-foreground placeholder-muted-foreground/30 transition-colors duration-200 focus:border-foreground/40 focus:outline-none"
77                  />
78                </div>
79                <button
80                  type="submit"
81                  className="group flex w-full 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-all duration-200 hover:bg-foreground hover:text-background"
82                >
83                  購読する
84                  <svg
85                    className="h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"
86                    fill="none"
87                    stroke="currentColor"
88                    viewBox="0 0 24 24"
89                  >
90                    <path
91                      strokeLinecap="round"
92                      strokeLinejoin="round"
93                      strokeWidth={1.5}
94                      d="M17 8l4 4m0 0l-4 4m4-4H3"
95                    />
96                  </svg>
97                </button>
98              </form>
99
100              <div className="mt-4 h-px w-full bg-border/30" />
101
102              <p className="mt-4 text-center text-[10px] tracking-[0.1em] text-muted-foreground/40">
103                3,200人以上のプロフェッショナルが購読中
104              </p>
105            </div>
106          </div>
107        </div>
108      </div>
109    </section>
110  );
111}