Show the Product Hunt badge beside the page heading for launch day

Author: alfg

src/components/PageIntro.tsx

@@ -1,3 +1,5 @@
+import ProductHuntBadge from './ProductHuntBadge'
+
 /**
  * The indexable copy from Home.vue.
  *
@@ -11,13 +13,16 @@
  */
 export function PageHeading() {
   return (
-    <header>
-      <h1 className="text-base font-semibold tracking-tight">
-        FFmpeg Command Generator for Common Encoding Workflows
-      </h1>
-      <p className="text-sm text-muted">
-        Build FFmpeg commands without memorizing every flag.
-      </p>
+    <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 className="text-base font-semibold tracking-tight">
+          FFmpeg Command Generator for Common Encoding Workflows
+        </h1>
+        <p className="text-sm text-muted">
+          Build FFmpeg commands without memorizing every flag.
+        </p>
+      </div>
+      <ProductHuntBadge />
     </header>
   )
 }

src/components/ProductHuntBadge.tsx

@@ -0,0 +1,21 @@
+const HREF =
+  'https://www.producthunt.com/products/ffmpeg-commander?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-ffmpeg-commander'
+const SRC = 'https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1263419&t=1790766831054'
+const ALT = 'FFmpeg Commander - A web GUI for generating FFmpeg command-line operations. | Product Hunt'
+
+/**
+ * Launch-day badge for Product Hunt. Temporary: drop it from PageHeading once
+ * the launch is over.
+ *
+ * Two images toggled by the theme class rather than a <picture> with
+ * prefers-color-scheme, since the theme here is the user's choice and can
+ * disagree with their OS.
+ */
+export default function ProductHuntBadge() {
+  return (
+    <a href={HREF} target="_blank" rel="noopener noreferrer" className="shrink-0">
+      <img alt={ALT} width="250" height="54" src={`${SRC}&theme=light`} className="dark:hidden" />
+      <img alt={ALT} width="250" height="54" src={`${SRC}&theme=dark`} className="hidden dark:block" />
+    </a>
+  )
+}