Skip to content

Commit 88dd701

Browse files
author
TechStack Global
committed
feat: diversify homepage product cards and comparison table with mixed gear types
1 parent 29308c9 commit 88dd701

File tree

1 file changed

+68
-20
lines changed

1 file changed

+68
-20
lines changed

‎index.html‎

Lines changed: 68 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ <h1>Make Smarter <br><span class="gradient-text">Tech Decisions.</span>
8484
</h1>
8585
<p class="hero-sub">No hype. No fluff. Just clear guidance on the tech that powers modern work.</p>
8686
<div class="hero-ctas">
87-
<a href="#recommended" class="btn-primary">Explore Top Hardware</a>
87+
<a href="#recommended" class="btn-primary">Browse the Full Stack</a>
8888
<a href="amazon-stack.html" class="btn-secondary">View the Amazon Stack</a>
8989
</div>
9090
</div>
@@ -129,7 +129,7 @@ <h3>Creator & Streaming</h3>
129129
<div class="section-header" style="text-align: center; margin-bottom: 4rem;">
130130
<span class="badge" style="background: var(--accent); color: white;">Editor's Pick</span>
131131
<h2 style="font-size: 2.5rem; margin-top: 1rem;">Top Tools This Month</h2>
132-
<p>The definitive equipment powering students, freelancers, and growth teams right now.</p>
132+
<p>The definitive high-performance hardware powering modern digital workspaces right now.</p>
133133
</div>
134134

135135
<!-- Featured Product Spotlight (Large Card) -->
@@ -165,15 +165,18 @@ <h3 style="font-size: 2.2rem; margin: 1rem 0;">Apple MacBook Pro (M4 Pro)</h3>
165165
</div>
166166
</div>
167167

168-
<!-- 3-Card Tool Grid (Adjusted from 4) -->
168+
<!-- Mixed Product Grid -->
169169
<div class="tool-grid"
170-
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 4rem;">
170+
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 4rem;">
171171
<article class="tool-card glass-panel" style="padding: 1.5rem; border-radius: 12px;">
172172
<img src="assets/images/macbook_hero.jpg" alt="Apple MacBook Pro M4 Pro" loading="lazy"
173173
style="width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom: 1.2rem;">
174+
<div
175+
style="font-size:0.7rem; font-weight:700; text-transform:uppercase; color:var(--accent); letter-spacing:1px; margin-bottom:0.4rem;">
176+
Laptop</div>
174177
<h3 style="font-size: 1.1rem;">Apple MacBook Pro M4 Pro</h3>
175178
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem;">The definitive
176-
dev workstation for 2024-2026.</p>
179+
dev workstation for 2026.</p>
177180
<a href="https://www.amazon.com/Apple-MacBook-Laptop-14%E2%80%91core-32%E2%80%91core/dp/B0DLHJZRF6?tag=techstackglob-20&utm_source=techstackglobal&utm_medium=affiliate&utm_campaign=amazon_2026_macbook_m4_pro"
178181
target="_blank" rel="sponsored" class="btn-secondary"
179182
style="width: 100%; text-align: center; padding: 0.8rem;"
@@ -184,6 +187,9 @@ <h3 style="font-size: 1.1rem;">Apple MacBook Pro M4 Pro</h3>
184187
<img src="https://m.media-amazon.com/images/I/61Ks9X44eVL._AC_SL1181_.jpg" alt="Dell XPS 15"
185188
loading="lazy"
186189
style="width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom: 1.2rem;">
190+
<div
191+
style="font-size:0.7rem; font-weight:700; text-transform:uppercase; color:#00c3ff; letter-spacing:1px; margin-bottom:0.4rem;">
192+
Laptop</div>
187193
<h3 style="font-size: 1.1rem;">Dell XPS 15 (9530)</h3>
188194
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem;">Elite Windows
189195
engineering with upgradeable internals.</p>
@@ -194,16 +200,34 @@ <h3 style="font-size: 1.1rem;">Dell XPS 15 (9530)</h3>
194200
</article>
195201

