chore: add Product Hunt badge

Author: DeepanshKhurana

landing/documentation.html

@@ -20,7 +20,10 @@
                 <span class="terminal-title">prosaic --help</span>
             </div>
             <div class="terminal-body">
-                <h1><span class="prompt">$</span> prosaic --help</h1>
+                <div class="header-row">
+                    <h1><span class="prompt">$</span> prosaic --help</h1>
+                    <a class="ph-badge" href="https://www.producthunt.com/products/prosaic?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-prosaic" target="_blank" rel="noopener noreferrer"><img alt="Prosaic - Product Hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1084278&amp;theme=neutral&amp;t=1772276159522"></a>
+                </div>
                 <p class="tagline"># Command line usage</p>
 
                 <div class="docs-section">

landing/index.html

@@ -20,7 +20,10 @@
                 <span class="terminal-title">prosaic</span>
             </div>
             <div class="terminal-body">
-                <h1><span class="prompt">$</span> prosaic</h1>
+                <div class="header-row">
+                    <h1><span class="prompt">$</span> prosaic</h1>
+                    <a class="ph-badge" href="https://www.producthunt.com/products/prosaic?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-prosaic" target="_blank" rel="noopener noreferrer"><img alt="Prosaic - Product Hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1084278&amp;theme=neutral&amp;t=1772276159522"></a>
+                </div>
                 <p class="tagline"># A writer-first terminal writing app</p>
                 <p class="description">
                     Prosaic is for writers who want to write anywhere with a terminal and a keyboard. It's markdown-first, distraction-free, 

landing/style.css

@@ -95,6 +95,29 @@ h1 {
     margin-right: 0.5rem;
 }
 
+.header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.header-row h1 {
+    margin-bottom: 0;
+}
+
+.ph-badge {
+    display: flex;
+    flex-shrink: 0;
+}
+
+.ph-badge img {
+    height: 40px;
+    width: auto;
+    filter: hue-rotate(90deg);
+}
+
 .tagline {
     font-size: 1.1rem;
     color: var(--comment-color);
@@ -217,9 +240,21 @@ h1 {
     color: var(--text-color);
 }
 
-@media (max-width: 480px) {
+@media (max-width: 560px) {
+
     h1 {
-        font-size: 1.5rem;
+        font-size: 1.5rem !important;
+    }
+
+    .ph-badge img {
+      height: 2rem;
+      margin-top: 0.1rem;
+    }
+
+    .header-row {
+        flex-direction: row;
+        gap: 0.5rem;
+        align-items: flex-start;
     }
 
     .terminal-body {
@@ -299,7 +334,7 @@ h1 {
     color: var(--text-color);
 }
 
-@media (max-width: 480px) {
+@media (max-width: 560px) {
     .docs-row {
         flex-direction: column;
         gap: 0.25rem;