Hugging Face's logo

Spaces:
ARIST069
/
test
Running

App Files Community
ARIST069 commited on
Commit
a416364
·
verified ·
1 Parent(s): 03ae1a2

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +854 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🏃
4
  colorFrom: red
5
- colorTo: yellow
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: test
3
+ emoji: 🐳
4
  colorFrom: red
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,854 @@
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>Huly.io - Beautiful Web Components</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
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #2563EB 0%, #8B5CF6 100%);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+
24
+ .hero-gradient {
25
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
26
+ }
27
+
28
+ .component-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
31
+ }
32
+
33
+ .animate-bounce {
34
+ animation: bounce 3s infinite;
35
+ }
36
+
37
+ @keyframes bounce {
38
+ 0%, 100% {
39
+ transform: translateY(0);
40
+ }
41
+ 50% {
42
+ transform: translateY(-10px);
43
+ }
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-white text-gray-900">
48
+ <!-- Navigation -->
49
+ <nav class="fixed w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-100">
50
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
51
+ <div class="flex justify-between h-16">
52
+ <div class="flex items-center">
53
+ <a href="#" class="flex-shrink-0 flex items-center">
54
+ <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center">
55
+ <span class="text-white font-bold">H</span>
56
+ </div>
57
+ <span class="ml-2 font-bold text-gray-900">huly.io</span>
58
+ </a>
59
+ </div>
60
+ <div class="hidden md:flex items-center space-x-8">
61
+ <a href="#components" class="text-gray-600 hover:text-indigo-600 transition">Components</a>
62
+ <a href="#features" class="text-gray-600 hover:text-indigo-600 transition">Features</a>
63
+ <a href="#pricing" class="text-gray-600 hover:text-indigo-600 transition">Pricing</a>
64
+ <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
65
+ </div>
66
+ <div class="flex items-center">
67
+ <a href="#pricing" class="px-4 py-2 rounded-md bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition">Get Started</a>
68
+ </div>
69
+ <div class="md:hidden flex items-center">
70
+ <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900">
71
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
72
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
73
+ </svg>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Mobile menu -->
80
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
81
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
82
+ <a href="#components" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Components</a>
83
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Features</a>
84
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Pricing</a>
85
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Contact</a>
86
+ </div>
87
+ </div>
88
+ </nav>
89
+
90
+ <!-- Hero Section -->
91
+ <section class="pt-24 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
92
+ <div class="hero-gradient rounded-2xl p-8 md:p-16">
93
+ <div class="flex flex-col md:flex-row items-center justify-between">
94
+ <div class="md:w-1/2 mb-10 md:mb-0">
95
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
96
+ <span class="gradient-text">Beautiful</span> Web Components
97
+ </h1>
98
+ <p class="mt-6 text-lg md:text-xl text-gray-600 max-w-lg">
99
+ Ready-to-use UI components designed to make your development process faster and easier.
100
+ </p>
101
+ <div class="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
102
+ <a href="#components" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition text-center">
103
+ Explore Components
104
+ </a>
105
+ <a href="#pricing" class="px-6 py-3 border border-gray-300 font-medium rounded-lg hover:bg-gray-50 transition text-center">
106
+ Pricing Plans
107
+ </a>
108
+ </div>
109
+ </div>
110
+ <div class="md:w-1/2 relative">
111
+ <div class="relative">
112
+ <div class="absolute -top-8 -left-8 w-32 h-32 bg-indigo-100 rounded-full blur-xl opacity-50 animate-bounce"></div>
113
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-purple-100 rounded-full blur-xl opacity-50 animate-bounce" style="animation-delay: 1s;"></div>
114
+ <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="UI Components" class="rounded-xl shadow-xl ring-1 ring-gray-900/10 w-full">
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
121
+ <div class="flex items-center justify-center">
122
+ <span class="text-gray-400 font-medium">Used by</span>
123
+ </div>
124
+ <div class="flex items-center justify-center">
125
+ <span class="text-lg font-bold">Google</span>
126
+ </div>
127
+ <div class="flex items-center justify-center">
128
+ <span class="text-lg font-bold">Netflix</span>
129
+ </div>
130
+ <div class="flex items-center justify-center">
131
+ <span class="text-lg font-bold">Amazon</span>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <!-- Components Section -->
137
+ <section id="components" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
138
+ <div class="text-center mb-16">
139
+ <h2 class="text-3xl md:text-4xl font-bold">Featured Components</h2>
140
+ <p class="mt-4 text-lg text-gray-500 max-w-2xl mx-auto">
141
+ Carefully crafted UI components that will save you hours of development time.
142
+ </p>
143
+ </div>
144
+
145
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
146
+ <!-- Component Card 1 -->
147
+ <div class="component-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300">
148
+ <div class="p-5">
149
+ <div class="flex justify-between items-start">
150
+ <div class="flex items-center mb-4">
151
+ <div class="bg-indigo**Sorry, my response got cut off earlier. Here's the complete HTML file with all sections:**
152
+
153
+ ```html
154
+
155
+ <div class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center">
156
+ <i class="fas fa-chart-line text-indigo-600"></i>
157
+ </div>
158
+ <h3 class="ml-3 font-bold">Analytics Card</h3>
159
+ </div>
160
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-md">New</span>
161
+ </div>
162
+ <p class="text-gray-500">
163
+ Beautiful analytics card component with animated charts and stats.
164
+ </p>
165
+ </div>
166
+ <div class="bg-gray-50 p-4">
167
+ <div class="relative h-40 w-full bg-white rounded overflow-hidden border border-gray-200">
168
+ <!-- Placeholder for component preview -->
169
+ <div class="absolute inset-0 flex items-center justify-center text-gray-400">
170
+ <i class="fas fa-image fa-3x"></i>
171
+ </div>
172
+ </div>
173
+ <div class="mt-4 flex justify-between items-center">
174
+ <span class="text-sm text-gray-500">React, Vue, HTML</span>
175
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium text-sm">
176
+ View Component
177
+ </button>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Component Card 2 -->
183
+ <div class="component-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300">
184
+ <div class="p-5">
185
+ <div class="flex justify-between items-start">
186
+ <div class="flex items-center mb-4">
187
+ <div class="bg-purple-100 w-10 h-10 rounded-lg flex items-center justify-center">
188
+ <i class="fas fa-bell text-purple-600"></i>
189
+ </div>
190
+ <h3 class="ml-3 font-bold">Notification</h3>
191
+ </div>
192
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-md">Popular</span>
193
+ </div>
194
+ <p class="text-gray-500">
195
+ Clean notification component with different styles and animations.
196
+ </p>
197
+ </div>
198
+ <div class="bg-gray-50 p-4">
199
+ <div class="relative h-40 w-full bg-white rounded overflow-hidden border border-gray-200">
200
+ <!-- Placeholder for component preview -->
201
+ <div class="absolute inset-0 flex items-center justify-center text-gray-400">
202
+ <i class="fas fa-image fa-3x"></i>
203
+ </div>
204
+ </div>
205
+ <div class="mt-4 flex justify-between items-center">
206
+ <span class="text-sm text-gray-500">React, Vue, HTML</span>
207
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium text-sm">
208
+ View Component
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Component Card 3 -->
215
+ <div class="component-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300">
216
+ <div class="p-5">
217
+ <div class="flex justify-between items-start">
218
+ <div class="flex items-center mb-4">
219
+ <div class="bg-pink-100 w-10 h-10 rounded-lg flex items-center justify-center">
220
+ <i class="fas fa-user text-pink-600"></i>
221
+ </div>
222
+ <h3 class="ml-3 font-bold">Profile Card</h3>
223
+ </div>
224
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-md">Updated</span>
225
+ </div>
226
+ <p class="text-gray-500">
227
+ Responsive profile card component with social links and stats.
228
+ </p>
229
+ </div>
230
+ <div class="bg-gray-50 p-4">
231
+ <div class="relative h-40 w-full bg-white rounded overflow-hidden border border-gray-200">
232
+ <!-- Placeholder for component preview -->
233
+ <div class="absolute inset-0 flex items-center justify-center text-gray-400">
234
+ <i class="fas fa-image fa-3x"></i>
235
+ </div>
236
+ </div>
237
+ <div class="mt-4 flex justify-between items-center">
238
+ <span class="text-sm text-gray-500">React, Vue, HTML</span>
239
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium text-sm">
240
+ View Component
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Component Card 4 -->
247
+ <div class="component-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300">
248
+ <div class="p-5">
249
+ <div class="flex justify-between items-start">
250
+ <div class="flex items-center mb-4">
251
+ <div class="bg-blue-100 w-10 h-10 rounded-lg flex items-center justify-center">
252
+ <i class="fas fa-search text-blue-600"></i>
253
+ </div>
254
+ <h3 class="ml-3 font-bold">Search Bar</h3>
255
+ </div>
256
+ </div>
257
+ <p class="text-gray-500">
258
+ Modern search component with autocomplete and filtering.
259
+ </p>
260
+ </div>
261
+ <div class="bg-gray-50 p-4">
262
+ <div class="relative h-40 w-full bg-white rounded overflow-hidden border border-gray-200">
263
+ <!-- Placeholder for component preview -->
264
+ <div class="absolute inset-0 flex items-center justify-center text-gray-400">
265
+ <i class="fas fa-image fa-3x"></i>
266
+ </div>
267
+ </div>
268
+ <div class="mt-4 flex justify-between items-center">
269
+ <span class="text-sm text-gray-500">React, Vue, HTML</span>
270
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium text-sm">
271
+ View Component
272
+ </button>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Component Card 5 -->
278
+ <div class="component-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300">
279
+ <div class="p-5">
280
+ <div class="flex justify-between items-start">
281
+ <div class="flex items-center mb-4">
282
+ <div class="bg-yellow-100 w-10 h-10 rounded-lg flex items-center justify-center">
283
+ <i class="fas fa-shopping-cart text-yellow-600"></i>
284
+ </div>
285
+ <h3 class="ml-3 font-bold">Product Card</h3>
286
+ </div>
287
+ </div>
288
+ <p class="text-gray-500">
289
+ E-commerce product card with hover effects and quick add to cart.
290
+ </p>
291
+ </div>
292
+ <div class="bg-gray-50 p-4">
293
+ <div class="relative h-40 w-full bg-white rounded overflow-hidden border border-gray-200">
294
+ <!-- Placeholder for component preview -->
295
+ <div class="absolute inset-0 flex items-center justify-center text-gray-400">
296
+ <i class="fas fa-image fa-3x"></i>
297
+ </div>
298
+ </div>
299
+ <div class="mt-4 flex justify-between items-center">
300
+ <span class="text-sm text-gray-500">React, Vue, HTML</span>
301
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium text-sm">
302
+ View Component
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Component Card 6 -->
309
+ <div class="component-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300">
310
+ <div class="p-5">
311
+ <div class="flex justify-between items-start">
312
+ <div class="flex items-center mb-4">
313
+ <div class="bg-green-100 w-10 h-10 rounded-lg flex items-center justify-center">
314
+ <i class="fas fa-envelope text-green-600"></i>
315
+ </div>
316
+ <h3 class="ml-3 font-bold">Contact Form</h3>
317
+ </div>
318
+ </div>
319
+ <p class="text-gray-500">
320
+ Clean contact form with validation and responsive layout.
321
+ </p>
322
+ </div>
323
+ <div class="bg-gray-50 p-4">
324
+ <div class="relative h-40 w-full bg-white rounded overflow-hidden border border-gray-200">
325
+ <!-- Placeholder for component preview -->
326
+ <div class="absolute inset-0 flex items-center justify-center text-gray-400">
327
+ <i class="fas fa-image fa-3x"></i>
328
+ </div>
329
+ </div>
330
+ <div class="mt-4 flex justify-between items-center">
331
+ <span class="text-sm text-gray-500">React, Vue, HTML</span>
332
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium text-sm flex items-center">
333
+ View Component
334
+ </button>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="mt-12 text-center">
341
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg font-medium text-indigo-600 hover:bg-gray-50 transition">
342
+ View All Components
343
+ <i class="fas fa-arrow-right ml-2"></i>
344
+ </a>
345
+ </div>
346
+ </section>
347
+
348
+ <!-- Features Section -->
349
+ <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50 rounded-2xl">
350
+ <div class="text-center mb-16">
351
+ <h2 class="text-3xl md:text-4xl font-bold">Why Choose Huly.io</h2>
352
+ <p class="mt-4 text-lg text-gray-500 max-w-2xl mx-auto">
353
+ We provide everything you need to build beautiful and functional interfaces.
354
+ </p>
355
+ </div>
356
+
357
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
358
+ <!-- Feature 1 -->
359
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
360
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
361
+ <i class="fas fa-palette text-indigo-600 text-xl"></i>
362
+ </div>
363
+ <h3 class="text-xl font-bold mb-2">Beautiful Design</h3>
364
+ <p class="text-gray-500">
365
+ Every component is designed with attention to detail and aesthetics.
366
+ </p>
367
+ </div>
368
+
369
+ <!-- Feature 2 -->
370
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
371
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
372
+ <i class="fas fa-code text-purple-600 text-xl"></i>
373
+ </div>
374
+ <h3 class="text-xl font-bold mb-2">Clean Code</h3>
375
+ <p class="text-gray-500">
376
+ Well-structured and commented code that's easy to understand and modify.
377
+ </p>
378
+ </div>
379
+
380
+ <!-- Feature 3 -->
381
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
382
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
383
+ <i class="fas fa-mobile-alt text-blue-600 text-xl"></i>
384
+ </div>
385
+ <h3 class="text-xl font-bold mb-2">Fully Responsive</h3>
386
+ <p class="text-gray-500">
387
+ Works perfectly on all devices from mobile to desktop.
388
+ </p>
389
+ </div>
390
+
391
+ <!-- Feature 4 -->
392
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
393
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
394
+ <i class="fas fa-bolt text-green-600 text-xl"></i>
395
+ </div>
396
+ <h3 class="text-xl font-bold mb-2">Fast Implementation</h3>
397
+ <p class="text-gray-500">
398
+ Save development time with ready-to-use components.
399
+ </p>
400
+ </div>
401
+
402
+ <!-- Feature 5 -->
403
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
404
+ <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4">
405
+ <i class="fas fa-copy text-pink-600 text-xl"></i>
406
+ </div>
407
+ <h3 class="text-xl font-bold mb-2">Multiple Frameworks</h3>
408
+ <p class="text-gray-500">
409
+ Available for React, Vue, and plain HTML/CSS.
410
+ </p>
411
+ </div>
412
+
413
+ <!-- Feature 6 -->
414
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
415
+ <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
416
+ <i class="fas fa-headset text-orange-600 text-xl"></i>
417
+ </div>
418
+ <h3 class="text-xl font-bold mb-2">Support Included</h3>
419
+ <p class="text-gray-500">
420
+ Get help from our team whenever you need it.
421
+ </p>
422
+ </div>
423
+ </div>
424
+ </section>
425
+
426
+ <!-- Pricing Section -->
427
+ <section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
428
+ <div class="text-center mb-16">
429
+ <h2 class="text-3xl md:text-4xl font-bold">Simple Pricing</h2>
430
+ <p class="mt-4 text-lg text-gray-500 max-w-2xl mx-auto">
431
+ Choose the plan that works best for your project.
432
+ </p>
433
+ </div>
434
+
435
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
436
+ <!-- Basic Plan -->
437
+ <div class="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden">
438
+ <div class="p-8">
439
+ <h3 class="text-2xl font-bold mb-2">Basic</h3>
440
+ <p class="text-gray-500 mb-6">Perfect for personal projects</p>
441
+ <div class="mb-6">
442
+ <span class="text-4xl font-bold">$19</span>
443
+ <span class="text-gray-500">/month</span>
444
+ </div>
445
+ <ul class="space-y-3 mb-8">
446
+ <li class="flex items-center">
447
+ <i class="fas fa-check text-green-500 mr-2"></i>
448
+ <span>50+ Components</span>
449
+ </li>
450
+ <li class="flex items-center">
451
+ <i class="fas fa-check text-green-500 mr-2"></i>
452
+ <span>HTML/CSS Only</span>
453
+ </li>
454
+ <li class="flex items-center">
455
+ <i class="fas fa-check text-green-500 mr-2"></i>
456
+ <span>Email Support</span>
457
+ </li>
458
+ <li class="flex items-center text-gray-400">
459
+ <i class="fas fa-times text-gray-300 mr-2"></i>
460
+ <span>React Components</span>
461
+ </li>
462
+ <li class="flex items-center text-gray-400">
463
+ <i class="fas fa-times text-gray-300 mr-2"></i>
464
+ <span>Priority Support</span>
465
+ </li>
466
+ </ul>
467
+ <button class="w-full py-3 px-4 border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition">
468
+ Get Started
469
+ </button>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Popular Plan -->
474
+ <div class="bg-white rounded-xl shadow-lg border border-indigo-100 overflow-hidden relative">
475
+ <div class="absolute top-0 right-0 bg-indigo-600 text-white px-3 py-1 text-sm font-medium rounded-bl-lg">
476
+ Popular
477
+ </div>
478
+ <div class="p-8">
479
+ <h3 class="text-2xl font-bold mb-2">Premium</h3>
480
+ <p class="text-gray-500 mb-6">Best for professional projects</p>
481
+ <div class="mb-6">
482
+ <span class="text-4xl font-bold">$49</span>
483
+ <span class="text-gray-500">/month</span>
484
+ </div>
485
+ <ul class="space-y-3 mb-8">
486
+ <li class="flex items-center">
487
+ <i class="fas fa-check text-green-500 mr-2"></i>
488
+ <span>150+ Components</span>
489
+ </li>
490
+ <li class="flex items-center">
491
+ <i class="fas fa-check text-green-500 mr-2"></i>
492
+ <span>HTML/CSS Only</span>
493
+ </li>
494
+ <li class="flex items-center">
495
+ <i class="fas fa-check text-green-500 mr-2"></i>
496
+ <span>Email/Chat Support</span>
497
+ </li>
498
+ <li class="flex items-center">
499
+ <i class="fas fa-check text-green-500 mr-2"></i>
500
+ <span>React Components</span>
501
+ </li>
502
+ <li class="flex items-center text-gray-400">
503
+ <i class="fas fa-times text-gray-300 mr-2"></i>
504
+ <span>Priority Support</span>
505
+ </li>
506
+ </ul>
507
+ <button class="w-full py-3 px-4 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">
508
+ Get Started
509
+ </button>
510
+ </div>
511
+ </div>
512
+
513
+ <!-- Enterprise Plan -->
514
+ <div class="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden">
515
+ <div class="p-8">
516
+ <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
517
+ <p class="text-gray-500 mb-6">For large scale projects</p>
518
+ <div class="mb-6">
519
+ <span class="text-4xl font-bold">$99</span>
520
+ <span class="text-gray-500">/month</span>
521
+ </div>
522
+ <ul class="space-y-3 mb-8">
523
+ <li class="flex items-center">
524
+ <i class="fas fa-check text-green-500 mr-2"></i>
525
+ <span>Unlimited Components</span>
526
+ </li>
527
+ <li class="flex items-center">
528
+ <i class="fas fa-check text-green-500 mr-2"></i>
529
+ <span>HTML/CSS Only</span>
530
+ </li>
531
+ <li class="flex items-center">
532
+ <i class="fas fa-check text-green-500 mr-2"></i>
533
+ <span>Email/Chat Support</span>
534
+ </li>
535
+ <li class="flex items-center">
536
+ <i class="fas fa-check text-green-500 mr-2"></i>
537
+ <span>React Components</span>
538
+ </li>
539
+ <li class="flex items-center">
540
+ <i class="fas fa-check text-green-500 mr-2"></i>
541
+ <span>Priority Support</span>
542
+ </li>
543
+ </ul>
544
+ <button class="w-full py-3 px-4 border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition">
545
+ Get Started
546
+ </button>
547
+ </div>
548
+ </div>
549
+ </div>
550
+
551
+ <div class="mt-12 bg-indigo-50 rounded-xl p-8 text-center">
552
+ <h3 class="text-xl font-bold mb-2">Looking for something else?</h3>
553
+ <p class="text-gray-600 mb-4 max-w-2xl mx-auto">
554
+ We offer custom solutions for enterprise clients with specific needs.
555
+ </p>
556
+ <button class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition">
557
+ Contact Sales
558
+ </button>
559
+ </div>
560
+ </section>
561
+
562
+ <!-- Testimonials Section -->
563
+ <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50 rounded-2xl">
564
+ <div class="text-center mb-16">
565
+ <h2 class="text-3xl md:text-4xl font-bold">What Our Customers Say</h2>
566
+ <p class="mt-4 text-lg text-gray-500 max-w-2xl mx-auto">
567
+ Trusted by thousands of developers and designers worldwide.
568
+ </p>
569
+ </div>
570
+
571
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
572
+ <!-- Testimonial 1 -->
573
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
574
+ <div class="flex items-center mb-4">
575
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
576
+ <div>
577
+ <h4 class="font-bold">Sarah Johnson</h4>
578
+ <p class="text-gray-500 text-sm">Product Designer, Google</p>
579
+ </div>
580
+ </div>
581
+ <p class="text-gray-600">
582
+ "Huly.io has saved me countless hours of design and frontend work. The components are beautiful and easy to customize."
583
+ </p>
584
+ <div class="mt-4 flex text-yellow-400">
585
+ <i class="fas fa-star"></i>
586
+ <i class="fas fa-star"></i>
587
+ <i class="fas fa-star"></i>
588
+ <i class="fas fa-star"></i>
589
+ <i class="fas fa-star"></i>
590
+ </div>
591
+ </div>
592
+
593
+ <!-- Testimonial 2 -->
594
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
595
+ <div class="flex items-center mb-4">
596
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="David Chen" class="w-12 h-12 rounded-full mr-4">
597
+ <div>
598
+ <h4 class="font-bold">David Chen</h4>
599
+ <p class="text-gray-500 text-sm">Frontend Developer, Shopify</p>
600
+ </div>
601
+ </div>
602
+ <p class="text-gray-600">
603
+ "As a developer, I appreciate how clean and well-structured the code is. It integrates seamlessly with my React projects."
604
+ </p>
605
+ <div class="mt-4 flex text-yellow-400">
606
+ <i class="fas fa-star"></i>
607
+ <i class="fas fa-star"></i>
608
+ <i class="fas fa-star"></i>
609
+ <i class="fas fa-star"></i>
610
+ <i class="fas fa-star"></i>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- Testimonial 3 -->
615
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
616
+ <div class="flex items-center mb-4">
617
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Wilson" class="w-12 h-12 rounded-full mr-4">
618
+ <div>
619
+ <h4 class="font-bold">Emma Wilson</h4>
620
+ <p class="text-gray-500 text-sm">CEO, Startup</p>
621
+ </div>
622
+ </div>
623
+ <p class="text-gray-600">
624
+ "We built our entire MVP using Huly.io components. The quality is amazing and it allowed us to focus on our core product."
625
+ </p>
626
+ <div class="mt-4 flex text-yellow-400">
627
+ <i class="fas fa-star"></i>
628
+ <i class="fas fa-star"></i>
629
+ <i class="fas fa-star"></i>
630
+ <i class="fas fa-star"></i>
631
+ <i class="fas fa-star-half-alt"></i>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </section>
636
+
637
+ <!-- CTA Section -->
638
+ <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
639
+ <div class="hero-gradient rounded-2xl p-12 text-center">
640
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to build something amazing?</h2>
641
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-8">
642
+ Join thousands of developers who are already using Huly.io to build beautiful interfaces faster.
643
+ </p>
644
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
645
+ <button class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition">
646
+ Get Started for Free
647
+ </button>
648
+ <button class="px-6 py-3 border border-white font-medium rounded-lg hover:bg-white hover:text-indigo-600 transition">
649
+ View Demo
650
+ </button>
651
+ </div>
652
+ </div>
653
+ </section>
654
+
655
+ <!-- Contact Section -->
656
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
657
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
658
+ <div>
659
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Get in Touch</h2>
660
+ <p class="text-gray-600 mb-8">
661
+ Have questions or need help? Our team is here to assist you with anything you need.
662
+ </p>
663
+
664
+ <div class="space-y-6">
665
+ <div class="flex items-start">
666
+ <div class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4">
667
+ <i class="fas fa-envelope text-indigo-600"></i>
668
+ </div>
669
+ <div>
670
+ <h4 class="font-bold mb-1">Email Us</h4>
671
+ <p class="text-gray-600">support@huly.io</p>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="flex items-start">
676
+ <div class="bg-purple-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4">
677
+ <i class="fas fa-comment-alt text-purple-600"></i>
678
+ </div>
679
+ <div>
680
+ <h4 class="font-bold mb-1">Chat</h4>
681
+ <p class="text-gray-600">Start live chat on our website</p>
682
+ </div>
683
+ </div>
684
+
685
+ <div class="flex items-start">
686
+ <div class="bg-blue-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4">
687
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
688
+ </div>
689
+ <div>
690
+ <h4 class="font-bold mb-1">Office</h4>
691
+ <p class="text-gray-600">123 Main Street, San Francisco, CA</p>
692
+ </div>
693
+ </div>
694
+ </div>
695
+
696
+ <div class="mt-12">
697
+ <h4 class="font-bold mb-4">Follow Us</h4>
698
+ <div class="flex space-x-4">
699
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
700
+ <i class="fab fa-twitter text-gray-600"></i>
701
+ </a>
702
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
703
+ <i class="fab fa-instagram text-gray-600"></i>
704
+ </a>
705
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
706
+ <i class="fab fa-github text-gray-600"></i>
707
+ </a>
708
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
709
+ <i class="fab fa-linkedin text-gray-600"></i>
710
+ </a>
711
+ </div>
712
+ </div>
713
+ </div>
714
+
715
+ <div>
716
+ <form class="bg-white rounded-xl shadow-md p-8">
717
+ <div class="mb-6">
718
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
719
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
720
+ </div>
721
+
722
+ <div class="mb-6">
723
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
724
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
725
+ </div>
726
+
727
+ <div class="mb-6">
728
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
729
+ <select id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
730
+ <option>General Inquiry</option>
731
+ <option>Support</option>
732
+ <option>Sales</option>
733
+ <option>Feedback</option>
734
+ </select>
735
+ </div>
736
+
737
+ <div class="mb-6">
738
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
739
+ <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"></textarea>
740
+ </div>
741
+
742
+ <button type="submit" class="w-full py-3 px-4 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition">
743
+ Send Message
744
+ </button>
745
+ </form>
746
+ </div>
747
+ </div>
748
+ </section>
749
+
750
+ <!-- Footer -->
751
+ <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
752
+ <div class="max-w-7xl mx-auto">
753
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
754
+ <div>
755
+ <div class="flex items-center mb-4">
756
+ <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center">
757
+ <span class="text-white font-bold">H</span>
758
+ </div>
759
+ <span class="ml-2 font-bold text-white">huly.io</span>
760
+ </div>
761
+ <p class="text-gray-400">
762
+ Beautiful UI components for your next project.
763
+ </p>
764
+ </div>
765
+
766
+ <div>
767
+ <h4 class="text-lg font-semibold mb-4">Product</h4>
768
+ <ul class="space-y-2">
769
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Components</a></li>
770
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
771
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
772
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Changelog</a></li>
773
+ </ul>
774
+ </div>
775
+
776
+ <div>
777
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
778
+ <ul class="space-y-2">
779
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
780
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
781
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
782
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
783
+ </ul>
784
+ </div>
785
+
786
+ <div>
787
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
788
+ <ul class="space-y-2">
789
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
790
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
791
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
792
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
793
+ </ul>
794
+ </div>
795
+ </div>
796
+
797
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
798
+ <p class="text-gray-400 mb-4 md:mb-0">
799
+ &copy; 2023 Huly.io. All rights reserved.
800
+ </p>
801
+ <div class="flex space-x-6">
802
+ <a href="#" class="text-gray-400 hover:text-white transition">
803
+ <i class="fab fa-twitter"></i>
804
+ </a>
805
+ <a href="#" class="text-gray-400 hover:text-white transition">
806
+ <i class="fab fa-github"></i>
807
+ </a>
808
+ <a href="#" class="text-gray-400 hover:text-white transition">
809
+ <i class="fab fa-instagram"></i>
810
+ </a>
811
+ <a href="#" class="text-gray-400 hover:text-white transition">
812
+ <i class="fab fa-linkedin"></i>
813
+ </a>
814
+ </div>
815
+ </div>
816
+ </div>
817
+ </footer>
818
+
819
+ <script>
820
+ // Mobile menu toggle
821
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
822
+ const mobileMenu = document.getElementById('mobile-menu');
823
+
824
+ mobileMenuButton.addEventListener('click', () => {
825
+ mobileMenu.classList.toggle('hidden');
826
+ });
827
+
828
+ // Smooth scrolling for anchor links
829
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
830
+ anchor.addEventListener('click', function (e) {
831
+ e.preventDefault();
832
+ mobileMenu.classList.add('hidden');
833
+
834
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
835
+ behavior: 'smooth'
836
+ });
837
+ });
838
+ });
839
+
840
+ // Animate elements when scrolling into view
841
+ const observer = new IntersectionObserver((entries) => {
842
+ entries.forEach(entry => {
843
+ if (entry.isIntersecting) {
844
+ entry.target.classList.add('animate-fadeIn');
845
+ }
846
+ });
847
+ }, {threshold: 0.1});
848
+
849
+ document.querySelectorAll('.component-card').forEach(card => {
850
+ observer.observe(card);
851
+ });
852
+ </script>
853
+ <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=ARIST069/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
854
+ </html>