Initial B2B Blog Launch by Antigravity Autopilot

Author: TechStack Global

index.html

@@ -85,7 +85,7 @@ <h2>Featured Articles</h2>
                 </div>
                 <div class="article-grid" id="featured-posts">
                     <div class="article-card">
-                        <div class="card-image-placeholder"></div>
+                        <img src="thumb_shopify.png" alt="Shopify vs BigCommerce" class="card-image">
                         <div class="card-body">
                             <span class="category">Comparison</span>
                             <h3>Shopify vs. BigCommerce: 2026 Verdict</h3>
@@ -95,7 +95,7 @@ <h3>Shopify vs. BigCommerce: 2026 Verdict</h3>
                         </div>
                     </div>
                     <div class="article-card">
-                        <div class="card-image-placeholder"></div>
+                        <img src="thumb_fiverr.png" alt="Fiverr Pro B2B" class="card-image">
                         <div class="card-body">
                             <span class="category">Operations</span>
                             <h3>Leveraging Fiverr Pro for B2B Growth</h3>
@@ -106,7 +106,7 @@ <h3>Leveraging Fiverr Pro for B2B Growth</h3>
                     </div>
                     <!-- Existing articles -->
                     <div class="article-card">
-                        <div class="card-image-placeholder"></div>
+                        <img src="thumb_stack.png" alt="Tech Stack 2026" class="card-image">
                         <div class="card-body">
                             <span class="category">Expert Guide</span>
                             <h3>The Ultimate B2B Tech Stack 2026</h3>
@@ -116,7 +116,7 @@ <h3>The Ultimate B2B Tech Stack 2026</h3>
                         </div>
                     </div>
                     <div class="article-card">
-                        <div class="card-image-placeholder"></div>
+                        <img src="thumb_affiliate.png" alt="Affiliate Blueprint" class="card-image">
                         <div class="card-body">
                             <span class="category">Business Strategy</span>
                             <h3>The 2026 B2B Affiliate Blueprint</h3>
@@ -126,7 +126,7 @@ <h3>The 2026 B2B Affiliate Blueprint</h3>
                         </div>
                     </div>
                     <div class="article-card">
-                        <div class="card-image-placeholder"></div>
+                        <img src="thumb_guide.png" alt="B2B Automation Guide" class="card-image">
                         <div class="card-body">
                             <span class="category">Comparison</span>
                             <h3>The 2026 B2B Automation Guide: Scaling Revenue</h3>
@@ -154,10 +154,10 @@ <h2>Stay Ahead of the Curve</h2>
         <div class="container footer-content">
             <div class="footer-info">
                 <div class="logo">
-                <a href="index.html" style="text-decoration: none; color: inherit;">
-                    TechStack<span>Global</span>
-                </a>
-            </div>
+                    <a href="index.html" style="text-decoration: none; color: inherit;">
+                        TechStack<span>Global</span>
+                    </a>
+                </div>
                 <p>&copy; 2026 B2B Automation Insights. All rights reserved.</p>
             </div>
             <ul class="footer-links">

style.css

@@ -1,12 +1,12 @@
 :root {
-    --bg-color: #050505;
-    --text-color: #ffffff;
-    --accent-color: #3b82f6;
-    --secondary-accent: #10b981;
-    --card-bg: rgba(255, 255, 255, 0.05);
-    --border-color: rgba(255, 255, 255, 0.1);
+    --bg-color: #0c0c14;
+    --text-color: #f7f9fc;
+    --accent-color: #60a5fa;
+    --secondary-accent: #34d399;
+    --card-bg: rgba(30, 41, 59, 0.4);
+    --border-color: rgba(255, 255, 255, 0.08);
     --font-main: 'Inter', sans-serif;
-    --glass-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+    --glass-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
 }
 
 * {
@@ -279,19 +279,32 @@ nav {
 .article-card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
-    border-radius: 20px;
+    border-radius: 24px;
     overflow: hidden;
-    transition: transform 0.3s, border-color 0.3s;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    backdrop-filter: blur(10px);
 }
 
 .article-card:hover {
-    transform: translateY(-8px);
+    transform: translateY(-12px);
     border-color: var(--accent-color);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+}
+
+.card-image {
+    width: 100%;
+    height: 220px;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.article-card:hover .card-image {
+    transform: scale(1.05);
 }
 
 .card-image-placeholder {
-    height: 200px;
-    background: linear-gradient(45deg, #111, #222);
+    height: 220px;
+    background: linear-gradient(45deg, #1e293b, #334155);
 }
 
 .card-body {