69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function Newsletter() {
|
|
const [email, setEmail] = useState("");
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSubmitted(true);
|
|
};
|
|
|
|
return (
|
|
<section className="py-20 px-4 bg-foreground text-white">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<h2 className="text-3xl md font-serif mb-:text-4xl4">
|
|
Stay Updated
|
|
</h2>
|
|
<p className="text-white/60 mb-8">
|
|
Subscribe to receive news about new products and special offers
|
|
</p>
|
|
</motion.div>
|
|
|
|
{submitted ? (
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="text-accent"
|
|
>
|
|
Thank you for subscribing!
|
|
</motion.p>
|
|
) : (
|
|
<motion.form
|
|
onSubmit={handleSubmit}
|
|
className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="Enter your email"
|
|
required
|
|
className="flex-1 px-6 py-3 bg-white/10 border border-white/20 text-white placeholder:text-white/40 focus:outline-none focus:border-accent"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="px-8 py-3 bg-accent hover:bg-accent-dark transition-colors"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</motion.form>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|