Hugging Face's logo

Spaces:
Wasim0606
/
trendmaster-pro
Running

App Files Community
Wasim0606 commited on
Commit
b37a625
·
verified ·
1 Parent(s): 1fc22f5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +852 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Trendmaster Pro
3
- emoji: 📈
4
- colorFrom: purple
5
- colorTo: green
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: trendmaster-pro
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
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,852 @@
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>TrendMaster Pro | E-Commerce Intelligence Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ body {
12
+ font-family: 'Open Sans', sans-serif;
13
+ background-color: #0a1922;
14
+ color: #e2e8f0;
15
+ }
16
+ h1, h2, h3, h4, h5, h6 {
17
+ font-family: 'Montserrat', sans-serif;
18
+ }
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #1a5f7a 0%, #0a1922 100%);
21
+ }
22
+ .gold-accent {
23
+ color: #ffd700;
24
+ }
25
+ .gold-border {
26
+ border-color: #ffd700;
27
+ }
28
+ .gold-bg {
29
+ background-color: #ffd700;
30
+ }
31
+ .dark-card {
32
+ background-color: #162a38;
33
+ border: 1px solid #1a5f7a;
34
+ }
35
+ .heatmap-cell {
36
+ transition: all 0.3s ease;
37
+ }
38
+ .heatmap-cell:hover {
39
+ transform: scale(1.1);
40
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
41
+ }
42
+ .search-box {
43
+ background-color: rgba(26, 95, 122, 0.3);
44
+ border: 1px solid #1a5f7a;
45
+ }
46
+ .search-box:focus {
47
+ outline: none;
48
+ border-color: #ffd700;
49
+ box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
50
+ }
51
+ .nav-item {
52
+ position: relative;
53
+ }
54
+ .nav-item::after {
55
+ content: '';
56
+ position: absolute;
57
+ width: 0;
58
+ height: 2px;
59
+ bottom: 0;
60
+ left: 0;
61
+ background-color: #ffd700;
62
+ transition: width 0.3s ease;
63
+ }
64
+ .nav-item:hover::after {
65
+ width: 100%;
66
+ }
67
+ .sidebar-item {
68
+ transition: all 0.3s ease;
69
+ }
70
+ .sidebar-item:hover {
71
+ background-color: rgba(26, 95, 122, 0.5);
72
+ border-left: 3px solid #ffd700;
73
+ }
74
+ .trend-up {
75
+ color: #4ade80;
76
+ }
77
+ .trend-down {
78
+ color: #f87171;
79
+ }
80
+ .pricing-card:hover {
81
+ transform: translateY(-10px);
82
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
83
+ }
84
+ @keyframes pulse {
85
+ 0%, 100% {
86
+ opacity: 1;
87
+ }
88
+ 50% {
89
+ opacity: 0.5;
90
+ }
91
+ }
92
+ .animate-pulse {
93
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="min-h-screen">
98
+ <!-- Navigation -->
99
+ <nav class="gradient-bg py-4 px-6 shadow-lg">
100
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
101
+ <div class="flex items-center space-x-2">
102
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
103
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
104
+ </svg>
105
+ <span class="text-xl font-bold gold-accent">TrendMaster Pro</span>
106
+ </div>
107
+ <div class="hidden md:flex space-x-8">
108
+ <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Dashboard</a>
109
+ <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Market Analysis</a>
110
+ <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Supplier Network</a>
111
+ <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Knowledge Hub</a>
112
+ <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Community</a>
113
+ </div>
114
+ <div class="flex items-center space-x-4">
115
+ <button class="bg-transparent border gold-border text-white px-4 py-2 rounded hover:bg-opacity-10 hover:bg-gold-300 transition">
116
+ Sign In
117
+ </button>
118
+ <button class="gold-bg text-gray-900 px-4 py-2 rounded font-medium hover:bg-opacity-90 transition">
119
+ Get Started
120
+ </button>
121
+ <button class="md:hidden text-white">
122
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
123
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
124
+ </svg>
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </nav>
129
+
130
+ <!-- Main Content -->
131
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
132
+ <!-- Search and Filters -->
133
+ <div class="mb-8">
134
+ <div class="flex flex-col md:flex-row gap-4">
135
+ <div class="flex-1">
136
+ <div class="relative">
137
+ <input type="text" placeholder="Try: 'Show me kitchen gadgets under $50 gaining popularity in European markets with 4+ star ratings'"
138
+ class="w-full search-box rounded-lg px-6 py-4 text-white placeholder-gray-400 focus:placeholder-gray-500">
139
+ <button class="absolute right-3 top-3 gold-bg text-gray-900 p-2 rounded-md">
140
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
141
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
142
+ </svg>
143
+ </button>
144
+ </div>
145
+ </div>
146
+ <div class="flex gap-2">
147
+ <button class="dark-card px-4 py-2 rounded-lg flex items-center gap-2">
148
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
149
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
150
+ </svg>
151
+ Filters
152
+ </button>
153
+ <button class="dark-card px-4 py-2 rounded-lg flex items-center gap-2">
154
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
155
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
156
+ </svg>
157
+ Views
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Dashboard Overview -->
164
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
165
+ <div class="dark-card rounded-lg p-6">
166
+ <div class="flex justify-between items-start">
167
+ <div>
168
+ <p class="text-gray-400">Total Products Tracked</p>
169
+ <p class="text-3xl font-bold mt-2">24,857</p>
170
+ </div>
171
+ <div class="bg-blue-900 bg-opacity-50 p-2 rounded-full">
172
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
173
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
174
+ </svg>
175
+ </div>
176
+ </div>
177
+ <div class="mt-4 flex items-center">
178
+ <span class="trend-up flex items-center">
179
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
180
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
181
+ </svg>
182
+ 12.5%
183
+ </span>
184
+ <span class="text-gray-400 text-sm ml-2">vs last month</span>
185
+ </div>
186
+ </div>
187
+ <div class="dark-card rounded-lg p-6">
188
+ <div class="flex justify-between items-start">
189
+ <div>
190
+ <p class="text-gray-400">Emerging Trends</p>
191
+ <p class="text-3xl font-bold mt-2">143</p>
192
+ </div>
193
+ <div class="bg-green-900 bg-opacity-50 p-2 rounded-full">
194
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
195
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
196
+ </svg>
197
+ </div>
198
+ </div>
199
+ <div class="mt-4 flex items-center">
200
+ <span class="trend-up flex items-center">
201
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
202
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
203
+ </svg>
204
+ 8.2%
205
+ </span>
206
+ <span class="text-gray-400 text-sm ml-2">vs last week</span>
207
+ </div>
208
+ </div>
209
+ <div class="dark-card rounded-lg p-6">
210
+ <div class="flex justify-between items-start">
211
+ <div>
212
+ <p class="text-gray-400">Verified Suppliers</p>
213
+ <p class="text-3xl font-bold mt-2">3,742</p>
214
+ </div>
215
+ <div class="bg-purple-900 bg-opacity-50 p-2 rounded-full">
216
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
217
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
218
+ </svg>
219
+ </div>
220
+ </div>
221
+ <div class="mt-4 flex items-center">
222
+ <span class="trend-up flex items-center">
223
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
224
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
225
+ </svg>
226
+ 5.7%
227
+ </span>
228
+ <span class="text-gray-400 text-sm ml-2">new this month</span>
229
+ </div>
230
+ </div>
231
+ <div class="dark-card rounded-lg p-6">
232
+ <div class="flex justify-between items-start">
233
+ <div>
234
+ <p class="text-gray-400">AI Predictions</p>
235
+ <p class="text-3xl font-bold mt-2">92%</p>
236
+ </div>
237
+ <div class="bg-yellow-900 bg-opacity-50 p-2 rounded-full">
238
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
239
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
240
+ </svg>
241
+ </div>
242
+ </div>
243
+ <div class="mt-4 flex items-center">
244
+ <span class="trend-up flex items-center">
245
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
246
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
247
+ </svg>
248
+ 3.1%
249
+ </span>
250
+ <span class="text-gray-400 text-sm ml-2">accuracy gain</span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Main Dashboard Content -->
256
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
257
+ <!-- Left Column -->
258
+ <div class="lg:col-span-2 space-y-6">
259
+ <!-- Market Trends Chart -->
260
+ <div class="dark-card rounded-lg p-6">
261
+ <div class="flex justify-between items-center mb-6">
262
+ <h3 class="text-xl font-bold">Market Trends Analysis</h3>
263
+ <div class="flex space-x-2">
264
+ <button class="px-3 py-1 text-sm rounded bg-blue-900 bg-opacity-30">1M</button>
265
+ <button class="px-3 py-1 text-sm rounded bg-gray-700 bg-opacity-30">3M</button>
266
+ <button class="px-3 py-1 text-sm rounded bg-gray-700 bg-opacity-30">6M</button>
267
+ <button class="px-3 py-1 text-sm rounded bg-gray-700 bg-opacity-30">1Y</button>
268
+ </div>
269
+ </div>
270
+ <div class="h-80">
271
+ <canvas id="marketTrendsChart"></canvas>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Emerging Products -->
276
+ <div class="dark-card rounded-lg p-6">
277
+ <div class="flex justify-between items-center mb-6">
278
+ <h3 class="text-xl font-bold">Emerging Products</h3>
279
+ <button class="text-sm gold-accent flex items-center">
280
+ View All
281
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
282
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
283
+ </svg>
284
+ </button>
285
+ </div>
286
+ <div class="overflow-x-auto">
287
+ <table class="min-w-full divide-y divide-gray-700">
288
+ <thead>
289
+ <tr>
290
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Product</th>
291
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Marketplace</th>
292
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Price</th>
293
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Trend</th>
294
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Rating</th>
295
+ </tr>
296
+ </thead>
297
+ <tbody class="divide-y divide-gray-700">
298
+ <tr class="hover:bg-gray-800 transition">
299
+ <td class="px-4 py-4 whitespace-nowrap">
300
+ <div class="flex items-center">
301
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-md"></div>
302
+ <div class="ml-4">
303
+ <div class="text-sm font-medium">Smart Posture Corrector</div>
304
+ <div class="text-sm text-gray-400">Health & Wellness</div>
305
+ </div>
306
+ </div>
307
+ </td>
308
+ <td class="px-4 py-4 whitespace-nowrap text-sm">Amazon US</td>
309
+ <td class="px-4 py-4 whitespace-nowrap text-sm">$39.99</td>
310
+ <td class="px-4 py-4 whitespace-nowrap">
311
+ <span class="trend-up flex items-center">
312
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
313
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
314
+ </svg>
315
+ 87%
316
+ </span>
317
+ </td>
318
+ <td class="px-4 py-4 whitespace-nowrap">
319
+ <div class="flex items-center">
320
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
321
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
322
+ </svg>
323
+ <span class="ml-1 text-sm">4.7</span>
324
+ </div>
325
+ </td>
326
+ </tr>
327
+ <tr class="hover:bg-gray-800 transition">
328
+ <td class="px-4 py-4 whitespace-nowrap">
329
+ <div class="flex items-center">
330
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-md"></div>
331
+ <div class="ml-4">
332
+ <div class="text-sm font-medium">Magnetic Phone Car Mount</div>
333
+ <div class="text-sm text-gray-400">Automotive</div>
334
+ </div>
335
+ </div>
336
+ </td>
337
+ <td class="px-4 py-4 whitespace-nowrap text-sm">Shopify Stores</td>
338
+ <td class="px-4 py-4 whitespace-nowrap text-sm">$24.95</td>
339
+ <td class="px-4 py-4 whitespace-nowrap">
340
+ <span class="trend-up flex items-center">
341
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
342
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
343
+ </svg>
344
+ 65%
345
+ </span>
346
+ </td>
347
+ <td class="px-4 py-4 whitespace-nowrap">
348
+ <div class="flex items-center">
349
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
350
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
351
+ </svg>
352
+ <span class="ml-1 text-sm">4.5</span>
353
+ </div>
354
+ </td>
355
+ </tr>
356
+ <tr class="hover:bg-gray-800 transition">
357
+ <td class="px-4 py-4 whitespace-nowrap">
358
+ <div class="flex items-center">
359
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-md"></div>
360
+ <div class="ml-4">
361
+ <div class="text-sm font-medium">Reusable Silicone Food Covers</div>
362
+ <div class="text-sm text-gray-400">Kitchen</div>
363
+ </div>
364
+ </div>
365
+ </td>
366
+ <td class="px-4 py-4 whitespace-nowrap text-sm">Alibaba</td>
367
+ <td class="px-4 py-4 whitespace-nowrap text-sm">$12.99</td>
368
+ <td class="px-4 py-4 whitespace-nowrap">
369
+ <span class="trend-up flex items-center">
370
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
371
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
372
+ </svg>
373
+ 72%
374
+ </span>
375
+ </td>
376
+ <td class="px-4 py-4 whitespace-nowrap">
377
+ <div class="flex items-center">
378
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
379
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
380
+ </svg>
381
+ <span class="ml-1 text-sm">4.8</span>
382
+ </div>
383
+ </td>
384
+ </tr>
385
+ <tr class="hover:bg-gray-800 transition">
386
+ <td class="px-4 py-4 whitespace-nowrap">
387
+ <div class="flex items-center">
388
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-md"></div>
389
+ <div class="ml-4">
390
+ <div class="text-sm font-medium">Adjustable Dumbbell Set</div>
391
+ <div class="text-sm text-gray-400">Fitness</div>
392
+ </div>
393
+ </div>
394
+ </td>
395
+ <td class="px-4 py-4 whitespace-nowrap text-sm">Amazon UK</td>
396
+ <td class="px-4 py-4 whitespace-nowrap text-sm">$89.99</td>
397
+ <td class="px-4 py-4 whitespace-nowrap">
398
+ <span class="trend-up flex items-center">
399
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
400
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
401
+ </svg>
402
+ 54%
403
+ </span>
404
+ </td>
405
+ <td class="px-4 py-4 whitespace-nowrap">
406
+ <div class="flex items-center">
407
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
408
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
409
+ </svg>
410
+ <span class="ml-1 text-sm">4.6</span>
411
+ </div>
412
+ </td>
413
+ </tr>
414
+ </tbody>
415
+ </table>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Right Column -->
421
+ <div class="space-y-6">
422
+ <!-- Geographic Heatmap -->
423
+ <div class="dark-card rounded-lg p-6">
424
+ <div class="flex justify-between items-center mb-6">
425
+ <h3 class="text-xl font-bold">Geographic Demand</h3>
426
+ <button class="text-sm gold-accent flex items-center">
427
+ View Map
428
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
429
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
430
+ </svg>
431
+ </button>
432
+ </div>
433
+ <div class="grid grid-cols-3 gap-2">
434
+ <div class="heatmap-cell bg-blue-900 bg-opacity-30 p-3 rounded text-center">
435
+ <p class="text-xs text-gray-400">North America</p>
436
+ <p class="font-bold">42%</p>
437
+ </div>
438
+ <div class="heatmap-cell bg-blue-800 bg-opacity-30 p-3 rounded text-center">
439
+ <p class="text-xs text-gray-400">Europe</p>
440
+ <p class="font-bold">28%</p>
441
+ </div>
442
+ <div class="heatmap-cell bg-blue-700 bg-opacity-30 p-3 rounded text-center">
443
+ <p class="text-xs text-gray-400">Asia</p>
444
+ <p class="font-bold">18%</p>
445
+ </div>
446
+ <div class="heatmap-cell bg-blue-600 bg-opacity-30 p-3 rounded text-center">
447
+ <p class="text-xs text-gray-400">Australia</p>
448
+ <p class="font-bold">7%</p>
449
+ </div>
450
+ <div class="heatmap-cell bg-blue-500 bg-opacity-30 p-3 rounded text-center">
451
+ <p class="text-xs text-gray-400">South America</p>
452
+ <p class="font-bold">4%</p>
453
+ </div>
454
+ <div class="heatmap-cell bg-blue-400 bg-opacity-30 p-3 rounded text-center">
455
+ <p class="text-xs text-gray-400">Africa</p>
456
+ <p class="font-bold">1%</p>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <!-- AI Predictions -->
462
+ <div class="dark-card rounded-lg p-6">
463
+ <div class="flex justify-between items-center mb-6">
464
+ <h3 class="text-xl font-bold">AI Predictions</h3>
465
+ <div class="flex items-center text-sm gold-accent">
466
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
467
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
468
+ </svg>
469
+ 92% Accuracy
470
+ </div>
471
+ </div>
472
+ <div class="space-y-4">
473
+ <div>
474
+ <div class="flex justify-between text-sm mb-1">
475
+ <span>Smart Kitchen Gadgets</span>
476
+ <span class="font-medium">High Potential</span>
477
+ </div>
478
+ <div class="w-full bg-gray-700 rounded-full h-2">
479
+ <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
480
+ </div>
481
+ </div>
482
+ <div>
483
+ <div class="flex justify-between text-sm mb-1">
484
+ <span>Eco-Friendly Products</span>
485
+ <span class="font-medium">Growing</span>
486
+ </div>
487
+ <div class="w-full bg-gray-700 rounded-full h-2">
488
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 72%"></div>
489
+ </div>
490
+ </div>
491
+ <div>
492
+ <div class="flex justify-between text-sm mb-1">
493
+ <span>Home Fitness Equipment</span>
494
+ <span class="font-medium">Stable</span>
495
+ </div>
496
+ <div class="w-full bg-gray-700 rounded-full h-2">
497
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
498
+ </div>
499
+ </div>
500
+ <div>
501
+ <div class="flex justify-between text-sm mb-1">
502
+ <span>Pet Tech Accessories</span>
503
+ <span class="font-medium">Emerging</span>
504
+ </div>
505
+ <div class="w-full bg-gray-700 rounded-full h-2">
506
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 58%"></div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Supplier Spotlight -->
513
+ <div class="dark-card rounded-lg p-6">
514
+ <div class="flex justify-between items-center mb-6">
515
+ <h3 class="text-xl font-bold">Supplier Spotlight</h3>
516
+ <button class="text-sm gold-accent flex items-center">
517
+ View All
518
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
519
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
520
+ </svg>
521
+ </button>
522
+ </div>
523
+ <div class="space-y-4">
524
+ <div class="flex items-start">
525
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-full"></div>
526
+ <div class="ml-3">
527
+ <p class="text-sm font-medium">Shenzhen TechGoods</p>
528
+ <p class="text-xs text-gray-400">Electronics & Gadgets</p>
529
+ <div class="mt-1 flex items-center">
530
+ <div class="flex items-center">
531
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
532
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
533
+ </svg>
534
+ <span class="text-xs ml-1">4.8</span>
535
+ </div>
536
+ <span class="mx-2 text-gray-500">|</span>
537
+ <span class="text-xs text-green-400">98% Fulfillment</span>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ <div class="flex items-start">
542
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-full"></div>
543
+ <div class="ml-3">
544
+ <p class="text-sm font-medium">Guangdong HomeLiving</p>
545
+ <p class="text-xs text-gray-400">Home & Kitchen</p>
546
+ <div class="mt-1 flex items-center">
547
+ <div class="flex items-center">
548
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
549
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
550
+ </svg>
551
+ <span class="text-xs ml-1">4.6</span>
552
+ </div>
553
+ <span class="mx-2 text-gray-500">|</span>
554
+ <span class="text-xs text-green-400">95% Fulfillment</span>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ <div class="flex items-start">
559
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-full"></div>
560
+ <div class="ml-3">
561
+ <p class="text-sm font-medium">Zhejiang FashionWear</p>
562
+ <p class="text-xs text-gray-400">Apparel & Accessories</p>
563
+ <div class="mt-1 flex items-center">
564
+ <div class="flex items-center">
565
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
566
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
567
+ </svg>
568
+ <span class="text-xs ml-1">4.5</span>
569
+ </div>
570
+ <span class="mx-2 text-gray-500">|</span>
571
+ <span class="text-xs text-green-400">93% Fulfillment</span>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+
578
+ <!-- Quick Actions -->
579
+ <div class="dark-card rounded-lg p-6">
580
+ <h3 class="text-xl font-bold mb-6">Quick Actions</h3>
581
+ <div class="grid grid-cols-2 gap-3">
582
+ <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
583
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
584
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
585
+ </svg>
586
+ <span class="mt-2 text-sm">Export Data</span>
587
+ </button>
588
+ <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
589
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
590
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
591
+ </svg>
592
+ <span class="mt-2 text-sm">New Alert</span>
593
+ </button>
594
+ <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
595
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
596
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
597
+ </svg>
598
+ <span class="mt-2 text-sm">Schedule</span>
599
+ </button>
600
+ <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
601
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
602
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
603
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
604
+ </svg>
605
+ <span class="mt-2 text-sm">Insights</span>
606
+ </button>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+
612
+ <!-- Knowledge Hub Section -->
613
+ <div class="mt-12">
614
+ <div class="flex justify-between items-center mb-8">
615
+ <h2 class="text-2xl font-bold">Knowledge Hub</h2>
616
+ <button class="text-sm gold-accent flex items-center">
617
+ Browse All Resources
618
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
619
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
620
+ </svg>
621
+ </button>
622
+ </div>
623
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
624
+ <div class="dark-card rounded-lg overflow-hidden hover:shadow-lg transition">
625
+ <div class="h-40 bg-gradient-to-r from-blue-900 to-blue-700 flex items-center justify-center">
626
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
627
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
628
+ </svg>
629
+ </div>
630
+ <div class="p-6">
631
+ <h3 class="text-lg font-bold mb-2">Supplier Verification Guide</h3>
632
+ <p class="text-gray-400 text-sm mb-4">Learn how to thoroughly vet suppliers and avoid common pitfalls in the sourcing process.</p>
633
+ <div class="flex justify-between items-center">
634
+ <span class="text-xs text-gray-500">45 min read</span>
635
+ <button class="text-xs gold-accent flex items-center">
636
+ Read Now
637
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
638
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
639
+ </svg>
640
+ </button>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ <div class="dark-card rounded-lg overflow-hidden hover:shadow-lg transition">
645
+ <div class="h-40 bg-gradient-to-r from-purple-900 to-purple-700 flex items-center justify-center">
646
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
647
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
648
+ </svg>
649
+ </div>
650
+ <div class="p-6">
651
+ <h3 class="text-lg font-bold mb-2">Identifying Early Trends</h3>
652
+ <p class="text-gray-400 text-sm mb-4">Master our proprietary methodology for spotting winning products before they go mainstream.</p>
653
+ <div class="flex justify-between items-center">
654
+ <span class="text-xs text-gray-500">30 min read</span>
655
+ <button class="text-xs gold-accent flex items-center">
656
+ Read Now
657
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
658
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
659
+ </svg>
660
+ </button>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ <div class="dark-card rounded-lg overflow-hidden hover:shadow-lg transition">
665
+ <div class="h-40 bg-gradient-to-r from-yellow-900 to-yellow-700 flex items-center justify-center">
666
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
667
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
668
+ </svg>
669
+ </div>
670
+ <div class="p-6">
671
+ <h3 class="text-lg font-bold mb-2">Market Entry Strategies</h3>
672
+ <p class="text-gray-400 text-sm mb-4">Comprehensive guide to launching products in new markets with calculated risk assessment.</p>
673
+ <div class="flex justify-between items-center">
674
+ <span class="text-xs text-gray-500">60 min read</span>
675
+ <button class="text-xs gold-accent flex items-center">
676
+ Read Now
677
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
678
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
679
+ </svg>
680
+ </button>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+
688
+ <!-- Footer -->
689
+ <footer class="gradient-bg mt-16 py-12 px-6">
690
+ <div class="max-w-7xl mx-auto">
691
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
692
+ <div>
693
+ <div class="flex items-center space-x-2 mb-4">
694
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
695
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
696
+ </svg>
697
+ <span class="text-xl font-bold gold-accent">TrendMaster Pro</span>
698
+ </div>
699
+ <p class="text-gray-400 text-sm">The ultimate e-commerce intelligence platform for professionals who demand data-driven success.</p>
700
+ </div>
701
+ <div>
702
+ <h4 class="text-white font-bold mb-4">Platform</h4>
703
+ <ul class="space-y-2">
704
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Features</a></li>
705
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Pricing</a></li>
706
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">API</a></li>
707
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Integrations</a></li>
708
+ </ul>
709
+ </div>
710
+ <div>
711
+ <h4 class="text-white font-bold mb-4">Resources</h4>
712
+ <ul class="space-y-2">
713
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Knowledge Hub</a></li>
714
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Case Studies</a></li>
715
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Community</a></li>
716
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Webinars</a></li>
717
+ </ul>
718
+ </div>
719
+ <div>
720
+ <h4 class="text-white font-bold mb-4">Company</h4>
721
+ <ul class="space-y-2">
722
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">About Us</a></li>
723
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Careers</a></li>
724
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li>
725
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Legal</a></li>
726
+ </ul>
727
+ </div>
728
+ </div>
729
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
730
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 TrendMaster Pro. All rights reserved.</p>
731
+ <div class="flex space-x-6">
732
+ <a href="#" class="text-gray-400 hover:text-white">
733
+ <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
734
+ <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
735
+ </svg>
736
+ </a>
737
+ <a href="#" class="text-gray-400 hover:text-white">
738
+ <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
739
+ <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
740
+ </svg>
741
+ </a>
742
+ <a href="#" class="text-gray-400 hover:text-white">
743
+ <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
744
+ <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
745
+ </svg>
746
+ </a>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ </footer>
751
+
752
+ <script>
753
+ // Market Trends Chart
754
+ const marketTrendsCtx = document.getElementById('marketTrendsChart').getContext('2d');
755
+ const marketTrendsChart = new Chart(marketTrendsCtx, {
756
+ type: 'line',
757
+ data: {
758
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
759
+ datasets: [
760
+ {
761
+ label: 'Amazon',
762
+ data: [1200, 1900, 1700, 2100, 2300, 2500, 2700, 3000, 2800, 3100, 3300, 3500],
763
+ borderColor: '#3b82f6',
764
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
765
+ tension: 0.3,
766
+ fill: true
767
+ },
768
+ {
769
+ label: 'Shopify',
770
+ data: [800, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600, 2800, 3000, 3200],
771
+ borderColor: '#8b5cf6',
772
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
773
+ tension: 0.3,
774
+ fill: true
775
+ },
776
+ {
777
+ label: 'Alibaba',
778
+ data: [600, 900, 1100, 1300, 1500, 1700, 1900, 2100, 2300, 2500, 2700, 2900],
779
+ borderColor: '#10b981',
780
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
781
+ tension: 0.3,
782
+ fill: true
783
+ }
784
+ ]
785
+ },
786
+ options: {
787
+ responsive: true,
788
+ maintainAspectRatio: false,
789
+ plugins: {
790
+ legend: {
791
+ position: 'top',
792
+ labels: {
793
+ color: '#e2e8f0'
794
+ }
795
+ },
796
+ tooltip: {
797
+ mode: 'index',
798
+ intersect: false,
799
+ }
800
+ },
801
+ scales: {
802
+ x: {
803
+ grid: {
804
+ color: 'rgba(255, 255, 255, 0.1)'
805
+ },
806
+ ticks: {
807
+ color: '#e2e8f0'
808
+ }
809
+ },
810
+ y: {
811
+ grid: {
812
+ color: 'rgba(255, 255, 255, 0.1)'
813
+ },
814
+ ticks: {
815
+ color: '#e2e8f0'
816
+ }
817
+ }
818
+ },
819
+ interaction: {
820
+ mode: 'nearest',
821
+ axis: 'x',
822
+ intersect: false
823
+ }
824
+ }
825
+ });
826
+
827
+ // Mobile menu toggle
828
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
829
+ const mobileMenu = document.querySelector('.md\\:flex.space-x-8');
830
+ mobileMenu.classList.toggle('hidden');
831
+ mobileMenu.classList.toggle('flex');
832
+ mobileMenu.classList.toggle('flex-col');
833
+ mobileMenu.classList.toggle('absolute');
834
+ mobileMenu.classList.toggle('top-16');
835
+ mobileMenu.classList.toggle('left-0');
836
+ mobileMenu.classList.toggle('right-0');
837
+ mobileMenu.classList.toggle('bg-gray-900');
838
+ mobileMenu.classList.toggle('p-4');
839
+ mobileMenu.classList.toggle('space-y-4');
840
+ mobileMenu.classList.toggle('space-x-0');
841
+ mobileMenu.classList.toggle('z-50');
842
+ });
843
+
844
+ // Simulate loading
845
+ document.addEventListener('DOMContentLoaded', function() {
846
+ setTimeout(function() {
847
+ document.body.classList.remove('opacity-0');
848
+ }, 100);
849
+ });
850
+ </script>
851
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Wasim0606/trendmaster-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
852
+ </html>