Hugging Face's logo

Spaces:
t0mkaka
/
mywebsite
Running

App Files Community
t0mkaka commited on
Commit
a7ad4f5
·
verified ·
1 Parent(s): 8905ca6

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +696 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mywebsite
3
- emoji: 💻
4
- colorFrom: gray
5
- colorTo: indigo
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: mywebsite
3
+ emoji: 🐳
4
+ colorFrom: purple
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,696 @@
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>Siolabs Inc. | Technology Solutions & Innovation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ DEFAULT: '#2563EB',
16
+ light: '#3B82F6',
17
+ dark: '#1D4ED8',
18
+ subtle: '#EBF2FE'
19
+ },
20
+ secondary: {
21
+ DEFAULT: '#10B981',
22
+ dark: '#059669'
23
+ }
24
+ },
25
+ fontFamily: {
26
+ sans: ['Inter', 'system-ui', 'sans-serif'],
27
+ display: ['"Source Sans Pro"', 'sans-serif']
28
+ },
29
+ animation: {
30
+ 'pulse-slow': 'pulse 6s infinite',
31
+ 'float': 'float 3s ease-in-out infinite'
32
+ }
33
+ }
34
+ }
35
+ }
36
+ </script>
37
+ <style>
38
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@600;700&display=swap');
39
+
40
+ body {
41
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
42
+ color: #1a1a1a;
43
+ line-height: 1.6;
44
+ }
45
+
46
+ .gradient-text {
47
+ background: linear-gradient(90deg, #2563EB 0%, #10B981 100%);
48
+ -webkit-background-clip: text;
49
+ background-clip: text;
50
+ color: transparent;
51
+ }
52
+
53
+ .fade-in {
54
+ animation: fadeIn 1s ease-in;
55
+ }
56
+
57
+ @keyframes fadeIn {
58
+ from { opacity: 0; transform: translateY(10px); }
59
+ to { opacity: 1; transform: translateY(0); }
60
+ }
61
+
62
+ @keyframes float {
63
+ 0% { transform: translateY(0px); }
64
+ 50% { transform: translateY(-10px); }
65
+ 100% { transform: translateY(0px); }
66
+ }
67
+
68
+ .shadow-soft {
69
+ box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.15);
70
+ }
71
+
72
+ .hover-scale {
73
+ transition: transform 0.2s ease;
74
+ }
75
+
76
+ .hover-scale:hover {
77
+ transform: scale(1.03);
78
+ }
79
+
80
+ .service-card {
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .service-card:hover {
85
+ box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05);
86
+ transform: translateY(-2px);
87
+ }
88
+
89
+ .ai-card {
90
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(37, 99, 235, 0.08) 100%);
91
+ }
92
+
93
+ .training-card {
94
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0.08) 100%);
95
+ }
96
+
97
+ .app-screen {
98
+ border-radius: 20px;
99
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
100
+ }
101
+ </style>
102
+ </head>
103
+ <body class="antialiased">
104
+ <!-- Navigation -->
105
+ <nav class="max-w-7xl mx-auto px-6 py-6 flex justify-between items-center sticky top-0 bg-white z-50">
106
+ <div class="flex items-center">
107
+ <div class="w-10 h-10 bg-primary rounded-lg mr-3 flex items-center justify-center">
108
+ <i class="fas fa-code text-white text-lg"></i>
109
+ </div>
110
+ <div class="text-xl font-display font-bold text-gray-800">Sio<span class="text-primary">labs</span></div>
111
+ </div>
112
+
113
+ <div class="hidden md:flex space-x-8 items-center">
114
+ <a href="#services" class="text-sm font-medium text-gray-600 hover:text-primary transition">Services</a>
115
+ <a href="#products" class="text-sm font-medium text-gray-600 hover:text-primary transition">Products</a>
116
+ <a href="#about" class="text-sm font-medium text-gray-600 hover:text-primary transition">About Us</a>
117
+ <a href="#contact" class="text-sm font-medium text-gray-600 hover:text-primary transition">Contact</a>
118
+ </div>
119
+
120
+ <div class="flex items-center space-x-4">
121
+ <a href="#contact" class="text-sm font-medium bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-md transition shadow-sm">
122
+ Get Started
123
+ </a>
124
+ </div>
125
+ </nav>
126
+
127
+ <!-- Hero Section -->
128
+ <section class="py-20 px-6 bg-gradient-to-b from-white to-blue-50">
129
+ <div class="max-w-4xl mx-auto text-center fade-in">
130
+ <div class="inline-flex items-center bg-primary/10 px-3 py-1 rounded-full text-xs font-medium text-primary mb-6">
131
+ <i class="fas fa-lightbulb mr-2"></i> Innovating Technology Solutions
132
+ </div>
133
+
134
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-display font-bold mb-6 leading-tight">
135
+ Transforming Ideas Into <span class="gradient-text">Digital Reality</span>
136
+ </h1>
137
+
138
+ <p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
139
+ Siolabs Inc. delivers cutting-edge technology solutions, from custom software development to specialized corporate training.
140
+ </p>
141
+
142
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
143
+ <a href="#services" class="bg-primary hover:bg-primary-dark text-white px-8 py-4 rounded-md text-lg font-medium transition flex items-center justify-center shadow-md hover-scale">
144
+ <i class="fas fa-laptop-code mr-3"></i> Explore Services
145
+ </a>
146
+ <a href="#contact" class="border-2 border-primary text-primary px-8 py-4 rounded-md text-lg font-medium hover:bg-blue-50 transition flex items-center justify-center hover-scale">
147
+ <i class="fas fa-envelope mr-3"></i> Contact Us
148
+ </a>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- Services Section -->
154
+ <section id="services" class="py-20 px-6 bg-white">
155
+ <div class="max-w-6xl mx-auto">
156
+ <div class="text-center mb-16">
157
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-4">Our Technology Services</h2>
158
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">
159
+ Comprehensive solutions tailored to your business needs
160
+ </p>
161
+ </div>
162
+
163
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
164
+ <div class="bg-white p-8 rounded-xl service-card shadow-sm border border-gray-100">
165
+ <div class="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
166
+ <i class="fas fa-cogs text-2xl"></i>
167
+ </div>
168
+ <h3 class="font-display font-semibold text-xl mb-3">Custom Product Development</h3>
169
+ <p class="text-gray-600 mb-4">
170
+ Bespoke software solutions designed to solve your unique business challenges with AI-powered capabilities.
171
+ </p>
172
+ <ul class="text-sm text-gray-600 space-y-2">
173
+ <li class="flex items-start">
174
+ <i class="fas fa-check-circle text-primary mr-2 mt-1"></i>
175
+ <span>End-to-end development lifecycle</span>
176
+ </li>
177
+ <li class="flex items-start">
178
+ <i class="fas fa-check-circle text-primary mr-2 mt-1"></i>
179
+ <span>AI/ML integration</span>
180
+ </li>
181
+ <li class="flex items-start">
182
+ <i class="fas fa-check-circle text-primary mr-2 mt-1"></i>
183
+ <span>Scalable architecture</span>
184
+ </li>
185
+ </ul>
186
+ </div>
187
+
188
+ <div class="bg-white p-8 rounded-xl service-card shadow-sm border border-gray-100">
189
+ <div class="w-16 h-16 bg-secondary/10 text-secondary rounded-full flex items-center justify-center mx-auto mb-6">
190
+ <i class="fas fa-chalkboard-teacher text-2xl"></i>
191
+ </div>
192
+ <h3 class="font-display font-semibold text-xl mb-3">Corporate AI Training</h3>
193
+ <p class="text-gray-600 mb-4">
194
+ Specialized training programs to upskill your workforce in artificial intelligence and modern technologies.
195
+ </p>
196
+ <ul class="text-sm text-gray-600 space-y-2">
197
+ <li class="flex items-start">
198
+ <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
199
+ <span>Customized curriculum</span>
200
+ </li>
201
+ <li class="flex items-start">
202
+ <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
203
+ <span>Hands-on workshops</span>
204
+ </li>
205
+ <li class="flex items-start">
206
+ <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
207
+ <span>Executive education</span>
208
+ </li>
209
+ </ul>
210
+ </div>
211
+
212
+ <div class="bg-white p-8 rounded-xl service-card shadow-sm border border-gray-100">
213
+ <div class="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
214
+ <i class="fas fa-headset text-2xl"></i>
215
+ </div>
216
+ <h3 class="font-display font-semibold text-xl mb-3">Technology Consulting</h3>
217
+ <p class="text-gray-600 mb-4">
218
+ Strategic guidance to help you navigate digital transformation and technology adoption.
219
+ </p>
220
+ <ul class="text-sm text-gray-600 space-y-2">
221
+ <li class="flex items-start">
222
+ <i class="fas fa-check-circle text-primary mr-2 mt-1"></i>
223
+ <span>Digital strategy</span>
224
+ </li>
225
+ <li class="flex items-start">
226
+ <i class="fas fa-check-circle text-primary mr-2 mt-1"></i>
227
+ <span>Technology roadmap</span>
228
+ </li>
229
+ <li class="flex items-start">
230
+ <i class="fas fa-check-circle text-primary mr-2 mt-1"></i>
231
+ <span>Implementation support</span>
232
+ </li>
233
+ </ul>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </section>
238
+
239
+ <!-- Custom Development Process -->
240
+ <section class="py-20 px-6 bg-gray-50">
241
+ <div class="max-w-6xl mx-auto">
242
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
243
+ <div>
244
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-6">
245
+ Our <span class="text-primary">Development</span> Approach
246
+ </h2>
247
+ <p class="text-gray-600 mb-8">
248
+ We follow a structured yet flexible process to deliver high-quality software solutions that drive business value.
249
+ </p>
250
+
251
+ <div class="space-y-6">
252
+ <div class="flex items-start">
253
+ <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
254
+ <div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center">
255
+ <span class="font-bold">1</span>
256
+ </div>
257
+ </div>
258
+ <div class="ml-4">
259
+ <h4 class="font-semibold">Discovery & Planning</h4>
260
+ <p class="text-gray-600 text-sm">
261
+ We start by understanding your business objectives and defining project requirements.
262
+ </p>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="flex items-start">
267
+ <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
268
+ <div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center">
269
+ <span class="font-bold">2</span>
270
+ </div>
271
+ </div>
272
+ <div class="ml-4">
273
+ <h4 class="font-semibold">Design & Architecture</h4>
274
+ <p class="text-gray-600 text-sm">
275
+ Our team creates technical specifications and user experience designs.
276
+ </p>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="flex items-start">
281
+ <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
282
+ <div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center">
283
+ <span class="font-bold">3</span>
284
+ </div>
285
+ </div>
286
+ <div class="ml-4">
287
+ <h4 class="font-semibold">Development & Testing</h4>
288
+ <p class="text-gray-600 text-sm">
289
+ We build your solution with agile methodologies and rigorous quality assurance.
290
+ </p>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="flex items-start">
295
+ <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
296
+ <div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center">
297
+ <span class="font-bold">4</span>
298
+ </div>
299
+ </div>
300
+ <div class="ml-4">
301
+ <h4 class="font-semibold">Deployment & Support</h4>
302
+ <p class="text-gray-600 text-sm">
303
+ We ensure smooth launch and provide ongoing maintenance and enhancements.
304
+ </p>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="ai-card p-8 rounded-xl">
311
+ <div class="bg-white rounded-xl shadow-md p-8 relative">
312
+ <div class="absolute -top-4 -left-4 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center">
313
+ <i class="fas fa-robot"></i>
314
+ </div>
315
+ <h3 class="text-xl font-display font-bold mb-4 text-primary">AI Integration Expertise</h3>
316
+ <p class="text-gray-700 mb-4">
317
+ We specialize in integrating artificial intelligence capabilities into custom solutions:
318
+ </p>
319
+ <ul class="text-sm text-gray-600 space-y-2 mb-6">
320
+ <li class="flex items-start">
321
+ <i class="fas fa-check text-primary mr-2 mt-1"></i>
322
+ <span>Machine learning models</span>
323
+ </li>
324
+ <li class="flex items-start">
325
+ <i class="fas fa-check text-primary mr-2 mt-1"></i>
326
+ <span>Natural language processing</span>
327
+ </li>
328
+ <li class="flex items-start">
329
+ <i class="fas fa-check text-primary mr-2 mt-1"></i>
330
+ <span>Computer vision</span>
331
+ </li>
332
+ <li class="flex items-start">
333
+ <i class="fas fa-check text-primary mr-2 mt-1"></i>
334
+ <span>Predictive analytics</span>
335
+ </li>
336
+ </ul>
337
+ <div class="text-xs text-gray-500">
338
+ <i class="fas fa-info-circle mr-1"></i> Our AI solutions are tailored to your specific business needs
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </section>
345
+
346
+ <!-- Corporate Training Details -->
347
+ <section class="py-20 px-6 bg-white">
348
+ <div class="max-w-6xl mx-auto">
349
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
350
+ <div class="order-last lg:order-first">
351
+ <div class="training-card p-8 rounded-xl">
352
+ <div class="bg-white rounded-xl shadow-md p-8 relative">
353
+ <div class="absolute -top-4 -left-4 bg-secondary text-white rounded-full w-10 h-10 flex items-center justify-center">
354
+ <i class="fas fa-graduation-cap"></i>
355
+ </div>
356
+ <h3 class="text-xl font-display font-bold mb-4 text-secondary">Training Programs</h3>
357
+ <p class="text-gray-700 mb-4">
358
+ Our corporate training covers essential AI and technology topics:
359
+ </p>
360
+ <ul class="text-sm text-gray-600 space-y-2 mb-6">
361
+ <li class="flex items-start">
362
+ <i class="fas fa-check text-secondary mr-2 mt-1"></i>
363
+ <span>AI Fundamentals for Business Leaders</span>
364
+ </li>
365
+ <li class="flex items-start">
366
+ <i class="fas fa-check text-secondary mr-2 mt-1"></i>
367
+ <span>Machine Learning for Developers</span>
368
+ </li>
369
+ <li class="flex items-start">
370
+ <i class="fas fa-check text-secondary mr-2 mt-1"></i>
371
+ <span>Data Science Bootcamp</span>
372
+ </li>
373
+ <li class="flex items-start">
374
+ <i class="fas fa-check text-secondary mr-2 mt-1"></i>
375
+ <span>AI Strategy Workshops</span>
376
+ </li>
377
+ </ul>
378
+ <div class="text-xs text-gray-500">
379
+ <i class="fas fa-info-circle mr-1"></i> Custom programs available for your organization
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <div>
386
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-6">
387
+ Corporate <span class="text-secondary">AI Training</span>
388
+ </h2>
389
+ <p class="text-gray-600 mb-8">
390
+ Equip your team with the knowledge and skills to leverage artificial intelligence in your business.
391
+ </p>
392
+
393
+ <div class="space-y-6">
394
+ <div class="flex items-start">
395
+ <div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg">
396
+ <i class="fas fa-users text-secondary text-xl"></i>
397
+ </div>
398
+ <div class="ml-4">
399
+ <h4 class="font-semibold">For All Levels</h4>
400
+ <p class="text-gray-600 text-sm">
401
+ From executive overviews to technical deep dives, we cater to all experience levels.
402
+ </p>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="flex items-start">
407
+ <div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg">
408
+ <i class="fas fa-briefcase text-secondary text-xl"></i>
409
+ </div>
410
+ <div class="ml-4">
411
+ <h4 class="font-semibold">Industry-Specific</h4>
412
+ <p class="text-gray-600 text-sm">
413
+ Our training incorporates real-world examples from your industry.
414
+ </p>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="flex items-start">
419
+ <div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg">
420
+ <i class="fas fa-laptop-code text-secondary text-xl"></i>
421
+ </div>
422
+ <div class="ml-4">
423
+ <h4 class="font-semibold">Hands-On Learning</h4>
424
+ <p class="text-gray-600 text-sm">
425
+ Practical exercises and case studies reinforce theoretical concepts.
426
+ </p>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- Products Section -->
436
+ <section id="products" class="py-20 px-6 bg-gray-50">
437
+ <div class="max-w-6xl mx-auto">
438
+ <div class="text-center mb-16">
439
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-4">Our Flagship Product</h2>
440
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">
441
+ Innovative solutions developed by our team
442
+ </p>
443
+ </div>
444
+
445
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
446
+ <div class="flex justify-center">
447
+ <div class="relative">
448
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
449
+ alt="11UP Fantasy Cricket App"
450
+ class="app-screen w-full max-w-md">
451
+ <div class="absolute -bottom-6 -right-6 bg-primary text-white px-4 py-2 rounded-lg shadow-lg">
452
+ <div class="text-xs">Available on</div>
453
+ <div class="font-bold">App Store & Play Store</div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <div>
459
+ <div class="inline-flex items-center bg-secondary/10 px-3 py-1 rounded-full text-xs font-medium text-secondary mb-6">
460
+ <i class="fas fa-star mr-2"></i> Flagship Product
461
+ </div>
462
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-6">
463
+ 11UP <span class="text-primary">Fantasy Cricket</span>
464
+ </h2>
465
+ <p class="text-gray-600 mb-6">
466
+ Our premier fantasy sports application that brings cricket enthusiasts together for an immersive gaming experience.
467
+ </p>
468
+
469
+ <div class="grid sm:grid-cols-2 gap-4 mb-8">
470
+ <div class="bg-white p-4 rounded-lg border border-gray-100">
471
+ <div class="flex items-center">
472
+ <div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-3">
473
+ <i class="fas fa-trophy"></i>
474
+ </div>
475
+ <div>
476
+ <div class="font-semibold">Real-time</div>
477
+ <div class="text-xs text-gray-500">Live matches</div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <div class="bg-white p-4 rounded-lg border border-gray-100">
483
+ <div class="flex items-center">
484
+ <div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-3">
485
+ <i class="fas fa-chart-line"></i>
486
+ </div>
487
+ <div>
488
+ <div class="font-semibold">Advanced</div>
489
+ <div class="text-xs text-gray-500">Player stats</div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="bg-white p-4 rounded-lg border border-gray-100">
495
+ <div class="flex items-center">
496
+ <div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-3">
497
+ <i class="fas fa-users"></i>
498
+ </div>
499
+ <div>
500
+ <div class="font-semibold">Social</div>
501
+ <div class="text-xs text-gray-500">Leaderboards</div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <div class="bg-white p-4 rounded-lg border border-gray-100">
507
+ <div class="flex items-center">
508
+ <div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-3">
509
+ <i class="fas fa-bell"></i>
510
+ </div>
511
+ <div>
512
+ <div class="font-semibold">Instant</div>
513
+ <div class="text-xs text-gray-500">Notifications</div>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="flex flex-wrap gap-3">
520
+ <a href="#" class="bg-gray-900 hover:bg-black text-white px-6 py-3 rounded-lg font-medium transition flex items-center hover-scale">
521
+ <i class="fab fa-apple mr-2"></i> App Store
522
+ </a>
523
+ <a href="#" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center hover-scale">
524
+ <i class="fab fa-google-play mr-2"></i> Play Store
525
+ </a>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </section>
531
+
532
+ <!-- About Us Section -->
533
+ <section id="about" class="py-20 px-6 bg-white">
534
+ <div class="max-w-6xl mx-auto">
535
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
536
+ <div>
537
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-6">
538
+ About <span class="text-primary">Siolabs Inc.</span>
539
+ </h2>
540
+ <p class="text-gray-600 mb-6">
541
+ Founded with a vision to bridge the gap between cutting-edge technology and business needs, Siolabs Inc. has grown into a trusted partner for organizations seeking innovative solutions.
542
+ </p>
543
+ <p class="text-gray-600 mb-8">
544
+ Our team of experienced developers, data scientists, and technology experts combine technical excellence with deep business understanding to deliver measurable results.
545
+ </p>
546
+
547
+ <div class="grid sm:grid-cols-2 gap-6">
548
+ <div class="bg-gray-50 p-6 rounded-lg">
549
+ <div class="text-3xl font-bold text-primary mb-2">50+</div>
550
+ <div class="text-sm text-gray-600">Successful Projects</div>
551
+ </div>
552
+ <div class="bg-gray-50 p-6 rounded-lg">
553
+ <div class="text-3xl font-bold text-primary mb-2">100%</div>
554
+ <div class="text-sm text-gray-600">Client Satisfaction</div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+
559
+ <div>
560
+ <div class="bg-gray-50 rounded-xl overflow-hidden">
561
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
562
+ alt="Siolabs team"
563
+ class="w-full h-full object-cover">
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </section>
569
+
570
+ <!-- Contact Section -->
571
+ <section id="contact" class="py-20 px-6 bg-primary/5">
572
+ <div class="max-w-4xl mx-auto">
573
+ <div class="text-center mb-16">
574
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-4">Ready to Transform Your Business?</h2>
575
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">
576
+ Get in touch to discuss how we can help with your technology needs
577
+ </p>
578
+ </div>
579
+
580
+ <div class="bg-white rounded-xl shadow-md p-8 md:p-12">
581
+ <form class="grid md:grid-cols-2 gap-6">
582
+ <div>
583
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
584
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary">
585
+ </div>
586
+
587
+ <div>
588
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
589
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary">
590
+ </div>
591
+
592
+ <div>
593
+ <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company</label>
594
+ <input type="text" id="company" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary">
595
+ </div>
596
+
597
+ <div>
598
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
599
+ <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary">
600
+ </div>
601
+
602
+ <div class="md:col-span-2">
603
+ <label for="interest" class="block text-sm font-medium text-gray-700 mb-1">I'm interested in</label>
604
+ <select id="interest" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary">
605
+ <option>Custom Product Development</option>
606
+ <option>Corporate AI Training</option>
607
+ <option>11UP Fantasy Cricket</option>
608
+ <option>Technology Consulting</option>
609
+ <option>Other</option>
610
+ </select>
611
+ </div>
612
+
613
+ <div class="md:col-span-2">
614
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
615
+ <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
616
+ </div>
617
+
618
+ <div class="md:col-span-2">
619
+ <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white px-6 py-4 rounded-lg text-lg font-medium transition shadow-md hover-scale">
620
+ Send Message
621
+ </button>
622
+ </div>
623
+ </form>
624
+ </div>
625
+ </div>
626
+ </section>
627
+
628
+ <!-- Footer -->
629
+ <footer class="py-16 px-6 bg-gray-900 text-white/80">
630
+ <div class="max-w-6xl mx-auto">
631
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-10 mb-12">
632
+ <div class="col-span-2">
633
+ <div class="flex items-center mb-4">
634
+ <div class="-ml-2">
635
+ <div class="w-10 h-10 bg-primary rounded-lg mr-3 flex items-center justify-center">
636
+ <i class="fas fa-code text-white text-lg"></i>
637
+ </div>
638
+ </div>
639
+ <div class="text-xl font-display font-bold text-white">Sio<span class="text-primary">labs</span></div>
640
+ </div>
641
+ <p class="text-sm mb-6 opacity-70 max-w-md">
642
+ Technology solutions provider specializing in custom software development, AI integration, and corporate training.
643
+ </p>
644
+ <div class="flex space-x-4">
645
+ <a href="#" class="hover:text-white transition opacity-70 hover:opacity-100"><i class="fab fa-linkedin-in"></i></a>
646
+ <a href="#" class="hover:text-white transition opacity-70 hover:opacity-100"><i class="fab fa-twitter"></i></a>
647
+ <a href="#" class="hover:text-white transition opacity-70 hover:opacity-100"><i class="fab fa-facebook-f"></i></a>
648
+ </div>
649
+ </div>
650
+
651
+ <div>
652
+ <h3 class="text-sm font-medium text-white mb-4">Services</h3>
653
+ <ul class="space-y-3 text-sm opacity-70">
654
+ <li><a href="#" class="hover:text-white transition">Custom Development</a></li>
655
+ <li><a href="#" class="hover:text-white transition">AI Training</a></li>
656
+ <li><a href="#" class="hover:text-white transition">Technology Consulting</a></li>
657
+ </ul>
658
+ </div>
659
+
660
+ <div>
661
+ <h3 class="text-sm font-medium text-white mb-4">Company</h3>
662
+ <ul class="space-y-3 text-sm opacity-70">
663
+ <li><a href="#" class="hover:text-white transition">About Us</a></li>
664
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
665
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
666
+ </ul>
667
+ </div>
668
+ </div>
669
+
670
+ <div class="pt-8 border-t border-gray-800 text-sm opacity-70 text-center md:text-left">
671
+ © 2023 Siolabs Inc. All rights reserved.
672
+ </div>
673
+ </div>
674
+ </footer>
675
+
676
+ <script>
677
+ // Simple scroll animation
678
+ const fadeElements = document.querySelectorAll('.fade-in');
679
+
680
+ const fadeInOnScroll = () => {
681
+ fadeElements.forEach(element => {
682
+ const elementTop = element.getBoundingClientRect().top;
683
+ const windowHeight = window.innerHeight;
684
+
685
+ if (elementTop < windowHeight - 100) {
686
+ element.style.opacity = '1';
687
+ element.style.transform = 'translateY(0)';
688
+ }
689
+ });
690
+ };
691
+
692
+ window.addEventListener('scroll', fadeInOnScroll);
693
+ window.addEventListener('load', fadeInOnScroll);
694
+ </script>
695
+ <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=t0mkaka/mywebsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
696
+ </html>