docs: show the #5 Product of the Day rank on the site and in the README

README.md

@@ -17,12 +17,11 @@
   <a href="https://getopenscreen.com/discord"><img src="https://img.shields.io/badge/Discord-Join%20us-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord" /></a>
   <a href="https://github.com/sponsors/EtienneLescot"><img src="https://img.shields.io/badge/Sponsor-EA4AAA?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor" /></a>
   <img src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-lightgrey?style=for-the-badge" alt="Platform" />
+  <a href="https://www.producthunt.com/products/openscreen-2"><img src="https://img.shields.io/badge/Product%20Hunt-%235%20Product%20of%20the%20Day-DA552F?style=for-the-badge&logo=producthunt&logoColor=white" alt="#5 Product of the Day on Product Hunt" /></a>
 </p>
 
 <p align="center">
-  <a href="https://trendshift.io/repositories/57147?utm_source=repository-badge&amp;utm_medium=badge&amp;utm_campaign=badge-repository-57147" target="_blank" rel="noopener noreferrer"><img src="https://trendshift.io/api/badge/repositories/57147" alt="getopenscreen/openscreen | Trendshift" width="250" height="55" /></a>
-  <a href="https://www.producthunt.com/posts/openscreen-2-3?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-openscreen-2-3" target="_blank" rel="noopener noreferrer"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1263181&amp;theme=light" alt="OpenScreen 2 on Product Hunt" width="250" height="54" /></a>
-</p>
+  <a href="https://trendshift.io/repositories/57147?utm_source=repository-badge&amp;utm_medium=badge&amp;utm_campaign=badge-repository-57147" target="_blank" rel="noopener noreferrer"><img src="https://trendshift.io/api/badge/repositories/57147" alt="getopenscreen/openscreen | Trendshift" width="250" height="55" /></a></p>
 
 > [!NOTE]
 > **This is OpenScreen, continued.** [Siddharth Vaddem](https://github.com/siddharthvaddem) created the project and [archived the original repository](https://github.com/siddharthvaddem/openscreen) after v1.5.0. Development moved here with his approval, under the same name and the same MIT license.

website/i18n/code.source.json

@@ -68,8 +68,6 @@
   "home.install.note.windows": "Windows",
   "home.install.note.mac": "Mac",
   "home.install.note.linux": "Linux",
-  "editor.skipLink": "Skip the editor — go to downloads",
-  "editor.title": "Five things you will actually do",
   "demoLoop.pause": "Pause video",
   "demoLoop.play": "Play video",
   "demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.",
@@ -108,6 +106,14 @@
   "demoLoop.title.simpler-editor": "The OpenScreen editor",
   "demoLoop.title.edit-like-a-doc": "Editing a video like a document",
   "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit",
+  "editor.skipLink": "Skip the editor — go to downloads",
+  "editor.title": "Five things you will actually do",
+  "download.cta.mac": "Download for Mac",
+  "download.cta.windows": "Download for Windows",
+  "download.cta.linux": "Download for Linux",
+  "home.hero.download": "Download",
+  "download.cta.chooseMac": "Choose your Mac",
+  "download.cta.otherVersions": "Other versions",
   "films.default.kicker": "Out of the box",
   "films.default.title": "Good-looking from the first take.",
   "films.default.lead": "Every new recording opens {zoomed}, on a wallpaper, with padding, a shadow and rounded corners. Change any of it, or export it as it is.",
@@ -157,32 +163,6 @@
   "films.ship.blur": "{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password.",
   "films.ship.blur.t": "Blur regions.",
   "films.label": "More of the app, in motion",
-  "announcement.v2.link": "See what's new",
-  "announcement.v2.title": "OpenScreen v2 is here",
-  "recreation.style.kicker": "Style",
-  "recreation.style.title": "Swap the background",
-  "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
-  "recreation.effects.kicker": "Effects",
-  "recreation.effects.title": "Frame it your way",
-  "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.",
-  "recreation.cursor.kicker": "Cursor",
-  "recreation.cursor.title": "A cursor worth watching",
-  "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.",
-  "recreation.timeline.kicker": "Timeline",
-  "recreation.timeline.title": "One click, every zoom placed",
-  "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.",
-  "recreation.transcript.kicker": "Transcript",
-  "recreation.transcript.title": "Edit video like text",
-  "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.",
-  "recreation.pause": "Pause animation",
-  "recreation.play": "Play animation",
-  "home.hero.explore": "Scroll to explore the editor",
-  "download.cta.mac": "Download for Mac",
-  "download.cta.windows": "Download for Windows",
-  "download.cta.linux": "Download for Linux",
-  "home.hero.download": "Download",
-  "download.cta.chooseMac": "Choose your Mac",
-  "download.cta.otherVersions": "Other versions",
   "showcase.record.kicker": "record",
   "showcase.record.claim": "It records with the operating system, not around it.",
   "showcase.record.body": "Pick a window or a display. macOS goes through ScreenCaptureKit, Windows through Windows Graphics Capture, Linux through PipeWire and the ScreenCast portal — on each, the capture path the system itself provides. The pointer is recorded as data rather than burned into the pixels, which is the only reason you could restyle it further up this page.",
@@ -208,6 +188,27 @@
   "showcase.agent.link.docs": "AI editing docs",
   "showcase.agent.link.feature": "How automatic zooms work",
   "showcase.title": "Recorder, captions, agent, encoder.",
+  "announcement.v2.link": "See what's new",
+  "announcement.v2.title": "OpenScreen v2 is here",
+  "announcement.productHunt.rank": "#5 Product of the Day",
+  "recreation.style.kicker": "Style",
+  "recreation.style.title": "Swap the background",
+  "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
+  "recreation.effects.kicker": "Effects",
+  "recreation.effects.title": "Frame it your way",
+  "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.",
+  "recreation.cursor.kicker": "Cursor",
+  "recreation.cursor.title": "A cursor worth watching",
+  "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.",
+  "recreation.timeline.kicker": "Timeline",
+  "recreation.timeline.title": "One click, every zoom placed",
+  "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.",
+  "recreation.transcript.kicker": "Transcript",
+  "recreation.transcript.title": "Edit video like text",
+  "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.",
+  "recreation.pause": "Pause animation",
+  "recreation.play": "Play animation",
+  "home.hero.explore": "Scroll to explore the editor",
   "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
   "footer.product.title": "Product",
   "footer.product.download": "Download",

website/i18n/de/code.json

@@ -1081,5 +1081,9 @@
   },
   "download.cta.otherVersions": {
     "message": "Andere Versionen"
+  },
+  "announcement.productHunt.rank": {
+    "message": "#5 Produkt des Tages",
+    "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5."
   }
 }

