feat: replace hero SSD review with horizontal product slider (Sony, Shure, Alienware)

Author: TechStack Global

index.html

@@ -107,24 +107,102 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
           Just clear guidance on the tech that powers modern work.</p>
 
       </div>
-      <!-- Hero Featured Review Card-->
-      <div class="hero-visual">
-        <div class="glass-card"
-          style="padding: 2.5rem; max-width: 420px; border-top: 4px solid var( accent); position: relative; z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.4);">
-          <div
-            style="font-size: 0.8rem; color: var( accent); font-weight: bold; text-transform: uppercase; margin-bottom: 1rem;">
-            <i class="fa-solid fa-star"></i> Featured Review (New)
+      <!-- Hero Featured Products Carousel -->
+      <div class="hero-visual slider-container">
+        <style>
+          .product-slider {
+            display: flex;
+            gap: 1.5rem;
+            overflow-x: auto;
+            scroll-snap-type: x mandatory;
+            padding-bottom: 1rem;
+            scrollbar-width: none;
+            /* Firefox */
+            -ms-overflow-style: none;
+            /* IE and Edge */
+            max-width: 100%;
+          }
+
+          .product-slider::-webkit-scrollbar {
+            display: none;
+          }
+
+          .product-slider>.glass-card {
+            scroll-snap-align: center;
+            min-width: 280px;
+            max-width: 300px;
+            flex: 0 0 auto;
+            padding: 2rem;
+            border-top: 4px solid var(--accent, #38bdf8);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            display: flex;
+            flex-direction: column;
+          }
+
+          .product-slider>.glass-card h3 {
+            font-size: 1.3rem;
+            margin-bottom: 0.5rem;
+            line-height: 1.3;
+          }
+
+          .product-slider>.glass-card p {
+            color: var(--text-secondary, #94a3b8);
+            font-size: 0.9rem;
+            margin-bottom: 1.5rem;
+            line-height: 1.5;
+            flex-grow: 1;
+          }
+
+          .product-slider>.glass-card img {
+            width: 100%;
+            height: auto;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            aspect-ratio: 16/9;
+            object-fit: cover;
+          }
+        </style>
+        <div class="product-slider">
+          <!-- Sony WH-1000XM5 -->
+          <div class="glass-card">
+            <div
+              style="font-size: 0.75rem; color: var(--accent, #38bdf8); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
+              <i class="fa-solid fa-headphones"></i> Audio
+            </div>
+            <img src="posts/images/sony-wh-1000xm5-front.jpg" alt="Sony WH-1000XM5" loading="lazy">
+            <h3>Sony WH-1000XM5</h3>
+            <p>Top-tier active noise cancellation and supreme all-day comfort for deep work.</p>
+            <a class="read-more" href="posts/sony-wh-1000xm5-review.html"
+              style="font-weight: 700; margin-top: auto;">Read Review <i class="fa-solid fa-arrow-right"
+                style="margin-left: 5px;"></i></a>
+          </div>
+
+          <!-- Shure SM7dB -->
+          <div class="glass-card">
+            <div
+              style="font-size: 0.75rem; color: var(--accent, #38bdf8); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
+              <i class="fa-solid fa-microphone"></i> Broadcasting
+            </div>
+            <img src="posts/images/shure-sm7db-primary.jpg" alt="Shure SM7dB Microphone" loading="lazy">
+            <h3>Shure SM7dB</h3>
+            <p>The industry standard podcast microphone, now with a built-in clean preamp.</p>
+            <a class="read-more" href="posts/shure-sm7db-review.html" style="font-weight: 700; margin-top: auto;">Read
+              Review <i class="fa-solid fa-arrow-right" style="margin-left: 5px;"></i></a>
+          </div>
+
+          <!-- Alienware AW3423DWF -->
+          <div class="glass-card">
+            <div
+              style="font-size: 0.75rem; color: var(--accent, #38bdf8); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
+              <i class="fa-solid fa-desktop"></i> Displays
+            </div>
+            <img src="posts/images/alienware-aw3423dwf-front.jpg" alt="Alienware AW3423DWF" loading="lazy">
+            <h3>Alienware AW3423DWF</h3>
+            <p>Stunning QD-OLED ultrawide performance for flawless visual immersion.</p>
+            <a class="read-more" href="posts/alienware-aw3423dwf-review.html"
+              style="font-weight: 700; margin-top: auto;">Read Review <i class="fa-solid fa-arrow-right"
+                style="margin-left: 5px;"></i></a>
           </div>
-          <h3 style="font-size: 1.6rem; margin-bottom: 1rem; line-height: 1.3;">Samsung 990 PRO
-            SSD: The
-            Performance King</h3>
-          <p style="color: var( text-secondary); font-size: 1rem; margin-bottom: 2rem; line-height: 1.6;">
-            Unrivaled sequential speeds up to 7,450 MB/s and premium reliability for modern,
-            high-intensity
-            workflows.</p>
-          <a class="read-more" href="posts/samsung-990-pro-ssd-review.html"
-            style="display: inline-flex; align-items: center; font-weight: 700;">Read Full
-            Review <i class="fa-solid fa-arrow-right" style="margin-left: 8px; transition: transform 0.2s;"></i></a>
         </div>
       </div>
     </section>