196202
<article class="tool-card glass-panel" style="padding: 1.5rem; border-radius: 12px;">
197-
<img src="https://m.media-amazon.com/images/I/61LMopCIyTL._AC_SL1200_.jpg"
198-
alt="Surface Laptop Studio 2" loading="lazy"
203+
<img src="https://m.media-amazon.com/images/I/71+j3YpWJWL._AC_SL1500_.jpg" alt="Samsung 990 PRO SSD"
204+
loading="lazy"
199205
style="width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom: 1.2rem;">
200-
<h3 style="font-size: 1.1rem;">Surface Laptop Studio 2</h3>
201-
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem;">The power of a
202-
workstation with the agility of a tablet.</p>
203-
<a href="https://www.amazon.com/Microsoft-Touchscreen-Convertible-Floating-Notebook/dp/B0D7TR2R2T?tag=techstackglob-20&utm_source=techstackglobal&utm_medium=affiliate&utm_campaign=amazon_2026_surface_studio_2"
206+
<div
207+
style="font-size:0.7rem; font-weight:700; text-transform:uppercase; color:#8b5cf6; letter-spacing:1px; margin-bottom:0.4rem;">
208+
SSD Storage</div>
209+
<h3 style="font-size: 1.1rem;">Samsung 990 PRO (2TB)</h3>
210+
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem;">Gen4 NVMe speed
211+
at up to 7,450 MB/s. The go-to upgrade for any build.</p>
212+
<a href="https://www.amazon.com/SAMSUNG-Internal-Expansion-MZ-V9P2T0B-AM/dp/B0BHJJ9Y77?tag=techstackglob-20&utm_source=techstackglobal&utm_medium=affiliate&utm_campaign=amazon_2026_samsung_990_pro"
204213
target="_blank" rel="sponsored" class="btn-secondary"
205214
style="width: 100%; text-align: center; padding: 0.8rem;"
206-
onclick="trackAffiliateClick('surface_studio_2')">Check Price on Amazon</a>
215+
onclick="trackAffiliateClick('samsung_990_pro')">Check Price on Amazon</a>
216+
</article>
217+
218+
<article class="tool-card glass-panel" style="padding: 1.5rem; border-radius: 12px;">
219+
<img src="/posts/lg-27us500w-primary.jpg" alt="LG UltraFine 4K Monitor" loading="lazy"
220+
style="width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom: 1.2rem;">
221+
<div
222+
style="font-size:0.7rem; font-weight:700; text-transform:uppercase; color:#10b981; letter-spacing:1px; margin-bottom:0.4rem;">
223+
4K Monitor</div>
224+
<h3 style="font-size: 1.1rem;">LG 27US500-W UltraFine 4K</h3>
225+
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem;">IPS 4K panel
226+
with USB-C 60W delivery. Crystal-clear clarity for any workspace.</p>
227+
<a href="https://www.amazon.com/LG-27US500-W-UltraFine-Display-Silver/dp/B0D9R7Q449?tag=techstackglob-20&utm_source=techstackglobal&utm_medium=affiliate&utm_campaign=amazon_2026_lg_4k"
228+
target="_blank" rel="sponsored" class="btn-secondary"
229+
style="width: 100%; text-align: center; padding: 0.8rem;"
230+
onclick="trackAffiliateClick('lg_4k_monitor')">Check Price on Amazon</a>
207231
</article>
208232
</div>
209233

@@ -215,35 +239,59 @@ <h3 style="margin-bottom: 1.5rem; text-align: center; font-size: 1.5rem;">Rapid
215239
<thead>
216240
<tr style="border-bottom: 1px solid rgba(255,255,255,0.1);">
217241
<th style="padding: 1.2rem; text-align: left; color: var(--accent);">Product</th>
242+
<th style="padding: 1.2rem; text-align: left; color: var(--accent);">Category</th>
218243
<th style="padding: 1.2rem; text-align: left; color: var(--accent);">Best For</th>
219244
<th style="padding: 1.2rem; text-align: center; color: var(--accent);">Action</th>
220245
</tr>
221246
</thead>
222247
<tbody>
223248
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
224249
<td style="padding: 1.2rem; font-weight: 600;">MacBook Pro M4 Pro</td>
225-
<td style="padding: 1.2rem; color: var(--text-secondary);">Performance Devs & AI Engineers
226-
</td>
250+
<td style="padding: 1.2rem; color: var(--accent); font-size: 0.85rem;">Laptop</td>
251+
<td style="padding: 1.2rem; color: var(--text-secondary);">High-performance computing & AI
252+
workflows</td>
227253
<td style="padding: 1.2rem; text-align: center;"><a
228254
href="posts/apple-macbook-pro-m4-pro-review.html"
229255
style="color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; border: 1px solid var(--accent); padding: 8px 16px; border-radius: 6px; transition: all 0.3s ease;">Read
230256
Review</a></td>
231257
</tr>
232258
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
233259
<td style="padding: 1.2rem; font-weight: 600;">Dell XPS 15</td>
234-
<td style="padding: 1.2rem; color: var(--text-secondary);">Windows Enterprise Software
235-
Engineering</td>
260+
<td style="padding: 1.2rem; color: #00c3ff; font-size: 0.85rem;">Laptop</td>
261+
<td style="padding: 1.2rem; color: var(--text-secondary);">Windows power users & enterprise
262+
work</td>
236263
<td style="padding: 1.2rem; text-align: center;"><a
237264
href="posts/dell-xps-15-9530-review.html"
238265
style="color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; border: 1px solid var(--accent); padding: 8px 16px; border-radius: 6px;">Read
239266
Review</a></td>
240267
</tr>
241268
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
242-
<td style="padding: 1.2rem; font-weight: 600;">Surface Studio 2</td>
243-
<td style="padding: 1.2rem; color: var(--text-secondary);">Creative Management & Executives
244-
</td>
269+
<td style="padding: 1.2rem; font-weight: 600;">Samsung 990 PRO (2TB)</td>
270+
<td style="padding: 1.2rem; color: #8b5cf6; font-size: 0.85rem;">SSD Storage</td>
271+
<td style="padding: 1.2rem; color: var(--text-secondary);">Blazing-fast Gen4 NVMe for any
272+
build</td>
273+
<td style="padding: 1.2rem; text-align: center;"><a
274+
href="posts/samsung-990-pro-ssd-review.html"
275+
style="color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; border: 1px solid var(--accent); padding: 8px 16px; border-radius: 6px;">Read
276+
Review</a></td>
277+
</tr>
278+
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
279+
<td style="padding: 1.2rem; font-weight: 600;">LG 27US500-W 4K</td>
280+
<td style="padding: 1.2rem; color: #10b981; font-size: 0.85rem;">Monitor</td>
281+
<td style="padding: 1.2rem; color: var(--text-secondary);">Crystal-clear 4K IPS display for
282+
any workspace</td>
283+
<td style="padding: 1.2rem; text-align: center;"><a
284+
href="posts/lg-27us500-w-ultrafine-monitor-review.html"
285+
style="color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; border: 1px solid var(--accent); padding: 8px 16px; border-radius: 6px;">Read
286+
Review</a></td>
287+
</tr>
288+
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
289+
<td style="padding: 1.2rem; font-weight: 600;">Dell Thunderbolt Dock SD25TB4</td>
290+
<td style="padding: 1.2rem; color: #f59e0b; font-size: 0.85rem;">Dock</td>
291+
<td style="padding: 1.2rem; color: var(--text-secondary);">Universal connectivity hub for
292+
multi-monitor setups</td>
245293
<td style="padding: 1.2rem; text-align: center;"><a
246-
href="posts/surface-laptop-studio-2-review.html"
294+
href="posts/dell-thunderbolt-smart-dock-review.html"
247295
style="color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; border: 1px solid var(--accent); padding: 8px 16px; border-radius: 6px;">Read
248296
Review</a></td>
249297
</tr>

0 commit comments

Comments
 (0)