'use client' import { useState } from 'react' import { Loader2, ArrowRight, Mail, CheckCircle2, AlertCircle, X } from 'lucide-react' interface NewsletterState { email: string loading: boolean success: boolean error: string | null } const initialState: NewsletterState = { email: '', loading: false, success: false, error: null } /** * SimpleNewsletter - A minimal inline newsletter signup form */ export function SimpleNewsletter() { const [state, setState] = useState(initialState) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setState(prev => ({ ...prev, loading: true, error: null })) try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 1000)) setState(prev => ({ ...prev, loading: false, success: true })) } catch (error) { setState(prev => ({ ...prev, loading: false, error: 'Something went wrong. Please try again.' })) } } if (state.success) { return (

Thanks for subscribing!

) } return ( ) } /** * BoxNewsletter - A boxed newsletter signup with additional context */ export function BoxNewsletter() { const [state, setState] = useState(initialState) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setState(prev => ({ ...prev, loading: true, error: null })) try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 1000)) setState(prev => ({ ...prev, loading: false, success: true })) } catch (error) { setState(prev => ({ ...prev, loading: false, error: 'Something went wrong. Please try again.' })) } } return (

Subscribe to our newsletter

Get the latest updates and exclusive offers delivered to your inbox weekly.

{state.success ? (

Thank you for subscribing to our newsletter. Please check your email for confirmation.

) : ( )}

) } /** * FeaturedNewsletter - A full-width newsletter signup with image and extended content */ export function FeaturedNewsletter() { const [state, setState] = useState(initialState) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setState(prev => ({ ...prev, loading: true, error: null })) try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 1000)) setState(prev => ({ ...prev, loading: false, success: true })) } catch (error) { setState(prev => ({ ...prev, loading: false, error: 'Something went wrong. Please try again.' })) } } return (

Join our community

Subscribe to our newsletter and get exclusive access to premium content, early product releases, and monthly insights from industry experts delivered straight to your inbox.

{state.success ? (

You're all set!

Thank you for joining our newsletter. Watch your inbox for our welcome email.

) : (

Email address setState(prev => ({ ...prev, email: e.target.value }))} required disabled={state.loading} className="w-full px-4 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white placeholder:text-gray-400 focus:border-white focus:ring-2 focus:ring-white/20 focus:outline-none transition-colors disabled:opacity-50" />

{state.error && (

{state.error}

)}

No spam, ever

Unsubscribe anytime

) } /** * Demo component showcasing all three newsletter variations */ export default function NewsletterSignupDemo() { return (

Simple Newsletter

Box Newsletter

Featured Newsletter

) }

Newsletter UI