Hugging Face's logo

Spaces:
madansa7
/
niftytechfinds
Running

App Files Community
madansa7 commited on
Commit
a10bffe
·
verified ·
1 Parent(s): d48c2da

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1144 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Niftytechfinds
3
- emoji: 🏃
4
- colorFrom: gray
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: niftytechfinds
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1144 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NiftyTechFinds - Discover Cool Tech Gadgets</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#3B82F6',
15
+ secondary: '#10B981',
16
+ dark: '#1F2937',
17
+ light: '#F9FAFB',
18
+ accent: '#F59E0B',
19
+ },
20
+ fontFamily: {
21
+ sans: ['Inter', 'sans-serif'],
22
+ mono: ['Fira Code', 'monospace'],
23
+ },
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ background-color: #F9FAFB;
34
+ }
35
+
36
+ .gradient-text {
37
+ background: linear-gradient(90deg, #3B82F6, #10B981);
38
+ -webkit-background-clip: text;
39
+ background-clip: text;
40
+ color: transparent;
41
+ }
42
+
43
+ .article-card:hover .article-image {
44
+ transform: scale(1.05);
45
+ }
46
+
47
+ .article-image {
48
+ transition: transform 0.3s ease;
49
+ }
50
+
51
+ .nav-link:hover {
52
+ color: #3B82F6;
53
+ }
54
+
55
+ .dropdown:hover .dropdown-menu {
56
+ display: block;
57
+ }
58
+
59
+ /* Custom scrollbar */
60
+ ::-webkit-scrollbar {
61
+ width: 8px;
62
+ }
63
+
64
+ ::-webkit-scrollbar-track {
65
+ background: #F1F1F1;
66
+ }
67
+
68
+ ::-webkit-scrollbar-thumb {
69
+ background: #3B82F6;
70
+ border-radius: 10px;
71
+ }
72
+
73
+ /* Animation for featured posts */
74
+ @keyframes fadeIn {
75
+ from { opacity: 0; transform: translateY(20px); }
76
+ to { opacity: 1; transform: translateY(0); }
77
+ }
78
+
79
+ .animate-fade-in {
80
+ animation: fadeIn 0.6s ease-out forwards;
81
+ }
82
+
83
+ .delay-100 {
84
+ animation-delay: 0.1s;
85
+ }
86
+
87
+ .delay-200 {
88
+ animation-delay: 0.2s;
89
+ }
90
+
91
+ .delay-300 {
92
+ animation-delay: 0.3s;
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="bg-light">
97
+ <!-- Header/Navigation -->
98
+ <header class="bg-white shadow-sm sticky top-0 z-50">
99
+ <div class="container mx-auto px-4 py-3">
100
+ <div class="flex justify-between items-center">
101
+ <!-- Logo -->
102
+ <div class="flex items-center">
103
+ <a href="index.html" class="text-2xl font-bold">
104
+ <span class="gradient-text">NiftyTechFinds</span>
105
+ </a>
106
+ </div>
107
+
108
+ <!-- Desktop Navigation -->
109
+ <nav class="hidden md:flex space-x-8">
110
+ <a href="index.html" class="nav-link text-dark font-medium hover:text-primary transition">Home</a>
111
+
112
+ <div class="dropdown relative">
113
+ <button class="nav-link text-dark font-medium hover:text-primary transition flex items-center">
114
+ Categories <i class="fas fa-chevron-down ml-1 text-xs"></i>
115
+ </button>
116
+ <div class="dropdown-menu absolute hidden mt-2 py-2 w-48 bg-white rounded-md shadow-lg z-50">
117
+ <a href="category.html?cat=gadgets" class="block px-4 py-2 text-dark hover:bg-gray-100">Gadgets</a>
118
+ <a href="category.html?cat=apps" class="block px-4 py-2 text-dark hover:bg-gray-100">Apps</a>
119
+ <a href="category.html?cat=reviews" class="block px-4 py-2 text-dark hover:bg-gray-100">Reviews</a>
120
+ <a href="category.html?cat=how-to" class="block px-4 py-2 text-dark hover:bg-gray-100">How-To Guides</a>
121
+ </div>
122
+ </div>
123
+
124
+ <a href="about.html" class="nav-link text-dark font-medium hover:text-primary transition">About</a>
125
+ <a href="contact.html" class="nav-link text-dark font-medium hover:text-primary transition">Contact</a>
126
+ </nav>
127
+
128
+ <!-- Search and Mobile Menu Button -->
129
+ <div class="flex items-center space-x-4">
130
+ <button class="p-2 text-dark hover:text-primary">
131
+ <i class="fas fa-search"></i>
132
+ </button>
133
+
134
+ <div class="md:hidden">
135
+ <button id="mobile-menu-button" class="p-2 text-dark hover:text-primary">
136
+ <i class="fas fa-bars"></i>
137
+ </button>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Mobile Menu -->
143
+ <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
144
+ <a href="index.html" class="block py-2 text-dark hover:text-primary">Home</a>
145
+
146
+ <div class="py-2">
147
+ <button class="flex items-center justify-between w-full text-dark hover:text-primary">
148
+ Categories <i class="fas fa-chevron-down"></i>
149
+ </button>
150
+ <div class="ml-4 mt-2 hidden">
151
+ <a href="category.html?cat=gadgets" class="block py-1 text-dark hover:text-primary">Gadgets</a>
152
+ <a href="category.html?cat=apps" class="block py-1 text-dark hover:text-primary">Apps</a>
153
+ <a href="category.html?cat=reviews" class="block py-1 text-dark hover:text-primary">Reviews</a>
154
+ <a href="category.html?cat=how-to" class="block py-1 text-dark hover:text-primary">How-To Guides</a>
155
+ </div>
156
+ </div>
157
+
158
+ <a href="about.html" class="block py-2 text-dark hover:text-primary">About</a>
159
+ <a href="contact.html" class="block py-2 text-dark hover:text-primary">Contact</a>
160
+ </div>
161
+ </div>
162
+ </header>
163
+
164
+ <!-- Main Content - This section will change based on the page -->
165
+ <main>
166
+ <!-- Homepage Template -->
167
+ <div id="homepage" class="page-content">
168
+ <!-- Hero Section -->
169
+ <section class="bg-gradient-to-r from-primary to-secondary py-16 text-white">
170
+ <div class="container mx-auto px-4">
171
+ <div class="max-w-3xl mx-auto text-center">
172
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Discover the Coolest Tech Finds</h1>
173
+ <p class="text-xl mb-8">We uncover hidden gems, review must-have gadgets, and share tech tips to make your digital life easier.</p>
174
+ <div class="flex justify-center space-x-4">
175
+ <a href="#featured" class="bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition">Explore Articles</a>
176
+ <a href="category.html?cat=gadgets" class="border-2 border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">Latest Gadgets</a>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </section>
181
+
182
+ <!-- Featured Posts -->
183
+ <section id="featured" class="py-16 bg-white">
184
+ <div class="container mx-auto px-4">
185
+ <h2 class="text-3xl font-bold mb-12 text-center">Featured Tech Finds</h2>
186
+
187
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
188
+ <!-- Featured Post 1 -->
189
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden animate-fade-in">
190
+ <div class="overflow-hidden h-48">
191
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80"
192
+ alt="MacBook Pro review"
193
+ class="article-image w-full h-full object-cover">
194
+ </div>
195
+ <div class="p-6">
196
+ <div class="flex items-center mb-2">
197
+ <span class="bg-primary text-white text-xs px-2 py-1 rounded">Gadgets</span>
198
+ <span class="text-gray-500 text-sm ml-2">5 min read</span>
199
+ </div>
200
+ <h3 class="text-xl font-bold mb-2">M2 MacBook Pro Review: Is It Worth the Upgrade?</h3>
201
+ <p class="text-gray-600 mb-4">We put Apple's latest powerhouse through its paces to see if it lives up to the hype.</p>
202
+ <div class="flex items-center justify-between">
203
+ <div class="flex items-center">
204
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full">
205
+ <span class="ml-2 text-sm font-medium">John Smith</span>
206
+ </div>
207
+ <span class="text-gray-500 text-sm">June 15, 2023</span>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Featured Post 2 -->
213
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden animate-fade-in delay-100">
214
+ <div class="overflow-hidden h-48">
215
+ <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80"
216
+ alt="Productivity apps"
217
+ class="article-image w-full h-full object-cover">
218
+ </div>
219
+ <div class="p-6">
220
+ <div class="flex items-center mb-2">
221
+ <span class="bg-secondary text-white text-xs px-2 py-1 rounded">Apps</span>
222
+ <span class="text-gray-500 text-sm ml-2">7 min read</span>
223
+ </div>
224
+ <h3 class="text-xl font-bold mb-2">10 Underrated Productivity Apps That Will Change Your Workflow</h3>
225
+ <p class="text-gray-600 mb-4">Discover these hidden gems that can boost your productivity without breaking the bank.</p>
226
+ <div class="flex items-center justify-between">
227
+ <div class="flex items-center">
228
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full">
229
+ <span class="ml-2 text-sm font-medium">Sarah Johnson</span>
230
+ </div>
231
+ <span class="text-gray-500 text-sm">June 10, 2023</span>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Featured Post 3 -->
237
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden animate-fade-in delay-200">
238
+ <div class="overflow-hidden h-48">
239
+ <img src="https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=967&q=80"
240
+ alt="Smart home setup"
241
+ class="article-image w-full h-full object-cover">
242
+ </div>
243
+ <div class="p-6">
244
+ <div class="flex items-center mb-2">
245
+ <span class="bg-accent text-white text-xs px-2 py-1 rounded">How-To</span>
246
+ <span class="text-gray-500 text-sm ml-2">10 min read</span>
247
+ </div>
248
+ <h3 class="text-xl font-bold mb-2">The Ultimate Smart Home Setup Guide for 2023</h3>
249
+ <p class="text-gray-600 mb-4">Transform your living space with these carefully curated smart home devices that actually work well together.</p>
250
+ <div class="flex items-center justify-between">
251
+ <div class="flex items-center">
252
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author" class="w-8 h-8 rounded-full">
253
+ <span class="ml-2 text-sm font-medium">Michael Chen</span>
254
+ </div>
255
+ <span class="text-gray-500 text-sm">June 5, 2023</span>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Newsletter Section -->
264
+ <section class="py-16 bg-gray-50">
265
+ <div class="container mx-auto px-4 max-w-4xl">
266
+ <div class="bg-white rounded-xl shadow-md p-8 md:p-10">
267
+ <div class="md:flex items-center">
268
+ <div class="md:w-1/2 mb-6 md:mb-0">
269
+ <h3 class="text-2xl font-bold mb-2">Get the Latest Tech Finds</h3>
270
+ <p class="text-gray-600">Subscribe to our newsletter for weekly updates on the coolest tech gadgets and apps.</p>
271
+ </div>
272
+ <div class="md:w-1/2">
273
+ <form class="flex">
274
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
275
+ <button type="submit" class="bg-primary text-white px-6 py-3 rounded-r-lg font-medium hover:bg-blue-600 transition">Subscribe</button>
276
+ </form>
277
+ <p class="text-xs text-gray-500 mt-2">We respect your privacy. Unsubscribe at any time.</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- Latest Articles -->
285
+ <section class="py-16 bg-white">
286
+ <div class="container mx-auto px-4">
287
+ <div class="flex justify-between items-center mb-12">
288
+ <h2 class="text-3xl font-bold">Latest Articles</h2>
289
+ <a href="#" class="text-primary font-medium hover:underline">View All</a>
290
+ </div>
291
+
292
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
293
+ <!-- Repeat this block for each article -->
294
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
295
+ <div class="overflow-hidden h-48">
296
+ <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
297
+ alt="iPhone 14 camera"
298
+ class="article-image w-full h-full object-cover">
299
+ </div>
300
+ <div class="p-6">
301
+ <div class="flex items-center mb-2">
302
+ <span class="bg-primary text-white text-xs px-2 py-1 rounded">Gadgets</span>
303
+ <span class="text-gray-500 text-sm ml-2">4 min read</span>
304
+ </div>
305
+ <h3 class="text-xl font-bold mb-2">iPhone 14 Pro Camera Tips You Probably Didn't Know</h3>
306
+ <p class="text-gray-600 mb-4">Unlock the full potential of your iPhone's camera with these professional techniques.</p>
307
+ <div class="flex items-center justify-between">
308
+ <div class="flex items-center">
309
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author" class="w-8 h-8 rounded-full">
310
+ <span class="ml-2 text-sm font-medium">Emily Wilson</span>
311
+ </div>
312
+ <span class="text-gray-500 text-sm">May 28, 2023</span>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
318
+ <div class="overflow-hidden h-48">
319
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
320
+ alt="Data analytics"
321
+ class="article-image w-full h-full object-cover">
322
+ </div>
323
+ <div class="p-6">
324
+ <div class="flex items-center mb-2">
325
+ <span class="bg-secondary text-white text-xs px-2 py-1 rounded">Apps</span>
326
+ <span class="text-gray-500 text-sm ml-2">6 min read</span>
327
+ </div>
328
+ <h3 class="text-xl font-bold mb-2">The Best Data Visualization Tools for 2023</h3>
329
+ <p class="text-gray-600 mb-4">Turn complex data into beautiful, understandable insights with these powerful tools.</p>
330
+ <div class="flex items-center justify-between">
331
+ <div class="flex items-center">
332
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Author" class="w-8 h-8 rounded-full">
333
+ <span class="ml-2 text-sm font-medium">David Kim</span>
334
+ </div>
335
+ <span class="text-gray-500 text-sm">May 22, 2023</span>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
341
+ <div class="overflow-hidden h-48">
342
+ <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
343
+ alt="Tech gadgets"
344
+ class="article-image w-full h-full object-cover">
345
+ </div>
346
+ <div class="p-6">
347
+ <div class="flex items-center mb-2">
348
+ <span class="bg-accent text-white text-xs px-2 py-1 rounded">Reviews</span>
349
+ <span class="text-gray-500 text-sm ml-2">8 min read</span>
350
+ </div>
351
+ <h3 class="text-xl font-bold mb-2">Our Favorite Tech Gadgets Under $100</h3>
352
+ <p class="text-gray-600 mb-4">Quality tech doesn't have to break the bank. Here are our top affordable picks.</p>
353
+ <div class="flex items-center justify-between">
354
+ <div class="flex items-center">
355
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Author" class="w-8 h-8 rounded-full">
356
+ <span class="ml-2 text-sm font-medium">Lisa Rodriguez</span>
357
+ </div>
358
+ <span class="text-gray-500 text-sm">May 18, 2023</span>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="mt-12 text-center">
365
+ <a href="#" class="inline-block bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-600 transition">Load More Articles</a>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Popular Categories -->
371
+ <section class="py-16 bg-gray-50">
372
+ <div class="container mx-auto px-4">
373
+ <h2 class="text-3xl font-bold mb-12 text-center">Browse by Category</h2>
374
+
375
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
376
+ <a href="category.html?cat=gadgets" class="category-card bg-white rounded-xl shadow-md p-8 text-center hover:shadow-lg transition">
377
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
378
+ <i class="fas fa-mobile-alt text-primary text-2xl"></i>
379
+ </div>
380
+ <h3 class="text-xl font-bold mb-2">Gadgets</h3>
381
+ <p class="text-gray-600">The latest and greatest tech devices</p>
382
+ <span class="inline-block mt-4 text-primary font-medium">View Articles →</span>
383
+ </a>
384
+
385
+ <a href="category.html?cat=apps" class="category-card bg-white rounded-xl shadow-md p-8 text-center hover:shadow-lg transition">
386
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
387
+ <i class="fas fa-th text-secondary text-2xl"></i>
388
+ </div>
389
+ <h3 class="text-xl font-bold mb-2">Apps</h3>
390
+ <p class="text-gray-600">Software that makes life easier</p>
391
+ <span class="inline-block mt-4 text-primary font-medium">View Articles →</span>
392
+ </a>
393
+
394
+ <a href="category.html?cat=reviews" class="category-card bg-white rounded-xl shadow-md p-8 text-center hover:shadow-lg transition">
395
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
396
+ <i class="fas fa-star text-accent text-2xl"></i>
397
+ </div>
398
+ <h3 class="text-xl font-bold mb-2">Reviews</h3>
399
+ <p class="text-gray-600">Honest opinions on tech products</p>
400
+ <span class="inline-block mt-4 text-primary font-medium">View Articles →</span>
401
+ </a>
402
+
403
+ <a href="category.html?cat=how-to" class="category-card bg-white rounded-xl shadow-md p-8 text-center hover:shadow-lg transition">
404
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
405
+ <i class="fas fa-question-circle text-purple-500 text-2xl"></i>
406
+ </div>
407
+ <h3 class="text-xl font-bold mb-2">How-To Guides</h3>
408
+ <p class="text-gray-600">Step-by-step tech tutorials</p>
409
+ <span class="inline-block mt-4 text-primary font-medium">View Articles →</span>
410
+ </a>
411
+ </div>
412
+ </div>
413
+ </section>
414
+ </div>
415
+
416
+ <!-- Article Page Template -->
417
+ <div id="article-page" class="page-content hidden">
418
+ <div class="container mx-auto px-4 py-16 max-w-4xl">
419
+ <article class="bg-white rounded-xl shadow-md overflow-hidden">
420
+ <!-- Article Header -->
421
+ <div class="p-8 pb-0">
422
+ <div class="flex items-center mb-4">
423
+ <span class="bg-primary text-white text-xs px-2 py-1 rounded">Gadgets</span>
424
+ <span class="text-gray-500 text-sm ml-2">8 min read</span>
425
+ </div>
426
+ <h1 class="text-3xl md:text-4xl font-bold mb-4">M2 MacBook Pro Review: Is It Worth the Upgrade?</h1>
427
+ <div class="flex items-center justify-between mb-8">
428
+ <div class="flex items-center">
429
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-10 h-10 rounded-full">
430
+ <div class="ml-3">
431
+ <p class="font-medium">John Smith</p>
432
+ <p class="text-gray-500 text-sm">June 15, 2023 • Updated 2 days ago</p>
433
+ </div>
434
+ </div>
435
+ <div class="flex space-x-3">
436
+ <button class="text-gray-500 hover:text-primary">
437
+ <i class="fab fa-twitter"></i>
438
+ </button>
439
+ <button class="text-gray-500 hover:text-primary">
440
+ <i class="fab fa-facebook"></i>
441
+ </button>
442
+ <button class="text-gray-500 hover:text-primary">
443
+ <i class="fab fa-linkedin"></i>
444
+ </button>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Featured Image -->
450
+ <div class="w-full h-96 overflow-hidden">
451
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80"
452
+ alt="MacBook Pro"
453
+ class="w-full h-full object-cover">
454
+ </div>
455
+
456
+ <!-- Article Content -->
457
+ <div class="p-8 pt-6">
458
+ <div class="prose max-w-none">
459
+ <p class="lead">Apple's latest MacBook Pro with the M2 chip promises significant performance improvements over its predecessor. But is it worth upgrading from an M1 model or older Intel-based MacBook? We've spent two weeks with the device to find out.</p>
460
+
461
+ <h2>Design and Build Quality</h2>
462
+ <p>The M2 MacBook Pro retains the same sleek design as the M1 version, with its unibody aluminum chassis that feels premium and durable. At 3.5 pounds (1.6 kg) for the 13-inch model, it's lightweight enough for daily commuting while feeling substantial in hand.</p>
463
+
464
+ <div class="my-6 p-4 bg-gray-50 border-l-4 border-primary rounded">
465
+ <p class="font-medium">Pro Tip:</p>
466
+ <p>If you're coming from an Intel MacBook, the difference in thermal performance will be immediately noticeable. The M2 runs significantly cooler under load.</p>
467
+ </div>
468
+
469
+ <h2>Performance Benchmarks</h2>
470
+ <p>We ran several benchmarks to compare the M2 against the M1 and high-end Intel chips:</p>
471
+
472
+ <div class="overflow-x-auto my-6">
473
+ <table class="min-w-full bg-white">
474
+ <thead>
475
+ <tr class="bg-gray-100">
476
+ <th class="py-2 px-4 text-left">Test</th>
477
+ <th class="py-2 px-4 text-left">M2</th>
478
+ <th class="py-2 px-4 text-left">M1</th>
479
+ <th class="py-2 px-4 text-left">Intel i9</th>
480
+ </tr>
481
+ </thead>
482
+ <tbody>
483
+ <tr class="border-b">
484
+ <td class="py-2 px-4">Geekbench 5 (Single)</td>
485
+ <td class="py-2 px-4">1920</td>
486
+ <td class="py-2 px-4">1700</td>
487
+ <td class="py-2 px-4">1400</td>
488
+ </tr>
489
+ <tr class="border-b">
490
+ <td class="py-2 px-4">Geekbench 5 (Multi)</td>
491
+ <td class="py-2 px-4">8900</td>
492
+ <td class="py-2 px-4">7500</td>
493
+ <td class="py-2 px-4">6800</td>
494
+ </tr>
495
+ <tr>
496
+ <td class="py-2 px-4">Cinebench R23</td>
497
+ <td class="py-2 px-4">1520</td>
498
+ <td class="py-2 px-4">1300</td>
499
+ <td class="py-2 px-4">1100</td>
500
+ </tr>
501
+ </tbody>
502
+ </table>
503
+ </div>
504
+
505
+ <h2>Battery Life</h2>
506
+ <p>Apple claims up to 20 hours of battery life, and our testing confirms these numbers are realistic for light to moderate use:</p>
507
+
508
+ <ul class="list-disc pl-6 my-4">
509
+ <li>Web browsing: 18-20 hours</li>
510
+ <li>Video playback: 19 hours</li>
511
+ <li>Photo editing: 12-14 hours</li>
512
+ <li>Video editing: 8-10 hours</li>
513
+ </ul>
514
+
515
+ <h2>Who Should Upgrade?</h2>
516
+ <p>After extensive testing, here's our recommendation:</p>
517
+
518
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-6">
519
+ <div class="bg-blue-50 p-4 rounded-lg">
520
+ <h3 class="font-bold text-lg mb-2">From Intel Mac</h3>
521
+ <p>Definitely upgrade. The performance and efficiency gains are massive.</p>
522
+ </div>
523
+ <div class="bg-green-50 p-4 rounded-lg">
524
+ <h3 class="font-bold text-lg mb-2">From M1 Mac</h3>
525
+ <p>Only if you need the extra performance for professional workloads.</p>
526
+ </div>
527
+ <div class="bg-yellow-50 p-4 rounded-lg">
528
+ <h3 class="font-bold text-lg mb-2">First Mac</h3>
529
+ <p>Excellent choice, but consider waiting for M2 Pro/Max models if you need more power.</p>
530
+ </div>
531
+ </div>
532
+
533
+ <h2>Final Verdict</h2>
534
+ <p>The M2 MacBook Pro delivers on its promises of improved performance and exceptional battery life. While the design hasn't changed, the internal upgrades make this one of the most capable laptops available today.</p>
535
+
536
+ <div class="bg-gray-50 p-6 rounded-lg my-8">
537
+ <h3 class="font-bold text-lg mb-4">Pros & Cons</h3>
538
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
539
+ <div>
540
+ <h4 class="font-medium text-green-600 mb-2">Pros</h4>
541
+ <ul class="list-disc pl-5 space-y-1">
542
+ <li>30% faster than M1 in benchmarks</li>
543
+ <li>Industry-leading battery life</li>
544
+ <li>Silent operation (no fans)</li>
545
+ <li>Improved neural engine for ML tasks</li>
546
+ </ul>
547
+ </div>
548
+ <div>
549
+ <h4 class="font-medium text-red-600 mb-2">Cons</h4>
550
+ <ul class="list-disc pl-5 space-y-1">
551
+ <li>Same design as previous model</li>
552
+ <li>Limited to 16GB RAM in this configuration</li>
553
+ <li>Price increase over M1 model</li>
554
+ </ul>
555
+ </div>
556
+ </div>
557
+ </div>
558
+
559
+ <p>Rating: <span class="text-yellow-500">★★★★☆</span> (4.5/5)</p>
560
+ </div>
561
+
562
+ <!-- Tags -->
563
+ <div class="mt-12 pt-6 border-t border-gray-200">
564
+ <div class="flex flex-wrap gap-2">
565
+ <a href="#" class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200">#macbook</a>
566
+ <a href="#" class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200">#apple</a>
567
+ <a href="#" class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200">#laptops</a>
568
+ <a href="#" class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200">#techreview</a>
569
+ </div>
570
+ </div>
571
+
572
+ <!-- Author Bio -->
573
+ <div class="mt-12 pt-8 border-t border-gray-200">
574
+ <div class="flex items-start">
575
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-16 h-16 rounded-full">
576
+ <div class="ml-4">
577
+ <h3 class="font-bold text-lg">About John Smith</h3>
578
+ <p class="text-gray-600 mt-1">John has been reviewing tech products for over 10 years. He specializes in laptops and mobile devices, with a focus on real-world performance rather than just specs.</p>
579
+ <div class="flex space-x-4 mt-3">
580
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-twitter"></i></a>
581
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-linkedin"></i></a>
582
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fas fa-globe"></i></a>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+
588
+ <!-- Related Articles -->
589
+ <div class="mt-16">
590
+ <h3 class="text-2xl font-bold mb-6">You Might Also Like</h3>
591
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
592
+ <a href="#" class="group flex items-start">
593
+ <div class="w-24 h-24 flex-shrink-0 overflow-hidden rounded-lg">
594
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80"
595
+ alt="Related article"
596
+ class="w-full h-full object-cover group-hover:scale-105 transition">
597
+ </div>
598
+ <div class="ml-4">
599
+ <h4 class="font-bold group-hover:text-primary transition">MacBook Air M2 Review</h4>
600
+ <p class="text-sm text-gray-500 mt-1">June 5, 2023</p>
601
+ </div>
602
+ </a>
603
+
604
+ <a href="#" class="group flex items-start">
605
+ <div class="w-24 h-24 flex-shrink-0 overflow-hidden rounded-lg">
606
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80"
607
+ alt="Related article"
608
+ class="w-full h-full object-cover group-hover:scale-105 transition">
609
+ </div>
610
+ <div class="ml-4">
611
+ <h4 class="font-bold group-hover:text-primary transition">Best Laptops for Developers</h4>
612
+ <p class="text-sm text-gray-500 mt-1">May 28, 2023</p>
613
+ </div>
614
+ </a>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Comments Section -->
619
+ <div class="mt-16 pt-8 border-t border-gray-200">
620
+ <h3 class="text-2xl font-bold mb-6">Comments (12)</h3>
621
+
622
+ <div class="space-y-6">
623
+ <!-- Comment 1 -->
624
+ <div class="flex">
625
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="User" class="w-10 h-10 rounded-full">
626
+ <div class="ml-4 flex-1">
627
+ <div class="bg-gray-50 p-4 rounded-lg">
628
+ <div class="flex justify-between items-center mb-2">
629
+ <span class="font-medium">Sarah Johnson</span>
630
+ <span class="text-sm text-gray-500">2 days ago</span>
631
+ </div>
632
+ <p>Great review! I've been debating whether to upgrade from my 2019 Intel model. This convinced me it's worth it.</p>
633
+ <button class="text-sm text-gray-500 hover:text-primary mt-2">Reply</button>
634
+ </div>
635
+
636
+ <!-- Reply -->
637
+ <div class="flex mt-4">
638
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full">
639
+ <div class="ml-4 flex-1">
640
+ <div class="bg-blue-50 p-3 rounded-lg">
641
+ <div class="flex justify-between items-center mb-1">
642
+ <span class="font-medium">John Smith (Author)</span>
643
+ <span class="text-xs text-gray-500">1 day ago</span>
644
+ </div>
645
+ <p class="text-sm">Thanks Sarah! The performance difference will definitely be noticeable coming from Intel.</p>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <!-- Comment 2 -->
653
+ <div class="flex">
654
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="User" class="w-10 h-10 rounded-full">
655
+ <div class="ml-4 flex-1">
656
+ <div class="bg-gray-50 p-4 rounded-lg">
657
+ <div class="flex justify-between items-center mb-2">
658
+ <span class="font-medium">Michael Chen</span>
659
+ <span class="text-sm text-gray-500">3 days ago</span>
660
+ </div>
661
+ <p>I'm curious about thermal throttling during sustained workloads. Did you test video rendering for extended periods?</p>
662
+ <button class="text-sm text-gray-500 hover:text-primary mt-2">Reply</button>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+
668
+ <!-- Comment Form -->
669
+ <div class="mt-8">
670
+ <h4 class="font-bold mb-4">Leave a Comment</h4>
671
+ <form>
672
+ <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" rows="4" placeholder="Write your comment..."></textarea>
673
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
674
+ <input type="text" class="px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Name">
675
+ <input type="email" class="px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Email">
676
+ </div>
677
+ <div class="mt-4">
678
+ <button type="submit" class="bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-600 transition">Post Comment</button>
679
+ </div>
680
+ </form>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </article>
685
+ </div>
686
+ </div>
687
+
688
+ <!-- Category Page Template -->
689
+ <div id="category-page" class="page-content hidden">
690
+ <div class="container mx-auto px-4 py-16">
691
+ <!-- Category Header -->
692
+ <div class="text-center mb-16">
693
+ <h1 class="text-4xl font-bold mb-4">Gadgets</h1>
694
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Discover the latest and greatest tech devices, from smartphones to smart home gadgets and everything in between.</p>
695
+ </div>
696
+
697
+ <!-- Category Content -->
698
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
699
+ <!-- Article 1 -->
700
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
701
+ <div class="overflow-hidden h-48">
702
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80"
703
+ alt="MacBook Pro review"
704
+ class="article-image w-full h-full object-cover">
705
+ </div>
706
+ <div class="p-6">
707
+ <div class="flex items-center mb-2">
708
+ <span class="bg-primary text-white text-xs px-2 py-1 rounded">Gadgets</span>
709
+ <span class="text-gray-500 text-sm ml-2">5 min read</span>
710
+ </div>
711
+ <h3 class="text-xl font-bold mb-2">M2 MacBook Pro Review: Is It Worth the Upgrade?</h3>
712
+ <p class="text-gray-600 mb-4">We put Apple's latest powerhouse through its paces to see if it lives up to the hype.</p>
713
+ <div class="flex items-center justify-between">
714
+ <div class="flex items-center">
715
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full">
716
+ <span class="ml-2 text-sm font-medium">John Smith</span>
717
+ </div>
718
+ <span class="text-gray-500 text-sm">June 15, 2023</span>
719
+ </div>
720
+ </div>
721
+ </div>
722
+
723
+ <!-- Article 2 -->
724
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
725
+ <div class="overflow-hidden h-48">
726
+ <img src="https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=967&q=80"
727
+ alt="Smart home setup"
728
+ class="article-image w-full h-full object-cover">
729
+ </div>
730
+ <div class="p-6">
731
+ <div class="flex items-center mb-2">
732
+ <span class="bg-accent text-white text-xs px-2 py-1 rounded">How-To</span>
733
+ <span class="text-gray-500 text-sm ml-2">10 min read</span>
734
+ </div>
735
+ <h3 class="text-xl font-bold mb-2">The Ultimate Smart Home Setup Guide for 2023</h3>
736
+ <p class="text-gray-600 mb-4">Transform your living space with these carefully curated smart home devices that actually work well together.</p>
737
+ <div class="flex items-center justify-between">
738
+ <div class="flex items-center">
739
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author" class="w-8 h-8 rounded-full">
740
+ <span class="ml-2 text-sm font-medium">Michael Chen</span>
741
+ </div>
742
+ <span class="text-gray-500 text-sm">June 5, 2023</span>
743
+ </div>
744
+ </div>
745
+ </div>
746
+
747
+ <!-- Article 3 -->
748
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
749
+ <div class="overflow-hidden h-48">
750
+ <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
751
+ alt="iPhone 14 camera"
752
+ class="article-image w-full h-full object-cover">
753
+ </div>
754
+ <div class="p-6">
755
+ <div class="flex items-center mb-2">
756
+ <span class="bg-primary text-white text-xs px-2 py-1 rounded">Gadgets</span>
757
+ <span class="text-gray-500 text-sm ml-2">4 min read</span>
758
+ </div>
759
+ <h3 class="text-xl font-bold mb-2">iPhone 14 Pro Camera Tips You Probably Didn't Know</h3>
760
+ <p class="text-gray-600 mb-4">Unlock the full potential of your iPhone's camera with these professional techniques.</p>
761
+ <div class="flex items-center justify-between">
762
+ <div class="flex items-center">
763
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author" class="w-8 h-8 rounded-full">
764
+ <span class="ml-2 text-sm font-medium">Emily Wilson</span>
765
+ </div>
766
+ <span class="text-gray-500 text-sm">May 28, 2023</span>
767
+ </div>
768
+ </div>
769
+ </div>
770
+
771
+ <!-- Article 4 -->
772
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
773
+ <div class="overflow-hidden h-48">
774
+ <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
775
+ alt="Tech gadgets"
776
+ class="article-image w-full h-full object-cover">
777
+ </div>
778
+ <div class="p-6">
779
+ <div class="flex items-center mb-2">
780
+ <span class="bg-accent text-white text-xs px-2 py-1 rounded">Reviews</span>
781
+ <span class="text-gray-500 text-sm ml-2">8 min read</span>
782
+ </div>
783
+ <h3 class="text-xl font-bold mb-2">Our Favorite Tech Gadgets Under $100</h3>
784
+ <p class="text-gray-600 mb-4">Quality tech doesn't have to break the bank. Here are our top affordable picks.</p>
785
+ <div class="flex items-center justify-between">
786
+ <div class="flex items-center">
787
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Author" class="w-8 h-8 rounded-full">
788
+ <span class="ml-2 text-sm font-medium">Lisa Rodriguez</span>
789
+ </div>
790
+ <span class="text-gray-500 text-sm">May 18, 2023</span>
791
+ </div>
792
+ </div>
793
+ </div>
794
+
795
+ <!-- Article 5 -->
796
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
797
+ <div class="overflow-hidden h-48">
798
+ <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80"
799
+ alt="Productivity apps"
800
+ class="article-image w-full h-full object-cover">
801
+ </div>
802
+ <div class="p-6">
803
+ <div class="flex items-center mb-2">
804
+ <span class="bg-secondary text-white text-xs px-2 py-1 rounded">Apps</span>
805
+ <span class="text-gray-500 text-sm ml-2">7 min read</span>
806
+ </div>
807
+ <h3 class="text-xl font-bold mb-2">10 Underrated Productivity Apps That Will Change Your Workflow</h3>
808
+ <p class="text-gray-600 mb-4">Discover these hidden gems that can boost your productivity without breaking the bank.</p>
809
+ <div class="flex items-center justify-between">
810
+ <div class="flex items-center">
811
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full">
812
+ <span class="ml-2 text-sm font-medium">Sarah Johnson</span>
813
+ </div>
814
+ <span class="text-gray-500 text-sm">June 10, 2023</span>
815
+ </div>
816
+ </div>
817
+ </div>
818
+
819
+ <!-- Article 6 -->
820
+ <div class="article-card bg-white rounded-xl shadow-md overflow-hidden">
821
+ <div class="overflow-hidden h-48">
822
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
823
+ alt="Data analytics"
824
+ class="article-image w-full h-full object-cover">
825
+ </div>
826
+ <div class="p-6">
827
+ <div class="flex items-center mb-2">
828
+ <span class="bg-secondary text-white text-xs px-2 py-1 rounded">Apps</span>
829
+ <span class="text-gray-500 text-sm ml-2">6 min read</span>
830
+ </div>
831
+ <h3 class="text-xl font-bold mb-2">The Best Data Visualization Tools for 2023</h3>
832
+ <p class="text-gray-600 mb-4">Turn complex data into beautiful, understandable insights with these powerful tools.</p>
833
+ <div class="flex items-center justify-between">
834
+ <div class="flex items-center">
835
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Author" class="w-8 h-8 rounded-full">
836
+ <span class="ml-2 text-sm font-medium">David Kim</span>
837
+ </div>
838
+ <span class="text-gray-500 text-sm">May 22, 2023</span>
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </div>
843
+
844
+ <!-- Pagination -->
845
+ <div class="mt-16 flex justify-center">
846
+ <nav class="flex items-center space-x-2">
847
+ <a href="#" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-500 hover:bg-gray-50">&laquo;</a>
848
+ <a href="#" class="px-4 py-2 border border-gray-300 rounded-lg bg-primary text-white">1</a>
849
+ <a href="#" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">2</a>
850
+ <a href="#" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">3</a>
851
+ <span class="px-4 py-2">...</span>
852
+ <a href="#" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">8</a>
853
+ <a href="#" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-500 hover:bg-gray-50">&raquo;</a>
854
+ </nav>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+
860
+ <!-- About Page Template -->
861
+ <div id="about-page" class="page-content hidden">
862
+ <div class="container mx-auto px-4 py-16 max-w-4xl">
863
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
864
+ <!-- Hero Section -->
865
+ <div class="bg-gradient-to-r from-primary to-secondary py-16 text-white text-center">
866
+ <h1 class="text-4xl font-bold mb-4">About NiftyTechFinds</h1>
867
+ <p class="text-xl max-w-2xl mx-auto">Discovering and sharing the coolest tech gadgets and apps since 2018.</p>
868
+ </div>
869
+
870
+ <!-- Content -->
871
+ <div class="p-8">
872
+ <div class="prose max-w-none">
873
+ <h2>Our Story</h2>
874
+ <p>Founded in 2018 by tech enthusiasts John Smith and Sarah Johnson, NiftyTechFinds began as a passion project to share our discoveries of underrated tech products. What started as a small blog has grown into a trusted resource for thousands of readers looking for honest, in-depth reviews and recommendations.</p>
875
+
876
+ <div class="my-8">
877
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
878
+ alt="Our team"
879
+ class="w-full h-96 object-cover rounded-lg">
880
+ </div>
881
+
882
+ <h2>Our Mission</h2>
883
+ <p>In an era of endless tech options and marketing hype, our mission is simple: to help you find the tech products that actually deliver value. We're not here to review every product that launches, but to carefully select and test the ones that stand out for their innovation, quality, or value.</p>
884
+
885
+ <div class="bg-gray-50 p-6 rounded-lg my-8">
886
+ <h3 class="font-bold text-lg mb-4">What Makes Us Different</h3>
887
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
888
+ <div>
889
+ <div class="flex items-start mb-3">
890
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-3">
891
+ <i class="fas fa-star text-primary"></i>
892
+ </div>
893
+ <div>
894
+ <h4 class="font-medium">No Paid Reviews</h4>
895
+ <p class="text-gray-600 text-sm">We purchase all products we review and never accept payment for positive coverage.</p>
896
+ </div>
897
+ </div>
898
+ </div>
899
+ <div>
900
+ <div class="flex items-start mb-3">
901
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-3">
902
+ <i class="fas fa-bolt text-primary"></i>
903
+ </div>
904
+ <div>
905
+ <h4 class="font-medium">Real-World Testing</h4>
906
+ <p class="text-gray-600 text-sm">We test products in everyday scenarios, not just controlled benchmark environments.</p>
907
+ </div>
908
+ </div>
909
+ </div>
910
+ <div>
911
+ <div class="flex items-start mb-3">
912
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-3">
913
+ <i class="fas fa-gem text-primary"></i>
914
+ </div>
915
+ <div>
916
+ <h4 class="font-medium">Hidden Gems</h4>
917
+ <p class="text-gray-600 text-sm">We specialize in finding under-the-radar products that don't get mainstream attention.</p>
918
+ </div>
919
+ </div>
920
+ </div>
921
+ <div>
922
+ <div class="flex items-start mb-3">
923
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-3">
924
+ <i class="fas fa-heart text-primary"></i>
925
+ </div>
926
+ <div>
927
+ <h4 class="font-medium">Community Focused</h4>
928
+ <p class="text-gray-600 text-sm">Our recommendations are driven by what our readers actually need and ask for.</p>
929
+ </div>
930
+ </div>
931
+ </div>
932
+ </div>
933
+ </div>
934
+
935
+ <h2>Meet the Team</h2>
936
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 my-8">
937
+ <!-- Team Member 1 -->
938
+ <div class="flex items-start">
939
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John Smith" class="w-20 h-20 rounded-full">
940
+ <div class="ml-4">
941
+ <h3 class="font-bold">John Smith</h3>
942
+ <p class="text-primary text-sm mb-2">Founder & Lead Reviewer</p>
943
+ <p class="text-gray-600 text-sm">Former tech journalist with a passion for gadgets and cutting-edge technology. Specializes in laptops and mobile devices.</p>
944
+ <div class="flex space-x-3 mt-2">
945
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-twitter"></i></a>
946
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-linkedin"></i></a>
947
+ </div>
948
+ </div>
949
+ </div>
950
+
951
+ <!-- Team Member 2 -->
952
+ <div class="flex items-start">
953
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson" class="w-20 h-20 rounded-full">
954
+ <div class="ml-4">
955
+ <h3 class="font-bold">Sarah Johnson</h3>
956
+ <p class="text-primary text-sm mb-2">Co-Founder & App Specialist</p>
957
+ <p class="text-gray-600 text-sm">Software engineer turned app reviewer. Loves finding productivity apps that actually make a difference.</p>
958
+ <div class="flex space-x-3 mt-2">
959
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-twitter"></i></a>
960
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-github"></i></a>
961
+ </div>
962
+ </div>
963
+ </div>
964
+
965
+ <!-- Team Member 3 -->
966
+ <div class="flex items-start">
967
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael Chen" class="w-20 h-20 rounded-full">
968
+ <div class="ml-4">
969
+ <h3 class="font-bold">Michael Chen</h3>
970
+ <p class="text-primary text-sm mb-2">Smart Home Expert</p>
971
+ <p class="text-gray-600 text-sm">Home automation specialist who tests every smart device in his actual home before recommending it.</p>
972
+ <div class="flex space-x-3 mt-2">
973
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-youtube"></i></a>
974
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fas fa-globe"></i></a>
975
+ </div>
976
+ </div>
977
+ </div>
978
+
979
+ <!-- Team Member 4 -->
980
+ <div class="flex items-start">
981
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Wilson" class="w-20 h-20 rounded-full">
982
+ <div class="ml-4">
983
+ <h3 class="font-bold">Emily Wilson</h3>
984
+ <p class="text-primary text-sm mb-2">Photography Tech Reviewer</p>
985
+ <p class="text-gray-600 text-sm">Professional photographer who tests camera gear and photo-related tech from a creator's perspective.</p>
986
+ <div class="flex space-x-3 mt-2">
987
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-instagram"></i></a>
988
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fas fa-camera"></i></a>
989
+ </div>
990
+ </div>
991
+ </div>
992
+ </div>
993
+
994
+ <h2>Our Review Process</h2>
995
+ <p>Every product we review goes through a rigorous testing process:</p>
996
+ <ol class="list-decimal pl-6 my-4 space-y-2">
997
+ <li><strong>Purchase:</strong> We buy all products with our own funds to ensure unbiased reviews.</li>
998
+ <li><strong>Testing:</strong> Minimum 2 weeks of real-world use in appropriate scenarios.</li>
999
+ <li><strong>Analysis:</strong> Evaluation against competitors in the same price range.</li>
1000
+ <li><strong>Writing:</strong> Honest assessment of pros, cons, and who the product is best suited for.</li>
1001
+ <li><strong>Follow-up:</strong> We update reviews if new information or long-term findings emerge.</li>
1002
+ </ol>
1003
+
1004
+ <div class="bg-blue-50 p-6 rounded-lg my-8">
1005
+ <h3 class="font-bold text-lg mb-4">Have a Product You Want Us to Review?</h3>
1006
+ <p>While we purchase most products ourselves, we do accept review units from manufacturers under strict conditions:</p>
1007
+ <ul class="list-disc pl-6 mt-2 space-y-1">
1008
+ <li>We maintain full editorial control over all content</li>
1009
+ <li>We disclose when a product was provided by the manufacturer</li>
1010
+ <li>We test the product the same way we would if we purchased it</li>
1011
+ </ul>
1012
+ <a href="contact.html" class="inline-block mt-4 bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-600 transition">Contact Us About a Product</a>
1013
+ </div>
1014
+ </div>
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+
1020
+ <!-- Contact Page Template -->
1021
+ <div id="contact-page" class="page-content hidden">
1022
+ <div class="container mx-auto px-4 py-16 max-w-4xl">
1023
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
1024
+ <!-- Hero Section -->
1025
+ <div class="bg-gradient-to-r from-primary to-secondary py-16 text-white text-center">
1026
+ <h1 class="text-4xl font-bold mb-4">Contact Us</h1>
1027
+ <p class="text-xl max-w-2xl mx-auto">Have questions, suggestions, or products you'd like us to review? We'd love to hear from you.</p>
1028
+ </div>
1029
+
1030
+ <!-- Content -->
1031
+ <div class="p-8">
1032
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
1033
+ <!-- Contact Form -->
1034
+ <div>
1035
+ <h2 class="text-2xl font-bold mb-6">Send Us a Message</h2>
1036
+ <form>
1037
+ <div class="mb-4">
1038
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
1039
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
1040
+ </div>
1041
+ <div class="mb-4">
1042
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
1043
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
1044
+ </div>
1045
+ <div class="mb-4">
1046
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
1047
+ <select id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
1048
+ <option value="">Select a subject</option>
1049
+ <option value="general">General Inquiry</option>
1050
+ <option value="product-review">Product Review Suggestion</option>
1051
+ <option value="advertising">Advertising Inquiry</option>
1052
+ <option value="partnership">Partnership Opportunity</option>
1053
+ <option value="other">Other</option>
1054
+ </select>
1055
+ </div>
1056
+ <div class="mb-4">
1057
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
1058
+ <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
1059
+ </div>
1060
+ <button type="submit" class="w-full bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-600 transition">Send Message</button>
1061
+ </form>
1062
+ </div>
1063
+
1064
+ <!-- Contact Info -->
1065
+ <div>
1066
+ <h2 class="text-2xl font-bold mb-6">Other Ways to Reach Us</h2>
1067
+
1068
+ <div class="space-y-6">
1069
+ <!-- Email -->
1070
+ <div class="flex items-start">
1071
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
1072
+ <i class="fas fa-envelope text-primary"></i>
1073
+ </div>
1074
+ <div>
1075
+ <h3 class="font-medium text-lg">Email</h3>
1076
+ <p class="text-gray-600">contact@niftytechfinds.com</p>
1077
+ <p class="text-gray-600">reviews@niftytechfinds.com (for product submissions)</p>
1078
+ </div>
1079
+ </div>
1080
+
1081
+ <!-- Social Media -->
1082
+ <div class="flex items-start">
1083
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
1084
+ <i class="fas fa-share-alt text-primary"></i>
1085
+ </div>
1086
+ <div>
1087
+ <h3 class="font-medium text-lg">Social Media</h3>
1088
+ <div class="flex space-x-4 mt-2">
1089
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200">
1090
+ <i class="fab fa-twitter"></i>
1091
+ </a>
1092
+ <a href="#" class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white hover:bg-blue-700">
1093
+ <i class="fab fa-facebook-f"></i>
1094
+ </a>
1095
+ <a href="#" class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-pink-600 hover:bg-pink-200">
1096
+ <i class="fab fa-instagram"></i>
1097
+ </a>
1098
+ <a href="#" class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center text-white hover:bg-blue-500">
1099
+ <i class="fab fa-linkedin-in"></i>
1100
+ </a>
1101
+ </div>
1102
+ </div>
1103
+ </div>
1104
+
1105
+ <!-- Mailing Address -->
1106
+ <div class="flex items-start">
1107
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
1108
+ <i class="fas fa-map-marker-alt text-primary"></i>
1109
+ </div>
1110
+ <div>
1111
+ <h3 class="font-medium text-lg">Mailing Address</h3>
1112
+ <p class="text-gray-600">NiftyTechFinds</p>
1113
+ <p class="text-gray-600">123 Tech Street</p>
1114
+ <p class="text-gray-600">San Francisco, CA 94107</p>
1115
+ </div>
1116
+ </div>
1117
+
1118
+ <!-- Product Submission -->
1119
+ <div class="bg-gray-50 p-6 rounded-lg mt-8">
1120
+ <h3 class="font-bold text-lg mb-3">Want Us to Review Your Product?</h3>
1121
+ <p class="text-gray-600 mb-4">We accept product submissions from manufacturers under our review policy guidelines.</p>
1122
+ <a href="#" class="inline-block bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600 transition">Review Our Policy</a>
1123
+ </div>
1124
+ </div>
1125
+ </div>
1126
+ </div>
1127
+ </div>
1128
+ </div>
1129
+ </div>
1130
+ </div>
1131
+ </main>
1132
+
1133
+ <!-- Footer -->
1134
+ <footer class="bg-dark text-white py-16">
1135
+ <div class="container mx-auto px-4">
1136
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
1137
+ <!-- About -->
1138
+ <div>
1139
+ <h3 class="text-xl font-bold mb-4">NiftyTechFinds</h3>
1140
+ <p class="text-gray-400 mb-4">Discovering and sharing the coolest tech gadgets and apps since 2018.</p>
1141
+ <div class="flex space-x-4">
1142
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
1143
+ <a href="#" class="text-gray-400 hover:text-white"><i class="
1144
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ i have an existing blog, current thme limits me a lot, niftytechfinds.com, pleease review and help me create various pages, with all features.