Hugging Face's logo

Spaces:
manideepreddym
/
kritova
Running

App Files Community
manideepreddym commited on
Commit
da10d5d
·
verified ·
1 Parent(s): c5c179e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1156 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kritova
3
- emoji: 🐨
4
- colorFrom: indigo
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: kritova
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,1156 @@
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>Kritova - A New Artificial Beginning</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #4a00e0;
11
+ --secondary: #8e2de2;
12
+ --accent: #00c6fb;
13
+ --dark: #1a1a2e;
14
+ --light: #f8f9fa;
15
+ }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22
+ }
23
+
24
+ body {
25
+ background-color: #f5f7ff;
26
+ color: var(--dark);
27
+ overflow-x: hidden;
28
+ line-height: 1.6;
29
+ }
30
+
31
+ .gradient-bg {
32
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
33
+ }
34
+
35
+ /* Navigation */
36
+ nav {
37
+ position: fixed;
38
+ top: 0;
39
+ left: 0;
40
+ width: 100%;
41
+ padding: 1.5rem 5%;
42
+ display: flex;
43
+ justify-content: space-between;
44
+ align-items: center;
45
+ z-index: 1000;
46
+ transition: all 0.3s ease;
47
+ }
48
+
49
+ nav.scrolled {
50
+ background: rgba(255, 255, 255, 0.95);
51
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
52
+ padding: 1rem 5%;
53
+ }
54
+
55
+ .logo {
56
+ display: flex;
57
+ align-items: center;
58
+ font-weight: 700;
59
+ font-size: 1.5rem;
60
+ color: white;
61
+ text-decoration: none;
62
+ }
63
+
64
+ nav.scrolled .logo {
65
+ color: var(--primary);
66
+ }
67
+
68
+ .logo span {
69
+ color: var(--accent);
70
+ }
71
+
72
+ .nav-links {
73
+ display: flex;
74
+ list-style: none;
75
+ }
76
+
77
+ .nav-links li {
78
+ margin-left: 2.5rem;
79
+ }
80
+
81
+ .nav-links a {
82
+ color: white;
83
+ text-decoration: none;
84
+ font-weight: 500;
85
+ transition: all 0.3s ease;
86
+ }
87
+
88
+ nav.scrolled .nav-links a {
89
+ color: var(--dark);
90
+ }
91
+
92
+ .nav-links a:hover {
93
+ color: var(--accent);
94
+ }
95
+
96
+ .cta-btn {
97
+ background-color: var(--accent);
98
+ color: white;
99
+ padding: 0.6rem 1.5rem;
100
+ border-radius: 50px;
101
+ font-weight: 600;
102
+ transition: all 0.3s ease;
103
+ }
104
+
105
+ .cta-btn:hover {
106
+ transform: translateY(-3px);
107
+ box-shadow: 0 10px 20px rgba(0, 198, 251, 0.3);
108
+ color: white;
109
+ }
110
+
111
+ .mobile-menu-btn {
112
+ display: none;
113
+ background: none;
114
+ border: none;
115
+ color: white;
116
+ font-size: 1.5rem;
117
+ cursor: pointer;
118
+ }
119
+
120
+ /* Hero Section */
121
+ .hero {
122
+ height: 100vh;
123
+ display: flex;
124
+ align-items: center;
125
+ padding: 0 5%;
126
+ position: relative;
127
+ overflow: hidden;
128
+ }
129
+
130
+ .hero::before {
131
+ content: '';
132
+ position: absolute;
133
+ top: 0;
134
+ left: 0;
135
+ width: 100%;
136
+ height: 100%;
137
+ background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
138
+ z-index: 1;
139
+ }
140
+
141
+ .hero-content {
142
+ position: relative;
143
+ z-index: 2;
144
+ max-width: 800px;
145
+ color: white;
146
+ }
147
+
148
+ .hero h1 {
149
+ font-size: 4rem;
150
+ margin-bottom: 1.5rem;
151
+ line-height: 1.2;
152
+ }
153
+
154
+ .hero h1 span {
155
+ color: var(--accent);
156
+ }
157
+
158
+ .hero p {
159
+ font-size: 1.2rem;
160
+ margin-bottom: 2rem;
161
+ opacity: 0.9;
162
+ }
163
+
164
+ .hero-btns {
165
+ display: flex;
166
+ gap: 1rem;
167
+ }
168
+
169
+ .primary-btn {
170
+ background-color: var(--accent);
171
+ color: white;
172
+ padding: 0.8rem 2rem;
173
+ border-radius: 50px;
174
+ font-weight: 600;
175
+ text-decoration: none;
176
+ transition: all 0.3s ease;
177
+ }
178
+
179
+ .secondary-btn {
180
+ background-color: transparent;
181
+ color: white;
182
+ padding: 0.8rem 2rem;
183
+ border-radius: 50px;
184
+ border: 2px solid white;
185
+ font-weight: 600;
186
+ text-decoration: none;
187
+ transition: all 0.3s ease;
188
+ }
189
+
190
+ .primary-btn:hover, .secondary-btn:hover {
191
+ transform: translateY(-3px);
192
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
193
+ }
194
+
195
+ .secondary-btn:hover {
196
+ background-color: rgba(255, 255, 255, 0.1);
197
+ }
198
+
199
+ .hero-image {
200
+ position: absolute;
201
+ right: 0;
202
+ top: 0;
203
+ height: 100%;
204
+ width: 60%;
205
+ object-fit: cover;
206
+ z-index: -1;
207
+ }
208
+
209
+ /* About Section */
210
+ .section {
211
+ padding: 6rem 5%;
212
+ }
213
+
214
+ .section-title {
215
+ text-align: center;
216
+ margin-bottom: 4rem;
217
+ }
218
+
219
+ .section-title h2 {
220
+ font-size: 2.5rem;
221
+ color: var(--dark);
222
+ position: relative;
223
+ display: inline-block;
224
+ padding-bottom: 1rem;
225
+ }
226
+
227
+ .section-title h2::after {
228
+ content: '';
229
+ position: absolute;
230
+ bottom: 0;
231
+ left: 50%;
232
+ transform: translateX(-50%);
233
+ width: 100px;
234
+ height: 4px;
235
+ background: linear-gradient(to right, var(--primary), var(--accent));
236
+ border-radius: 2px;
237
+ }
238
+
239
+ .about-content {
240
+ display: flex;
241
+ align-items: center;
242
+ gap: 4rem;
243
+ }
244
+
245
+ .about-image {
246
+ flex: 1;
247
+ position: relative;
248
+ }
249
+
250
+ .about-image img {
251
+ width: 100%;
252
+ border-radius: 10px;
253
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
254
+ transition: all 0.3s ease;
255
+ }
256
+
257
+ .about-image img:hover {
258
+ transform: scale(1.02);
259
+ }
260
+
261
+ .about-image::before {
262
+ content: '';
263
+ position: absolute;
264
+ width: 80%;
265
+ height: 80%;
266
+ border: 10px solid var(--primary);
267
+ right: -30px;
268
+ top: -30px;
269
+ z-index: -1;
270
+ border-radius: 10px;
271
+ opacity: 0.3;
272
+ }
273
+
274
+ .about-text {
275
+ flex: 1;
276
+ }
277
+
278
+ .about-text h3 {
279
+ font-size: 2rem;
280
+ margin-bottom: 1.5rem;
281
+ color: var(--primary);
282
+ }
283
+
284
+ .about-text p {
285
+ margin-bottom: 1.5rem;
286
+ color: #555;
287
+ }
288
+
289
+ .features {
290
+ display: grid;
291
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
292
+ gap: 2rem;
293
+ margin-top: 3rem;
294
+ }
295
+
296
+ .feature-item {
297
+ background-color: white;
298
+ padding: 2rem;
299
+ border-radius: 10px;
300
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
301
+ transition: all 0.3s ease;
302
+ }
303
+
304
+ .feature-item:hover {
305
+ transform: translateY(-10px);
306
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
307
+ }
308
+
309
+ .feature-icon {
310
+ font-size: 2.5rem;
311
+ color: var(--primary);
312
+ margin-bottom: 1rem;
313
+ }
314
+
315
+ .feature-item h4 {
316
+ font-size: 1.3rem;
317
+ margin-bottom: 1rem;
318
+ }
319
+
320
+ /* Services Section */
321
+ .services {
322
+ background-color: #f0f4ff;
323
+ }
324
+
325
+ .services-container {
326
+ display: grid;
327
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
328
+ gap: 2rem;
329
+ }
330
+
331
+ .service-card {
332
+ background-color: white;
333
+ border-radius: 10px;
334
+ overflow: hidden;
335
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
336
+ transition: all 0.3s ease;
337
+ }
338
+
339
+ .service-card:hover {
340
+ transform: translateY(-10px);
341
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
342
+ }
343
+
344
+ .service-img {
345
+ height: 200px;
346
+ overflow: hidden;
347
+ }
348
+
349
+ .service-img img {
350
+ width: 100%;
351
+ height: 100%;
352
+ object-fit: cover;
353
+ transition: all 0.5s ease;
354
+ }
355
+
356
+ .service-card:hover .service-img img {
357
+ transform: scale(1.1);
358
+ }
359
+
360
+ .service-content {
361
+ padding: 2rem;
362
+ }
363
+
364
+ .service-content h3 {
365
+ font-size: 1.5rem;
366
+ margin-bottom: 1rem;
367
+ color: var(--primary);
368
+ }
369
+
370
+ .service-content p {
371
+ margin-bottom: 1.5rem;
372
+ color: #555;
373
+ }
374
+
375
+ .read-more {
376
+ color: var(--primary);
377
+ font-weight: 600;
378
+ text-decoration: none;
379
+ display: inline-flex;
380
+ align-items: center;
381
+ }
382
+
383
+ .read-more i {
384
+ margin-left: 0.5rem;
385
+ transition: all 0.3s ease;
386
+ }
387
+
388
+ .read-more:hover i {
389
+ transform: translateX(5px);
390
+ }
391
+
392
+ /* Stats Section */
393
+ .stats {
394
+ background: linear-gradient(rgba(74, 0, 224, 0.9), rgba(142, 45, 226, 0.9)), url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
395
+ color: white;
396
+ text-align: center;
397
+ padding: 6rem 5%;
398
+ }
399
+
400
+ .stats-container {
401
+ display: grid;
402
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
403
+ gap: 3rem;
404
+ margin-top: 3rem;
405
+ }
406
+
407
+ .stat-item {
408
+ padding: 2rem;
409
+ }
410
+
411
+ .stat-number {
412
+ font-size: 3.5rem;
413
+ font-weight: 700;
414
+ margin-bottom: 0.5rem;
415
+ color: var(--accent);
416
+ }
417
+
418
+ .stat-text {
419
+ font-size: 1.2rem;
420
+ opacity: 0.9;
421
+ }
422
+
423
+ /* Testimonials */
424
+ .testimonials {
425
+ position: relative;
426
+ padding: 6rem 5%;
427
+ }
428
+
429
+ .testimonial-container {
430
+ max-width: 1200px;
431
+ margin: 0 auto;
432
+ position: relative;
433
+ }
434
+
435
+ .testimonial-slider {
436
+ display: flex;
437
+ overflow-x: auto;
438
+ scroll-snap-type: x mandatory;
439
+ scroll-behavior: smooth;
440
+ -webkit-overflow-scrolling: touch;
441
+ gap: 2rem;
442
+ padding: 2rem 0;
443
+ scrollbar-width: none;
444
+ }
445
+
446
+ .testimonial-slider::-webkit-scrollbar {
447
+ display: none;
448
+ }
449
+
450
+ .testimonial-card {
451
+ min-width: 350px;
452
+ background-color: white;
453
+ border-radius: 10px;
454
+ padding: 2rem;
455
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
456
+ scroll-snap-align: start;
457
+ }
458
+
459
+ .testimonial-header {
460
+ display: flex;
461
+ align-items: center;
462
+ margin-bottom: 1.5rem;
463
+ }
464
+
465
+ .testimonial-img {
466
+ width: 60px;
467
+ height: 60px;
468
+ border-radius: 50%;
469
+ overflow: hidden;
470
+ margin-right: 1rem;
471
+ }
472
+
473
+ .testimonial-img img {
474
+ width: 100%;
475
+ height: 100%;
476
+ object-fit: cover;
477
+ }
478
+
479
+ .testimonial-author h4 {
480
+ font-size: 1.2rem;
481
+ margin-bottom: 0.3rem;
482
+ }
483
+
484
+ .testimonial-author p {
485
+ color: #777;
486
+ font-size: 0.9rem;
487
+ }
488
+
489
+ .testimonial-rating {
490
+ color: #ffc107;
491
+ margin-top: 0.5rem;
492
+ }
493
+
494
+ .testimonial-content p {
495
+ font-style: italic;
496
+ color: #555;
497
+ }
498
+
499
+ .slider-nav {
500
+ display: flex;
501
+ justify-content: center;
502
+ margin-top: 2rem;
503
+ }
504
+
505
+ .slider-dot {
506
+ width: 12px;
507
+ height: 12px;
508
+ background-color: #ddd;
509
+ border-radius: 50%;
510
+ margin: 0 5px;
511
+ cursor: pointer;
512
+ transition: all 0.3s ease;
513
+ }
514
+
515
+ .slider-dot.active {
516
+ background-color: var(--primary);
517
+ }
518
+
519
+ /* CTA Section */
520
+ .cta-section {
521
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
522
+ color: white;
523
+ text-align: center;
524
+ padding: 6rem 5%;
525
+ position: relative;
526
+ overflow: hidden;
527
+ }
528
+
529
+ .cta-section::before {
530
+ content: '';
531
+ position: absolute;
532
+ top: -100px;
533
+ right: -100px;
534
+ width: 300px;
535
+ height: 300px;
536
+ border-radius: 50%;
537
+ background: rgba(255, 255, 255, 0.1);
538
+ }
539
+
540
+ .cta-section::after {
541
+ content: '';
542
+ position: absolute;
543
+ bottom: -50px;
544
+ left: -50px;
545
+ width: 200px;
546
+ height: 200px;
547
+ border-radius: 50%;
548
+ background: rgba(255, 255, 255, 0.1);
549
+ }
550
+
551
+ .cta-content {
552
+ position: relative;
553
+ z-index: 2;
554
+ max-width: 800px;
555
+ margin: 0 auto;
556
+ }
557
+
558
+ .cta-content h2 {
559
+ font-size: 2.5rem;
560
+ margin-bottom: 1.5rem;
561
+ }
562
+
563
+ .cta-content p {
564
+ margin-bottom: 2rem;
565
+ font-size: 1.1rem;
566
+ opacity: 0.9;
567
+ }
568
+
569
+ /* Footer */
570
+ footer {
571
+ background-color: var(--dark);
572
+ color: white;
573
+ padding: 6rem 5% 3rem;
574
+ }
575
+
576
+ .footer-container {
577
+ display: grid;
578
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
579
+ gap: 3rem;
580
+ margin-bottom: 4rem;
581
+ }
582
+
583
+ .footer-col h3 {
584
+ font-size: 1.3rem;
585
+ margin-bottom: 1.5rem;
586
+ position: relative;
587
+ display: inline-block;
588
+ }
589
+
590
+ .footer-col h3::after {
591
+ content: '';
592
+ position: absolute;
593
+ bottom: -10px;
594
+ left: 0;
595
+ width: 50px;
596
+ height: 3px;
597
+ background: linear-gradient(to right, var(--primary), var(--accent));
598
+ }
599
+
600
+ .footer-col p {
601
+ margin-bottom: 1.5rem;
602
+ opacity: 0.8;
603
+ }
604
+
605
+ .social-links {
606
+ display: flex;
607
+ gap: 1rem;
608
+ }
609
+
610
+ .social-links a {
611
+ display: flex;
612
+ align-items: center;
613
+ justify-content: center;
614
+ width: 40px;
615
+ height: 40px;
616
+ border-radius: 50%;
617
+ background-color: rgba(255, 255, 255, 0.1);
618
+ color: white;
619
+ transition: all 0.3s ease;
620
+ }
621
+
622
+ .social-links a:hover {
623
+ background-color: var(--accent);
624
+ transform: translateY(-3px);
625
+ }
626
+
627
+ .footer-links li {
628
+ list-style: none;
629
+ margin-bottom: 1rem;
630
+ }
631
+
632
+ .footer-links a {
633
+ color: rgba(255, 255, 255, 0.7);
634
+ text-decoration: none;
635
+ transition: all 0.3s ease;
636
+ }
637
+
638
+ .footer-links a:hover {
639
+ color: var(--accent);
640
+ padding-left: 5px;
641
+ }
642
+
643
+ .footer-contact p {
644
+ display: flex;
645
+ align-items: center;
646
+ margin-bottom: 1rem;
647
+ }
648
+
649
+ .footer-contact i {
650
+ margin-right: 1rem;
651
+ color: var(--accent);
652
+ }
653
+
654
+ .footer-bottom {
655
+ text-align: center;
656
+ padding-top: 3rem;
657
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
658
+ opacity: 0.7;
659
+ }
660
+
661
+ /* Responsive */
662
+ @media (max-width: 992px) {
663
+ .hero h1 {
664
+ font-size: 3rem;
665
+ }
666
+
667
+ .about-content {
668
+ flex-direction: column;
669
+ }
670
+
671
+ .about-image {
672
+ margin-bottom: 3rem;
673
+ }
674
+
675
+ .about-image::before {
676
+ right: -20px;
677
+ top: -20px;
678
+ }
679
+ }
680
+
681
+ @media (max-width: 768px) {
682
+ .nav-links {
683
+ position: fixed;
684
+ top: 0;
685
+ right: -100%;
686
+ width: 80%;
687
+ max-width: 350px;
688
+ height: 100vh;
689
+ background-color: white;
690
+ flex-direction: column;
691
+ align-items: center;
692
+ justify-content: center;
693
+ transition: all 0.5s ease;
694
+ box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
695
+ }
696
+
697
+ .nav-links.active {
698
+ right: 0;
699
+ }
700
+
701
+ .nav-links li {
702
+ margin: 1.5rem 0;
703
+ }
704
+
705
+ .nav-links a {
706
+ color: var(--dark);
707
+ font-size: 1.2rem;
708
+ }
709
+
710
+ .mobile-menu-btn {
711
+ display: block;
712
+ z-index: 1001;
713
+ }
714
+
715
+ nav.scrolled .mobile-menu-btn {
716
+ color: var(--dark);
717
+ }
718
+
719
+ .mobile-menu-btn.active {
720
+ color: var(--dark);
721
+ }
722
+
723
+ .hero {
724
+ text-align: center;
725
+ }
726
+
727
+ .hero-btns {
728
+ justify-content: center;
729
+ }
730
+
731
+ .hero-image {
732
+ width: 100%;
733
+ opacity: 0.3;
734
+ }
735
+
736
+ .section-title h2 {
737
+ font-size: 2rem;
738
+ }
739
+
740
+ .service-card {
741
+ max-width: 350px;
742
+ margin: 0 auto;
743
+ }
744
+ }
745
+
746
+ @media (max-width: 576px) {
747
+ .hero h1 {
748
+ font-size: 2.5rem;
749
+ }
750
+
751
+ .hero p {
752
+ font-size: 1rem;
753
+ }
754
+
755
+ .hero-btns {
756
+ flex-direction: column;
757
+ gap: 1rem;
758
+ }
759
+
760
+ .primary-btn, .secondary-btn {
761
+ width: 100%;
762
+ text-align: center;
763
+ }
764
+
765
+ .section {
766
+ padding: 4rem 5%;
767
+ }
768
+
769
+ .stat-number {
770
+ font-size: 2.5rem;
771
+ }
772
+
773
+ .stat-text {
774
+ font-size: 1rem;
775
+ }
776
+
777
+ .testimonial-card {
778
+ min-width: 280px;
779
+ }
780
+ }
781
+ </style>
782
+ </head>
783
+ <body>
784
+ <!-- Navigation -->
785
+ <nav>
786
+ <a href="#" class="logo">Krit<span>ova</span></a>
787
+ <ul class="nav-links">
788
+ <li><a href="#home">Home</a></li>
789
+ <li><a href="#about">About</a></li>
790
+ <li><a href="#services">Services</a></li>
791
+ <li><a href="#testimonials">Testimonials</a></li>
792
+ <li><a href="#contact">Contact</a></li>
793
+ <li><a href="#" class="cta-btn">Get Started</a></li>
794
+ </ul>
795
+ <button class="mobile-menu-btn">
796
+ <i class="fas fa-bars"></i>
797
+ </button>
798
+ </nav>
799
+
800
+ <!-- Hero Section -->
801
+ <section class="hero gradient-bg" id="home">
802
+ <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI Technology" class="hero-image">
803
+ <div class="hero-content">
804
+ <h1>A New <span>Artificial</span> Beginning</h1>
805
+ <p>Kritova is revolutionizing the way businesses leverage AI to drive innovation, efficiency, and growth. Our cutting-edge solutions are designed to transform your operations and help you stay ahead in the digital age.</p>
806
+ <div class="hero-btns">
807
+ <a href="#" class="primary-btn">Explore Solutions</a>
808
+ <a href="#" class="secondary-btn">Learn More</a>
809
+ </div>
810
+ </div>
811
+ </section>
812
+
813
+ <!-- About Section -->
814
+ <section class="section" id="about">
815
+ <div class="section-title">
816
+ <h2>Who We Are</h2>
817
+ </div>
818
+ <div class="about-content">
819
+ <div class="about-image">
820
+ <img src="https://images.unsplash.com/photo-1523961130370-4e2a61659a5f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="About Kritova">
821
+ </div>
822
+ <div class="about-text">
823
+ <h3>Redefining Possibilities with AI</h3>
824
+ <p>Founded in 2023, Kritova is at the forefront of artificial intelligence innovation. We combine deep technical expertise with a human-centered approach to create solutions that truly make a difference.</p>
825
+ <p>Our team of AI specialists, data scientists, and industry experts work tirelessly to push the boundaries of what's possible with machine learning, natural language processing, and computer vision technologies.</p>
826
+
827
+ <div class="features">
828
+ <div class="feature-item">
829
+ <div class="feature-icon">
830
+ <i class="fas fa-brain"></i>
831
+ </div>
832
+ <h4>Advanced AI</h4>
833
+ <p>State-of-the-art machine learning models tailored to your specific needs.</p>
834
+ </div>
835
+ <div class="feature-item">
836
+ <div class="feature-icon">
837
+ <i class="fas fa-rocket"></i>
838
+ </div>
839
+ <h4>Rapid Deployment</h4>
840
+ <p>Quick implementation with minimal disruption to your operations.</p>
841
+ </div>
842
+ <div class="feature-item">
843
+ <div class="feature-icon">
844
+ <i class="fas fa-shield-alt"></i>
845
+ </div>
846
+ <h4>Secure Solutions</h4>
847
+ <p>Enterprise-grade security to protect your data and assets.</p>
848
+ </div>
849
+ </div>
850
+ </div>
851
+ </div>
852
+ </section>
853
+
854
+ <!-- Services Section -->
855
+ <section class="section services" id="services">
856
+ <div class="section-title">
857
+ <h2>Our Services</h2>
858
+ </div>
859
+ <div class="services-container">
860
+ <div class="service-card">
861
+ <div class="service-img">
862
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI Consulting">
863
+ </div>
864
+ <div class="service-content">
865
+ <h3>AI Strategy Consulting</h3>
866
+ <p>We help organizations identify high-impact AI opportunities and create a roadmap for successful implementation and adoption.</p>
867
+ <a href="#" class="read-more">Learn more <i class="fas fa-arrow-right"></i></a>
868
+ </div>
869
+ </div>
870
+ <div class="service-card">
871
+ <div class="service-img">
872
+ <img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Custom AI Solutions">
873
+ </div>
874
+ <div class="service-content">
875
+ <h3>Custom AI Solutions</h3>
876
+ <p>Our team designs and develops bespoke AI systems tailored to solve your unique business challenges and drive tangible results.</p>
877
+ <a href="#" class="read-more">Learn more <i class="fas fa-arrow-right"></i></a>
878
+ </div>
879
+ </div>
880
+ <div class="service-card">
881
+ <div class="service-img">
882
+ <img src="https://images.unsplash.com/photo-1434626881859-194d67b2b86f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI Integration">
883
+ </div>
884
+ <div class="service-content">
885
+ <h3>AI Integration Services</h3>
886
+ <p>Seamlessly incorporate AI capabilities into your existing systems and workflows with our expert integration services.</p>
887
+ <a href="#" class="read-more">Learn more <i class="fas fa-arrow-right"></i></a>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ </section>
892
+
893
+ <!-- Stats Section -->
894
+ <section class="stats">
895
+ <div class="section-title">
896
+ <h2>By The Numbers</h2>
897
+ </div>
898
+ <div class="stats-container">
899
+ <div class="stat-item">
900
+ <div class="stat-number">150+</div>
901
+ <div class="stat-text">Satisfied Clients</div>
902
+ </div>
903
+ <div class="stat-item">
904
+ <div class="stat-number">40+</div>
905
+ <div class="stat-text">AI Experts</div>
906
+ </div>
907
+ <div class="stat-item">
908
+ <div class="stat-number">98%</div>
909
+ <div class="stat-text">Client Retention</div>
910
+ </div>
911
+ <div class="stat-item">
912
+ <div class="stat-number">3x</div>
913
+ <div class="stat-text">Average ROI</div>
914
+ </div>
915
+ </div>
916
+ </section>
917
+
918
+ <!-- Testimonials Section -->
919
+ <section class="section testimonials" id="testimonials">
920
+ <div class="section-title">
921
+ <h2>What Our Clients Say</h2>
922
+ </div>
923
+ <div class="testimonial-container">
924
+ <div class="testimonial-slider">
925
+ <div class="testimonial-card">
926
+ <div class="testimonial-header">
927
+ <div class="testimonial-img">
928
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client">
929
+ </div>
930
+ <div class="testimonial-author">
931
+ <h4>Sarah Johnson</h4>
932
+ <p>CEO, TechForward</p>
933
+ <div class="testimonial-rating">
934
+ <i class="fas fa-star"></i>
935
+ <i class="fas fa-star"></i>
936
+ <i class="fas fa-star"></i>
937
+ <i class="fas fa-star"></i>
938
+ <i class="fas fa-star"></i>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ <div class="testimonial-content">
943
+ <p>"Kritova's AI solutions transformed our customer service operations. We've seen a 70% reduction in response times and significantly improved customer satisfaction scores."</p>
944
+ </div>
945
+ </div>
946
+ <div class="testimonial-card">
947
+ <div class="testimonial-header">
948
+ <div class="testimonial-img">
949
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client">
950
+ </div>
951
+ <div class="testimonial-author">
952
+ <h4>Michael Chen</h4>
953
+ <p>CTO, Global Retail</p>
954
+ <div class="testimonial-rating">
955
+ <i class="fas fa-star"></i>
956
+ <i class="fas fa-star"></i>
957
+ <i class="fas fa-star"></i>
958
+ <i class="fas fa-star"></i>
959
+ <i class="fas fa-star-half-alt"></i>
960
+ </div>
961
+ </div>
962
+ </div>
963
+ <div class="testimonial-content">
964
+ <p>"The predictive analytics platform Kritova developed for us has revolutionized our inventory management, reducing waste by 45% while improving product availability."</p>
965
+ </div>
966
+ </div>
967
+ <div class="testimonial-card">
968
+ <div class="testimonial-header">
969
+ <div class="testimonial-img">
970
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client">
971
+ </div>
972
+ <div class="testimonial-author">
973
+ <h4>Emily Rodriguez</h4>
974
+ <p>Director, HealthFirst</p>
975
+ <div class="testimonial-rating">
976
+ <i class="fas fa-star"></i>
977
+ <i class="fas fa-star"></i>
978
+ <i class="fas fa-star"></i>
979
+ <i class="fas fa-star"></i>
980
+ <i class="fas fa-star"></i>
981
+ </div>
982
+ </div>
983
+ </div>
984
+ <div class="testimonial-content">
985
+ <p>"Their natural language processing system has dramatically improved our patient record analysis, saving us thousands of hours while improving accuracy."</p>
986
+ </div>
987
+ </div>
988
+ <div class="testimonial-card">
989
+ <div class="testimonial-header">
990
+ <div class="testimonial-img">
991
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client">
992
+ </div>
993
+ <div class="testimonial-author">
994
+ <h4>David Wilson</h4>
995
+ <p>VP Operations, FinSecure</p>
996
+ <div class="testimonial-rating">
997
+ <i class="fas fa-star"></i>
998
+ <i class="fas fa-star"></i>
999
+ <i class="fas fa-star"></i>
1000
+ <i class="fas fa-star"></i>
1001
+ <i class="far fa-star"></i>
1002
+ </div>
1003
+ </div>
1004
+ </div>
1005
+ <div class="testimonial-content">
1006
+ <p>"The fraud detection AI Kritova implemented has saved us millions by identifying sophisticated patterns we never could have caught manually."</p>
1007
+ </div>
1008
+ </div>
1009
+ </div>
1010
+ <div class="slider-nav">
1011
+ <div class="slider-dot active"></div>
1012
+ <div class="slider-dot"></div>
1013
+ <div class="slider-dot"></div>
1014
+ <div class="slider-dot"></div>
1015
+ </div>
1016
+ </div>
1017
+ </section>
1018
+
1019
+ <!-- CTA Section -->
1020
+ <section class="cta-section" id="contact">
1021
+ <div class="cta-content">
1022
+ <h2>Ready to Begin Your AI Journey?</h2>
1023
+ <p>Schedule a consultation with our experts to discover how Kritova can help your business harness the power of artificial intelligence.</p>
1024
+ <a href="#" class="primary-btn">Get Started Today</a>
1025
+ </div>
1026
+ </section>
1027
+
1028
+ <!-- Footer -->
1029
+ <footer>
1030
+ <div class="footer-container">
1031
+ <div class="footer-col">
1032
+ <h3>Kritova</h3>
1033
+ <p>A New Artificial Beginning. We're transforming businesses with cutting-edge AI solutions that drive real results.</p>
1034
+ <div class="social-links">
1035
+ <a href="#"><i class="fab fa-twitter"></i></a>
1036
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
1037
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
1038
+ <a href="#"><i class="fab fa-instagram"></i></a>
1039
+ </div>
1040
+ </div>
1041
+ <div class="footer-col">
1042
+ <h3>Quick Links</h3>
1043
+ <ul class="footer-links">
1044
+ <li><a href="#home">Home</a></li>
1045
+ <li><a href="#about">About Us</a></li>
1046
+ <li><a href="#services">Services</a></li>
1047
+ <li><a href="#testimonials">Case Studies</a></li>
1048
+ <li><a href="#">Blog</a></li>
1049
+ </ul>
1050
+ </div>
1051
+ <div class="footer-col">
1052
+ <h3>Services</h3>
1053
+ <ul class="footer-links">
1054
+ <li><a href="#">AI Consulting</a></li>
1055
+ <li><a href="#">Custom AI Solutions</a></li>
1056
+ <li><a href="#">AI Integration</a></li>
1057
+ <li><a href="#">Data Analytics</a></li>
1058
+ <li><a href="#">AI Training</a></li>
1059
+ </ul>
1060
+ </div>
1061
+ <div class="footer-col footer-contact">
1062
+ <h3>Contact Us</h3>
1063
+ <p><i class="fas fa-map-marker-alt"></i> 123 AI Boulevard, San Francisco, CA 94107</p>
1064
+ <p><i class="fas fa-phone-alt"></i> +1 (555) 123-4567</p>
1065
+ <p><i class="fas fa-envelope"></i> hello@kritova.com</p>
1066
+ </div>
1067
+ </div>
1068
+ <div class="footer-bottom">
1069
+ <p>&copy; 2023 Kritova. All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
1070
+ </div>
1071
+ </footer>
1072
+
1073
+ <script>
1074
+ // Mobile Menu Toggle
1075
+ const menuBtn = document.querySelector('.mobile-menu-btn');
1076
+ const navLinks = document.querySelector('.nav-links');
1077
+
1078
+ menuBtn.addEventListener('click', () => {
1079
+ navLinks.classList.toggle('active');
1080
+ menuBtn.classList.toggle('active');
1081
+
1082
+ // Change icon
1083
+ const icon = menuBtn.querySelector('i');
1084
+ if (navLinks.classList.contains('active')) {
1085
+ icon.classList.remove('fa-bars');
1086
+ icon.classList.add('fa-times');
1087
+ } else {
1088
+ icon.classList.remove('fa-times');
1089
+ icon.classList.add('fa-bars');
1090
+ }
1091
+ });
1092
+
1093
+ // Navbar Scroll Effect
1094
+ window.addEventListener('scroll', () => {
1095
+ const nav = document.querySelector('nav');
1096
+ nav.classList.toggle('scrolled', window.scrollY > 50);
1097
+ });
1098
+
1099
+ // Testimonial Slider
1100
+ const slider = document.querySelector('.testimonial-slider');
1101
+ const dots = document.querySelectorAll('.slider-dot');
1102
+ let currentSlide = 0;
1103
+
1104
+ dots.forEach((dot, index) => {
1105
+ dot.addEventListener('click', () => {
1106
+ currentSlide = index;
1107
+ updateSlider();
1108
+ });
1109
+ });
1110
+
1111
+ function updateSlider() {
1112
+ const slideWidth = document.querySelector('.testimonial-card').offsetWidth + 32; // card width + gap
1113
+ slider.scrollTo({
1114
+ left: currentSlide * slideWidth,
1115
+ behavior: 'smooth'
1116
+ });
1117
+
1118
+ dots.forEach((dot, index) => {
1119
+ dot.classList.toggle('active', index === currentSlide);
1120
+ });
1121
+ }
1122
+
1123
+ // Auto slide testimonials
1124
+ setInterval(() => {
1125
+ currentSlide = (currentSlide + 1) % dots.length;
1126
+ updateSlider();
1127
+ }, 5000);
1128
+
1129
+ // Smooth scrolling for all links
1130
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1131
+ anchor.addEventListener('click', function (e) {
1132
+ e.preventDefault();
1133
+
1134
+ if (this.getAttribute('href') === '#') return;
1135
+
1136
+ const targetId = this.getAttribute('href');
1137
+ const targetElement = document.querySelector(targetId);
1138
+
1139
+ if (targetElement) {
1140
+ window.scrollTo({
1141
+ top: targetElement.offsetTop - 80,
1142
+ behavior: 'smooth'
1143
+ });
1144
+
1145
+ // Close mobile menu if open
1146
+ if (navLinks.classList.contains('active')) {
1147
+ navLinks.classList.remove('active');
1148
+ menuBtn.querySelector('i').classList.remove('fa-times');
1149
+ menuBtn.querySelector('i').classList.add('fa-bars');
1150
+ }
1151
+ }
1152
+ });
1153
+ });
1154
+ </script>
1155
+ <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 <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>
1156
+ </html>