website/i18n/es/code.json

@@ -1081,5 +1081,9 @@
   },
   "download.cta.otherVersions": {
     "message": "Otras versiones"
+  },
+  "announcement.productHunt.rank": {
+    "message": "#5 Producto del día",
+    "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5."
   }
 }

website/i18n/fr/code.json

@@ -1081,5 +1081,9 @@
   },
   "download.cta.otherVersions": {
     "message": "Autres versions"
+  },
+  "announcement.productHunt.rank": {
+    "message": "#5 Produit du jour",
+    "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5."
   }
 }

website/i18n/ja/code.json

@@ -1081,5 +1081,9 @@
   },
   "download.cta.otherVersions": {
     "message": "その他のバージョン"
+  },
+  "announcement.productHunt.rank": {
+    "message": "本日のプロダクト 第5位",
+    "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5."
   }
 }

website/i18n/pt-BR/code.json

@@ -1081,5 +1081,9 @@
   },
   "download.cta.otherVersions": {
     "message": "Outras versões"
+  },
+  "announcement.productHunt.rank": {
+    "message": "#5 Produto do dia",
+    "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5."
   }
 }

website/i18n/zh-CN/code.json

@@ -1081,5 +1081,9 @@
   },
   "download.cta.otherVersions": {
     "message": "其他版本"
+  },
+  "announcement.productHunt.rank": {
+    "message": "今日产品第 5 名",
+    "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5."
   }
 }

