From d6dbee3ca33b2edea0e93c2e0960d6e8106f4429 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Sun, 3 Nov 2024 16:39:48 +0100
Subject: [PATCH] preparing for product hunt launch

---
 docs/favicon.ico | Bin 0 -> 15406 bytes
 docs/index.html  |  33 ++++++++++++++++++++++++++++++++-
 docs/styles.css  |  41 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 docs/favicon.ico

diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8a27576deab0428694797a28efa85503270ec4c9
GIT binary patch
literal 15406
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

literal 0
HcmV?d00001

diff --git a/docs/index.html b/docs/index.html
index 265d8ef..0b9fc92 100644
--- a/docs/index.html
+++ b/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"
diff --git a/docs/styles.css b/docs/styles.css
index 6c60feb..d2dce85 100644
--- a/docs/styles.css
+++ b/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);
 }
\ No newline at end of file