Hugging Face's logo

Spaces:
extrememicro
/
anycoder-0bf5ca98
Running

App Files Community
extrememicro commited on
Commit
0088bce
·
verified ·
1 Parent(s): b783f0d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1031 -19
index.html CHANGED
@@ -1,19 +1,1031 @@
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>Odoo Latest Version - Enterprise Resource Planning</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary: #8B5CF6;
12
+ --primary-dark: #7C3AED;
13
+ --secondary: #EC4899;
14
+ --accent: #06B6D4;
15
+ --dark: #1F2937;
16
+ --light: #F9FAFB;
17
+ --gray: #6B7280;
18
+ --white: #FFFFFF;
19
+ --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ }
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ line-height: 1.6;
32
+ color: var(--dark);
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ .container {
37
+ max-width: 1200px;
38
+ margin: 0 auto;
39
+ padding: 0 20px;
40
+ }
41
+
42
+ /* Header */
43
+ header {
44
+ position: fixed;
45
+ top: 0;
46
+ left: 0;
47
+ right: 0;
48
+ background: rgba(255, 255, 255, 0.95);
49
+ backdrop-filter: blur(10px);
50
+ box-shadow: var(--shadow);
51
+ z-index: 1000;
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .header-content {
56
+ display: flex;
57
+ justify-content: space-between;
58
+ align-items: center;
59
+ padding: 1rem 0;
60
+ }
61
+
62
+ .logo {
63
+ font-size: 1.5rem;
64
+ font-weight: 700;
65
+ color: var(--primary);
66
+ display: flex;
67
+ align-items: center;
68
+ gap: 0.5rem;
69
+ }
70
+
71
+ .logo i {
72
+ font-size: 2rem;
73
+ }
74
+
75
+ nav ul {
76
+ display: flex;
77
+ list-style: none;
78
+ gap: 2rem;
79
+ }
80
+
81
+ nav a {
82
+ text-decoration: none;
83
+ color: var(--dark);
84
+ font-weight: 500;
85
+ transition: color 0.3s ease;
86
+ position: relative;
87
+ }
88
+
89
+ nav a:hover {
90
+ color: var(--primary);
91
+ }
92
+
93
+ nav a::after {
94
+ content: '';
95
+ position: absolute;
96
+ bottom: -5px;
97
+ left: 0;
98
+ width: 0;
99
+ height: 2px;
100
+ background: var(--primary);
101
+ transition: width 0.3s ease;
102
+ }
103
+
104
+ nav a:hover::after {
105
+ width: 100%;
106
+ }
107
+
108
+ /* Hero Section */
109
+ .hero {
110
+ margin-top: 80px;
111
+ padding: 6rem 0;
112
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
113
+ color: var(--white);
114
+ position: relative;
115
+ overflow: hidden;
116
+ }
117
+
118
+ .hero::before {
119
+ content: '';
120
+ position: absolute;
121
+ top: 0;
122
+ left: 0;
123
+ right: 0;
124
+ bottom: 0;
125
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,112C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
126
+ background-size: cover;
127
+ }
128
+
129
+ .hero-content {
130
+ position: relative;
131
+ z-index: 1;
132
+ display: grid;
133
+ grid-template-columns: 1fr 1fr;
134
+ gap: 4rem;
135
+ align-items: center;
136
+ }
137
+
138
+ .hero-text h1 {
139
+ font-size: 4rem;
140
+ line-height: 1.2;
141
+ margin-bottom: 1.5rem;
142
+ animation: fadeInUp 0.8s ease;
143
+ }
144
+
145
+ .hero-text p {
146
+ font-size: 1.25rem;
147
+ margin-bottom: 2rem;
148
+ opacity: 0.9;
149
+ animation: fadeInUp 0.8s ease 0.2s both;
150
+ }
151
+
152
+ .hero-cta {
153
+ display: flex;
154
+ gap: 1rem;
155
+ animation: fadeInUp 0.8s ease 0.4s both;
156
+ }
157
+
158
+ .btn {
159
+ padding: 1rem 2rem;
160
+ border-radius: 50px;
161
+ text-decoration: none;
162
+ font-weight: 600;
163
+ transition: all 0.3s ease;
164
+ display: inline-flex;
165
+ align-items: center;
166
+ gap: 0.5rem;
167
+ }
168
+
169
+ .btn-primary {
170
+ background: var(--white);
171
+ color: var(--primary);
172
+ box-shadow: var(--shadow);
173
+ }
174
+
175
+ .btn-primary:hover {
176
+ transform: translateY(-2px);
177
+ box-shadow: var(--shadow-lg);
178
+ }
179
+
180
+ .btn-secondary {
181
+ background: transparent;
182
+ color: var(--white);
183
+ border: 2px solid var(--white);
184
+ }
185
+
186
+ .btn-secondary:hover {
187
+ background: var(--white);
188
+ color: var(--primary);
189
+ }
190
+
191
+ .hero-image {
192
+ position: relative;
193
+ animation: float 6s ease-in-out infinite;
194
+ }
195
+
196
+ .hero-image img {
197
+ max-width: 100%;
198
+ border-radius: 20px;
199
+ box-shadow: var(--shadow-lg);
200
+ }
201
+
202
+ /* Features Section */
203
+ .features {
204
+ padding: 6rem 0;
205
+ background: var(--light);
206
+ }
207
+
208
+ .section-title {
209
+ text-align: center;
210
+ margin-bottom: 4rem;
211
+ }
212
+
213
+ .section-title h2 {
214
+ font-size: 2.5rem;
215
+ margin-bottom: 1rem;
216
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
217
+ -webkit-background-clip: text;
218
+ -webkit-text-fill-color: transparent;
219
+ background-clip: text;
220
+ }
221
+
222
+ .section-title p {
223
+ font-size: 1.1rem;
224
+ color: var(--gray);
225
+ max-width: 600px;
226
+ margin: 0 auto;
227
+ }
228
+
229
+ .features-grid {
230
+ display: grid;
231
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
232
+ gap: 2rem;
233
+ }
234
+
235
+ .feature-card {
236
+ background: var(--white);
237
+ padding: 2rem;
238
+ border-radius: 15px;
239
+ box-shadow: var(--shadow);
240
+ transition: all 0.3s ease;
241
+ position: relative;
242
+ overflow: hidden;
243
+ }
244
+
245
+ .feature-card:hover {
246
+ transform: translateY(-5px);
247
+ box-shadow: var(--shadow-lg);
248
+ }
249
+
250
+ .feature-card::before {
251
+ content: '';
252
+ position: absolute;
253
+ top: 0;
254
+ left: 0;
255
+ width: 100%;
256
+ height: 4px;
257
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
258
+ }
259
+
260
+ .feature-icon {
261
+ width: 60px;
262
+ height: 60px;
263
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
264
+ border-radius: 15px;
265
+ display: flex;
266
+ align-items: center;
267
+ justify-content: center;
268
+ margin-bottom: 1.5rem;
269
+ font-size: 1.5rem;
270
+ color: var(--white);
271
+ }
272
+
273
+ .feature-card h3 {
274
+ font-size: 1.25rem;
275
+ margin-bottom: 1rem;
276
+ }
277
+
278
+ .feature-card p {
279
+ color: var(--gray);
280
+ line-height: 1.6;
281
+ }
282
+
283
+ /* Stats Section */
284
+ .stats {
285
+ padding: 6rem 0;
286
+ background: var(--dark);
287
+ color: var(--white);
288
+ }
289
+
290
+ .stats-grid {
291
+ display: grid;
292
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
293
+ gap: 2rem;
294
+ text-align: center;
295
+ }
296
+
297
+ .stat-item {
298
+ animation: fadeInUp 0.8s ease;
299
+ }
300
+
301
+ .stat-number {
302
+ font-size: 3rem;
303
+ font-weight: 700;
304
+ margin-bottom: 0.5rem;
305
+ background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
306
+ -webkit-background-clip: text;
307
+ -webkit-text-fill-color: transparent;
308
+ background-clip: text;
309
+ }
310
+
311
+ .stat-label {
312
+ font-size: 1.1rem;
313
+ color: var(--gray);
314
+ }
315
+
316
+ /* Version Comparison */
317
+ .comparison {
318
+ padding: 6rem 0;
319
+ }
320
+
321
+ .version-tabs {
322
+ display: flex;
323
+ justify-content: center;
324
+ gap: 1rem;
325
+ margin-bottom: 3rem;
326
+ }
327
+
328
+ .tab-btn {
329
+ padding: 0.75rem 1.5rem;
330
+ border: none;
331
+ background: var(--light);
332
+ border-radius: 50px;
333
+ cursor: pointer;
334
+ font-weight: 600;
335
+ transition: all 0.3s ease;
336
+ }
337
+
338
+ .tab-btn.active {
339
+ background: var(--primary);
340
+ color: var(--white);
341
+ }
342
+
343
+ .version-table {
344
+ background: var(--white);
345
+ border-radius: 15px;
346
+ overflow: hidden;
347
+ box-shadow: var(--shadow);
348
+ }
349
+
350
+ .version-table th, .version-table td {
351
+ padding: 1.5rem;
352
+ text-align: left;
353
+ }
354
+
355
+ .version-table th {
356
+ background: var(--dark);
357
+ color: var(--white);
358
+ font-weight: 600;
359
+ }
360
+
361
+ .version-table tr:nth-child(even) {
362
+ background: var(--light);
363
+ }
364
+
365
+ .check {
366
+ color: #10B981;
367
+ }
368
+
369
+ .cross {
370
+ color: var(--gray);
371
+ }
372
+
373
+ /* Testimonials */
374
+ .testimonials {
375
+ padding: 6rem 0;
376
+ background: linear-gradient(135deg, #F3F4F6 0%, var(--white) 100%);
377
+ }
378
+
379
+ .testimonial-slider {
380
+ position: relative;
381
+ }
382
+
383
+ .testimonial-card {
384
+ background: var(--white);
385
+ padding: 2rem;
386
+ border-radius: 15px;
387
+ box-shadow: var(--shadow);
388
+ margin: 0 1rem;
389
+ }
390
+
391
+ .testimonial-content {
392
+ margin-bottom: 1.5rem;
393
+ font-style: italic;
394
+ color: var(--gray);
395
+ }
396
+
397
+ .testimonial-author {
398
+ display: flex;
399
+ align-items: center;
400
+ gap: 1rem;
401
+ }
402
+
403
+ .author-avatar {
404
+ width: 50px;
405
+ height: 50px;
406
+ border-radius: 50%;
407
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
408
+ display: flex;
409
+ align-items: center;
410
+ justify-content: center;
411
+ color: var(--white);
412
+ font-weight: 700;
413
+ }
414
+
415
+ .author-info h4 {
416
+ font-size: 1.1rem;
417
+ margin-bottom: 0.25rem;
418
+ }
419
+
420
+ .author-info p {
421
+ font-size: 0.9rem;
422
+ color: var(--gray);
423
+ }
424
+
425
+ .slider-controls {
426
+ display: flex;
427
+ justify-content: center;
428
+ gap: 1rem;
429
+ margin-top: 2rem;
430
+ }
431
+
432
+ .slider-dot {
433
+ width: 10px;
434
+ height: 10px;
435
+ border-radius: 50%;
436
+ background: var(--gray);
437
+ cursor: pointer;
438
+ transition: all 0.3s ease;
439
+ }
440
+
441
+ .slider-dot.active {
442
+ background: var(--primary);
443
+ width: 30px;
444
+ border-radius: 5px;
445
+ }
446
+
447
+ /* CTA Section */
448
+ .cta {
449
+ padding: 6rem 0;
450
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
451
+ color: var(--white);
452
+ text-align: center;
453
+ }
454
+
455
+ .cta h2 {
456
+ font-size: 2.5rem;
457
+ margin-bottom: 1rem;
458
+ }
459
+
460
+ .cta p {
461
+ font-size: 1.1rem;
462
+ margin-bottom: 2rem;
463
+ opacity: 0.9;
464
+ }
465
+
466
+ /* Footer */
467
+ footer {
468
+ background: var(--dark);
469
+ color: var(--white);
470
+ padding: 4rem 0 2rem;
471
+ }
472
+
473
+ .footer-content {
474
+ display: grid;
475
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
476
+ gap: 2rem;
477
+ margin-bottom: 3rem;
478
+ }
479
+
480
+ .footer-section h3 {
481
+ font-size: 1.25rem;
482
+ margin-bottom: 1.5rem;
483
+ color: var(--primary);
484
+ }
485
+
486
+ .footer-section ul {
487
+ list-style: none;
488
+ }
489
+
490
+ .footer-section ul li {
491
+ margin-bottom: 0.75rem;
492
+ }
493
+
494
+ .footer-section a {
495
+ color: var(--gray);
496
+ text-decoration: none;
497
+ transition: color 0.3s ease;
498
+ }
499
+
500
+ .footer-section a:hover {
501
+ color: var(--primary);
502
+ }
503
+
504
+ .footer-bottom {
505
+ text-align: center;
506
+ padding-top: 2rem;
507
+ border-top: 1px solid var(--gray);
508
+ color: var(--gray);
509
+ font-size: 0.9rem;
510
+ }
511
+
512
+ .footer-bottom a {
513
+ color: var(--primary);
514
+ font-weight: 600;
515
+ }
516
+
517
+ /* Animations */
518
+ @keyframes fadeInUp {
519
+ from {
520
+ opacity: 0;
521
+ transform: translateY(30px);
522
+ }
523
+ to {
524
+ opacity: 1;
525
+ transform: translateY(0);
526
+ }
527
+ }
528
+
529
+ @keyframes float {
530
+ 0%, 100% {
531
+ transform: translateY(0);
532
+ }
533
+ 50% {
534
+ transform: translateY(-20px);
535
+ }
536
+ }
537
+
538
+ /* Responsive */
539
+ @media (max-width: 768px) {
540
+ .hero-content {
541
+ grid-template-columns: 1fr;
542
+ text-align: center;
543
+ }
544
+
545
+ .hero-text h1 {
546
+ font-size: 2.5rem;
547
+ }
548
+
549
+ nav ul {
550
+ display: none;
551
+ }
552
+
553
+ .version-tabs {
554
+ flex-direction: column;
555
+ align-items: center;
556
+ }
557
+
558
+ .tab-btn {
559
+ width: 100%;
560
+ max-width: 300px;
561
+ }
562
+ }
563
+
564
+ /* Scroll to top button */
565
+ .scroll-top {
566
+ position: fixed;
567
+ bottom: 2rem;
568
+ right: 2rem;
569
+ width: 50px;
570
+ height: 50px;
571
+ background: var(--primary);
572
+ color: var(--white);
573
+ border: none;
574
+ border-radius: 50%;
575
+ cursor: pointer;
576
+ display: flex;
577
+ align-items: center;
578
+ justify-content: center;
579
+ opacity: 0;
580
+ transition: all 0.3s ease;
581
+ z-index: 999;
582
+ }
583
+
584
+ .scroll-top.show {
585
+ opacity: 1;
586
+ }
587
+
588
+ .scroll-top:hover {
589
+ background: var(--primary-dark);
590
+ transform: translateY(-5px);
591
+ }
592
+ </style>
593
+ </head>
594
+ <body>
595
+ <!-- Header -->
596
+ <header>
597
+ <div class="container header-content">
598
+ <a href="#" class="logo">
599
+ <i class="fas fa-cube"></i>
600
+ Odoo <span style="font-weight: 400; font-size: 0.8rem;">v17</span>
601
+ </a>
602
+ <nav>
603
+ <ul>
604
+ <li><a href="#features">Features</a></li>
605
+ <li><a href="#comparison">Versions</a></li>
606
+ <li><a href="#testimonials">Testimonials</a></li>
607
+ <li><a href="#cta">Download</a></li>
608
+ </ul>
609
+ </nav>
610
+ </div>
611
+ </header>
612
+
613
+ <!-- Hero Section -->
614
+ <section class="hero">
615
+ <div class="container hero-content">
616
+ <div class="hero-text">
617
+ <h1>Odoo 17: The Future of Business Management</h1>
618
+ <p>Experience the most advanced ERP platform with AI-powered insights, seamless integrations, and unparalleled flexibility. Transform your business operations with the latest Odoo release.</p>
619
+ <div class="hero-cta">
620
+ <a href="#cta" class="btn btn-primary">
621
+ <i class="fas fa-download"></i>
622
+ Get Started Free
623
+ </a>
624
+ <a href="#features" class="btn btn-secondary">
625
+ <i class="fas fa-play"></i>
626
+ Watch Demo
627
+ </a>
628
+ </div>
629
+ </div>
630
+ <div class="hero-image">
631
+ <img src="https://picsum.photos/seed/odoo17/500/350" alt="Odoo 17 Dashboard">
632
+ </div>
633
+ </div>
634
+ </section>
635
+
636
+ <!-- Features Section -->
637
+ <section class="features" id="features">
638
+ <div class="container">
639
+ <div class="section-title">
640
+ <h2>Powerful Features</h2>
641
+ <p>Discover what makes Odoo 17 the leading ERP solution for modern businesses</p>
642
+ </div>
643
+ <div class="features-grid">
644
+ <div class="feature-card">
645
+ <div class="feature-icon">
646
+ <i class="fas fa-robot"></i>
647
+ </div>
648
+ <h3>AI-Powered Analytics</h3>
649
+ <p>Get intelligent insights and predictive analytics to make data-driven decisions. Odoo 17 leverages machine learning to optimize your business processes.</p>
650
+ </div>
651
+ <div class="feature-card">
652
+ <div class="feature-icon">
653
+ <i class="fas fa-shield-alt"></i>
654
+ </div>
655
+ <h3>Advanced Security</h3>
656
+ <p>Enterprise-grade security with end-to-end encryption, role-based access control, and compliance with global data protection regulations.</p>
657
+ </div>
658
+ <div class="feature-card">
659
+ <div class="feature-icon">
660
+ <i class="fas fa-bolt"></i>
661
+ </div>
662
+ <h3>Lightning Fast Performance</h3>
663
+ <p>Optimized architecture delivers 3x faster response times and handles 10x more concurrent users than previous versions.</p>
664
+ </div>
665
+ <div class="feature-card">
666
+ <div class="feature-icon">
667
+ <i class="fas fa-mobile-alt"></i>
668
+ </div>
669
+ <h3>Mobile-First Design</h3>
670
+ <p>Access your business from anywhere with our completely redesigned mobile interface that works seamlessly across all devices.</p>
671
+ </div>
672
+ <div class="feature-card">
673
+ <div class="feature-icon">
674
+ <i class="fas fa-plug"></i>
675
+ </div>
676
+ <h3>Seamless Integrations</h3>
677
+ <p>Connect with 3000+ apps and services through our enhanced API and pre-built connectors for popular business tools.</p>
678
+ </div>
679
+ <div class="feature-card">
680
+ <div class="feature-icon">
681
+ <i class="fas fa-chart-line"></i>
682
+ </div>
683
+ <h3>Real-time Collaboration</h3>
684
+ <p>Work together in real-time with team members, clients, and partners through our integrated communication tools.</p>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </section>
689
+
690
+ <!-- Stats Section -->
691
+ <section class="stats">
692
+ <div class="container">
693
+ <div class="stats-grid">
694
+ <div class="stat-item">
695
+ <div class="stat-number">5M+</div>
696
+ <div class="stat-label">Active Users Worldwide</div>
697
+ </div>
698
+ <div class="stat-item">
699
+ <div class="stat-number">3000+</div>
700
+ <div class="stat-label">Apps & Modules</div>
701
+ </div>
702
+ <div class="stat-item">
703
+ <div class="stat-number">180+</div>
704
+ <div class="stat-label">Countries Supported</div>
705
+ </div>
706
+ <div class="stat-item">
707
+ <div class="stat-number">99.9%</div>
708
+ <div class="stat-label">Uptime Guarantee</div>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </section>
713
+
714
+ <!-- Version Comparison -->
715
+ <section class="comparison" id="comparison">
716
+ <div class="container">
717
+ <div class="section-title">
718
+ <h2>Compare Versions</h2>
719
+ <p>Choose the perfect plan for your business needs</p>
720
+ </div>
721
+ <div class="version-tabs">
722
+ <button class="tab-btn active">Community</button>
723
+ <button class="tab-btn">Enterprise</button>
724
+ <button class="tab-btn">Ultimate</button>
725
+ </div>
726
+ <div class="version-table">
727
+ <table>
728
+ <thead>
729
+ <tr>
730
+ <th>Feature</th>
731
+ <th>Community</th>
732
+ <th>Enterprise</th>
733
+ <th>Ultimate</th>
734
+ </tr>
735
+ </thead>
736
+ <tbody>
737
+ <tr>
738
+ <td>Core Modules</td>
739
+ <td><i class="fas fa-check check"></i></td>
740
+ <td><i class="fas fa-check check"></i></td>
741
+ <td><i class="fas fa-check check"></i></td>
742
+ </tr>
743
+ <tr>
744
+ <td>CRM</td>
745
+ <td><i class="fas fa-check check"></i></td>
746
+ <td><i class="fas fa-check check"></i></td>
747
+ <td><i class="fas fa-check check"></i></td>
748
+ </tr>
749
+ <tr>
750
+ <td>Sales</td>
751
+ <td><i class="fas fa-check check"></i></td>
752
+ <td><i class="fas fa-check check"></i></td>
753
+ <td><i class="fas fa-check check"></i></td>
754
+ </tr>
755
+ <tr>
756
+ <td>Inventory</td>
757
+ <td><i class="fas fa-check check"></i></td>
758
+ <td><i class="fas fa-check check"></i></td>
759
+ <td><i class="fas fa-check check"></i></td>
760
+ </tr>
761
+ <tr>
762
+ <td>Manufacturing</td>
763
+ <td><i class="fas fa-times cross"></i></td>
764
+ <td><i class="fas fa-check check"></i></td>
765
+ <td><i class="fas fa-check check"></i></td>
766
+ </tr>
767
+ <tr>
768
+ <td>Project Management</td>
769
+ <td><i class="fas fa-check check"></i></td>
770
+ <td><i class="fas fa-check check"></i></td>
771
+ <td><i class="fas fa-check check"></i></td>
772
+ </tr>
773
+ <tr>
774
+ <td>HR Management</td>
775
+ <td><i class="fas fa-times cross"></i></td>
776
+ <td><i class="fas fa-check check"></i></td>
777
+ <td><i class="fas fa-check check"></i></td>
778
+ </tr>
779
+ <tr>
780
+ <td>Financial Accounting</td>
781
+ <td><i class="fas fa-check check"></i></td>
782
+ <td><i class="fas fa-check check"></i></td>
783
+ <td><i class="fas fa-check check"></i></td>
784
+ </tr>
785
+ <tr>
786
+ <td>Advanced Analytics</td>
787
+ <td><i class="fas fa-times cross"></i></td>
788
+ <td><i class="fas fa-check check"></i></td>
789
+ <td><i class="fas fa-check check"></i></td>
790
+ </tr>
791
+ <tr>
792
+ <td>AI Assistant</td>
793
+ <td><i class="fas fa-times cross"></i></td>
794
+ <td><i class="fas fa-check check"></i></td>
795
+ <td><i class="fas fa-check check"></i></td>
796
+ </tr>
797
+ <tr>
798
+ <td>Priority Support</td>
799
+ <td><i class="fas fa-times cross"></i></td>
800
+ <td><i class="fas fa-check check"></i></td>
801
+ <td><i class="fas fa-check check"></i></td>
802
+ </tr>
803
+ </tbody>
804
+ </table>
805
+ </div>
806
+ </div>
807
+ </section>
808
+
809
+ <!-- Testimonials -->
810
+ <section class="testimonials" id="testimonials">
811
+ <div class="container">
812
+ <div class="section-title">
813
+ <h2>What Our Users Say</h2>
814
+ <p>Success stories from businesses of all sizes</p>
815
+ </div>
816
+ <div class="testimonial-slider">
817
+ <div class="testimonial-card">
818
+ <div class="testimonial-content">
819
+ "Odoo 17 transformed our business operations. The AI-powered analytics helped us identify new revenue streams we never knew existed. The implementation was seamless and the support team was exceptional."
820
+ </div>
821
+ <div class="testimonial-author">
822
+ <div class="author-avatar">JD</div>
823
+ <div class="author-info">
824
+ <h4>John Doe</h4>
825
+ <p>CEO, TechCorp</p>
826
+ </div>
827
+ </div>
828
+ </div>
829
+ <div class="slider-controls">
830
+ <div class="slider-dot active"></div>
831
+ <div class="slider-dot"></div>
832
+ <div class="slider-dot"></div>
833
+ <div class="slider-dot"></div>
834
+ </div>
835
+ </div>
836
+ </div>
837
+ </section>
838
+
839
+ <!-- CTA Section -->
840
+ <section class="cta" id="cta">
841
+ <div class="container">
842
+ <h2>Ready to Transform Your Business?</h2>
843
+ <p>Join millions of businesses using Odoo to streamline operations and drive growth</p>
844
+ <div class="hero-cta">
845
+ <a href="#" class="btn btn-primary" style="background: var(--white); color: var(--primary);">
846
+ <i class="fas fa-download"></i>
847
+ Download Odoo 17
848
+ </a>
849
+ <a href="#" class="btn btn-secondary" style="border-color: var(--white);">
850
+ <i class="fas fa-book"></i>
851
+ View Documentation
852
+ </a>
853
+ </div>
854
+ </div>
855
+ </section>
856
+
857
+ <!-- Footer -->
858
+ <footer>
859
+ <div class="container footer-content">
860
+ <div class="footer-section">
861
+ <h3>Odoo</h3>
862
+ <p>The world's #1 open source ERP solution</p>
863
+ </div>
864
+ <div class="footer-section">
865
+ <h3>Products</h3>
866
+ <ul>
867
+ <li><a href="#">Odoo 17</a></li>
868
+ <li><a href="#">Odoo.sh</a></li>
869
+ <li><a href="#">Odoo Online</a></li>
870
+ <li><a href="#">Odoo Apps</a></li>
871
+ </ul>
872
+ </div>
873
+ <div class="footer-section">
874
+ <h3>Resources</h3>
875
+ <ul>
876
+ <li><a href="#">Documentation</a></li>
877
+ <li><a href="#">Community</a></li>
878
+ <li><a href="#">Blog</a></li>
879
+ <li><a href="#">Support</a></li>
880
+ </ul>
881
+ </div>
882
+ <div class="footer-section">
883
+ <h3>Company</h3>
884
+ <ul>
885
+ <li><a href="#">About Us</a></li>
886
+ <li><a href="#">Careers</a></li>
887
+ <li><a href="#">Partners</a></li>
888
+ <li><a href="#">Contact</a></li>
889
+ </ul>
890
+ </div>
891
+ </div>
892
+ <div class="container footer-bottom">
893
+ <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="text-decoration: none;">anycoder</a> | &copy; 2024 Odoo. All rights reserved.</p>
894
+ </div>
895
+ </footer>
896
+
897
+ <!-- Scroll to top button -->
898
+ <button class="scroll-top">
899
+ <i class="fas fa-arrow-up"></i>
900
+ </button>
901
+
902
+ <script>
903
+ // Smooth scrolling for navigation links
904
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
905
+ anchor.addEventListener('click', function (e) {
906
+ e.preventDefault();
907
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
908
+ behavior: 'smooth'
909
+ });
910
+ });
911
+ });
912
+
913
+ // Scroll to top button
914
+ const scrollTopBtn = document.querySelector('.scroll-top');
915
+
916
+ window.addEventListener('scroll', () => {
917
+ if (window.pageYOffset > 300) {
918
+ scrollTopBtn.classList.add('show');
919
+ } else {
920
+ scrollTopBtn.classList.remove('show');
921
+ }
922
+ });
923
+
924
+ scrollTopBtn.addEventListener('click', () => {
925
+ window.scrollTo({
926
+ top: 0,
927
+ behavior: 'smooth'
928
+ });
929
+ });
930
+
931
+ // Tab functionality for version comparison
932
+ const tabBtns = document.querySelectorAll('.tab-btn');
933
+ const tabs = ['community', 'enterprise', 'ultimate'];
934
+
935
+ tabBtns.forEach((btn, index) => {
936
+ btn.addEventListener('click', () => {
937
+ tabBtns.forEach(b => b.classList.remove('active'));
938
+ btn.classList.add('active');
939
+
940
+ // Here you would typically update the table content based on the selected tab
941
+ console.log(`Switched to ${tabs[index]} tab`);
942
+ });
943
+ });
944
+
945
+ // Testimonial slider
946
+ const sliderDots = document.querySelectorAll('.slider-dot');
947
+ const testimonialCard = document.querySelector('.testimonial-card');
948
+ const testimonials = [
949
+ {
950
+ text: "Odoo 17 transformed our business operations. The AI-powered analytics helped us identify new revenue streams we never knew existed. The implementation was seamless and the support team was exceptional.",
951
+ author: "John Doe",
952
+ title: "CEO, TechCorp"
953
+ },
954
+ {
955
+ text: "We've been using Odoo for 5 years and the latest version is by far the best. The mobile app has revolutionized how our field team works, and the new AI features have saved us countless hours.",
956
+ author: "Sarah Smith",
957
+ title: "Operations Manager, RetailCo"
958
+ },
959
+ {
960
+ text: "The transition to Odoo 17 was smooth and the new interface is intuitive. Our team adopted it quickly and we've already seen a 30% increase in productivity.",
961
+ author: "Mike Johnson",
962
+ title: "IT Director, Manufacturing Inc"
963
+ },
964
+ {
965
+ text: "As a developer, I love the new API and customization options. Odoo 17 gives us the flexibility we need while maintaining enterprise-grade stability.",
966
+ author: "Alex Chen",
967
+ title: "Lead Developer, Software Solutions"
968
+ }
969
+ ];
970
+
971
+ let currentTestimonial = 0;
972
+
973
+ sliderDots.forEach((dot, index) => {
974
+ dot.addEventListener('click', () => {
975
+ currentTestimonial = index;
976
+ updateTestimonial();
977
+ });
978
+ });
979
+
980
+ function updateTestimonial() {
981
+ const testimonial = testimonials[currentTestimonial];
982
+ testimonialCard.querySelector('.testimonial-content').textContent = testimonial.text;
983
+ testimonialCard.querySelector('.author-info h4').textContent = testimonial.author;
984
+ testimonialCard.querySelector('.author-info p').textContent = testimonial.title;
985
+
986
+ sliderDots.forEach((dot, index) => {
987
+ dot.classList.toggle('active', index === currentTestimonial);
988
+ });
989
+ }
990
+
991
+ // Auto-rotate testimonials
992
+ setInterval(() => {
993
+ currentTestimonial = (currentTestimonial + 1) % testimonials.length;
994
+ updateTestimonial();
995
+ }, 5000);
996
+
997
+ // Header scroll effect
998
+ let lastScroll = 0;
999
+ window.addEventListener('scroll', () => {
1000
+ const header = document.querySelector('header');
1001
+ const currentScroll = window.pageYOffset;
1002
+
1003
+ if (currentScroll > 100) {
1004
+ header.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
1005
+ } else {
1006
+ header.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)';
1007
+ }
1008
+
1009
+ lastScroll = currentScroll;
1010
+ });
1011
+
1012
+ // Add animation on scroll
1013
+ const observerOptions = {
1014
+ threshold: 0.1,
1015
+ rootMargin: '0px 0px -50px 0px'
1016
+ };
1017
+
1018
+ const observer = new IntersectionObserver((entries) => {
1019
+ entries.forEach(entry => {
1020
+ if (entry.isIntersecting) {
1021
+ entry.target.style.animation = 'fadeInUp 0.8s ease forwards';
1022
+ }
1023
+ });
1024
+ }, observerOptions);
1025
+
1026
+ document.querySelectorAll('.feature-card, .stat-item, .testimonial-card').forEach(el => {
1027
+ observer.observe(el);
1028
+ });
1029
+ </script>
1030
+ </body>
1031
+ </html>