NewsletterForm

'use client'
import { useState } from 'react'

export default function NewsletterForm({
  title = 'Stay in the loop',
  desc = 'Get weekly updates on new components, tutorials and Empire UI news.',
}) {
  const [email, setEmail] = useState('')
  const [status, setStatus] = useState('idle')
  const [error, setError] = useState('')
  const submit = (e) => {
    e.preventDefault()
    if (!/^[^s@]+@[^s@]+.[^s@]+$/.test(email)) { setError('Please enter a valid email'); return }
    setError(''); setStatus('loading')
    setTimeout(() => setStatus('success'), 1500)
  }
  if (status === 'success') return (
    <div style={{ textAlign:'center', padding:'32px 24px', background:'#f0fdf4', borderRadius:'16px' }}>
      <div style={{ fontSize:'48px', marginBottom:'12px' }}>🎉</div>
      <h3 style={{ color:'#15803d', margin:'0 0 6px' }}>You're subscribed!</h3>
      <p style={{ color:'#64748b', fontSize:'13px', margin:0 }}>Thanks for joining. Check your inbox to confirm.</p>
    </div>
  )
  return (
    <div style={{ background:'linear-gradient(135deg,#f5f3ff,#eff6ff)', borderRadius:'16px', padding:'32px 24px', maxWidth:'420px' }}>
      <h3 style={{ margin:'0 0 8px', fontSize:'20px', fontWeight:700, color:'#1e293b' }}>{title}</h3>
      <p style={{ margin:'0 0 20px', fontSize:'14px', color:'#64748b', lineHeight:1.6 }}>{desc}</p>
      <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:'10px' }}>
        <input
          type="email" value={email} onChange={e=>{setEmail(e.target.value);setError('')}}
          placeholder="your@email.com"
          style={{ padding:'12px 16px', borderRadius:'10px', border:'2px solid '+(error?'#ef4444':'#e2e8f0'), fontSize:'15px', outline:'none' }}
        />
        {error && <p style={{ color:'#ef4444', fontSize:'12px', margin:0 }}>{error}</p>}
        <button type="submit" disabled={status==='loading'} style={{
          background:status==='loading'?'#9ca3af':'linear-gradient(135deg,#6d28d9,#2563eb)',
          color:'#fff', border:'none', borderRadius:'10px',
          padding:'12px', fontWeight:700, cursor:status==='loading'?'wait':'pointer', fontSize:'15px',
        }}>{status==='loading'?'Subscribing...':'Subscribe →'}</button>
      </form>
      <p style={{ fontSize:'11px', color:'#94a3b8', margin:'12px 0 0', textAlign:'center' }}>No spam. Unsubscribe anytime.</p>
    </div>
  )
}

Component info

About

Email newsletter signup form with validation and success state