55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { useState } from "react"
|
|
import { motion } from "motion/react"
|
|
import TextAnimation from "@/components/ui/TextAnimation"
|
|
import ScrollReveal from "@/components/ui/ScrollReveal"
|
|
import Input from "@/components/ui/Input"
|
|
import Button from "@/components/ui/Button"
|
|
import Tag from "@/components/ui/Tag"
|
|
|
|
export default function Newsletter() {
|
|
const [email, setEmail] = useState("")
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
// Handle submit
|
|
setEmail("")
|
|
}
|
|
|
|
return (
|
|
<section className="relative w-full py-24 bg-background" data-webild-section="newsletter">
|
|
<div className="w-content-width mx-auto">
|
|
<ScrollReveal variant="fade">
|
|
<div className="flex flex-col items-center text-center max-w-2xl mx-auto">
|
|
<Tag text="Newsletter" className="mb-6" />
|
|
<TextAnimation
|
|
text="Join Our Mailing List"
|
|
variant="fade-blur"
|
|
tag="h2"
|
|
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
|
|
gradientText={false}
|
|
/>
|
|
<p className="text-lg text-accent mb-10">
|
|
Sign up for our newsletter to receive exclusive offers, seasonal menus, and updates directly to your inbox.
|
|
</p>
|
|
|
|
<form onSubmit={handleSubmit} className="w-full flex flex-col sm:flex-row gap-4">
|
|
<Input
|
|
type="email"
|
|
placeholder="Enter your email address"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
className="flex-1"
|
|
/>
|
|
<Button
|
|
text="Subscribe"
|
|
variant="primary"
|
|
className="w-full sm:w-auto"
|
|
/>
|
|
</form>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |