Skip to content

Commit 00d30e0

Browse files
author
TechStack Global
committed
feat: add Smart Tools category card to homepage
1 parent f4afca5 commit 00d30e0

File tree

1 file changed

+177
-145
lines changed

1 file changed

+177
-145
lines changed

‎index.html‎

Lines changed: 177 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,50 @@
11
<!DOCTYPE html>
22

33
<html lang="en">
4+
45
<head>
56
<!-- Google tag (gtag.js) -->
67
<script async src="https://www.googletagmanager.com/gtag/js?id=G-06NR0F5381"></script>
78
<script>
89
window.dataLayer = window.dataLayer || [];
9-
function gtag(){dataLayer.push(arguments);}
10+
function gtag() { dataLayer.push(arguments); }
1011
gtag('js', new Date());
11-
12+
1213
gtag('config', 'G-06NR0F5381');
1314
</script>
14-
<meta charset="utf-8"/>
15-
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
16-
<meta name="impact-site-verification" value="50e160eb-0694-4afd-bd21-9998fbb1e0f5"/>
17-
<title>TechStack Global | Smarter Tech Decisions</title>
18-
<meta content="TechStack Global delivers expert tech reviews, buying guides, and practical recommendations on consumer electronics, software, and productivity tools to help you make smarter tech decisions." name="description"/>
19-
<meta content="tech reviews, buying guides, consumer electronics, productivity tools, audio gear, mobile devices, software reviews" name="keywords"/>
20-
<!-- OpenGraph / Social Media -->
21-
<meta content="website" property="og:type"/>
22-
<meta content="https://techstackglobal.github.io/index.html" property="og:url"/>
23-
<meta content="TechStack Global — Smarter Tech Decisions" property="og:title"/>
24-
<meta content="Reviews, buying guides and how-tos covering consumer electronics, software, audio, mobile, and productivity tools." property="og:description"/>
25-
<meta content="https://techstackglobal.github.io/assets/og-image.jpg" property="og:image"/>
26-
<!-- Twitter -->
15+
<meta charset="utf-8" />
16+
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
17+
<meta name="impact-site-verification" value="50e160eb-0694-4afd-bd21-9998fbb1e0f5" />
18+
<title>TechStack Global | Smarter Tech Decisions</title>
19+
<meta
20+
content="TechStack Global delivers expert tech reviews, buying guides, and practical recommendations on consumer electronics, software, and productivity tools to help you make smarter tech decisions."
21+
name="description" />
22+
<meta
23+
content="tech reviews, buying guides, consumer electronics, productivity tools, audio gear, mobile devices, software reviews"
24+
name="keywords" />
25+
<!-- OpenGraph / Social Media -->
26+
<meta content="website" property="og:type" />
27+
<meta content="https://techstackglobal.github.io/index.html" property="og:url" />
28+
<meta content="TechStack Global — Smarter Tech Decisions" property="og:title" />
29+
<meta
30+
content="Reviews, buying guides and how-tos covering consumer electronics, software, audio, mobile, and productivity tools."
31+
property="og:description" />
32+
<meta content="https://techstackglobal.github.io/assets/og-image.jpg" property="og:image" />
33+
<!-- Twitter -->
2734

2835

2936

