Hugging Face's logo

Spaces:
Araptoo
/
creatorshub
Running

App Files Community
Araptoo commited on
Commit
846780e
·
verified ·
1 Parent(s): 11e3e5a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +672 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Creatorshub
3
- emoji: 🐢
4
- colorFrom: gray
5
- colorTo: purple
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: creatorshub
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,672 @@
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>CreatorsHub - Digital Marketplace Platform</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
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .sidebar-item:hover {
14
+ background-color: rgba(255, 255, 255, 0.1);
15
+ border-left: 3px solid white;
16
+ }
17
+ .product-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .drag-drop-zone {
22
+ border: 2px dashed #a777e3;
23
+ transition: all 0.3s ease;
24
+ }
25
+ .drag-drop-zone.active {
26
+ border-color: #6e8efb;
27
+ background-color: rgba(110, 142, 251, 0.1);
28
+ }
29
+ @keyframes pulse {
30
+ 0%, 100% { opacity: 1; }
31
+ 50% { opacity: 0.5; }
32
+ }
33
+ .animate-pulse {
34
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50 font-sans">
39
+ <!-- Navigation -->
40
+ <nav class="gradient-bg text-white shadow-lg">
41
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
42
+ <div class="flex items-center space-x-2">
43
+ <i class="fas fa-store text-2xl"></i>
44
+ <span class="text-xl font-bold">CreatorsHub</span>
45
+ </div>
46
+ <div class="hidden md:flex items-center space-x-6">
47
+ <a href="#" class="hover:text-gray-200">Marketplace</a>
48
+ <a href="#" class="hover:text-gray-200">Features</a>
49
+ <a href="#" class="hover:text-gray-200">Pricing</a>
50
+ <a href="#" class="hover:text-gray-200">Resources</a>
51
+ </div>
52
+ <div class="flex items-center space-x-4">
53
+ <button class="px-4 py-2 rounded-lg bg-white text-purple-600 font-medium hover:bg-gray-100">Sign In</button>
54
+ <button class="px-4 py-2 rounded-lg bg-purple-700 text-white font-medium hover:bg-purple-800">Get Started</button>
55
+ <button class="md:hidden text-2xl">
56
+ <i class="fas fa-bars"></i>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Hero Section -->
63
+ <section class="gradient-bg text-white py-16 md:py-24">
64
+ <div class="container mx-auto px-4 text-center">
65
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Sell Your Digital & Physical Products With Ease</h1>
66
+ <p class="text-xl mb-8 max-w-2xl mx-auto">The all-in-one platform for creators and entrepreneurs to build, manage, and grow their online business.</p>
67
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
68
+ <button class="px-8 py-3 bg-white text-purple-600 rounded-lg font-bold hover:bg-gray-100 transition">Start Selling Now</button>
69
+ <button class="px-8 py-3 bg-transparent border-2 border-white rounded-lg font-bold hover:bg-white hover:text-purple-600 transition">Watch Demo</button>
70
+ </div>
71
+ </div>
72
+ </section>
73
+
74
+ <!-- Features Section -->
75
+ <section class="py-16 bg-white">
76
+ <div class="container mx-auto px-4">
77
+ <h2 class="text-3xl font-bold text-center mb-12">Powerful Features For Your Business</h2>
78
+
79
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
80
+ <!-- Feature 1 -->
81
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
82
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
83
+ <i class="fas fa-store text-white text-xl"></i>
84
+ </div>
85
+ <h3 class="text-xl font-semibold mb-2">Custom Storefront</h3>
86
+ <p class="text-gray-600">Create a beautiful, branded storefront that matches your unique style and vision.</p>
87
+ </div>
88
+
89
+ <!-- Feature 2 -->
90
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
91
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
92
+ <i class="fas fa-money-bill-wave text-white text-xl"></i>
93
+ </div>
94
+ <h3 class="text-xl font-semibold mb-2">Multi-Currency Payments</h3>
95
+ <p class="text-gray-600">Accept payments in multiple currencies including NGN, USD, GBP and more.</p>
96
+ </div>
97
+
98
+ <!-- Feature 3 -->
99
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
100
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
101
+ <i class="fas fa-users text-white text-xl"></i>
102
+ </div>
103
+ <h3 class="text-xl font-semibold mb-2">Affiliate Marketing</h3>
104
+ <p class="text-gray-600">Grow your sales with our built-in affiliate marketing system and marketplace.</p>
105
+ </div>
106
+
107
+ <!-- Feature 4 -->
108
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
109
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
110
+ <i class="fas fa-chart-line text-white text-xl"></i>
111
+ </div>
112
+ <h3 class="text-xl font-semibold mb-2">Advanced Analytics</h3>
113
+ <p class="text-gray-600">Track your sales, customer behavior, and marketing performance in real-time.</p>
114
+ </div>
115
+
116
+ <!-- Feature 5 -->
117
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
118
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
119
+ <i class="fas fa-tools text-white text-xl"></i>
120
+ </div>
121
+ <h3 class="text-xl font-semibold mb-2">Drag & Drop Builder</h3>
122
+ <p class="text-gray-600">Easily create and customize your products and pages with our intuitive builder.</p>
123
+ </div>
124
+
125
+ <!-- Feature 6 -->
126
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
127
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
128
+ <i class="fas fa-headset text-white text-xl"></i>
129
+ </div>
130
+ <h3 class="text-xl font-semibold mb-2">24/7 Support</h3>
131
+ <p class="text-gray-600">Our dedicated support team is always available to help you with any questions.</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- Dashboard Preview -->
138
+ <section class="py-16 bg-gray-50">
139
+ <div class="container mx-auto px-4">
140
+ <div class="flex flex-col lg:flex-row items-center gap-12">
141
+ <div class="lg:w-1/2">
142
+ <h2 class="text-3xl font-bold mb-6">Your All-In-One Business Dashboard</h2>
143
+ <p class="text-gray-600 mb-6">Manage your products, sales, marketing, and customers from one centralized dashboard designed to help you grow your business.</p>
144
+ <ul class="space-y-4">
145
+ <li class="flex items-start">
146
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
147
+ <span>Real-time sales analytics and reporting</span>
148
+ </li>
149
+ <li class="flex items-start">
150
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
151
+ <span>Product management and inventory tracking</span>
152
+ </li>
153
+ <li class="flex items-start">
154
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
155
+ <span>Customer relationship management tools</span>
156
+ </li>
157
+ <li class="flex items-start">
158
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
159
+ <span>Marketing campaign creation and tracking</span>
160
+ </li>
161
+ </ul>
162
+ </div>
163
+ <div class="lg:w-1/2 relative">
164
+ <div class="bg-white p-2 rounded-xl shadow-xl">
165
+ <div class="flex items-center bg-gray-100 p-2 rounded-t-lg">
166
+ <div class="flex space-x-2 mr-4">
167
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
168
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
169
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
170
+ </div>
171
+ <div class="text-sm text-gray-600">dashboard.creatorshub.com</div>
172
+ </div>
173
+ <div class="p-4">
174
+ <!-- Dashboard mockup content -->
175
+ <div class="flex mb-4">
176
+ <div class="w-1/4 bg-purple-100 rounded-lg p-4">
177
+ <div class="text-xs text-purple-800 mb-1">Total Revenue</div>
178
+ <div class="text-xl font-bold">₦1,245,800</div>
179
+ </div>
180
+ <div class="w-1/4 bg-blue-100 rounded-lg p-4 mx-2">
181
+ <div class="text-xs text-blue-800 mb-1">Total Sales</div>
182
+ <div class="text-xl font-bold">428</div>
183
+ </div>
184
+ <div class="w-1/4 bg-green-100 rounded-lg p-4 mr-2">
185
+ <div class="text-xs text-green-800 mb-1">New Customers</div>
186
+ <div class="text-xl font-bold">197</div>
187
+ </div>
188
+ <div class="w-1/4 bg-yellow-100 rounded-lg p-4">
189
+ <div class="text-xs text-yellow-800 mb-1">Conversion</div>
190
+ <div class="text-xl font-bold">3.2%</div>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="bg-white border rounded-lg p-4 mb-4">
195
+ <div class="flex justify-between items-center mb-3">
196
+ <h3 class="font-semibold">Recent Sales</h3>
197
+ <button class="text-xs text-purple-600">View All</button>
198
+ </div>
199
+ <div class="space-y-3">
200
+ <div class="flex items-center justify-between text-sm">
201
+ <div class="flex items-center">
202
+ <div class="w-8 h-8 bg-gray-200 rounded-full mr-2"></div>
203
+ <div>
204
+ <div>Digital Art Pack</div>
205
+ <div class="text-xs text-gray-500">2 hours ago</div>
206
+ </div>
207
+ </div>
208
+ <div class="font-medium">₦12,500</div>
209
+ </div>
210
+ <div class="flex items-center justify-between text-sm">
211
+ <div class="flex items-center">
212
+ <div class="w-8 h-8 bg-gray-200 rounded-full mr-2"></div>
213
+ <div>
214
+ <div>E-book Bundle</div>
215
+ <div class="text-xs text-gray-500">5 hours ago</div>
216
+ </div>
217
+ </div>
218
+ <div class="font-medium">₦8,000</div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="bg-white border rounded-lg p-4">
224
+ <div class="flex justify-between items-center mb-3">
225
+ <h3 class="font-semibold">Quick Actions</h3>
226
+ </div>
227
+ <div class="grid grid-cols-2 gap-2">
228
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 p-2 rounded flex items-center">
229
+ <i class="fas fa-plus mr-1 text-purple-600"></i> Add Product
230
+ </button>
231
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 p-2 rounded flex items-center">
232
+ <i class="fas fa-bullhorn mr-1 text-purple-600"></i> Create Campaign
233
+ </button>
234
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 p-2 rounded flex items-center">
235
+ <i class="fas fa-chart-pie mr-1 text-purple-600"></i> View Reports
236
+ </button>
237
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 p-2 rounded flex items-center">
238
+ <i class="fas fa-user-plus mr-1 text-purple-600"></i> Invite Affiliate
239
+ </button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Product Management Section -->
250
+ <section class="py-16 bg-white">
251
+ <div class="container mx-auto px-4">
252
+ <h2 class="text-3xl font-bold text-center mb-12">Effortless Product Management</h2>
253
+
254
+ <div class="flex flex-col lg:flex-row items-center gap-12">
255
+ <div class="lg:w-1/2 relative">
256
+ <div class="bg-white p-4 rounded-xl shadow-lg border">
257
+ <div class="flex items-center bg-gray-100 p-2 rounded-t-lg mb-4">
258
+ <div class="text-sm font-medium">Add New Product</div>
259
+ </div>
260
+
261
+ <div class="space-y-4">
262
+ <div>
263
+ <label class="block text-sm font-medium mb-1">Product Name</label>
264
+ <input type="text" class="w-full p-2 border rounded-lg" placeholder="e.g. Premium Digital Template Pack">
265
+ </div>
266
+
267
+ <div>
268
+ <label class="block text-sm font-medium mb-1">Product Type</label>
269
+ <select class="w-full p-2 border rounded-lg">
270
+ <option>Digital Product</option>
271
+ <option>Physical Product</option>
272
+ <option>Service</option>
273
+ <option>Bundle</option>
274
+ </select>
275
+ </div>
276
+
277
+ <div class="drag-drop-zone rounded-lg p-8 text-center cursor-pointer">
278
+ <i class="fas fa-cloud-upload-alt text-3xl text-purple-500 mb-2"></i>
279
+ <p class="font-medium">Drag & drop your product files here</p>
280
+ <p class="text-sm text-gray-500">or click to browse files</p>
281
+ </div>
282
+
283
+ <div class="grid grid-cols-2 gap-4">
284
+ <div>
285
+ <label class="block text-sm font-medium mb-1">Price (₦)</label>
286
+ <input type="number" class="w-full p-2 border rounded-lg" placeholder="3000">
287
+ </div>
288
+ <div>
289
+ <label class="block text-sm font-medium mb-1">Category</label>
290
+ <select class="w-full p-2 border rounded-lg">
291
+ <option>Digital Art</option>
292
+ <option>Templates</option>
293
+ <option>E-books</option>
294
+ <option>Courses</option>
295
+ </select>
296
+ </div>
297
+ </div>
298
+
299
+ <div>
300
+ <label class="block text-sm font-medium mb-1">Description</label>
301
+ <div class="border rounded-lg p-2 min-h-[100px] bg-gray-50">
302
+ <div class="flex space-x-2 mb-2">
303
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
304
+ <i class="fas fa-bold text-xs"></i>
305
+ </button>
306
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
307
+ <i class="fas fa-italic text-xs"></i>
308
+ </button>
309
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
310
+ <i class="fas fa-list-ul text-xs"></i>
311
+ </button>
312
+ </div>
313
+ <textarea class="w-full bg-transparent outline-none" placeholder="Enter detailed product description..."></textarea>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="flex justify-end">
318
+ <button class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">Save Product</button>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="lg:w-1/2">
325
+ <h3 class="text-2xl font-semibold mb-4">Manage Your Products With Ease</h3>
326
+ <p class="text-gray-600 mb-6">Our intuitive product management system makes it simple to add, organize, and update your digital and physical products.</p>
327
+
328
+ <div class="space-y-6">
329
+ <div class="flex">
330
+ <div class="mr-4">
331
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
332
+ <i class="fas fa-box-open text-white"></i>
333
+ </div>
334
+ </div>
335
+ <div>
336
+ <h4 class="font-semibold mb-1">Product Variations</h4>
337
+ <p class="text-gray-600">Create multiple variations of your products with different prices, files, or options.</p>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="flex">
342
+ <div class="mr-4">
343
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
344
+ <i class="fas fa-tags text-white"></i>
345
+ </div>
346
+ </div>
347
+ <div>
348
+ <h4 class="font-semibold mb-1">Bundles & Discounts</h4>
349
+ <p class="text-gray-600">Package multiple products together or offer discounts to increase sales.</p>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="flex">
354
+ <div class="mr-4">
355
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
356
+ <i class="fas fa-globe text-white"></i>
357
+ </div>
358
+ </div>
359
+ <div>
360
+ <h4 class="font-semibold mb-1">Global Pricing</h4>
361
+ <p class="text-gray-600">Set prices in multiple currencies and automatically convert based on customer location.</p>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Affiliate Marketing Section -->
371
+ <section class="py-16 bg-gray-50">
372
+ <div class="container mx-auto px-4">
373
+ <div class="text-center mb-12">
374
+ <h2 class="text-3xl font-bold mb-4">Grow Your Sales With Affiliate Marketing</h2>
375
+ <p class="text-gray-600 max-w-2xl mx-auto">Leverage our built-in affiliate network to have others promote your products for commissions.</p>
376
+ </div>
377
+
378
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
379
+ <!-- Affiliate Card 1 -->
380
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
381
+ <div class="gradient-bg text-white w-14 h-14 rounded-lg flex items-center justify-center mb-4">
382
+ <i class="fas fa-user-plus text-xl"></i>
383
+ </div>
384
+ <h3 class="text-xl font-semibold mb-2">Affiliate Recruitment</h3>
385
+ <p class="text-gray-600 mb-4">Easily recruit affiliates from our marketplace or invite your own network to promote your products.</p>
386
+ <ul class="space-y-2 text-sm">
387
+ <li class="flex items-start">
388
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
389
+ <span>Automated affiliate signup</span>
390
+ </li>
391
+ <li class="flex items-start">
392
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
393
+ <span>Affiliate approval controls</span>
394
+ </li>
395
+ </ul>
396
+ </div>
397
+
398
+ <!-- Affiliate Card 2 -->
399
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
400
+ <div class="gradient-bg text-white w-14 h-14 rounded-lg flex items-center justify-center mb-4">
401
+ <i class="fas fa-percentage text-xl"></i>
402
+ </div>
403
+ <h3 class="text-xl font-semibold mb-2">Commission Management</h3>
404
+ <p class="text-gray-600 mb-4">Set custom commission rates per product or category to incentivize your affiliates.</p>
405
+ <ul class="space-y-2 text-sm">
406
+ <li class="flex items-start">
407
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
408
+ <span>Minimum 20-30% commission rates</span>
409
+ </li>
410
+ <li class="flex items-start">
411
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
412
+ <span>Fixed or percentage commissions</span>
413
+ </li>
414
+ </ul>
415
+ </div>
416
+
417
+ <!-- Affiliate Card 3 -->
418
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
419
+ <div class="gradient-bg text-white w-14 h-14 rounded-lg flex items-center justify-center mb-4">
420
+ <i class="fas fa-chart-bar text-xl"></i>
421
+ </div>
422
+ <h3 class="text-xl font-semibold mb-2">Performance Tracking</h3>
423
+ <p class="text-gray-600 mb-4">Monitor affiliate performance, track conversions, and optimize your program.</p>
424
+ <ul class="space-y-2 text-sm">
425
+ <li class="flex items-start">
426
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
427
+ <span>Real-time sales attribution</span>
428
+ </li>
429
+ <li class="flex items-start">
430
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
431
+ <span>Detailed affiliate reports</span>
432
+ </li>
433
+ </ul>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </section>
438
+
439
+ <!-- Pricing Section -->
440
+ <section class="py-16 bg-white">
441
+ <div class="container mx-auto px-4">
442
+ <div class="text-center mb-12">
443
+ <h2 class="text-3xl font-bold mb-4">Simple, Transparent Pricing</h2>
444
+ <p class="text-gray-600 max-w-2xl mx-auto">Choose the plan that fits your business needs. No hidden fees, cancel anytime.</p>
445
+ </div>
446
+
447
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
448
+ <!-- Starter Plan -->
449
+ <div class="border rounded-xl overflow-hidden hover:shadow-lg transition">
450
+ <div class="bg-gray-50 p-6 border-b">
451
+ <h3 class="text-xl font-semibold">Starter</h3>
452
+ <div class="mt-4">
453
+ <span class="text-3xl font-bold">₦3,000</span>
454
+ <span class="text-gray-600">/month</span>
455
+ </div>
456
+ <p class="text-sm text-gray-500 mt-2">Perfect for individuals just starting out</p>
457
+ </div>
458
+ <div class="p-6">
459
+ <ul class="space-y-3 mb-6">
460
+ <li class="flex items-start">
461
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
462
+ <span>Up to 10 products</span>
463
+ </li>
464
+ <li class="flex items-start">
465
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
466
+ <span>Basic store customization</span>
467
+ </li>
468
+ <li class="flex items-start">
469
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
470
+ <span>5% transaction fee</span>
471
+ </li>
472
+ <li class="flex items-start">
473
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
474
+ <span>Email support</span>
475
+ </li>
476
+ </ul>
477
+ <button class="w-full py-3 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50">Get Started</button>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Pro Plan (Featured) -->
482
+ <div class="border-2 border-purple-600 rounded-xl overflow-hidden shadow-lg transform scale-105">
483
+ <div class="bg-purple-600 text-white p-4 text-center">
484
+ <span class="font-medium">MOST POPULAR</span>
485
+ </div>
486
+ <div class="bg-gray-50 p-6 border-b">
487
+ <h3 class="text-xl font-semibold">Pro</h3>
488
+ <div class="mt-4">
489
+ <span class="text-3xl font-bold">₦8,000</span>
490
+ <span class="text-gray-600">/month</span>
491
+ </div>
492
+ <p class="text-sm text-gray-500 mt-2">For growing businesses with more products</p>
493
+ </div>
494
+ <div class="p-6">
495
+ <ul class="space-y-3 mb-6">
496
+ <li class="flex items-start">
497
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
498
+ <span>Up to 100 products</span>
499
+ </li>
500
+ <li class="flex items-start">
501
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
502
+ <span>Advanced store customization</span>
503
+ </li>
504
+ <li class="flex items-start">
505
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
506
+ <span>3% transaction fee</span>
507
+ </li>
508
+ <li class="flex items-start">
509
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
510
+ <span>Affiliate marketing tools</span>
511
+ </li>
512
+ <li class="flex items-start">
513
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
514
+ <span>Priority email support</span>
515
+ </li>
516
+ </ul>
517
+ <button class="w-full py-3 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700">Get Started</button>
518
+ </div>
519
+ </div>
520
+
521
+ <!-- Enterprise Plan -->
522
+ <div class="border rounded-xl overflow-hidden hover:shadow-lg transition">
523
+ <div class="bg-gray-50 p-6 border-b">
524
+ <h3 class="text-xl font-semibold">Enterprise</h3>
525
+ <div class="mt-4">
526
+ <span class="text-3xl font-bold">₦20,000</span>
527
+ <span class="text-gray-600">/month</span>
528
+ </div>
529
+ <p class="text-sm text-gray-500 mt-2">For high-volume businesses</p>
530
+ </div>
531
+ <div class="p-6">
532
+ <ul class="space-y-3 mb-6">
533
+ <li class="flex items-start">
534
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
535
+ <span>Unlimited products</span>
536
+ </li>
537
+ <li class="flex items-start">
538
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
539
+ <span>White-label options</span>
540
+ </li>
541
+ <li class="flex items-start">
542
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
543
+ <span>1% transaction fee</span>
544
+ </li>
545
+ <li class="flex items-start">
546
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
547
+ <span>Advanced analytics</span>
548
+ </li>
549
+ <li class="flex items-start">
550
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
551
+ <span>24/7 priority support</span>
552
+ </li>
553
+ </ul>
554
+ <button class="w-full py-3 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50">Get Started</button>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </section>
560
+
561
+ <!-- CTA Section -->
562
+ <section class="gradient-bg text-white py-16">
563
+ <div class="container mx-auto px-4 text-center">
564
+ <h2 class="text-3xl font-bold mb-6">Ready to Start Selling Online?</h2>
565
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of creators and entrepreneurs who are growing their businesses with CreatorsHub.</p>
566
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
567
+ <button class="px-8 py-3 bg-white text-purple-600 rounded-lg font-bold hover:bg-gray-100 transition">Start Your Free Trial</button>
568
+ <button class="px-8 py-3 bg-transparent border-2 border-white rounded-lg font-bold hover:bg-white hover:text-purple-600 transition">Schedule a Demo</button>
569
+ </div>
570
+ </div>
571
+ </section>
572
+
573
+ <!-- Footer -->
574
+ <footer class="bg-gray-900 text-gray-300 py-12">
575
+ <div class="container mx-auto px-4">
576
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
577
+ <div>
578
+ <div class="flex items-center space-x-2 mb-4">
579
+ <i class="fas fa-store text-2xl text-purple-500"></i>
580
+ <span class="text-xl font-bold text-white">CreatorsHub</span>
581
+ </div>
582
+ <p class="mb-4">The all-in-one platform for creators to sell digital and physical products online.</p>
583
+ <div class="flex space-x-4">
584
+ <a href="#" class="text-gray-400 hover:text-white">
585
+ <i class="fab fa-facebook-f"></i>
586
+ </a>
587
+ <a href="#" class="text-gray-400 hover:text-white">
588
+ <i class="fab fa-twitter"></i>
589
+ </a>
590
+ <a href="#" class="text-gray-400 hover:text-white">
591
+ <i class="fab fa-instagram"></i>
592
+ </a>
593
+ <a href="#" class="text-gray-400 hover:text-white">
594
+ <i class="fab fa-linkedin-in"></i>
595
+ </a>
596
+ </div>
597
+ </div>
598
+
599
+ <div>
600
+ <h3 class="text-white font-semibold mb-4">Platform</h3>
601
+ <ul class="space-y-2">
602
+ <li><a href="#" class="hover:text-white">Features</a></li>
603
+ <li><a href="#" class="hover:text-white">Pricing</a></li>
604
+ <li><a href="#" class="hover:text-white">Affiliate Program</a></li>
605
+ <li><a href="#" class="hover:text-white">Marketplace</a></li>
606
+ <li><a href="#" class="hover:text-white">Roadmap</a></li>
607
+ </ul>
608
+ </div>
609
+
610
+ <div>
611
+ <h3 class="text-white font-semibold mb-4">Resources</h3>
612
+ <ul class="space-y-2">
613
+ <li><a href="#" class="hover:text-white">Documentation</a></li>
614
+ <li><a href="#" class="hover:text-white">Tutorials</a></li>
615
+ <li><a href="#" class="hover:text-white">Blog</a></li>
616
+ <li><a href="#" class="hover:text-white">Community</a></li>
617
+ <li><a href="#" class="hover:text-white">Webinars</a></li>
618
+ </ul>
619
+ </div>
620
+
621
+ <div>
622
+ <h3 class="text-white font-semibold mb-4">Company</h3>
623
+ <ul class="space-y-2">
624
+ <li><a href="#" class="hover:text-white">About Us</a></li>
625
+ <li><a href="#" class="hover:text-white">Careers</a></li>
626
+ <li><a href="#" class="hover:text-white">Contact</a></li>
627
+ <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
628
+ <li><a href="#" class="hover:text-white">Terms of Service</a></li>
629
+ </ul>
630
+ </div>
631
+ </div>
632
+
633
+ <div class="border-t border-gray-800 mt-12 pt-8 text-sm text-gray-500">
634
+ <div class="flex flex-col md:flex-row justify-between items-center">
635
+ <div class="mb-4 md:mb-0">
636
+ &copy; 2023 CreatorsHub. All rights reserved.
637
+ </div>
638
+ <div class="flex space-x-6">
639
+ <a href="#" class="hover:text-white">Privacy</a>
640
+ <a href="#" class="hover:text-white">Terms</a>
641
+ <a href="#" class="hover:text-white">Cookies</a>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </footer>
647
+
648
+ <script>
649
+ // Simple drag and drop interaction for the demo
650
+ const dropZone = document.querySelector('.drag-drop-zone');
651
+
652
+ dropZone.addEventListener('dragover', (e) => {
653
+ e.preventDefault();
654
+ dropZone.classList.add('active');
655
+ });
656
+
657
+ dropZone.addEventListener('dragleave', () => {
658
+ dropZone.classList.remove('active');
659
+ });
660
+
661
+ dropZone.addEventListener('drop', (e) => {
662
+ e.preventDefault();
663
+ dropZone.classList.remove('active');
664
+ alert('Files uploaded successfully!');
665
+ });
666
+
667
+ dropZone.addEventListener('click', () => {
668
+ alert('File browser opened!');
669
+ });
670
+ </script>
671
+ <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=Araptoo/creatorshub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
672
+ </html>