Refactor homepage layout by adding featured badges section and removing outdated IndieHunt badge. Update styles for improved layout and responsiveness.

Author: huycozy

assets/css/style.css

@@ -170,7 +170,7 @@ header {
     min-height: 100vh;
     display: flex;
     align-items: center;
-    padding-top: var(--header-height);
+    padding: var(--header-height) 0 4rem;
     text-align: center;
     background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%);
 }
@@ -192,6 +192,7 @@ header {
     justify-content: center;
     flex-wrap: wrap;
     align-items: center;
+    margin-bottom: 0.25rem;
 }
 
 /* Store Badges */
@@ -240,25 +241,42 @@ header {
     flex-shrink: 0;
 }
 
-.indiehunt-badge {
+.featured-badges {
+    margin-top: 4.5rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.featured-badges-grid {
     display: flex;
     justify-content: center;
-    padding: 2rem 1.5rem 0;
+    align-items: center;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    width: fit-content;
+    max-width: 100%;
+    padding: 1.25rem 1.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
 }
 
-.indiehunt-badge a {
+.featured-badges-grid a {
     display: inline-flex;
     transition: transform 0.2s, opacity 0.2s;
 }
 
-.indiehunt-badge a:hover {
+.featured-badges-grid a:hover {
     transform: translateY(-2px);
     opacity: 0.9;
 }
 
-.indiehunt-badge img {
+.featured-badges-grid img {
     display: block;
-    max-width: 100%;
+    width: auto;
+    max-width: min(265px, 100%);
     height: auto;
 }
 
@@ -549,4 +567,20 @@ footer {
         width: min(100%, 320px);
         min-height: 56px;
     }
+
+    .hero {
+        min-height: auto;
+        align-items: flex-start;
+        padding: calc(var(--header-height) + 2rem) 0 3rem;
+    }
+
+    .featured-badges {
+        margin-top: 2.5rem;
+    }
+
+    .featured-badges-grid {
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1.25rem 1rem;
+    }
 }

index.html

@@ -78,17 +78,24 @@ <h1>Fast, private file sharing on your local network.</h1>
                         <img src="assets/images/Mac_App_Store_Badge.png" alt="Download on Mac App Store">
                     </a>
                 </div>
+                <div class="featured-badges" aria-label="Launch badges">
+                    <div class="featured-badges-grid">
+                        <a href="https://www.producthunt.com/products/netshare-share-file-in-local?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-netshare-share-file-in-local"
+                            target="_blank" rel="noopener noreferrer">
+                            <img alt="NetShare-share file in local - Private and no internet needed | Product Hunt"
+                                width="250" height="54"
+                                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1157930&amp;theme=light&amp;t=1780107635738">
+                        </a>
+                        <a href="https://indiehunt.io/project/netshare-fast-private-local-file-sharing" target="_blank"
+                            rel="noopener">
+                            <img src="https://indiehunt.io/badges/indiehunt-badge-dark.svg" alt="Featured on IndieHunt"
+                                width="265" height="58">
+                        </a>
+                    </div>
+                </div>
             </div>
         </section>
 
-        <div class="indiehunt-badge">
-            <a href="https://indiehunt.io/project/netshare-fast-private-local-file-sharing" target="_blank"
-                rel="noopener">
-                <img src="https://indiehunt.io/badges/indiehunt-badge-dark.svg" alt="Featured on IndieHunt"
-                    width="265" height="58">
-            </a>
-        </div>
-
         <!-- Value Propositions -->
         <section id="features">
             <div class="container">
@@ -183,38 +190,6 @@ <h3>Dev teams & studios</h3>
             </div>
         </section>
 
-        <!-- Architecture -->
-        <section class="architecture">
-            <div class="container arch-content">
-                <h2>Designed for local-first today. <br>Ready for more tomorrow.</h2>
-                <p>Netshare is built with a local-first architecture that priorities simplicity, performance, and
-                    privacy.</p>
-                <p>For advanced use cases, Netshare can be extended to support self-hosted deployments and team
-                    environments.</p>
-            </div>
-        </section>
-
-        <!-- Closing CTA -->
-        <section style="text-align: center;">
-            <div class="container">
-                <h2>Your network. Your data. Your control.</h2>
-                <p style="margin: 1rem auto 2rem; max-width: 600px;">
-                    Download Netshare and start sharing files instantly — without relying on the cloud.
-                </p>
-                <div class="hero-actions" style="justify-content: center;">
-                    <a href="#" class="store-badge link-android" target="_blank">
-                        <img src="assets/images/GooglePlay_Badge.png" alt="Get it on Google Play">
-                    </a>
-                    <a href="#" class="store-badge link-ios" target="_blank">
-                        <img src="assets/images/App_Store_Badge.png" alt="Download on the App Store">
-                    </a>
-                    <a href="#" class="store-badge link-macos" target="_blank">
-                        <img src="assets/images/Mac_App_Store_Badge.png" alt="Download on Mac App Store">
-                    </a>
-                </div>
-            </div>
-        </section>
-
         <div class="coffee-support" style="text-align: center; padding: 2rem 0; color: #a1a1aa;">
             💙 If you liked this app, consider <a href="https://buymeacoffee.com/huynguyennovem" target="_blank"
                 rel="noopener" style="color: #007bff; text-decoration: underline;">buying me a coffee</a>