website/i18n/zh-TW/code.json

@@ -1081,5 +1081,9 @@
   },
   "download.cta.otherVersions": {
     "message": "其他版本"
+  },
+  "announcement.productHunt.rank": {
+    "message": "今日產品第 5 名",
+    "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5."
   }
 }

website/src/components/ReleaseBadge/index.tsx

@@ -22,3 +22,27 @@ export default function ReleaseBadge() {
 		</LocaleLink>
 	);
 }
+
+// The launch's Product Hunt rank, in the same pill. Product Hunt's own embed is a white
+// 250x54 card that outshone the download button beside it. The fill is Product Hunt's
+// brand colour: the mark is theirs, not a theme colour.
+export function ProductHuntBadge() {
+	return (
+		<a
+			className={styles.badge}
+			href="https://www.producthunt.com/products/openscreen-2"
+			target="_blank"
+			rel="noopener"
+		>
+			<svg width="15" height="15" viewBox="0 0 24 24" fill="#DA552F" aria-hidden="true">
+				<path d="M13.604 8.4h-3.405V12h3.405c.995 0 1.801-.806 1.801-1.801 0-.993-.805-1.799-1.801-1.799zM12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm1.604 14.4h-3.405V18H7.801V6h5.804c2.319 0 4.2 1.88 4.2 4.199 0 2.321-1.881 4.201-4.201 4.201z" />
+			</svg>
+			<Translate
+				id="announcement.productHunt.rank"
+				description="The launch's rank on Product Hunt (October 11, 2026). Keep the #5."
+			>
+				#5 Product of the Day
+			</Translate>
+		</a>
+	);
+}

website/src/pages/index.module.css

@@ -65,14 +65,18 @@
 	margin: 32px 0 0;
 }
 
-.productHunt {
-	display: inline-flex;
+.pills {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 10px;
+	margin-bottom: 32px;
 }
 
-/* Same height as the download button beside it. */
-.productHunt img {
-	height: 50px;
-	width: auto;
+/* The row carries the spacing, so two wrapped pills sit 10px apart, not a full
+   margin apart. */
+.pills > a {
+	margin-bottom: 0;
 }
 
 .platforms {
@@ -375,6 +379,10 @@
 		margin-top: 16px;
 	}
 
+	.pills {
+		margin-bottom: 24px;
+	}
+
 	.actions {
 		gap: 8px;
 		margin-top: 24px;

website/src/pages/index.tsx

@@ -11,7 +11,7 @@ import Editor from "../components/Editor";
 import Films from "../components/Films";
 import LocaleLink from "../components/LocaleLink";
 import PlatformDownload from "../components/PlatformDownload";
-import ReleaseBadge from "../components/ReleaseBadge";
+import ReleaseBadge, { ProductHuntBadge } from "../components/ReleaseBadge";
 import Showcase from "../components/Showcase";
 import type { AppLanguage } from "../lib/release";
 import { jsonLd, softwareApplicationLd } from "../lib/structured-data";
@@ -43,7 +43,10 @@ export default function Home() {
 			<header className={styles.hero} data-home-hero="">
 				<div className={styles.heroInner}>
 					<div className={styles.heroCopy}>
-						<ReleaseBadge />
+						<div className={styles.pills}>
+							<ReleaseBadge />
+							<ProductHuntBadge />
+						</div>
 						<Heading as="h1" className={styles.title}>
 							<Translate id="home.hero.title">Beautiful demos on the first take.</Translate>
 						</Heading>
@@ -55,19 +58,6 @@ export default function Home() {
 						</p>
 						<div className={styles.actions}>
 							<PlatformDownload className={styles.primaryCta} />
-							<a
-								className={styles.productHunt}
-								href="https://www.producthunt.com/posts/openscreen-2-3?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-openscreen-2-3"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								<img
-									src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1263181&theme=light"
-									alt="OpenScreen 2 on Product Hunt"
-									width="250"
-									height="54"
-								/>
-							</a>
 						</div>
 						<p className={styles.reassurance}>
 							<Translate id="home.hero.reassurance">