preparing for product hunt launch

docs/index.html

@@ -21,7 +21,7 @@
   <meta name="twitter:title" content="NeoHtop - Modern System Monitor">
   <meta name="twitter:description" content="A beautiful, efficient system monitor built with Rust and Svelte.">
   <meta name="twitter:image" content="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png">
-  <link rel="icon" type="image/png" href="favicon.png">
+  <link rel="icon" type="image/png" href="favicon.ico">
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <link rel="stylesheet" href="styles.css">
   <link rel="preload" href="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png" as="image">
@@ -66,6 +66,37 @@
             <span class="tech-badge">Tauri</span>
             <span class="tech-badge">Svelte</span>
           </div>
+          <div class="badges">
+            <div class="ph-badge-placeholder">
+              <a href="https://www.producthunt.com/posts/neohtop?utm_source=badge-featured" target="_blank"
+                rel="noopener" class="coming-soon-badge">
+                📌 Launching tomorrow on Product Hunt
+              </a>
+
+              <script>
+                const launchDate = new Date('2024-11-04 00:00:00 PST'); // Replace with your launch date
+
+                function updateBadge() {
+                  if (Date.now() >= launchDate) {
+                    document.querySelector('.coming-soon-badge').outerHTML = `
+                      <a href="https://www.producthunt.com/posts/neohtop?utm_source=badge-featured" 
+                         target="_blank" 
+                         rel="noopener">
+                        <img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=neohtop&theme=light" 
+                             alt="NeoHtop - Modern system monitor for macOS | Product Hunt"
+                             style="width: 250px; height: 54px;" 
+                             width="250" 
+                             height="54" />
+                      </a>
+                    `;
+                  }
+                }
+
+                updateBadge();
+                setInterval(updateBadge, 60000); // Check every minute
+              </script>
+            </div>
+          </div>
         </div>
         <div class="hero-image">
           <img src="https://github.com/Abdenasser/neohtop/raw/main/screenshot.jpg" alt="NeoHtop Interface"

docs/styles.css

@@ -247,6 +247,13 @@ section {
   display: flex;
   gap: 0.5rem;
   justify-content: center;
+
+  /* Centered only on tablets and smaller screens */
+  @media (min-width: 1024px) {
+    justify-content: flex-start;
+    /* Align to the start on larger screens */
+  }
+
   margin-top: 1rem;
 }
 
@@ -961,4 +968,38 @@ footer {
 
 .nav-links a:hover::after {
   width: 100%;
+}
+
+/* Add this to your CSS */
+.ph-badge {
+  display: inline-block;
+  transition: transform 0.2s ease;
+}
+
+.ph-badge:hover {
+  transform: translateY(-2px);
+}
+
+/* If you want to adjust for dark mode */
+[data-theme="dark"] .ph-badge img {
+  filter: invert(1);
+  /* Optional: if you want to invert colors in dark mode */
+}
+
+.coming-soon-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #ff6154;
+  /* Product Hunt color */
+  color: white;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: transform 0.2s ease;
+}
+
+.coming-soon-badge:hover {
+  transform: translateY(-2px);
 }