"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, buttonTap } from "@/lib/animations" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Checkbox } from "@/components/ui/checkbox" import { Mail, CheckCircle2, Zap, Code2, Palette, Smartphone } from "lucide-react" const topics = [ { id: "templates", label: "New Templates", icon: Palette }, { id: "tech", label: "Tech & Tutorials", icon: Code2 }, { id: "design", label: "Design Tips", icon: Smartphone }, { id: "updates", label: "Product Updates", icon: Zap }, ] const frequencies = ["Weekly", "Bi-weekly", "Monthly"] const previewContent = { subject: "New templates & design tips", preview: "This week we launched 3 new payment templates and a deep dive on dark mode patterns.", } export default function Newsletter() { const [email, setEmail] = useState("") const [selectedTopics, setSelectedTopics] = useState([]) const [frequency, setFrequency] = useState("Weekly") const [subscribed, setSubscribed] = useState(false) const toggleTopic = (id: string) => { setSelectedTopics((prev) => prev.includes(id) ? prev.filter((t) => t !== id) : [...prev, id] ) } const handleSubscribe = () => { if (!email || selectedTopics.length === 0) return setSubscribed(true) } if (subscribed) { return (

Subscribed! You'll receive our newsletter at {email}

) } return (

Newsletter

Stay in the loop

Get the latest templates, tutorials, and design insights delivered to your inbox.

Subscribe Choose your preferences below

Email Address setEmail(e.target.value)} />

Topics

{topics.map((topic) => ( toggleTopic(topic.id)} > toggleTopic(topic.id)} id={`topic-${topic.id}`} /> {topic.label} ))}

Frequency

{frequencies.map((f) => ( ))}

Preview What to expect

This week

{previewContent.subject}

{previewContent.preview}

No spam, ever

Unsubscribe anytime

Curated content

) }