feat: add success state and green button variant for newsletter signup form

src/components/Button.tsx

@@ -14,6 +14,7 @@ const variantStyles = {
     white:
       'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
+    green: 'bg-green-500 text-white hover:bg-green-600',
   },
   outline: {
     gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',

src/components/Footer.tsx

@@ -14,11 +14,13 @@ import logomark from '@/images/logomark.svg'
 export function Footer() {
   const [email, setEmail] = useState('');
   const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
   const [message, setMessage] = useState('');
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoading(true);
+    setSuccess(false);
     setMessage('');
 
     try {
@@ -36,6 +38,7 @@ export function Footer() {
         throw new Error(data.error || 'Something went wrong');
       }
 
+      setSuccess(true);
       setMessage('Thanks for subscribing!');
       setEmail('');
     } catch (error: any) {
@@ -91,8 +94,13 @@ export function Footer() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
               />
-              <Button type="submit" color="cyan" className="ml-4 flex-none" disabled={loading}>
-                {loading ? 'Joining...' : <><span className="hidden lg:inline">Join our newsletter</span><span className="lg:hidden">Join newsletter</span></>}
+              <Button
+                type="submit"
+                color={success ? 'green' : 'cyan'}
+                className="ml-4 flex-none"
+                disabled={loading || success}
+              >
+                {loading ? 'Joining...' : success ? 'Sent!' : <><span className="hidden lg:inline">Join our newsletter</span><span className="lg:hidden">Join newsletter</span></>}
               </Button>
             </form>
             {message && <p className="mt-2 text-sm text-gray-600">{message}</p>}