docs(website): show the Product Hunt badge next to the download button

Author: EtienneLescot

website/src/pages/index.module.css

@@ -61,9 +61,14 @@
 	gap: 12px;
 	flex-wrap: wrap;
 	justify-content: center;
+	align-items: center;
 	margin: 32px 0 0;
 }
 
+.productHunt {
+	display: inline-flex;
+}
+
 .platforms {
 	margin: 8px 0 0;
 	font-size: 12px;

website/src/pages/index.tsx

@@ -55,17 +55,8 @@ export default function Home() {
 						</p>
 						<div className={styles.actions}>
 							<PlatformDownload className={styles.primaryCta} />
-						</div>
-						<p className={styles.reassurance}>
-							<Translate id="home.hero.reassurance">
-								Free and open source. No watermark. No account.
-							</Translate>
-						</p>
-						<p className={styles.platforms}>
-							<Translate id="home.features.platforms.title">Windows, macOS, Linux</Translate>
-						</p>
-						<p>
 							<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"
@@ -77,6 +68,14 @@ export default function Home() {
 									height="54"
 								/>
 							</a>
+						</div>
+						<p className={styles.reassurance}>
+							<Translate id="home.hero.reassurance">
+								Free and open source. No watermark. No account.
+							</Translate>
+						</p>
+						<p className={styles.platforms}>
+							<Translate id="home.features.platforms.title">Windows, macOS, Linux</Translate>
 						</p>
 					</div>
 				</div>