Hugging Face's logo

Spaces:
srivatsavdamaraju
/
accusaga-html
Running

App Files Community
srivatsavdamaraju commited on
Commit
cde2a91
·
verified ·
1 Parent(s): e0458fd

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1392 -19
index.html CHANGED
@@ -1,19 +1,1392 @@
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" class="no-js">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AccuSaga | Agentic AI Analytics Platform - Multi-Database BI & Reporting</title>
7
+ <meta name="description" content="AccuSaga: The #1 Agentic AI Analytics Platform. Transform data across 10+ databases into actionable insights with AI-powered conversational analytics, automated reporting, and enterprise-grade security.">
8
+ <meta name="keywords" content="AI Analytics, Business Intelligence, Multi-Database, Agentic AI, Automated Reporting, Conversational Analytics, Data Visualization, SQL Generation, BI Platform">
9
+ <meta name="author" content="AccuSaga">
10
+ <meta property="og:title" content="AccuSaga - Agentic AI Analytics Platform">
11
+ <meta property="og:description" content="Transform data across 10+ databases into actionable insights with AI-powered analytics">
12
+ <meta property="og:type" content="website">
13
+ <link rel="preconnect" href="https://fonts.googleapis.com">
14
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
16
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
17
+
18
+ <!-- Critical CSS -->
19
+ <style>
20
+ :root {
21
+ /* Primary Colors */
22
+ --primary-blue: #1e40af;
23
+ --primary-purple: #7c3aed;
24
+ --accent-cyan: #06b6d4;
25
+ --accent-green: #10b981;
26
+ --accent-orange: #f59e0b;
27
+ --accent-red: #ef4444;
28
+
29
+ /* Theme */
30
+ --dark-bg: #0a0a0f;
31
+ --dark-card: #1a1a24;
32
+ --dark-border: #2a2a3a;
33
+ --text-primary: #ffffff;
34
+ --text-secondary: #a0a0b8;
35
+ --text-muted: #6b7280;
36
+
37
+ /* Gradients */
38
+ --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
39
+ --gradient-ai: linear-gradient(135deg, var(--accent-cyan), var(--primary-purple));
40
+ --gradient-success: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
41
+
42
+ /* Shadows */
43
+ --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
44
+ --shadow-xl: 0 25px 50px rgba(124, 58, 237, 0.25);
45
+
46
+ /* Animation */
47
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
48
+ }
49
+
50
+ * {
51
+ margin: 0;
52
+ padding: 0;
53
+ box-sizing: border-box;
54
+ }
55
+
56
+ html {
57
+ scroll-behavior: smooth;
58
+ scroll-padding-top: 80px;
59
+ }
60
+
61
+ body {
62
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
63
+ background: var(--dark-bg);
64
+ color: var(--text-primary);
65
+ line-height: 1.7;
66
+ overflow-x: hidden;
67
+ }
68
+
69
+ /* Ensure content loads */
70
+ .no-js .hero {
71
+ opacity: 1 !important;
72
+ }
73
+ </style>
74
+
75
+ <!-- Main CSS -->
76
+ <style>
77
+ /* ========== GLOBAL STYLES ========== */
78
+ .container {
79
+ max-width: 1400px;
80
+ margin: 0 auto;
81
+ padding: 0 2rem;
82
+ }
83
+
84
+ .section {
85
+ padding: 6rem 0;
86
+ }
87
+
88
+ .section-title {
89
+ font-size: 2.5rem;
90
+ font-weight: 800;
91
+ margin-bottom: 1rem;
92
+ line-height: 1.2;
93
+ }
94
+
95
+ .section-subtitle {
96
+ color: var(--text-secondary);
97
+ font-size: 1.1rem;
98
+ max-width: 600px;
99
+ margin-bottom: 3rem;
100
+ }
101
+
102
+ .gradient-text {
103
+ background: var(--gradient-primary);
104
+ -webkit-background-clip: text;
105
+ -webkit-text-fill-color: transparent;
106
+ background-clip: text;
107
+ }
108
+
109
+ .ai-gradient-text {
110
+ background: var(--gradient-ai);
111
+ -webkit-background-clip: text;
112
+ -webkit-text-fill-color: transparent;
113
+ background-clip: text;
114
+ }
115
+
116
+ /* ========== NAVIGATION ========== */
117
+ .navbar {
118
+ position: fixed;
119
+ top: 0;
120
+ left: 0;
121
+ right: 0;
122
+ background: rgba(10, 10, 15, 0.95);
123
+ backdrop-filter: blur(20px);
124
+ border-bottom: 1px solid var(--dark-border);
125
+ z-index: 1000;
126
+ transition: var(--transition);
127
+ }
128
+
129
+ .navbar.scrolled {
130
+ background: rgba(10, 10, 15, 0.98);
131
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
132
+ }
133
+
134
+ .nav-container {
135
+ display: flex;
136
+ justify-content: space-between;
137
+ align-items: center;
138
+ padding: 1rem 0;
139
+ }
140
+
141
+ .logo {
142
+ display: flex;
143
+ align-items: center;
144
+ gap: 0.75rem;
145
+ font-size: 1.5rem;
146
+ font-weight: 800;
147
+ text-decoration: none;
148
+ background: var(--gradient-primary);
149
+ -webkit-background-clip: text;
150
+ -webkit-text-fill-color: transparent;
151
+ background-clip: text;
152
+ }
153
+
154
+ .logo-icon {
155
+ width: 40px;
156
+ height: 40px;
157
+ background: var(--gradient-primary);
158
+ border-radius: 8px;
159
+ display: flex;
160
+ align-items: center;
161
+ justify-content: center;
162
+ font-weight: 900;
163
+ color: white;
164
+ }
165
+
166
+ .nav-links {
167
+ display: flex;
168
+ gap: 2rem;
169
+ list-style: none;
170
+ }
171
+
172
+ .nav-links a {
173
+ color: var(--text-secondary);
174
+ text-decoration: none;
175
+ font-weight: 500;
176
+ transition: var(--transition);
177
+ padding: 0.5rem 0;
178
+ position: relative;
179
+ }
180
+
181
+ .nav-links a:hover {
182
+ color: var(--text-primary);
183
+ }
184
+
185
+ .nav-links a::after {
186
+ content: '';
187
+ position: absolute;
188
+ bottom: 0;
189
+ left: 0;
190
+ width: 0;
191
+ height: 2px;
192
+ background: var(--gradient-primary);
193
+ transition: width 0.3s ease;
194
+ }
195
+
196
+ .nav-links a:hover::after {
197
+ width: 100%;
198
+ }
199
+
200
+ .nav-cta {
201
+ display: flex;
202
+ gap: 1rem;
203
+ align-items: center;
204
+ }
205
+
206
+ /* ========== BUTTONS ========== */
207
+ .btn {
208
+ display: inline-flex;
209
+ align-items: center;
210
+ justify-content: center;
211
+ gap: 0.5rem;
212
+ padding: 0.75rem 1.75rem;
213
+ border-radius: 8px;
214
+ text-decoration: none;
215
+ font-weight: 600;
216
+ transition: var(--transition);
217
+ cursor: pointer;
218
+ border: none;
219
+ font-size: 0.95rem;
220
+ position: relative;
221
+ overflow: hidden;
222
+ }
223
+
224
+ .btn::before {
225
+ content: '';
226
+ position: absolute;
227
+ top: 0;
228
+ left: -100%;
229
+ width: 100%;
230
+ height: 100%;
231
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
232
+ transition: left 0.6s;
233
+ }
234
+
235
+ .btn:hover::before {
236
+ left: 100%;
237
+ }
238
+
239
+ .btn-primary {
240
+ background: var(--gradient-primary);
241
+ color: white;
242
+ box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
243
+ }
244
+
245
+ .btn-primary:hover {
246
+ transform: translateY(-2px);
247
+ box-shadow: 0 6px 30px rgba(124, 58, 237, 0.5);
248
+ }
249
+
250
+ .btn-secondary {
251
+ background: transparent;
252
+ color: var(--text-primary);
253
+ border: 1px solid var(--dark-border);
254
+ }
255
+
256
+ .btn-secondary:hover {
257
+ background: var(--dark-card);
258
+ border-color: var(--primary-purple);
259
+ }
260
+
261
+ .btn-ai {
262
+ background: var(--gradient-ai);
263
+ color: white;
264
+ box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
265
+ }
266
+
267
+ .btn-ai:hover {
268
+ transform: translateY(-2px);
269
+ box-shadow: 0 6px 30px rgba(6, 182, 212, 0.5);
270
+ }
271
+
272
+ .btn-large {
273
+ padding: 1rem 2.5rem;
274
+ font-size: 1.1rem;
275
+ }
276
+
277
+ /* ========== HERO SECTION ========== */
278
+ .hero {
279
+ padding: 10rem 0 5rem;
280
+ position: relative;
281
+ overflow: hidden;
282
+ }
283
+
284
+ .hero::before {
285
+ content: '';
286
+ position: absolute;
287
+ top: -50%;
288
+ left: -50%;
289
+ width: 200%;
290
+ height: 200%;
291
+ background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
292
+ animation: pulse 15s ease-in-out infinite;
293
+ }
294
+
295
+ @keyframes pulse {
296
+ 0%, 100% { transform: scale(1); opacity: 0.3; }
297
+ 50% { transform: scale(1.1); opacity: 0.5; }
298
+ }
299
+
300
+ .hero-content {
301
+ text-align: center;
302
+ max-width: 1200px;
303
+ margin: 0 auto;
304
+ position: relative;
305
+ z-index: 1;
306
+ }
307
+
308
+ .badge {
309
+ display: inline-flex;
310
+ align-items: center;
311
+ gap: 0.5rem;
312
+ background: var(--dark-card);
313
+ padding: 0.5rem 1.25rem;
314
+ border-radius: 50px;
315
+ margin-bottom: 2rem;
316
+ border: 1px solid var(--dark-border);
317
+ font-size: 0.9rem;
318
+ }
319
+
320
+ .badge-ai {
321
+ background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(124, 58, 237, 0.1));
322
+ border-color: var(--accent-cyan);
323
+ }
324
+
325
+ .hero-title {
326
+ font-size: 3.5rem;
327
+ font-weight: 900;
328
+ line-height: 1.1;
329
+ margin-bottom: 1.5rem;
330
+ }
331
+
332
+ .hero-subtitle {
333
+ font-size: 1.25rem;
334
+ color: var(--text-secondary);
335
+ max-width: 800px;
336
+ margin: 0 auto 3rem;
337
+ }
338
+
339
+ .hero-cta {
340
+ display: flex;
341
+ gap: 1rem;
342
+ justify-content: center;
343
+ margin-bottom: 3rem;
344
+ flex-wrap: wrap;
345
+ }
346
+
347
+ .hero-image {
348
+ margin-top: 4rem;
349
+ border-radius: 20px;
350
+ overflow: hidden;
351
+ box-shadow: var(--shadow-xl);
352
+ border: 1px solid var(--dark-border);
353
+ }
354
+
355
+ .hero-image img {
356
+ width: 100%;
357
+ height: auto;
358
+ display: block;
359
+ }
360
+
361
+ /* ========== PLATFORM POWERS ========== */
362
+ .powers-grid {
363
+ display: grid;
364
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
365
+ gap: 2rem;
366
+ margin-top: 3rem;
367
+ }
368
+
369
+ .power-card {
370
+ background: var(--dark-card);
371
+ border: 1px solid var(--dark-border);
372
+ border-radius: 16px;
373
+ padding: 2.5rem;
374
+ transition: var(--transition);
375
+ position: relative;
376
+ overflow: hidden;
377
+ }
378
+
379
+ .power-card:hover {
380
+ transform: translateY(-8px);
381
+ border-color: var(--primary-purple);
382
+ box-shadow: var(--shadow-lg);
383
+ }
384
+
385
+ .power-icon {
386
+ width: 60px;
387
+ height: 60px;
388
+ background: var(--gradient-primary);
389
+ border-radius: 12px;
390
+ display: flex;
391
+ align-items: center;
392
+ justify-content: center;
393
+ margin-bottom: 1.5rem;
394
+ font-size: 1.5rem;
395
+ color: white;
396
+ }
397
+
398
+ .power-icon.ai {
399
+ background: var(--gradient-ai);
400
+ }
401
+
402
+ .power-card h3 {
403
+ font-size: 1.5rem;
404
+ margin-bottom: 1rem;
405
+ }
406
+
407
+ .power-card p {
408
+ color: var(--text-secondary);
409
+ margin-bottom: 1.5rem;
410
+ }
411
+
412
+ .power-features {
413
+ list-style: none;
414
+ display: flex;
415
+ flex-direction: column;
416
+ gap: 0.75rem;
417
+ }
418
+
419
+ .power-features li {
420
+ display: flex;
421
+ align-items: center;
422
+ gap: 0.75rem;
423
+ color: var(--text-secondary);
424
+ }
425
+
426
+ .power-features li i {
427
+ color: var(--accent-green);
428
+ }
429
+
430
+ /* ========== DATABASE INTEGRATIONS ========== */
431
+ .databases {
432
+ background: linear-gradient(135deg, rgba(30, 64, 175, 0.05), rgba(124, 58, 237, 0.05));
433
+ border-radius: 20px;
434
+ padding: 4rem;
435
+ }
436
+
437
+ .databases-grid {
438
+ display: grid;
439
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
440
+ gap: 2rem;
441
+ margin-top: 3rem;
442
+ }
443
+
444
+ .database-card {
445
+ background: var(--dark-card);
446
+ border: 1px solid var(--dark-border);
447
+ border-radius: 12px;
448
+ padding: 2rem;
449
+ text-align: center;
450
+ transition: var(--transition);
451
+ }
452
+
453
+ .database-card:hover {
454
+ transform: translateY(-4px);
455
+ border-color: var(--primary-purple);
456
+ }
457
+
458
+ .database-icon {
459
+ font-size: 2rem;
460
+ margin-bottom: 1rem;
461
+ color: var(--accent-cyan);
462
+ }
463
+
464
+ .database-name {
465
+ font-weight: 600;
466
+ margin-bottom: 0.5rem;
467
+ }
468
+
469
+ /* ========== AGENTIC AI FEATURES ========== */
470
+ .agentic-features {
471
+ display: grid;
472
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
473
+ gap: 2rem;
474
+ margin-top: 3rem;
475
+ }
476
+
477
+ .feature-card {
478
+ background: var(--dark-card);
479
+ border: 1px solid var(--dark-border);
480
+ border-radius: 16px;
481
+ padding: 2rem;
482
+ transition: var(--transition);
483
+ }
484
+
485
+ .feature-card:hover {
486
+ transform: translateY(-4px);
487
+ border-color: var(--accent-cyan);
488
+ }
489
+
490
+ .feature-icon {
491
+ font-size: 2rem;
492
+ color: var(--accent-cyan);
493
+ margin-bottom: 1.5rem;
494
+ }
495
+
496
+ /* ========== USE CASES ========== */
497
+ .use-cases-tabs {
498
+ display: flex;
499
+ gap: 0.5rem;
500
+ margin-bottom: 3rem;
501
+ flex-wrap: wrap;
502
+ justify-content: center;
503
+ }
504
+
505
+ .tab-btn {
506
+ padding: 0.75rem 1.5rem;
507
+ background: transparent;
508
+ border: 1px solid var(--dark-border);
509
+ border-radius: 8px;
510
+ color: var(--text-secondary);
511
+ cursor: pointer;
512
+ transition: var(--transition);
513
+ font-weight: 600;
514
+ }
515
+
516
+ .tab-btn.active {
517
+ background: var(--gradient-primary);
518
+ color: white;
519
+ border-color: transparent;
520
+ }
521
+
522
+ .tab-content {
523
+ display: none;
524
+ animation: fadeIn 0.5s ease;
525
+ }
526
+
527
+ .tab-content.active {
528
+ display: block;
529
+ }
530
+
531
+ @keyframes fadeIn {
532
+ from { opacity: 0; transform: translateY(10px); }
533
+ to { opacity: 1; transform: translateY(0); }
534
+ }
535
+
536
+ .use-case-grid {
537
+ display: grid;
538
+ grid-template-columns: 1fr 1fr;
539
+ gap: 3rem;
540
+ align-items: center;
541
+ }
542
+
543
+ /* ========== TESTIMONIALS ========== */
544
+ .testimonials-grid {
545
+ display: grid;
546
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
547
+ gap: 2rem;
548
+ margin-top: 3rem;
549
+ }
550
+
551
+ .testimonial-card {
552
+ background: var(--dark-card);
553
+ border: 1px solid var(--dark-border);
554
+ border-radius: 16px;
555
+ padding: 2rem;
556
+ transition: var(--transition);
557
+ }
558
+
559
+ .testimonial-card:hover {
560
+ border-color: var(--primary-purple);
561
+ transform: translateY(-4px);
562
+ }
563
+
564
+ .testimonial-text {
565
+ color: var(--text-secondary);
566
+ font-style: italic;
567
+ margin-bottom: 1.5rem;
568
+ }
569
+
570
+ .testimonial-author {
571
+ display: flex;
572
+ align-items: center;
573
+ gap: 1rem;
574
+ }
575
+
576
+ .author-avatar {
577
+ width: 50px;
578
+ height: 50px;
579
+ border-radius: 50%;
580
+ background: var(--gradient-primary);
581
+ display: flex;
582
+ align-items: center;
583
+ justify-content: center;
584
+ color: white;
585
+ font-weight: 600;
586
+ }
587
+
588
+ /* ========== CTA SECTION ========== */
589
+ .cta-section {
590
+ background: var(--gradient-primary);
591
+ border-radius: 20px;
592
+ padding: 5rem;
593
+ text-align: center;
594
+ position: relative;
595
+ overflow: hidden;
596
+ }
597
+
598
+ .cta-section::before {
599
+ content: '';
600
+ position: absolute;
601
+ top: 0;
602
+ left: 0;
603
+ right: 0;
604
+ bottom: 0;
605
+ background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
606
+ opacity: 0.1;
607
+ }
608
+
609
+ .cta-content {
610
+ position: relative;
611
+ z-index: 1;
612
+ }
613
+
614
+ .cta-title {
615
+ color: white;
616
+ margin-bottom: 1.5rem;
617
+ }
618
+
619
+ .cta-subtitle {
620
+ color: rgba(255, 255, 255, 0.9);
621
+ margin-bottom: 2.5rem;
622
+ max-width: 800px;
623
+ margin-left: auto;
624
+ margin-right: auto;
625
+ }
626
+
627
+ .cta-buttons {
628
+ display: flex;
629
+ gap: 1rem;
630
+ justify-content: center;
631
+ flex-wrap: wrap;
632
+ }
633
+
634
+ /* ========== FOOTER ========== */
635
+ .footer {
636
+ background: var(--dark-card);
637
+ border-top: 1px solid var(--dark-border);
638
+ padding: 4rem 0 2rem;
639
+ }
640
+
641
+ .footer-grid {
642
+ display: grid;
643
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
644
+ gap: 3rem;
645
+ margin-bottom: 3rem;
646
+ }
647
+
648
+ .footer-section h3 {
649
+ font-size: 1rem;
650
+ font-weight: 600;
651
+ margin-bottom: 1.5rem;
652
+ color: var(--text-primary);
653
+ }
654
+
655
+ .footer-links {
656
+ list-style: none;
657
+ display: flex;
658
+ flex-direction: column;
659
+ gap: 0.75rem;
660
+ }
661
+
662
+ .footer-links a {
663
+ color: var(--text-secondary);
664
+ text-decoration: none;
665
+ transition: var(--transition);
666
+ }
667
+
668
+ .footer-links a:hover {
669
+ color: var(--primary-purple);
670
+ }
671
+
672
+ .social-links {
673
+ display: flex;
674
+ gap: 1rem;
675
+ }
676
+
677
+ .social-link {
678
+ width: 40px;
679
+ height: 40px;
680
+ background: var(--dark-bg);
681
+ border: 1px solid var(--dark-border);
682
+ border-radius: 8px;
683
+ display: flex;
684
+ align-items: center;
685
+ justify-content: center;
686
+ color: var(--text-secondary);
687
+ text-decoration: none;
688
+ transition: var(--transition);
689
+ }
690
+
691
+ .social-link:hover {
692
+ background: var(--primary-purple);
693
+ border-color: var(--primary-purple);
694
+ color: white;
695
+ transform: translateY(-2px);
696
+ }
697
+
698
+ .footer-bottom {
699
+ padding-top: 2rem;
700
+ border-top: 1px solid var(--dark-border);
701
+ text-align: center;
702
+ color: var(--text-secondary);
703
+ font-size: 0.9rem;
704
+ }
705
+
706
+ /* ========== RESPONSIVE DESIGN ========== */
707
+ @media (max-width: 1024px) {
708
+ .hero-title {
709
+ font-size: 2.8rem;
710
+ }
711
+
712
+ .use-case-grid {
713
+ grid-template-columns: 1fr;
714
+ }
715
+ }
716
+
717
+ @media (max-width: 768px) {
718
+ .container {
719
+ padding: 0 1rem;
720
+ }
721
+
722
+ .section {
723
+ padding: 4rem 0;
724
+ }
725
+
726
+ .section-title {
727
+ font-size: 2rem;
728
+ }
729
+
730
+ .nav-links {
731
+ display: none;
732
+ }
733
+
734
+ .hero {
735
+ padding: 8rem 0 3rem;
736
+ }
737
+
738
+ .hero-title {
739
+ font-size: 2.2rem;
740
+ }
741
+
742
+ .hero-subtitle {
743
+ font-size: 1.1rem;
744
+ }
745
+
746
+ .hero-cta {
747
+ flex-direction: column;
748
+ align-items: center;
749
+ }
750
+
751
+ .hero-cta .btn {
752
+ width: 100%;
753
+ max-width: 300px;
754
+ }
755
+
756
+ .databases {
757
+ padding: 2rem;
758
+ }
759
+
760
+ .cta-section {
761
+ padding: 3rem 1.5rem;
762
+ }
763
+
764
+ .cta-buttons {
765
+ flex-direction: column;
766
+ align-items: center;
767
+ }
768
+ }
769
+
770
+ @media (max-width: 480px) {
771
+ .hero-title {
772
+ font-size: 1.8rem;
773
+ }
774
+
775
+ .powers-grid,
776
+ .agentic-features,
777
+ .testimonials-grid {
778
+ grid-template-columns: 1fr;
779
+ }
780
+
781
+ .databases-grid {
782
+ grid-template-columns: repeat(2, 1fr);
783
+ }
784
+ }
785
+
786
+ /* ========== ANIMATIONS ========== */
787
+ @keyframes float {
788
+ 0%, 100% { transform: translateY(0); }
789
+ 50% { transform: translateY(-20px); }
790
+ }
791
+
792
+ .floating {
793
+ animation: float 6s ease-in-out infinite;
794
+ }
795
+ </style>
796
+ </head>
797
+
798
+ <body>
799
+ <!-- Navigation -->
800
+ <nav class="navbar" id="navbar">
801
+ <div class="container">
802
+ <div class="nav-container">
803
+ <a href="#" class="logo">
804
+ <div class="logo-icon">A</div>
805
+ AccuSaga
806
+ </a>
807
+
808
+ <ul class="nav-links">
809
+ <li><a href="#platform">Platform</a></li>
810
+ <li><a href="#databases">Databases</a></li>
811
+ <li><a href="#ai">Agentic AI</a></li>
812
+ <li><a href="#usecases">Use Cases</a></li>
813
+ <li><a href="#testimonials">Testimonials</a></li>
814
+ </ul>
815
+
816
+ <div class="nav-cta">
817
+ <a href="#login" class="btn btn-secondary">Sign In</a>
818
+ <a href="#demo" class="btn btn-primary">Get Demo</a>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ </nav>
823
+
824
+ <!-- Hero Section -->
825
+ <section class="hero" id="home">
826
+ <div class="container">
827
+ <div class="hero-content">
828
+ <div class="badge badge-ai">
829
+ <i class="fas fa-brain"></i>
830
+ <span>#1 Agentic AI Analytics Platform</span>
831
+ </div>
832
+
833
+ <h1 class="hero-title">
834
+ Analytics Powered by
835
+ <span class="ai-gradient-text">Agentic AI</span>
836
+ </h1>
837
+
838
+ <p class="hero-subtitle">
839
+ Transform data across <strong>10+ databases</strong> into actionable insights with AI-powered conversational analytics,
840
+ automated reporting, and enterprise-grade security. Get instant answers in under 10 seconds.
841
+ </p>
842
+
843
+ <div class="hero-cta">
844
+ <a href="#trial" class="btn btn-ai btn-large">
845
+ <i class="fas fa-play-circle"></i>
846
+ Start Free Trial
847
+ </a>
848
+ <a href="#demo" class="btn btn-secondary btn-large">
849
+ <i class="fas fa-calendar-alt"></i>
850
+ Schedule Demo
851
+ </a>
852
+ </div>
853
+
854
+ <div class="hero-image floating">
855
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"
856
+ alt="AccuSaga Agentic AI Analytics Dashboard"
857
+ loading="eager">
858
+ </div>
859
+ </div>
860
+ </div>
861
+ </section>
862
+
863
+ <!-- Platform Powers -->
864
+ <section class="section" id="platform">
865
+ <div class="container">
866
+ <div class="section-header">
867
+ <h2 class="section-title">AccuSaga Platform Powers</h2>
868
+ <p class="section-subtitle">
869
+ Combining the best of BI analytics, agentic AI, and multi-database connectivity for unprecedented insights
870
+ </p>
871
+ </div>
872
+
873
+ <div class="powers-grid">
874
+ <!-- Power 1: Agentic AI Analytics -->
875
+ <div class="power-card">
876
+ <div class="power-icon ai">
877
+ <i class="fas fa-robot"></i>
878
+ </div>
879
+ <h3>Agentic AI Analytics</h3>
880
+ <p>Intelligent agents that understand context, learn from interactions, and provide proactive insights</p>
881
+ <ul class="power-features">
882
+ <li><i class="fas fa-check-circle"></i> Autonomous data analysis agents</li>
883
+ <li><i class="fas fa-check-circle"></i> Context-aware recommendations</li>
884
+ <li><i class="fas fa-check-circle"></i> Predictive insights generation</li>
885
+ <li><i class="fas fa-check-circle"></i> Self-optimizing queries</li>
886
+ </ul>
887
+ </div>
888
+
889
+ <!-- Power 2: Multi-Database BI -->
890
+ <div class="power-card">
891
+ <div class="power-icon">
892
+ <i class="fas fa-database"></i>
893
+ </div>
894
+ <h3>Multi-Database BI</h3>
895
+ <p>Unified analytics across all your data sources with real-time synchronization</p>
896
+ <ul class="power-features">
897
+ <li><i class="fas fa-check-circle"></i> Connect 10+ database types</li>
898
+ <li><i class="fas fa-check-circle"></i> Cross-database queries</li>
899
+ <li><i class="fas fa-check-circle"></i> Real-time data sync</li>
900
+ <li><i class="fas fa-check-circle"></i> Unified data modeling</li>
901
+ </ul>
902
+ </div>
903
+
904
+ <!-- Power 3: Automated Reporting -->
905
+ <div class="power-card">
906
+ <div class="power-icon">
907
+ <i class="fas fa-chart-line"></i>
908
+ </div>
909
+ <h3>Automated Reporting</h3>
910
+ <p>Generate comprehensive reports automatically with AI-powered insights and visualizations</p>
911
+ <ul class="power-features">
912
+ <li><i class="fas fa-check-circle"></i> Schedule automatic reports</li>
913
+ <li><i class="fas fa-check-circle"></i> AI-generated insights</li>
914
+ <li><i class="fas fa-check-circle"></i> Custom report templates</li>
915
+ <li><i class="fas fa-check-circle"></i> Multi-format exports</li>
916
+ </ul>
917
+ </div>
918
+ </div>
919
+ </div>
920
+ </section>
921
+
922
+ <!-- Database Integrations -->
923
+ <section class="section databases" id="databases">
924
+ <div class="container">
925
+ <div class="section-header">
926
+ <h2 class="section-title">Connect to Any Database</h2>
927
+ <p class="section-subtitle">
928
+ Seamlessly integrate with 10+ database systems for unified analytics
929
+ </p>
930
+ </div>
931
+
932
+ <div class="databases-grid">
933
+ <div class="database-card">
934
+ <div class="database-icon">
935
+ <i class="fab fa-google"></i>
936
+ </div>
937
+ <div class="database-name">BigQuery</div>
938
+ <div class="database-type">Cloud Data Warehouse</div>
939
+ </div>
940
+
941
+ <div class="database-card">
942
+ <div class="database-icon">
943
+ <i class="fas fa-snowflake"></i>
944
+ </div>
945
+ <div class="database-name">Snowflake</div>
946
+ <div class="database-type">Data Cloud</div>
947
+ </div>
948
+
949
+ <div class="database-card">
950
+ <div class="database-icon">
951
+ <i class="fas fa-server"></i>
952
+ </div>
953
+ <div class="database-name">PostgreSQL</div>
954
+ <div class="database-type">Relational Database</div>
955
+ </div>
956
+
957
+ <div class="database-card">
958
+ <div class="database-icon">
959
+ <i class="fas fa-database"></i>
960
+ </div>
961
+ <div class="database-name">MySQL</div>
962
+ <div class="database-type">SQL Database</div>
963
+ </div>
964
+
965
+ <div class="database-card">
966
+ <div class="database-icon">
967
+ <i class="fab fa-microsoft"></i>
968
+ </div>
969
+ <div class="database-name">SQL Server</div>
970
+ <div class="database-type">Enterprise DB</div>
971
+ </div>
972
+
973
+ <div class="database-card">
974
+ <div class="database-icon">
975
+ <i class="fas fa-chart-bar"></i>
976
+ </div>
977
+ <div class="database-name">Redshift</div>
978
+ <div class="database-type">AWS Data Warehouse</div>
979
+ </div>
980
+ </div>
981
+ </div>
982
+ </section>
983
+
984
+ <!-- Agentic AI Features -->
985
+ <section class="section" id="ai">
986
+ <div class="container">
987
+ <div class="section-header">
988
+ <h2 class="section-title">Agentic AI Capabilities</h2>
989
+ <p class="section-subtitle">
990
+ Intelligent agents that work autonomously to provide insights and automate analytics workflows
991
+ </p>
992
+ </div>
993
+
994
+ <div class="agentic-features">
995
+ <div class="feature-card">
996
+ <div class="feature-icon">
997
+ <i class="fas fa-concierge-bell"></i>
998
+ </div>
999
+ <h3>Autonomous Analysis</h3>
1000
+ <p>AI agents analyze data patterns, identify anomalies, and provide insights without human intervention</p>
1001
+ </div>
1002
+
1003
+ <div class="feature-card">
1004
+ <div class="feature-icon">
1005
+ <i class="fas fa-comments"></i>
1006
+ </div>
1007
+ <h3>Conversational Analytics</h3>
1008
+ <p>Ask questions in natural language and get instant answers with explainable SQL and visualizations</p>
1009
+ </div>
1010
+
1011
+ <div class="feature-card">
1012
+ <div class="feature-icon">
1013
+ <i class="fas fa-bolt"></i>
1014
+ </div>
1015
+ <h3>Real-time Processing</h3>
1016
+ <p>Process and analyze streaming data in real-time with AI-powered pattern recognition</p>
1017
+ </div>
1018
+
1019
+ <div class="feature-card">
1020
+ <div class="feature-icon">
1021
+ <i class="fas fa-shield-alt"></i>
1022
+ </div>
1023
+ <h3>Intelligent Security</h3>
1024
+ <p>AI agents monitor data access, detect threats, and enforce security policies automatically</p>
1025
+ </div>
1026
+ </div>
1027
+ </div>
1028
+ </section>
1029
+
1030
+ <!-- Use Cases -->
1031
+ <section class="section" id="usecases">
1032
+ <div class="container">
1033
+ <div class="section-header">
1034
+ <h2 class="section-title">Industry Use Cases</h2>
1035
+ <p class="section-subtitle">
1036
+ See how different industries leverage AccuSaga's agentic AI analytics
1037
+ </p>
1038
+ </div>
1039
+
1040
+ <div class="use-cases-tabs">
1041
+ <button class="tab-btn active" data-tab="ecommerce">E-commerce</button>
1042
+ <button class="tab-btn" data-tab="finance">Finance</button>
1043
+ <button class="tab-btn" data-tab="healthcare">Healthcare</button>
1044
+ <button class="tab-btn" data-tab="manufacturing">Manufacturing</button>
1045
+ </div>
1046
+
1047
+ <div class="tab-content active" id="ecommerce">
1048
+ <div class="use-case-grid">
1049
+ <div>
1050
+ <h3>E-commerce Optimization</h3>
1051
+ <p>AI agents analyze customer behavior, predict demand, and optimize inventory across multiple databases in real-time.</p>
1052
+ <ul class="power-features">
1053
+ <li><i class="fas fa-check-circle"></i> Customer segmentation analysis</li>
1054
+ <li><i class="fas fa-check-circle"></i> Predictive inventory management</li>
1055
+ <li><i class="fas fa-check-circle"></i> Real-time sales analytics</li>
1056
+ <li><i class="fas fa-check-circle"></i> Cross-channel performance tracking</li>
1057
+ </ul>
1058
+ </div>
1059
+ <div>
1060
+ <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"
1061
+ alt="E-commerce analytics dashboard"
1062
+ loading="lazy"
1063
+ style="border-radius: 12px; width: 100%;">
1064
+ </div>
1065
+ </div>
1066
+ </div>
1067
+
1068
+ <div class="tab-content" id="finance">
1069
+ <div class="use-case-grid">
1070
+ <div>
1071
+ <h3>Financial Analytics</h3>
1072
+ <p>Agentic AI monitors transactions, detects fraud patterns, and provides compliance reporting across multiple financial databases.</p>
1073
+ <ul class="power-features">
1074
+ <li><i class="fas fa-check-circle"></i> Real-time fraud detection</li>
1075
+ <li><i class="fas fa-check-circle"></i> Risk assessment automation</li>
1076
+ <li><i class="fas fa-check-circle"></i> Regulatory compliance reporting</li>
1077
+ <li><i class="fas fa-check-circle"></i> Investment portfolio analysis</li>
1078
+ </ul>
1079
+ </div>
1080
+ <div>
1081
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"
1082
+ alt="Financial analytics dashboard"
1083
+ loading="lazy"
1084
+ style="border-radius: 12px; width: 100%;">
1085
+ </div>
1086
+ </div>
1087
+ </div>
1088
+
1089
+ <div class="tab-content" id="healthcare">
1090
+ <div class="use-case-grid">
1091
+ <div>
1092
+ <h3>Healthcare Analytics</h3>
1093
+ <p>AI agents analyze patient data, predict outcomes, and optimize treatment plans while maintaining HIPAA compliance.</p>
1094
+ <ul class="power-features">
1095
+ <li><i class="fas fa-check-circle"></i> Patient outcome prediction</li>
1096
+ <li><i class="fas fa-check-circle"></i> Treatment optimization</li>
1097
+ <li><i class="fas fa-check-circle"></i> Operational efficiency analysis</li>
1098
+ <li><i class="fas fa-check-circle"></i> Compliance monitoring</li>
1099
+ </ul>
1100
+ </div>
1101
+ <div>
1102
+ <img src="https://images.unsplash.com/photo-1551601651-2a8555f1a136?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"
1103
+ alt="Healthcare analytics dashboard"
1104
+ loading="lazy"
1105
+ style="border-radius: 12px; width: 100%;">
1106
+ </div>
1107
+ </div>
1108
+ </div>
1109
+
1110
+ <div class="tab-content" id="manufacturing">
1111
+ <div class="use-case-grid">
1112
+ <div>
1113
+ <h3>Manufacturing Analytics</h3>
1114
+ <p>Intelligent agents monitor production lines, predict maintenance needs, and optimize supply chain across multiple data sources.</p>
1115
+ <ul class="power-features">
1116
+ <li><i class="fas fa-check-circle"></i> Predictive maintenance</li>
1117
+ <li><i class="fas fa-check-circle"></i> Production optimization</li>
1118
+ <li><i class="fas fa-check-circle"></i> Quality control analysis</li>
1119
+ <li><i class="fas fa-check-circle"></i> Supply chain optimization</li>
1120
+ </ul>
1121
+ </div>
1122
+ <div>
1123
+ <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"
1124
+ alt="Manufacturing analytics dashboard"
1125
+ loading="lazy"
1126
+ style="border-radius: 12px; width: 100%;">
1127
+ </div>
1128
+ </div>
1129
+ </div>
1130
+ </div>
1131
+ </section>
1132
+
1133
+ <!-- Testimonials -->
1134
+ <section class="section testimonials" id="testimonials">
1135
+ <div class="container">
1136
+ <div class="section-header">
1137
+ <h2 class="section-title">Trusted by Data Leaders</h2>
1138
+ <p class="section-subtitle">
1139
+ See what industry leaders say about AccuSaga's agentic AI analytics platform
1140
+ </p>
1141
+ </div>
1142
+
1143
+ <div class="testimonials-grid">
1144
+ <div class="testimonial-card">
1145
+ <p class="testimonial-text">
1146
+ "AccuSaga's agentic AI transformed our analytics workflow. We reduced SQL writing by 90% and gained insights we never could have found manually."
1147
+ </p>
1148
+ <div class="testimonial-author">
1149
+ <div class="author-avatar">SK</div>
1150
+ <div>
1151
+ <div class="author-name">Sarah Kim</div>
1152
+ <div class="author-title">Head of Analytics, TechCorp</div>
1153
+ </div>
1154
+ </div>
1155
+ </div>
1156
+
1157
+ <div class="testimonial-card">
1158
+ <p class="testimonial-text">
1159
+ "The multi-database connectivity combined with AI agents gives us a unified view of our data across 8 different systems. Game-changing."
1160
+ </p>
1161
+ <div class="testimonial-author">
1162
+ <div class="author-avatar">MR</div>
1163
+ <div>
1164
+ <div class="author-name">Michael Rodriguez</div>
1165
+ <div class="author-title">CTO, FinTech Solutions</div>
1166
+ </div>
1167
+ </div>
1168
+ </div>
1169
+
1170
+ <div class="testimonial-card">
1171
+ <p class="testimonial-text">
1172
+ "Our reporting time decreased from weeks to hours. The AI agents automatically generate insights we used to miss completely."
1173
+ </p>
1174
+ <div class="testimonial-author">
1175
+ <div class="author-avatar">LP</div>
1176
+ <div>
1177
+ <div class="author-name">Lisa Park</div>
1178
+ <div class="author-title">Data Director, HealthCare Plus</div>
1179
+ </div>
1180
+ </div>
1181
+ </div>
1182
+ </div>
1183
+ </div>
1184
+ </section>
1185
+
1186
+ <!-- CTA Section -->
1187
+ <section class="cta-section">
1188
+ <div class="container">
1189
+ <div class="cta-content">
1190
+ <h2 class="cta-title">Ready to Transform Your Analytics?</h2>
1191
+ <p class="cta-subtitle">
1192
+ Join thousands of companies leveraging AccuSaga's agentic AI analytics platform.
1193
+ Get instant insights across all your databases with AI-powered automation.
1194
+ </p>
1195
+ <div class="cta-buttons">
1196
+ <a href="#start" class="btn btn-white btn-large">
1197
+ <i class="fas fa-rocket"></i>
1198
+ Start Free Trial
1199
+ </a>
1200
+ <a href="#demo" class="btn btn-outline btn-large" style="background: transparent; border: 2px solid white; color: white;">
1201
+ <i class="fas fa-video"></i>
1202
+ Watch Demo
1203
+ </a>
1204
+ </div>
1205
+ </div>
1206
+ </div>
1207
+ </section>
1208
+
1209
+ <!-- Footer -->
1210
+ <footer class="footer">
1211
+ <div class="container">
1212
+ <div class="footer-grid">
1213
+ <div>
1214
+ <h3>Product</h3>
1215
+ <ul class="footer-links">
1216
+ <li><a href="#features">Features</a></li>
1217
+ <li><a href="#pricing">Pricing</a></li>
1218
+ <li><a href="#integrations">Integrations</a></li>
1219
+ <li><a href="#api">API</a></li>
1220
+ </ul>
1221
+ </div>
1222
+
1223
+ <div>
1224
+ <h3>Solutions</h3>
1225
+ <ul class="footer-links">
1226
+ <li><a href="#by-industry">By Industry</a></li>
1227
+ <li><a href="#by-role">By Role</a></li>
1228
+ <li><a href="#use-cases">Use Cases</a></li>
1229
+ <li><a href="#case-studies">Case Studies</a></li>
1230
+ </ul>
1231
+ </div>
1232
+
1233
+ <div>
1234
+ <h3>Resources</h3>
1235
+ <ul class="footer-links">
1236
+ <li><a href="#docs">Documentation</a></li>
1237
+ <li><a href="#blog">Blog</a></li>
1238
+ <li><a href="#webinars">Webinars</a></li>
1239
+ <li><a href="#community">Community</a></li>
1240
+ </ul>
1241
+ </div>
1242
+
1243
+ <div>
1244
+ <h3>Company</h3>
1245
+ <ul class="footer-links">
1246
+ <li><a href="#about">About</a></li>
1247
+ <li><a href="#careers">Careers</a></li>
1248
+ <li><a href="#contact">Contact</a></li>
1249
+ <li><a href="#security">Security</a></li>
1250
+ </ul>
1251
+ </div>
1252
+
1253
+ <div>
1254
+ <h3>Connect</h3>
1255
+ <div class="social-links">
1256
+ <a href="#twitter" class="social-link" aria-label="Twitter">
1257
+ <i class="fab fa-twitter"></i>
1258
+ </a>
1259
+ <a href="#linkedin" class="social-link" aria-label="LinkedIn">
1260
+ <i class="fab fa-linkedin-in"></i>
1261
+ </a>
1262
+ <a href="#github" class="social-link" aria-label="GitHub">
1263
+ <i class="fab fa-github"></i>
1264
+ </a>
1265
+ <a href="#youtube" class="social-link" aria-label="YouTube">
1266
+ <i class="fab fa-youtube"></i>
1267
+ </a>
1268
+ </div>
1269
+ </div>
1270
+ </div>
1271
+
1272
+ <div class="footer-bottom">
1273
+ <p>&copy; 2024 AccuSaga. All rights reserved. | Agentic AI Analytics Platform</p>
1274
+ </div>
1275
+ </div>
1276
+ </footer>
1277
+
1278
+ <!-- JavaScript -->
1279
+ <script>
1280
+ // Remove no-js class
1281
+ document.documentElement.classList.remove('no-js');
1282
+
1283
+ // Navbar scroll effect
1284
+ const navbar = document.getElementById('navbar');
1285
+ window.addEventListener('scroll', () => {
1286
+ if (window.scrollY > 50) {
1287
+ navbar.classList.add('scrolled');
1288
+ } else {
1289
+ navbar.classList.remove('scrolled');
1290
+ }
1291
+ });
1292
+
1293
+ // Tab functionality
1294
+ const tabBtns = document.querySelectorAll('.tab-btn');
1295
+ const tabContents = document.querySelectorAll('.tab-content');
1296
+
1297
+ tabBtns.forEach(btn => {
1298
+ btn.addEventListener('click', () => {
1299
+ // Remove active class from all buttons and contents
1300
+ tabBtns.forEach(b => b.classList.remove('active'));
1301
+ tabContents.forEach(c => c.classList.remove('active'));
1302
+
1303
+ // Add active class to clicked button and corresponding content
1304
+ btn.classList.add('active');
1305
+ const tabId = btn.getAttribute('data-tab');
1306
+ document.getElementById(tabId).classList.add('active');
1307
+ });
1308
+ });
1309
+
1310
+ // Smooth scroll for anchor links
1311
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1312
+ anchor.addEventListener('click', function(e) {
1313
+ const href = this.getAttribute('href');
1314
+ if (href === '#') return;
1315
+
1316
+ const target = document.querySelector(href);
1317
+ if (target) {
1318
+ e.preventDefault();
1319
+ const headerHeight = navbar.offsetHeight;
1320
+ const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
1321
+
1322
+ window.scrollTo({
1323
+ top: targetPosition,
1324
+ behavior: 'smooth'
1325
+ });
1326
+ }
1327
+ });
1328
+ });
1329
+
1330
+ // Animate elements on scroll
1331
+ const observerOptions = {
1332
+ threshold: 0.1,
1333
+ rootMargin: '0px 0px -50px 0px'
1334
+ };
1335
+
1336
+ const observer = new IntersectionObserver((entries) => {
1337
+ entries.forEach(entry => {
1338
+ if (entry.isIntersecting) {
1339
+ entry.target.classList.add('animated');
1340
+ }
1341
+ });
1342
+ }, observerOptions);
1343
+
1344
+ // Observe all cards
1345
+ document.querySelectorAll('.power-card, .feature-card, .testimonial-card').forEach(card => {
1346
+ observer.observe(card);
1347
+ });
1348
+
1349
+ // Add hover effect to database cards
1350
+ const dbCards = document.querySelectorAll('.database-card');
1351
+ dbCards.forEach(card => {
1352
+ card.addEventListener('mouseenter', () => {
1353
+ card.style.transform = 'translateY(-8px)';
1354
+ });
1355
+
1356
+ card.addEventListener('mouseleave', () => {
1357
+ card.style.transform = 'translateY(0)';
1358
+ });
1359
+ });
1360
+
1361
+ // Counter animation for stats
1362
+ const statsSection = document.querySelector('.stats');
1363
+ if (statsSection) {
1364
+ const statsObserver = new IntersectionObserver((entries) => {
1365
+ entries.forEach(entry => {
1366
+ if (entry.isIntersecting) {
1367
+ const counters = document.querySelectorAll('.counter');
1368
+ counters.forEach(counter => {
1369
+ const target = parseInt(counter.getAttribute('data-target'));
1370
+ const duration = 2000;
1371
+ const increment = target / (duration / 16);
1372
+ let current = 0;
1373
+
1374
+ const timer = setInterval(() => {
1375
+ current += increment;
1376
+ if (current >= target) {
1377
+ counter.textContent = target + (counter.textContent.includes('%') ? '%' : '');
1378
+ clearInterval(timer);
1379
+ } else {
1380
+ counter.textContent = Math.floor(current) + (counter.textContent.includes('%') ? '%' : '');
1381
+ }
1382
+ }, 16);
1383
+ });
1384
+ }
1385
+ });
1386
+ }, { threshold: 0.5 });
1387
+
1388
+ statsObserver.observe(statsSection);
1389
+ }
1390
+ </script>
1391
+ </body>
1392
+ </html>