Use the shared subscribe form on the homepage

The homepage form sent only the email and the tag to Mailcoach, so
subscribers landed on the Mailcoach result pages. It now uses the
SubscribeForm component with a dark variant. It redirects to the
bref.sh result pages and has the honeypot field.

Claude-Session: https://claude.ai/code/session_015w3NerK2Ejb5Z73hKotBoQ

Author: mnapoli

website/src/components/home/case-studies.jsx

@@ -1,3 +1,5 @@
+import SubscribeForm from '../news/SubscribeForm';
+
 const posts = [
     {
         id: 2,
@@ -38,20 +40,7 @@ export default function CaseStudies() {
                                 Support & consulting <span aria-hidden="true">&rarr;</span>
                             </a>
                         </div>
-                        <form action="https://bref.mailcoach.app/subscribe/be83c960-8fee-43fa-abfa-29669e9f433a"
-                              className="w-full flex flex-col items-start mt-8"
-                              method="post">
-                            <input type="hidden" name="tags" value="bref_website" />
-                            <div className="flex flex-col sm:flex-row w-full sm:w-auto gap-2">
-                                <input
-                                    className="min-w-0 flex-auto rounded-md border-0 bg-white/10 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-white/75 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6"
-                                    name="email" aria-label="Email" placeholder="you@example.com" required type="email" />
-                                <button type="submit"
-                                        className="flex-none rounded-md !bg-gray-500 hover:!bg-gray-400 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
-                                    Subscribe to the newsletter
-                                </button>
-                            </div>
-                        </form>
+                        <SubscribeForm tag="bref_website" onDark className="mt-8 sm:w-fit" />
                     </div>
                     <div className="mx-auto w-full border-t border-gray-900/10 pt-12 sm:pt-16 lg:mx-0 lg:max-w-none lg:border-t-0 lg:pt-0 text-gray-300">
                         <div className="-my-4 divide-y divide-gray-900/10">

website/src/components/news/SubscribeForm.jsx

@@ -12,12 +12,24 @@ const MAILCOACH_SUBSCRIBE_URL = 'https://bref.mailcoach.app/subscribe/be83c960-8
 // - `tag`: Mailcoach subscriber tag, to measure where subscribers come from.
 // - `label`: visible label above the field. Without it the form is a single row
 //   (placeholder + button).
+// - `onDark`: styles for a dark background (the homepage section), instead of
+//   following the site theme.
 // - The migration email links to /news/subscribe?email=... : the address is
 //   prefilled but nothing is submitted until the reader clicks the button, so
 //   email prefetchers (which only GET the link) cannot subscribe anyone.
 // - Mailcoach sends its double opt-in email and redirects to the bref.sh
 //   result pages below.
-export default function SubscribeForm({ tag, label, className = 'my-8' }) {
+const INPUT_CLASS = {
+    light: 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:placeholder:text-white/50',
+    dark: 'bg-white/10 text-white ring-white/10 placeholder:text-white/75 focus:ring-white',
+}
+const BUTTON_CLASS = {
+    light: 'bg-blue-500 hover:bg-blue-400',
+    dark: '!bg-gray-500 hover:!bg-gray-400',
+}
+
+export default function SubscribeForm({ tag, label, onDark = false, className = 'my-8' }) {
+    const variant = onDark ? 'dark' : 'light'
     const emailRef = useRef(null)
     const honeypotRef = useRef(null)
 
@@ -66,11 +78,11 @@ export default function SubscribeForm({ tag, label, className = 'my-8' }) {
                     autoComplete="email"
                     aria-label={label ? undefined : 'Email'}
                     placeholder="you@example.com"
-                    className="min-w-0 flex-auto rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:placeholder:text-white/50"
+                    className={`min-w-0 flex-auto rounded-md border-0 px-3.5 py-2 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 ${INPUT_CLASS[variant]}`}
                 />
                 <button
                     type="submit"
-                    className="flex-none rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+                    className={`flex-none rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 ${BUTTON_CLASS[variant]}`}
                 >
                     Subscribe to the Bref newsletter
                 </button>