Hugging Face's logo

Spaces:
saravatpt
/
aignite
Running

App Files Community
vipra commited on
Commit
aae09da
·
verified ·
1 Parent(s): 6f78392

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1318 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pingaxai
3
- emoji: 📉
4
- colorFrom: indigo
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: pingaxai
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,1318 @@
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>Pingax AI | Enterprise AI/ML Services & Solutions</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
11
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ :root {
14
+ --primary: #4361EE;
15
+ --primary-dark: #3A0CA3;
16
+ --secondary: #3A86FF;
17
+ --accent: #7209B7;
18
+ --dark: #14213D;
19
+ --light: #F8F9FA;
20
+ --gray: #6C757D;
21
+ --success: #4CC9F0;
22
+ --danger: #F72585;
23
+ --warning: #FF9F1C;
24
+ --gradient: linear-gradient(135deg, #4361EE 0%, #3A0CA3 50%, #7209B7 100%);
25
+ --gradient-accent: linear-gradient(135deg, #4361EE 0%, #7209B7 100%);
26
+ --shadow: 0 4px 30px rgba(67, 97, 238, 0.15);
27
+ --shadow-hover: 0 10px 40px rgba(67, 97, 238, 0.25);
28
+ }
29
+
30
+ * {
31
+ margin: 0;
32
+ padding: 0;
33
+ box-sizing: border-box;
34
+ }
35
+
36
+ body {
37
+ font-family: 'Poppins', sans-serif;
38
+ color: var(--dark);
39
+ line-height: 1.6;
40
+ background-color: var(--light);
41
+ }
42
+
43
+ h1, h2, h3, h4 {
44
+ font-family: 'Space Grotesk', sans-serif;
45
+ font-weight: 700;
46
+ }
47
+
48
+ .container {
49
+ max-width: 1200px;
50
+ margin: 0 auto;
51
+ padding: 0 20px;
52
+ }
53
+
54
+ /* Header Styles */
55
+ header {
56
+ background-color: white;
57
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
58
+ position: fixed;
59
+ width: 100%;
60
+ z-index: 1000;
61
+ }
62
+
63
+ nav {
64
+ display: flex;
65
+ justify-content: space-between;
66
+ align-items: center;
67
+ padding: 20px 0;
68
+ }
69
+
70
+ .logo {
71
+ display: flex;
72
+ align-items: center;
73
+ font-family: 'Space Grotesk', sans-serif;
74
+ font-weight: 800;
75
+ font-size: 26px;
76
+ background: var(--gradient);
77
+ -webkit-background-clip: text;
78
+ -webkit-text-fill-color: transparent;
79
+ background-clip: text;
80
+ }
81
+
82
+ .logo i {
83
+ margin-right: 10px;
84
+ color: var(--primary);
85
+ }
86
+
87
+ .nav-links {
88
+ display: flex;
89
+ list-style: none;
90
+ }
91
+
92
+ .nav-links li {
93
+ margin-left: 30px;
94
+ }
95
+
96
+ .nav-links a {
97
+ text-decoration: none;
98
+ color: var(--dark);
99
+ font-weight: 500;
100
+ transition: all 0.3s;
101
+ position: relative;
102
+ }
103
+
104
+ .nav-links a:after {
105
+ content: '';
106
+ position: absolute;
107
+ width: 0;
108
+ height: 3px;
109
+ background: var(--gradient-accent);
110
+ bottom: -5px;
111
+ left: 0;
112
+ transition: width 0.3s;
113
+ border-radius: 3px;
114
+ }
115
+
116
+ .nav-links a:hover:after {
117
+ width: 100%;
118
+ }
119
+
120
+ .nav-links a:hover {
121
+ color: var(--primary);
122
+ }
123
+
124
+ .menu-toggle {
125
+ display: none;
126
+ cursor: pointer;
127
+ font-size: 24px;
128
+ color: var(--primary);
129
+ }
130
+
131
+ /* Hero Section */
132
+ .hero {
133
+ padding: 180px 0 100px;
134
+ background: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
135
+ position: relative;
136
+ color: white;
137
+ text-align: center;
138
+ }
139
+
140
+ .hero::before {
141
+ content: '';
142
+ position: absolute;
143
+ top: 0;
144
+ left: 0;
145
+ width: 100%;
146
+ height: 100%;
147
+ background: rgba(20, 33, 61, 0.8);
148
+ background: linear-gradient(135deg, rgba(58, 12, 163, 0.9) 0%, rgba(67, 97, 238, 0.8) 100%);
149
+ }
150
+
151
+ .hero-content {
152
+ position: relative;
153
+ z-index: 1;
154
+ max-width: 800px;
155
+ margin: 0 auto;
156
+ }
157
+
158
+ .hero h1 {
159
+ font-size: 56px;
160
+ margin-bottom: 20px;
161
+ line-height: 1.2;
162
+ }
163
+
164
+ .hero p {
165
+ font-size: 20px;
166
+ margin-bottom: 30px;
167
+ opacity: 0.9;
168
+ }
169
+
170
+ .btn {
171
+ display: inline-block;
172
+ padding: 14px 32px;
173
+ background: var(--gradient);
174
+ color: white;
175
+ border-radius: 8px;
176
+ text-decoration: none;
177
+ font-weight: 600;
178
+ transition: all 0.3s;
179
+ border: none;
180
+ cursor: pointer;
181
+ font-size: 16px;
182
+ box-shadow: var(--shadow);
183
+ }
184
+
185
+ .btn:hover {
186
+ transform: translateY(-3px);
187
+ box-shadow: var(--shadow-hover);
188
+ }
189
+
190
+ .btn-outline {
191
+ background: transparent;
192
+ border: 2px solid white;
193
+ margin-left: 15px;
194
+ }
195
+
196
+ .btn-outline:hover {
197
+ background: white;
198
+ color: var(--primary);
199
+ box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
200
+ }
201
+
202
+ /* Features Section */
203
+ .section {
204
+ padding: 100px 0;
205
+ }
206
+
207
+ .section-title {
208
+ text-align: center;
209
+ margin-bottom: 60px;
210
+ }
211
+
212
+ .section-title h2 {
213
+ font-size: 42px;
214
+ margin-bottom: 15px;
215
+ background: var(--gradient);
216
+ -webkit-background-clip: text;
217
+ -webkit-text-fill-color: transparent;
218
+ background-clip: text;
219
+ }
220
+
221
+ .section-title p {
222
+ max-width: 700px;
223
+ margin: 0 auto;
224
+ color: var(--gray);
225
+ font-size: 18px;
226
+ }
227
+
228
+ .features-grid {
229
+ display: grid;
230
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
231
+ gap: 30px;
232
+ }
233
+
234
+ .feature-card {
235
+ background: white;
236
+ border-radius: 12px;
237
+ padding: 40px;
238
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
239
+ transition: all 0.3s;
240
+ border: 1px solid rgba(67, 97, 238, 0.1);
241
+ }
242
+
243
+ .feature-card:hover {
244
+ transform: translateY(-10px);
245
+ box-shadow: var(--shadow-hover);
246
+ border-color: rgba(67, 97, 238, 0.2);
247
+ }
248
+
249
+ .feature-icon {
250
+ width: 70px;
251
+ height: 70px;
252
+ background: var(--gradient);
253
+ border-radius: 12px;
254
+ display: flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ margin-bottom: 25px;
258
+ color: white;
259
+ font-size: 28px;
260
+ }
261
+
262
+ .feature-card h3 {
263
+ font-size: 22px;
264
+ margin-bottom: 15px;
265
+ color: var(--dark);
266
+ }
267
+
268
+ .feature-card p {
269
+ color: var(--gray);
270
+ }
271
+
272
+ /* Cloud Platforms */
273
+ .cloud-platforms {
274
+ display: flex;
275
+ justify-content: center;
276
+ gap: 40px;
277
+ flex-wrap: wrap;
278
+ margin: 50px 0;
279
+ }
280
+
281
+ .platform {
282
+ display: flex;
283
+ align-items: center;
284
+ gap: 10px;
285
+ background: white;
286
+ padding: 12px 25px;
287
+ border-radius: 8px;
288
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
289
+ transition: all 0.3s;
290
+ }
291
+
292
+ .platform:hover {
293
+ transform: translateY(-5px);
294
+ }
295
+
296
+ .platform i {
297
+ font-size: 24px;
298
+ }
299
+
300
+ .platform.aws i {
301
+ color: #FF9900;
302
+ }
303
+
304
+ .platform.azure i {
305
+ color: #0089D6;
306
+ }
307
+
308
+ .platform.gcp i {
309
+ color: #4285F4;
310
+ }
311
+
312
+ /* How It Works */
313
+ .works-section {
314
+ background: linear-gradient(to bottom, #f9fafb 0%, white 100%);
315
+ }
316
+
317
+ .steps {
318
+ display: flex;
319
+ flex-wrap: wrap;
320
+ justify-content: center;
321
+ position: relative;
322
+ padding-top: 50px;
323
+ }
324
+
325
+ .step {
326
+ flex: 1;
327
+ min-width: 250px;
328
+ max-width: 300px;
329
+ padding: 0 20px 40px;
330
+ position: relative;
331
+ }
332
+
333
+ .step-number {
334
+ width: 60px;
335
+ height: 60px;
336
+ background: var(--gradient);
337
+ color: white;
338
+ border-radius: 50%;
339
+ display: flex;
340
+ align-items: center;
341
+ justify-content: center;
342
+ font-weight: 600;
343
+ margin: 0 auto 20px;
344
+ position: relative;
345
+ z-index: 2;
346
+ font-size: 24px;
347
+ font-family: 'Space Grotesk', sans-serif;
348
+ }
349
+
350
+ .step:not(:last-child)::after {
351
+ content: '';
352
+ position: absolute;
353
+ top: 30px;
354
+ height: 3px;
355
+ width: calc(100% - 100px);
356
+ background: linear-gradient(to right, var(--primary), var(--accent));
357
+ left: calc(50% + 30px);
358
+ opacity: 0.3;
359
+ }
360
+
361
+ .step-content {
362
+ background: white;
363
+ padding: 30px;
364
+ border-radius: 12px;
365
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
366
+ height: 100%;
367
+ border: 1px solid rgba(67, 97, 238, 0.1);
368
+ }
369
+
370
+ .step-content h3 {
371
+ margin-bottom: 15px;
372
+ color: var(--dark);
373
+ }
374
+
375
+ /* Stats Section */
376
+ .stats {
377
+ display: grid;
378
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
379
+ gap: 30px;
380
+ text-align: center;
381
+ }
382
+
383
+ .stat-item {
384
+ background: white;
385
+ padding: 30px;
386
+ border-radius: 12px;
387
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
388
+ }
389
+
390
+ .stat-item h3 {
391
+ font-size: 56px;
392
+ font-family: 'Space Grotesk', sans-serif;
393
+ background: var(--gradient);
394
+ -webkit-background-clip: text;
395
+ -webkit-text-fill-color: transparent;
396
+ background-clip: text;
397
+ margin-bottom: 10px;
398
+ }
399
+
400
+ /* Demo Section */
401
+ .demo-section {
402
+ background-color: #f1f4f8;
403
+ padding: 80px 0;
404
+ }
405
+
406
+ .demo-container {
407
+ background: white;
408
+ border-radius: 12px;
409
+ padding: 40px;
410
+ box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
411
+ }
412
+
413
+ .demo-tabs {
414
+ display: flex;
415
+ margin-bottom: 30px;
416
+ border-bottom: 1px solid #eee;
417
+ }
418
+
419
+ .demo-tab {
420
+ padding: 12px 24px;
421
+ cursor: pointer;
422
+ margin-right: 10px;
423
+ font-weight: 500;
424
+ border-bottom: 3px solid transparent;
425
+ transition: all 0.3s;
426
+ }
427
+
428
+ .demo-tab.active {
429
+ border-bottom: 3px solid var(--primary);
430
+ color: var(--primary);
431
+ }
432
+
433
+ .demo-content {
434
+ min-height: 500px;
435
+ display: flex;
436
+ align-items: center;
437
+ justify-content: center;
438
+ padding: 20px;
439
+ }
440
+
441
+ .demo-frame {
442
+ width: 100%;
443
+ height: 500px;
444
+ border: 1px solid #eee;
445
+ border-radius: 8px;
446
+ overflow: hidden;
447
+ }
448
+
449
+ /* Testimonials */
450
+ .testimonials {
451
+ background: linear-gradient(to bottom, white 0%, #f9fafb 100%);
452
+ }
453
+
454
+ .testimonial-grid {
455
+ display: grid;
456
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
457
+ gap: 30px;
458
+ }
459
+
460
+ .testimonial-card {
461
+ background: white;
462
+ border-radius: 12px;
463
+ padding: 30px;
464
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
465
+ border: 1px solid rgba(67, 97, 238, 0.1);
466
+ }
467
+
468
+ .testimonial-header {
469
+ display: flex;
470
+ align-items: center;
471
+ margin-bottom: 20px;
472
+ }
473
+
474
+ .testimonial-avatar {
475
+ width: 60px;
476
+ height: 60px;
477
+ border-radius: 50%;
478
+ object-fit: cover;
479
+ margin-right: 15px;
480
+ }
481
+
482
+ .testimonial-name h4 {
483
+ font-size: 18px;
484
+ margin-bottom: 5px;
485
+ }
486
+
487
+ .testimonial-name p {
488
+ color: var(--gray);
489
+ font-size: 14px;
490
+ }
491
+
492
+ .testimonial-content {
493
+ color: var(--gray);
494
+ font-style: italic;
495
+ line-height: 1.7;
496
+ }
497
+
498
+ .testimonial-rating {
499
+ color: #FFC107;
500
+ margin-top: 15px;
501
+ font-size: 16px;
502
+ }
503
+
504
+ /* Pricing */
505
+ .pricing-grid {
506
+ display: grid;
507
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
508
+ gap: 30px;
509
+ }
510
+
511
+ .pricing-card {
512
+ background: white;
513
+ border-radius: 12px;
514
+ padding: 40px 30px;
515
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
516
+ text-align: center;
517
+ transition: all 0.3s;
518
+ border: 1px solid rgba(67, 97, 238, 0.1);
519
+ }
520
+
521
+ .pricing-card.popular {
522
+ border: 2px solid var(--primary);
523
+ position: relative;
524
+ transform: scale(1.05);
525
+ }
526
+
527
+ .popular-tag {
528
+ position: absolute;
529
+ top: -15px;
530
+ left: 50%;
531
+ transform: translateX(-50%);
532
+ background: var(--gradient);
533
+ color: white;
534
+ padding: 5px 20px;
535
+ border-radius: 50px;
536
+ font-size: 14px;
537
+ font-weight: 600;
538
+ }
539
+
540
+ .pricing-card:hover {
541
+ transform: translateY(-10px);
542
+ box-shadow: var(--shadow-hover);
543
+ }
544
+
545
+ .pricing-card h3 {
546
+ font-size: 24px;
547
+ margin-bottom: 20px;
548
+ }
549
+
550
+ .price {
551
+ font-family: 'Space Grotesk', sans-serif;
552
+ font-size: 48px;
553
+ margin-bottom: 20px;
554
+ background: var(--gradient);
555
+ -webkit-background-clip: text;
556
+ -webkit-text-fill-color: transparent;
557
+ background-clip: text;
558
+ }
559
+
560
+ .price span {
561
+ font-size: 16px;
562
+ color: var(--gray);
563
+ }
564
+
565
+ .pricing-features {
566
+ margin: 30px 0;
567
+ text-align: left;
568
+ }
569
+
570
+ .pricing-features li {
571
+ margin-bottom: 10px;
572
+ position: relative;
573
+ padding-left: 25px;
574
+ color: var(--gray);
575
+ }
576
+
577
+ .pricing-features li::before {
578
+ content: '\f00c';
579
+ font-family: 'Font Awesome 6 Free';
580
+ font-weight: 900;
581
+ position: absolute;
582
+ left: 0;
583
+ color: var(--success);
584
+ }
585
+
586
+ /* CTA Section */
587
+ .cta {
588
+ background: var(--gradient);
589
+ color: white;
590
+ text-align: center;
591
+ padding: 100px 0;
592
+ position: relative;
593
+ overflow: hidden;
594
+ }
595
+
596
+ .cta::before {
597
+ content: '';
598
+ position: absolute;
599
+ width: 400px;
600
+ height: 400px;
601
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
602
+ top: -100px;
603
+ right: -100px;
604
+ border-radius: 50%;
605
+ }
606
+
607
+ .cta::after {
608
+ content: '';
609
+ position: absolute;
610
+ width: 600px;
611
+ height: 600px;
612
+ background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
613
+ bottom: -300px;
614
+ left: -300px;
615
+ border-radius: 50%;
616
+ }
617
+
618
+ .cta-content {
619
+ position: relative;
620
+ z-index: 1;
621
+ }
622
+
623
+ .cta h2 {
624
+ font-size: 42px;
625
+ margin-bottom: 20px;
626
+ }
627
+
628
+ .cta p {
629
+ max-width: 600px;
630
+ margin: 0 auto 30px;
631
+ opacity: 0.9;
632
+ font-size: 18px;
633
+ }
634
+
635
+ .cta .btn-outline {
636
+ background: transparent;
637
+ border: 2px solid white;
638
+ color: white;
639
+ }
640
+
641
+ .cta .btn-outline:hover {
642
+ background: white;
643
+ color: var(--primary);
644
+ }
645
+
646
+ /* Footer */
647
+ footer {
648
+ background: var(--dark);
649
+ color: white;
650
+ padding: 100px 0 30px;
651
+ }
652
+
653
+ .footer-content {
654
+ display: grid;
655
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
656
+ gap: 40px;
657
+ margin-bottom: 60px;
658
+ }
659
+
660
+ .footer-column h3 {
661
+ margin-bottom: 25px;
662
+ font-size: 20px;
663
+ position: relative;
664
+ display: inline-block;
665
+ }
666
+
667
+ .footer-column h3::after {
668
+ content: '';
669
+ position: absolute;
670
+ width: 40px;
671
+ height: 3px;
672
+ background: var(--gradient-accent);
673
+ bottom: -10px;
674
+ left: 0;
675
+ border-radius: 3px;
676
+ }
677
+
678
+ .footer-links {
679
+ list-style: none;
680
+ }
681
+
682
+ .footer-links li {
683
+ margin-bottom: 12px;
684
+ }
685
+
686
+ .footer-links a {
687
+ color: #CBD5E0;
688
+ text-decoration: none;
689
+ transition: all 0.3s;
690
+ }
691
+
692
+ .footer-links a:hover {
693
+ color: white;
694
+ padding-left: 5px;
695
+ }
696
+
697
+ .social-links {
698
+ display: flex;
699
+ margin-top: 20px;
700
+ }
701
+
702
+ .social-links a {
703
+ width: 40px;
704
+ height: 40px;
705
+ border-radius: 50%;
706
+ background: rgba(255, 255, 255, 0.1);
707
+ display: flex;
708
+ align-items: center;
709
+ justify-content: center;
710
+ margin-right: 10px;
711
+ color: white;
712
+ transition: all 0.3s;
713
+ }
714
+
715
+ .social-links a:hover {
716
+ background: var(--gradient-accent);
717
+ transform: translateY(-3px);
718
+ }
719
+
720
+ .footer-bottom {
721
+ text-align: center;
722
+ padding-top: 30px;
723
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
724
+ font-size: 14px;
725
+ color: #CBD5E0;
726
+ }
727
+
728
+ /* Responsive */
729
+ @media (max-width: 1200px) {
730
+ .hero h1 {
731
+ font-size: 48px;
732
+ }
733
+ }
734
+
735
+ @media (max-width: 992px) {
736
+ .hero h1 {
737
+ font-size: 42px;
738
+ }
739
+
740
+ .section-title h2 {
741
+ font-size: 36px;
742
+ }
743
+
744
+ .step {
745
+ max-width: 250px;
746
+ }
747
+
748
+ .feature-card, .pricing-card, .testimonial-card {
749
+ padding: 30px;
750
+ }
751
+ }
752
+
753
+ @media (max-width: 768px) {
754
+ .menu-toggle {
755
+ display: block;
756
+ }
757
+
758
+ .nav-links {
759
+ position: absolute;
760
+ top: 100%;
761
+ left: 0;
762
+ width: 100%;
763
+ background: white;
764
+ flex-direction: column;
765
+ padding: 20px;
766
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
767
+ transform: translateY(-150%);
768
+ transition: all 0.3s;
769
+ border-radius: 0 0 12px 12px;
770
+ }
771
+
772
+ .nav-links.active {
773
+ transform: translateY(0);
774
+ }
775
+
776
+ .nav-links li {
777
+ margin: 15px 0;
778
+ }
779
+
780
+ .hero {
781
+ padding: 150px 0 80px;
782
+ }
783
+
784
+ .hero h1 {
785
+ font-size: 36px;
786
+ }
787
+
788
+ .hero p {
789
+ font-size: 18px;
790
+ }
791
+
792
+ .hero-buttons {
793
+ display: flex;
794
+ flex-direction: column;
795
+ align-items: center;
796
+ }
797
+
798
+ .btn-outline {
799
+ margin-left: 0;
800
+ margin-top: 15px;
801
+ }
802
+
803
+ .step {
804
+ max-width: 100%;
805
+ margin-bottom: 30px;
806
+ }
807
+
808
+ .step:not(:last-child)::after {
809
+ display: none;
810
+ }
811
+
812
+ .cta h2 {
813
+ font-size: 32px;
814
+ }
815
+ }
816
+
817
+ @media (max-width: 576px) {
818
+ .hero h1 {
819
+ font-size: 32px;
820
+ }
821
+
822
+ .section {
823
+ padding: 80px 0;
824
+ }
825
+
826
+ .demo-tabs {
827
+ flex-direction: column;
828
+ border-bottom: none;
829
+ }
830
+
831
+ .demo-tab {
832
+ border-bottom: 1px solid #eee;
833
+ margin-right: 0;
834
+ border-left: 3px solid transparent;
835
+ }
836
+
837
+ .demo-tab.active {
838
+ border-bottom: 1px solid #eee;
839
+ border-left: 3px solid var(--primary);
840
+ }
841
+ }
842
+
843
+ /* Animations */
844
+ @keyframes fadeIn {
845
+ from { opacity: 0; transform: translateY(20px); }
846
+ to { opacity: 1; transform: translateY(0); }
847
+ }
848
+
849
+ .fade-in {
850
+ opacity: 0;
851
+ animation: fadeIn 0.8s ease forwards;
852
+ }
853
+
854
+ .delay-1 { animation-delay: 0.2s; }
855
+ .delay-2 { animation-delay: 0.4s; }
856
+ .delay-3 { animation-delay: 0.6s; }
857
+ .delay-4 { animation-delay: 0.8s; }
858
+ </style>
859
+ </head>
860
+ <body>
861
+ <header>
862
+ <div class="container">
863
+ <nav>
864
+ <div class="logo">
865
+ <i class="fas fa-atom"></i>
866
+ <span>Pingax AI</span>
867
+ </div>
868
+ <div class="menu-toggle">
869
+ <i class="fas fa-bars"></i>
870
+ </div>
871
+ <ul class="nav-links">
872
+ <li><a href="#services">Services</a></li>
873
+ <li><a href="#use-cases">Use Cases</a></li>
874
+ <li><a href="#mlops">MLOps</a></li>
875
+ <li><a href="#testimonials">Testimonials</a></li>
876
+ <li><a href="#pricing">Pricing</a></li>
877
+ <li><a href="#contact">Contact</a></li>
878
+ </ul>
879
+ </nav>
880
+ </div>
881
+ </header>
882
+
883
+ <section class="hero">
884
+ <div class="container">
885
+ <div class="hero-content">
886
+ <h1 class="fade-in">Enterprise AI Services & MLOps Solutions</h1>
887
+ <p class="fade-in delay-1">We architect, deploy and manage cutting-edge AI systems to transform your business operations and customer experiences.</p>
888
+ <div class="hero-buttons">
889
+ <a href="#services" class="btn fade-in delay-2">Explore Services</a>
890
+ <a href="#use-cases" class="btn btn-outline fade-in delay-3">See Demos</a>
891
+ </div>
892
+ </div>
893
+ </div>
894
+ </section>
895
+
896
+ <section id="services" class="section">
897
+ <div class="container">
898
+ <div class="section-title">
899
+ <h2>Our AI/ML Services</h2>
900
+ <p>Comprehensive artificial intelligence and machine learning solutions tailored to your business needs</p>
901
+ </div>
902
+ <div class="features-grid">
903
+ <div class="feature-card fade-in">
904
+ <div class="feature-icon">
905
+ <i class="fas fa-robot"></i>
906
+ </div>
907
+ <h3>AI Agents Development</h3>
908
+ <p>Custom AI agents for customer service, sales automation, and business process optimization powered by LLMs and reinforcement learning.</p>
909
+ </div>
910
+ <div class="feature-card fade-in delay-1">
911
+ <div class="feature-icon">
912
+ <i class="fas fa-cloud"></i>
913
+ </div>
914
+ <h3>Cloud MLOps</h3>
915
+ <p>End-to-end machine learning operations on AWS, Azure, and GCP with CI/CD pipelines, model monitoring, and automated retraining.</p>
916
+ </div>
917
+ <div class="feature-card fade-in delay-2">
918
+ <div class="feature-icon">
919
+ <i class="fas fa-shopping-cart"></i>
920
+ </div>
921
+ <h3>Ecommerce AI</h3>
922
+ <p>Recommendation engines, dynamic pricing, visual search, and personalized marketing to boost conversions and customer LTV.</p>
923
+ </div>
924
+ <div class="feature-card fade-in delay-3">
925
+ <div class="feature-icon">
926
+ <i class="fas fa-chart-network"></i>
927
+ </div>
928
+ <h3>Predictive Analytics</h3>
929
+ <p>Forecast demand, predict churn, and optimize inventory with our time-series and predictive modeling expertise.</p>
930
+ </div>
931
+ <div class="feature-card fade-in delay-1">
932
+ <div class="feature-icon">
933
+ <i class="fas fa-comments"></i>
934
+ </div>
935
+ <h3>Conversational AI</h3>
936
+ <p>Chatbots, voice assistants, and contact center automation using NLP and generative AI technologies.</p>
937
+ </div>
938
+ <div class="feature-card fade-in delay-2">
939
+ <div class="feature-icon">
940
+ <i class="fas fa-cogs"></i>
941
+ </div>
942
+ <h3>AI Optimization</h3>
943
+ <p>Performance tuning, model compression, and hardware acceleration for production-grade AI applications.</p>
944
+ </div>
945
+ </div>
946
+
947
+ <div class="section-title" style="margin-top: 80px;">
948
+ <h2>Cloud Platform Expertise</h2>
949
+ <p>We deploy and manage AI solutions across all major cloud providers</p>
950
+ </div>
951
+ <div class="cloud-platforms fade-in">
952
+ <div class="platform aws">
953
+ <i class="fab fa-aws"></i>
954
+ <span>AWS AI/ML Services</span>
955
+ </div>
956
+ <div class="platform azure">
957
+ <i class="fab fa-microsoft"></i>
958
+ <span>Azure Machine Learning</span>
959
+ </div>
960
+ <div class="platform gcp">
961
+ <i class="fab fa-google"></i>
962
+ <span>Google Vertex AI</span>
963
+ </div>
964
+ </div>
965
+ </div>
966
+ </section>
967
+
968
+ <section id="use-cases" class="demo-section">
969
+ <div class="container">
970
+ <div class="section-title">
971
+ <h2>AI Use Case Demonstrations</h2>
972
+ <p>Explore interactive demos of our AI solutions for ecommerce and beyond</p>
973
+ </div>
974
+
975
+ <div class="demo-container">
976
+ <div class="demo-tabs">
977
+ <div class="demo-tab active" onclick="showDemo('similar')">Similar Product Recommendations</div>
978
+ <div class="demo-tab" onclick="showDemo('crosssell')">Cross-Sell/Upsell Engine</div>
979
+ <div class="demo-tab" onclick="showDemo('segmentation')">Customer Segmentation</div>
980
+ <div class="demo-tab" onclick="showDemo('chatbot')">AI Shopping Assistant</div>
981
+ <div class="demo-tab" onclick="showDemo('pricing')">Dynamic Pricing Model</div>
982
+ </div>
983
+
984
+ <div class="demo-content">
985
+ <iframe id="similarDemo" class="demo-frame" src="https://huggingface.co/spaces/recsys/fashion-product-recommendation" frameborder="0"></iframe>
986
+ <iframe id="crosssellDemo" class="demo-frame" src="https://huggingface.co/spaces/recsys/cross-sell-recommender" style="display:none;" frameborder="0"></iframe>
987
+ <iframe id="segmentationDemo" class="demo-frame" src="https://huggingface.co/spaces/clustering/customer-segmentation" style="display:none;" frameborder="0"></iframe>
988
+ <iframe id="chatbotDemo" class="demo-frame" src="https://huggingface.co/spaces/conversational-ai/shopping-assistant" style="display:none;" frameborder="0"></iframe>
989
+ <iframe id="pricingDemo" class="demo-frame" src="https://huggingface.co/spaces/pricing/dynamic-pricing-simulator" style="display:none;" frameborder="0"></iframe>
990
+ </div>
991
+ </div>
992
+ </div>
993
+ </section>
994
+
995
+ <section id="mlops" class="section works-section">
996
+ <div class="container">
997
+ <div class="section-title">
998
+ <h2>MLOps & AIOps Framework</h2>
999
+ <p>Our proven methodology for deploying and managing AI at scale</p>
1000
+ </div>
1001
+ <div class="steps">
1002
+ <div class="step fade-in">
1003
+ <div class="step-number">1</div>
1004
+ <div class="step-content">
1005
+ <h3>Model Development</h3>
1006
+ <p>Custom AI model development with proper version control, experiment tracking, and reproducibility using MLflow/DVC.</p>
1007
+ </div>
1008
+ </div>
1009
+ <div class="step fade-in delay-1">
1010
+ <div class="step-number">2</div>
1011
+ <div class="step-content">
1012
+ <h3>CI/CD Pipelines</h3>
1013
+ <p>Automated testing, containerization, and deployment pipelines with GitHub Actions, Jenkins, or cloud-native tools.</p>
1014
+ </div>
1015
+ </div>
1016
+ <div class="step fade-in delay-2">
1017
+ <div class="step-number">3</div>
1018
+ <div class="step-content">
1019
+ <h3>Monitoring & Governance</h3>
1020
+ <p>Performance monitoring, data drift detection, model explainability, and compliance tracking in production.</p>
1021
+ </div>
1022
+ </div>
1023
+ <div class="step fade-in delay-3">
1024
+ <div class="step-number">4</div>
1025
+ <div class="step-content">
1026
+ <h3>Auto-Retraining</h3>
1027
+ <p>Scheduled and trigger-based model retraining with automated A/B testing and canary deployments.</p>
1028
+ </div>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+ </section>
1033
+
1034
+ <section class="section">
1035
+ <div class="container">
1036
+ <div class="stats">
1037
+ <div class="stat-item fade-in">
1038
+ <h3>10x</h3>
1039
+ <p>Faster deployment than in-house solutions</p>
1040
+ </div>
1041
+ <div class="stat-item fade-in delay-1">
1042
+ <h3>99.9%</h3>
1043
+ <p>Model uptime SLA across deployments</p>
1044
+ </div>
1045
+ <div class="stat-item fade-in delay-2">
1046
+ <h3>50+</h3>
1047
+ <p>Production AI models deployed</p>
1048
+ </div>
1049
+ <div class="stat-item fade-in delay-3">
1050
+ <h3>3x</h3>
1051
+ <p>ROI on AI investments</p>
1052
+ </div>
1053
+ </div>
1054
+ </div>
1055
+ </section>
1056
+
1057
+ <section id="testimonials" class="section testimonials">
1058
+ <div class="container">
1059
+ <div class="section-title">
1060
+ <h2>Client Success Stories</h2>
1061
+ <p>Business leaders share their experiences with Pingax AI solutions</p>
1062
+ </div>
1063
+ <div class="testimonial-grid">
1064
+ <div class="testimonial-card fade-in">
1065
+ <div class="testimonial-header">
1066
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Amanda Chen" class="testimonial-avatar">
1067
+ <div class="testimonial-name">
1068
+ <h4>Amanda Chen</h4>
1069
+ <p>CTO, StyleHub</p>
1070
+ </div>
1071
+ </div>
1072
+ <div class="testimonial-content">
1073
+ "Pingax's recommendation engine increased our conversion rate by 42% while reducing our infrastructure costs through their optimized MLOps approach on AWS. Their team seamlessly integrated with our ecommerce platform."
1074
+ </div>
1075
+ <div class="testimonial-rating">
1076
+ <i class="fas fa-star"></i>
1077
+ <i class="fas fa-star"></i>
1078
+ <i class="fas fa-star"></i>
1079
+ <i class="fas fa-star"></i>
1080
+ <i class="fas fa-star"></i>
1081
+ </div>
1082
+ </div>
1083
+ <div class="testimonial-card fade-in delay-1">
1084
+ <div class="testimonial-header">
1085
+ <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Raj Patel" class="testimonial-avatar">
1086
+ <div class="testimonial-name">
1087
+ <h4>Raj Patel</h4>
1088
+ <p>Head of AI, Global Retail Corp</p>
1089
+ </div>
1090
+ </div>
1091
+ <div class="testimonial-content">
1092
+ "Their MLOps framework standardized our machine learning lifecycle across regions. We now have 18 models in production with automated monitoring and retraining, something that took us years to achieve internally."
1093
+ </div>
1094
+ <div class="testimonial-rating">
1095
+ <i class="fas fa-star"></i>
1096
+ <i class="fas fa-star"></i>
1097
+ <i class="fas fa-star"></i>
1098
+ <i class="fas fa-star"></i>
1099
+ <i class="fas fa-star"></i>
1100
+ </div>
1101
+ </div>
1102
+ <div class="testimonial-card fade-in delay-2">
1103
+ <div class="testimonial-header">
1104
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sophia Williams" class="testimonial-avatar">
1105
+ <div class="testimonial-name">
1106
+ <h4>Sophia Williams</h4>
1107
+ <p>CEO, LuxeHome</p>
1108
+ </div>
1109
+ </div>
1110
+ <div class="testimonial-content">
1111
+ "The AI shopping assistant Pingax developed reduced our customer service costs by 60% while improving satisfaction scores. Their expertise in conversational AI was evident throughout the project."
1112
+ </div>
1113
+ <div class="testimonial-rating">
1114
+ <i class="fas fa-star"></i>
1115
+ <i class="fas fa-star"></i>
1116
+ <i class="fas fa-star"></i>
1117
+ <i class="fas fa-star"></i>
1118
+ <i class="fas fa-star-half-alt"></i>
1119
+ </div>
1120
+ </div>
1121
+ </div>
1122
+ </div>
1123
+ </section>
1124
+
1125
+ <section id="pricing" class="section">
1126
+ <div class="container">
1127
+ <div class="section-title">
1128
+ <h2>Flexible Engagement Models</h2>
1129
+ <p>Choose the planning that fits your AI adoption stage</p>
1130
+ </div>
1131
+ <div class="pricing-grid">
1132
+ <div class="pricing-card fade-in">
1133
+ <h3>Starter Package</h3>
1134
+ <div class="price">$4,999<span>/month</span></div>
1135
+ <p>For businesses beginning AI adoption</p>
1136
+ <ul class="pricing-features">
1137
+ <li>1 AI use case implementation</li>
1138
+ <li>Basic MLOps setup</li>
1139
+ <li>Monthly model monitoring</li>
1140
+ <li>Email & ticket support</li>
1141
+ <li>5 consulting hours/month</li>
1142
+ </ul>
1143
+ <a href="#contact" class="btn">Get Started</a>
1144
+ </div>
1145
+ <div class="pricing-card popular fade-in delay-1">
1146
+ <div class="popular-tag">Most Popular</div>
1147
+ <h3>Enterprise Scale</h3>
1148
+ <div class="price">$14,999<span>/month</span></div>
1149
+ <p>For scaling AI across organization</p>
1150
+ <ul class="pricing-features">
1151
+ <li>Up to 3 AI use cases</li>
1152
+ <li>Advanced MLOps/AIOps</li>
1153
+ <li>Real-time monitoring</li>
1154
+ <li>24/7 support SLA</li>
1155
+ <li>20 consulting hours/month</li>
1156
+ <li>Dedicated CSM</li>
1157
+ </ul>
1158
+ <a href="#contact" class="btn">Contact Sales</a>
1159
+ </div>
1160
+ <div class="pricing-card fade-in delay-2">
1161
+ <h3>Custom AI Factory</h3>
1162
+ <div class="price">Let's Talk</div>
1163
+ <p>Tailored solutions for large deployments</p>
1164
+ <ul class="pricing-features">
1165
+ <li>Custom AI solutions</li>
1166
+ <li>End-to-end MLOps</li>
1167
+ <li>Cloud architecture</li>
1168
+ <li>Dedicated AI team</li>
1169
+ <li>Training & knowledge transfer</li>
1170
+ <li>Enterprise security</li>
1171
+ </ul>
1172
+ <a href="#contact" class="btn">Schedule Consultation</a>
1173
+ </div>
1174
+ </div>
1175
+ </div>
1176
+ </section>
1177
+
1178
+ <section class="cta">
1179
+ <div class="container">
1180
+ <div class="cta-content">
1181
+ <h2 class="fade-in">Ready to Transform Your Business with AI?</h2>
1182
+ <p class="fade-in delay-1">Our team of AI specialists will help you design, deploy and manage cutting-edge solutions tailored to your needs.</p>
1183
+ <a href="#pricing" class="btn fade-in delay-2">View Plans</a>
1184
+ <a href="#contact" class="btn btn-outline fade-in delay-3">Book Discovery Call</a>
1185
+ </div>
1186
+ </div>
1187
+ </section>
1188
+
1189
+ <footer id="contact">
1190
+ <div class="container">
1191
+ <div class="footer-content">
1192
+ <div class="footer-column">
1193
+ <h3>Pingax AI</h3>
1194
+ <p>Enterprise AI services and MLOps solutions to power your digital transformation across cloud platforms.</p>
1195
+ <div class="social-links">
1196
+ <a href="#"><i class="fab fa-twitter"></i></a>
1197
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
1198
+ <a href="#"><i class="fab fa-github"></i></a>
1199
+ <a href="#"><i class="fab fa-youtube"></i></a>
1200
+ </div>
1201
+ </div>
1202
+ <div class="footer-column">
1203
+ <h3>Services</h3>
1204
+ <ul class="footer-links">
1205
+ <li><a href="#">AI Agents Development</a></li>
1206
+ <li><a href="#">MLOps Implementation</a></li>
1207
+ <li><a href="#">Ecommerce AI</a></li>
1208
+ <li><a href="#">Predictive Analytics</a></li>
1209
+ <li><a href="#">Conversational AI</a></li>
1210
+ </ul>
1211
+ </div>
1212
+ <div class="footer-column">
1213
+ <h3>Platforms</h3>
1214
+ <ul class="footer-links">
1215
+ <li><a href="#">AWS Machine Learning</a></li>
1216
+ <li><a href="#">Azure AI Services</a></li>
1217
+ <li><a href="#">Google Vertex AI</a></li>
1218
+ <li><a href="#">Hugging Face</a></li>
1219
+ <li><a href="#">OpenAI Integration</a></li>
1220
+ </ul>
1221
+ </div>
1222
+ <div class="footer-column">
1223
+ <h3>Company</h3>
1224
+ <ul class="footer-links">
1225
+ <li><a href="#">About Us</a></li>
1226
+ <li><a href="#">Case Studies</a></li>
1227
+ <li><a href="#">Careers</a></li>
1228
+ <li><a href="#">Blog</a></li>
1229
+ <li><a href="#">Contact Us</a></li>
1230
+ </ul>
1231
+ </div>
1232
+ <div class="footer-column">
1233
+ <h3>Contact</h3>
1234
+ <ul class="footer-links">
1235
+ <li><i class="fas fa-map-marker-alt"></i> San Francisco, CA</li>
1236
+ <li><i class="fas fa-phone"></i> (555) 123-4567</li>
1237
+ <li><i class="fas fa-envelope"></i> hello@pingax.ai</li>
1238
+ </ul>
1239
+ </div>
1240
+ </div>
1241
+ <div class="footer-bottom">
1242
+ <p>&copy; 2023 Pingax AI Technologies. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
1243
+ </div>
1244
+ </div>
1245
+ </footer>
1246
+
1247
+ <script>
1248
+ // Mobile Menu Toggle
1249
+ const menuToggle = document.querySelector('.menu-toggle');
1250
+ const navLinks = document.querySelector('.nav-links');
1251
+
1252
+ menuToggle.addEventListener('click', () => {
1253
+ navLinks.classList.toggle('active');
1254
+ menuToggle.innerHTML = navLinks.classList.contains('active') ?
1255
+ '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
1256
+ });
1257
+
1258
+ // Close menu when clicking on links
1259
+ document.querySelectorAll('.nav-links a').forEach(link => {
1260
+ link.addEventListener('click', () => {
1261
+ navLinks.classList.remove('active');
1262
+ menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
1263
+ });
1264
+ });
1265
+
1266
+ // Smooth scrolling for anchor links
1267
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1268
+ anchor.addEventListener('click', function(e) {
1269
+ e.preventDefault();
1270
+
1271
+ const targetId = this.getAttribute('href');
1272
+ const targetElement = document.querySelector(targetId);
1273
+
1274
+ if (targetElement) {
1275
+ window.scrollTo({
1276
+ top: targetElement.offsetTop - 80,
1277
+ behavior: 'smooth'
1278
+ });
1279
+ }
1280
+ });
1281
+ });
1282
+
1283
+ // Demo tabs functionality
1284
+ function showDemo(demoId) {
1285
+ // Hide all demo frames
1286
+ document.querySelectorAll('.demo-frame').forEach(frame => {
1287
+ frame.style.display = 'none';
1288
+ });
1289
+
1290
+ // Remove active class from all tabs
1291
+ document.querySelectorAll('.demo-tab').forEach(tab => {
1292
+ tab.classList.remove('active');
1293
+ });
1294
+
1295
+ // Show selected demo and mark tab as active
1296
+ document.getElementById(demoId + 'Demo').style.display = 'block';
1297
+ event.currentTarget.classList.add('active');
1298
+ }
1299
+
1300
+ // Animation on scroll
1301
+ function checkScroll() {
1302
+ const elements = document.querySelectorAll('.fade-in');
1303
+ elements.forEach(element => {
1304
+ const elementPosition = element.getBoundingClientRect().top;
1305
+ const screenPosition = window.innerHeight / 1.2;
1306
+
1307
+ if (elementPosition < screenPosition) {
1308
+ element.style.opacity = '1';
1309
+ element.style.transform = 'translateY(0)';
1310
+ }
1311
+ });
1312
+ }
1313
+
1314
+ window.addEventListener('scroll', checkScroll);
1315
+ window.addEventListener('load', checkScroll);
1316
+ </script>
1317
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1318
+ </html>