30-
<!-- Google Fonts: Inter for that premium tech feel-->
31-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
32-
<link href="style.css?v=9" rel="stylesheet"/>
33-
<!-- FontAwesome for Icons-->
34-
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
35-
<link href="assets/icons/favicon-32.png?v=1" rel="icon" sizes="32x32" type="image/png"/>
36-
<link href="assets/icons/favicon-16.png?v=1" rel="icon" sizes="16x16" type="image/png"/>
37-
<link href="assets/icons/techstack-logo-192.png?v=1" rel="apple-touch-icon" sizes="192x192"/>
38-
<link href="assets/icons/favicon.ico?v=1" rel="shortcut icon"/>
39-
<script type="application/ld+json">
37+
<!-- Google Fonts: Inter for that premium tech feel-->
38+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap"
39+
rel="stylesheet" />
40+
<link href="style.css?v=9" rel="stylesheet" />
41+
<!-- FontAwesome for Icons-->
42+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
43+
<link href="assets/icons/favicon-32.png?v=1" rel="icon" sizes="32x32" type="image/png" />
44+
<link href="assets/icons/favicon-16.png?v=1" rel="icon" sizes="16x16" type="image/png" />
45+
<link href="assets/icons/techstack-logo-192.png?v=1" rel="apple-touch-icon" sizes="192x192" />
46+
<link href="assets/icons/favicon.ico?v=1" rel="shortcut icon" />
47+
<script type="application/ld+json">
4048
{
4149
"@context": "https://schema.org",
4250
"@type": "WebSite",
@@ -45,7 +53,7 @@
4553
"description": "Expert tech reviews, buying guides, and practical recommendations."
4654
}
4755
</script>
48-
<script type="application/ld+json">
56+
<script type="application/ld+json">
4957
{
5058
"@context":"https://schema.org",
5159
"@type":"Organization",
@@ -55,125 +63,149 @@
5563
"sameAs": []
5664
}
5765
</script>
58-
<link href="https://techstackglobal.github.io/index.html" rel="canonical"/><meta content="summary_large_image" name="twitter:card"/><meta content="TechStack Global — Smarter Tech Decisions" name="twitter:title"/><meta content="Reviews, buying guides and how-tos covering consumer electronics, software, audio, mobile, and productivity tools." name="twitter:description"/><meta content="https://techstackglobal.github.io/assets/og-image.jpg" name="twitter:image"/></head>
66+
<link href="https://techstackglobal.github.io/index.html" rel="canonical" />
67+
<meta content="summary_large_image" name="twitter:card" />
68+
<meta content="TechStack Global — Smarter Tech Decisions" name="twitter:title" />
69+
<meta
70+
content="Reviews, buying guides and how-tos covering consumer electronics, software, audio, mobile, and productivity tools."
71+
name="twitter:description" />
72+
<meta content="https://techstackglobal.github.io/assets/og-image.jpg" name="twitter:image" />
73+
</head>
74+
5975
<body class="dark-theme homepage">
60-
<!-- Ambient Background Grid (Visual Only)-->
61-
<div class="ambient-grid"></div>
62-
<div class="glow-orb top-left"></div>
63-
<div class="glow-orb bottom-right"></div>
64-
<header class="glass-header">
65-
<nav class="container">
66-
<div class="logo">
67-
<a href="index.html">
68-
TechStack<span class="accent">Global</span>
69-
</a>
70-
</div>
71-
<button aria-label="Toggle Menu" class="menu-toggle">
72-
<i class="fa-solid fa-bars"></i>
73-
</button>
74-
<ul class="nav-links" id="nav-links">
75-
<li><a class="active" href="index.html">Home</a></li>
76-
<li><a href="amazon-stack.html">Amazon Stack</a></li>
77-
<li><a href="blog.html">Guides</a></li>
78-
<li><a href="about.html">About</a></li>
79-
<li><a href="contact.html">Contact</a></li>
80-
</ul>
81-
</nav>
82-
</header>
83-
<main>
84-
<!-- SEO Semantic Hero Section-->
85-
<section class="hero container">
86-
<div class="hero-content">
87-
<h1>Make Smarter <br/><span class="gradient-text">Tech Decisions.</span>
88-
</h1>
89-
<p class="hero-sub" style="font-size: 1.25rem; max-width: 500px; margin-top: 1rem;">No hype. No
90-
fluff.
91-
Just clear guidance on the tech that powers modern work.</p>
92-
<div class="hero-ctas" style="margin-top: 2.5rem; display: flex; gap: 1rem;">
93-
<a class="btn-primary" href="amazon-stack.html"><i class="fa-brands fa-amazon" style="margin-right: 8px;"></i> View Top Picks</a>
94-
<a class="btn-secondary" href="blog.html">Read Guides</a>
95-
</div>
96-
</div>
97-
<!-- Hero Featured Review Card-->
98-
<div class="hero-visual">
99-
<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);">
100-
<div style="font-size: 0.8rem; color: var( accent); font-weight: bold; text-transform: uppercase; margin-bottom: 1rem;">
101-
<i class="fa-solid fa-star"></i> Featured Review (New)
102-
</div>
103-
<h3 style="font-size: 1.6rem; margin-bottom: 1rem; line-height: 1.3;">Samsung 990 PRO
104-
SSD: The
105-
Performance King</h3>
106-
<p style="color: var( text-secondary); font-size: 1rem; margin-bottom: 2rem; line-height: 1.6;">
107-
Unrivaled sequential speeds up to 7,450 MB/s and premium reliability for modern,
108-
high-intensity
109-
workflows.</p>
110-
<a class="read-more" href="posts/samsung-990-pro-ssd-review.html" style="display: inline-flex; align-items: center; font-weight: 700;">Read Full
111-
Review <i class="fa-solid fa-arrow-right" style="margin-left: 8px; transition: transform 0.2s;"></i></a>
112-
</div>
113-
</div>
114-
</section>
115-
<!-- Featured Categories-->
116-
<section class="container section-padding" id="categories" style="padding-top: 2rem;">
117-
<div class="section-header">
118-
<h2>Explore the Stack</h2>
119-
<p>Browse hardware by category.</p>
120-
</div>
121-
<div class="category-grid" style="grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto;">
122-
<a class="cat-card featured-cat" href="amazon-stack.html">
123-
<i class="fa-brands fa-amazon"></i>
124-
<h3>Amazon Stack</h3>
125-
<p>Product Reviews</p>
126-
</a>
127-
<a class="cat-card" href="blog.html" style="text-decoration: none;">
128-
<i class="fa-solid fa-newspaper"></i>
129-
<h3>Guides</h3>
130-
<p>In depth comparison guides and setups</p>
131-
</a>
132-
</div>
133-
</section>
134-
<!-- Lead Capture / Newsletter-->
135-
<!-- Lead Capture / Newsletter CTA -->
136-
<section class="newsletter-section section-padding">
137-
<div class="container cta-box glass-panel" style="border: 1px solid var(--border-glass); padding: 2.5rem; border-radius: var(--border-radius); text-align: center; max-width: 700px; margin: 0 auto;">
138-
<h2 style="font-size: 2.2rem; margin-bottom: 0.5rem;">Get Practical Tech Picks</h2>
139-
<p style="font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 2rem;">Weekly
140-
reviews, guides, and curated deals for smart tech buyers.</p>
141-
<form action="https://formsubmit.co/techstackglobal9@gmail.com" class="email-form" method="POST" style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
142-
<input name="email" placeholder="Enter your best email address" required="" style="padding: 1rem; font-size: 1rem; border-radius: 8px; border: 1px solid var(--border-glass); background: rgba(0,0,0,0.2); color: white; flex: 1; min-width: 250px; max-width: 350px;" type="email"/>
143-
<input name="_next" type="hidden" value="https://techstackglobal.github.io/thank-you.html"/>
144-
<input name="_subject" type="hidden" value="New Lead Magnet Submission - TechStack Global"/>
145-
<input name="_captcha" type="hidden" value="false"/>
146-
<button class="btn-primary" style="padding: 1rem 1.5rem; border-radius: 8px;" type="submit">Subscribe</button>
147-
</form>
148-
</div>
149-
</section>
150-
</main>
151-
<footer class="glass-footer">
152-
<div class="container footer-content">
153-
<div class="footer-brand">
154-
<div style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem;"><a href="index.html" style="text-decoration: none; color: inherit;">TechStack<span class="accent">Global</span></a></div>
155-
<p>Tech guides built for everyday work, study, and smarter decisions.</p>
156-
</div>
157-
<div class="footer-links">
158-
<h4>Legal</h4>
159-
<ul>
160-
<li><a href="affiliate-disclosure.html">Affiliate Disclosure</a></li>
161-
<li><a href="privacy-policy.html">Privacy Policy</a></li>
162-
<li><a href="terms-of-service.html">Terms of Service</a></li>
163-
</ul>
164-
</div>
165-
<div class="footer-links">
166-
<h4>Company</h4>
167-
<ul>
168-
<li><a href="about.html">About Us</a></li>
169-
<li><a href="contact.html">Contact</a></li>
170-
</ul>
171-
</div>
172-
</div>
173-
<div class="container footer-bottom">
174-
<p>© <span id="year">2026</span> TechStack Global. All rights reserved.</p>
175-
</div>
176-
</footer>
177-
<script src="script.js"></script>
76+
<!-- Ambient Background Grid (Visual Only)-->
77+
<div class="ambient-grid"></div>
78+
<div class="glow-orb top-left"></div>
79+
<div class="glow-orb bottom-right"></div>
80+
<header class="glass-header">
81+
<nav class="container">
82+
<div class="logo">
83+
<a href="index.html">
84+
TechStack<span class="accent">Global</span>
85+
</a>
86+
</div>
87+
<button aria-label="Toggle Menu" class="menu-toggle">
88+
<i class="fa-solid fa-bars"></i>
89+
</button>
90+
<ul class="nav-links" id="nav-links">
91+
<li><a class="active" href="index.html">Home</a></li>
92+
<li><a href="amazon-stack.html">Amazon Stack</a></li>
93+
<li><a href="blog.html">Guides</a></li>
94+
<li><a href="about.html">About</a></li>
95+
<li><a href="contact.html">Contact</a></li>
96+
</ul>
97+
</nav>
98+
</header>
99+
<main>
100+
<!-- SEO Semantic Hero Section-->
101+
<section class="hero container">
102+
<div class="hero-content">
103+
<h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
104+
</h1>
105+
<p class="hero-sub" style="font-size: 1.25rem; max-width: 500px; margin-top: 1rem;">No hype. No
106+
fluff.
107+
Just clear guidance on the tech that powers modern work.</p>
108+
<div class="hero-ctas" style="margin-top: 2.5rem; display: flex; gap: 1rem;">
109+
<a class="btn-primary" href="amazon-stack.html"><i class="fa-brands fa-amazon" style="margin-right: 8px;"></i>
110+
View Top Picks</a>
111+
<a class="btn-secondary" href="blog.html">Read Guides</a>
112+
</div>
113+
</div>
114+
<!-- Hero Featured Review Card-->
115+
<div class="hero-visual">
116+
<div class="glass-card"
117+
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);">
118+
<div
119+
style="font-size: 0.8rem; color: var( accent); font-weight: bold; text-transform: uppercase; margin-bottom: 1rem;">
120+
<i class="fa-solid fa-star"></i> Featured Review (New)
121+
</div>
122+
<h3 style="font-size: 1.6rem; margin-bottom: 1rem; line-height: 1.3;">Samsung 990 PRO
123+
SSD: The
124+
Performance King</h3>
125+
<p style="color: var( text-secondary); font-size: 1rem; margin-bottom: 2rem; line-height: 1.6;">
126+
Unrivaled sequential speeds up to 7,450 MB/s and premium reliability for modern,
127+
high-intensity
128+
workflows.</p>
129+
<a class="read-more" href="posts/samsung-990-pro-ssd-review.html"
130+
style="display: inline-flex; align-items: center; font-weight: 700;">Read Full
131+
Review <i class="fa-solid fa-arrow-right" style="margin-left: 8px; transition: transform 0.2s;"></i></a>
132+
</div>
133+
</div>
134+
</section>
135+
<!-- Featured Categories-->
136+
<section class="container section-padding" id="categories" style="padding-top: 2rem;">
137+
<div class="section-header">
138+
<h2>Explore the Stack</h2>
139+
<p>Browse hardware and smart digital tools by category</p>
140+
</div>
141+
<div class="category-grid"
142+
style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 900px; margin: 0 auto;">
143+
<a class="cat-card featured-cat" href="amazon-stack.html">
144+
<i class="fa-brands fa-amazon"></i>
145+
<h3>Amazon Stack</h3>
146+
<p>Product Reviews</p>
147+
</a>
148+
<a class="cat-card" href="blog.html" style="text-decoration: none;">
149+
<i class="fa-solid fa-newspaper"></i>
150+
<h3>Guides</h3>
151+
<p>In depth comparison guides and setups</p>
152+
</a>
153+
<a class="cat-card" href="smart-tools.html" style="text-decoration: none;">
154+
<i class="fa-solid fa-microchip"></i>
155+
<h3>Smart Tools</h3>
156+
<p>AI, software, and digital productivity</p>
157+
</a>
158+
</div>
159+
</section>
160+
<!-- Lead Capture / Newsletter-->
161+
<!-- Lead Capture / Newsletter CTA -->
162+
<section class="newsletter-section section-padding">
163+
<div class="container cta-box glass-panel"
164+
style="border: 1px solid var(--border-glass); padding: 2.5rem; border-radius: var(--border-radius); text-align: center; max-width: 700px; margin: 0 auto;">
165+
<h2 style="font-size: 2.2rem; margin-bottom: 0.5rem;">Get Practical Tech Picks</h2>
166+
<p style="font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 2rem;">Weekly
167+
reviews, guides, and curated deals for smart tech buyers.</p>
168+
<form action="https://formsubmit.co/techstackglobal9@gmail.com" class="email-form" method="POST"
169+
style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
170+
<input name="email" placeholder="Enter your best email address" required=""
171+
style="padding: 1rem; font-size: 1rem; border-radius: 8px; border: 1px solid var(--border-glass); background: rgba(0,0,0,0.2); color: white; flex: 1; min-width: 250px; max-width: 350px;"
172+
type="email" />
173+
<input name="_next" type="hidden" value="https://techstackglobal.github.io/thank-you.html" />
174+
<input name="_subject" type="hidden" value="New Lead Magnet Submission - TechStack Global" />
175+
<input name="_captcha" type="hidden" value="false" />
176+
<button class="btn-primary" style="padding: 1rem 1.5rem; border-radius: 8px;" type="submit">Subscribe</button>
177+
</form>
178+
</div>
179+
</section>
180+
</main>
181+
<footer class="glass-footer">
182+
<div class="container footer-content">
183+
<div class="footer-brand">
184+
<div style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem;"><a href="index.html"
185+
style="text-decoration: none; color: inherit;">TechStack<span class="accent">Global</span></a></div>
186+
<p>Tech guides built for everyday work, study, and smarter decisions.</p>
187+
</div>
188+
<div class="footer-links">
189+
<h4>Legal</h4>
190+
<ul>
191+
<li><a href="affiliate-disclosure.html">Affiliate Disclosure</a></li>
192+
<li><a href="privacy-policy.html">Privacy Policy</a></li>
193+
<li><a href="terms-of-service.html">Terms of Service</a></li>
194+
</ul>
195+
</div>
196+
<div class="footer-links">
197+
<h4>Company</h4>
198+
<ul>
199+
<li><a href="about.html">About Us</a></li>
200+
<li><a href="contact.html">Contact</a></li>
201+
</ul>
202+
</div>
203+
</div>
204+
<div class="container footer-bottom">
205+
<p>© <span id="year">2026</span> TechStack Global. All rights reserved.</p>
206+
</div>
207+
</footer>
208+
<script src="script.js"></script>
178209
</body>
210+
179211
</html>

0 commit comments

Comments
 (0)