feat: Add Buttondown email subscription form to footer with new input styling.

src/components/Footer.jsx

@@ -36,20 +36,20 @@ const Footer = () => {
                     <p style={{ marginBottom: '20px', color: '#888' }}>
                         Occasional updates on new projects and experiments.
                     </p>
-                    <div style={{ display: 'flex', borderBottom: '1px solid #333' }}>
+                    <form
+                        action="https://buttondown.com/api/emails/embed-subscribe/matiss"
+                        method="post"
+                        target="_blank"
+                        style={{ display: 'flex', borderBottom: '1px solid #333' }}
+                    >
                         <input
+                            className="footer-input"
                             type="email"
+                            name="email"
                             placeholder="email address"
-                            style={{
-                                background: 'transparent',
-                                border: 'none',
-                                color: '#fff',
-                                padding: '10px 0',
-                                flex: 1,
-                                outline: 'none'
-                            }}
                         />
-                        <button style={{
+                        <input type="hidden" value="1" name="embed" />
+                        <button type="submit" style={{
                             background: 'transparent',
                             border: 'none',
                             color: '#ff4d00',
@@ -59,7 +59,7 @@ const Footer = () => {
                         }}>
                             Subscribe
                         </button>
-                    </div>
+                    </form>
                 </div>
             </div>
 

src/index.css

@@ -36,6 +36,34 @@ h1 {
   line-height: 1.1;
 }
 
+/* Footer Input */
+.footer-input {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #333;
+  color: #fff;
+  padding: 15px 0;
+  font-size: 1.2rem;
+  font-family: inherit;
+  flex: 1;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.footer-input:focus {
+  border-bottom: 1px solid #ff4d00;
+}
+
+.footer-input::placeholder {
+  color: #666;
+  font-size: 1.1rem;
+  transition: color 0.3s ease;
+}
+
+.footer-input:focus::placeholder {
+  color: #888;
+}
+
 button {
   border-radius: 8px;
   border: 1px solid transparent;