Hugging Face's logo

Spaces:
Klliu04
/
testing123
Running

App Files Community
Klliu04 commited on
Commit
c5deeac
·
verified ·
1 Parent(s): 7b29c68

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1042 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Testing123
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: green
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: testing123
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,1042 @@
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="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agentic Vision | AI-Powered Computer Vision</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
13
+
14
+ :root {
15
+ --primary: #00f0ff;
16
+ --secondary: #7928ca;
17
+ --dark: #0a0a0f;
18
+ --darker: #050508;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Inter', sans-serif;
23
+ background-color: var(--darker);
24
+ color: #f0f0f0;
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ h1, h2, h3, h4, .font-orbitron {
29
+ font-family: 'Orbitron', sans-serif;
30
+ }
31
+
32
+ .gradient-text {
33
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
34
+ -webkit-background-clip: text;
35
+ background-clip: text;
36
+ color: transparent;
37
+ }
38
+
39
+ .glow {
40
+ text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
41
+ }
42
+
43
+ .glow-box {
44
+ box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
45
+ }
46
+
47
+ .gradient-border {
48
+ position: relative;
49
+ border-radius: 0.5rem;
50
+ }
51
+
52
+ .gradient-border::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: -2px;
56
+ left: -2px;
57
+ right: -2px;
58
+ bottom: -2px;
59
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
60
+ z-index: -1;
61
+ border-radius: 0.6rem;
62
+ }
63
+
64
+ .animated-grid {
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ width: 100%;
69
+ height: 100%;
70
+ background-image:
71
+ linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
72
+ linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
73
+ background-size: 40px 40px;
74
+ z-index: -1;
75
+ }
76
+
77
+ .feature-card:hover {
78
+ transform: translateY(-10px);
79
+ box-shadow: 0 20px 25px -5px rgba(0, 240, 255, 0.1), 0 10px 10px -5px rgba(0, 240, 255, 0.04);
80
+ }
81
+
82
+ .pulse {
83
+ animation: pulse 2s infinite;
84
+ }
85
+
86
+ @keyframes pulse {
87
+ 0% {
88
+ box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4);
89
+ }
90
+ 70% {
91
+ box-shadow: 0 0 0 10px rgba(0, 240, 255, 0);
92
+ }
93
+ 100% {
94
+ box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
95
+ }
96
+ }
97
+
98
+ #vanta-canvas {
99
+ position: absolute;
100
+ top: 0;
101
+ left: 0;
102
+ width: 100%;
103
+ height: 100%;
104
+ z-index: -1;
105
+ }
106
+
107
+ .neon-line {
108
+ height: 2px;
109
+ background: linear-gradient(90deg, transparent, var(--primary), transparent);
110
+ width: 100%;
111
+ margin: 2rem 0;
112
+ }
113
+
114
+ .hexagon {
115
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
116
+ }
117
+
118
+ .scroll-down {
119
+ position: absolute;
120
+ bottom: 30px;
121
+ left: 50%;
122
+ transform: translateX(-50%);
123
+ color: var(--primary);
124
+ font-size: 2rem;
125
+ animation: bounce 2s infinite;
126
+ }
127
+
128
+ @keyframes bounce {
129
+ 0%, 20%, 50%, 80%, 100% {
130
+ transform: translateY(0) translateX(-50%);
131
+ }
132
+ 40% {
133
+ transform: translateY(-20px) translateX(-50%);
134
+ }
135
+ 60% {
136
+ transform: translateY(-10px) translateX(-50%);
137
+ }
138
+ }
139
+ </style>
140
+ </head>
141
+ <body class="dark:bg-darker">
142
+ <!-- Animated Background -->
143
+ <div id="vanta-canvas"></div>
144
+ <div class="animated-grid"></div>
145
+
146
+ <!-- Navigation -->
147
+ <nav class="relative z-50 py-6 px-4 sm:px-6 lg:px-8">
148
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
149
+ <div class="flex items-center space-x-2">
150
+ <div class="hexagon w-10 h-10 bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
151
+ <i class="fas fa-eye text-white text-lg"></i>
152
+ </div>
153
+ <span class="text-2xl font-bold gradient-text">AGENTIC VISION</span>
154
+ </div>
155
+
156
+ <div class="hidden md:flex items-center space-x-8">
157
+ <a href="#features" class="text-gray-300 hover:text-primary transition duration-300">Features</a>
158
+ <a href="#technology" class="text-gray-300 hover:text-primary transition duration-300">Technology</a>
159
+ <a href="#use-cases" class="text-gray-300 hover:text-primary transition duration-300">Use Cases</a>
160
+ <a href="#pricing" class="text-gray-300 hover:text-primary transition duration-300">Pricing</a>
161
+ <a href="#contact" class="text-gray-300 hover:text-primary transition duration-300">Contact</a>
162
+ </div>
163
+
164
+ <div class="flex items-center space-x-4">
165
+ <button class="px-6 py-2 rounded-full bg-gradient-to-r from-primary to-secondary text-dark font-bold hover:opacity-90 transition duration-300">
166
+ Get Started
167
+ </button>
168
+ <button id="theme-toggle" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition duration-300">
169
+ <i class="fas fa-moon text-primary"></i>
170
+ </button>
171
+ <button class="md:hidden text-gray-300 hover:text-primary">
172
+ <i class="fas fa-bars text-xl"></i>
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </nav>
177
+
178
+ <!-- Hero Section -->
179
+ <section class="relative min-h-screen flex items-center pt-16 pb-32">
180
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
181
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
182
+ <div>
183
+ <div class="inline-block px-4 py-2 bg-gray-800 rounded-full mb-6">
184
+ <span class="text-primary font-bold">v3.2.0</span>
185
+ <span class="text-gray-300 ml-2">Now Available</span>
186
+ </div>
187
+ <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
188
+ <span class="gradient-text glow">Autonomous</span><br>
189
+ <span class="text-white">Computer Vision</span><br>
190
+ <span class="gradient-text">Powered by AI</span>
191
+ </h1>
192
+ <p class="text-xl text-gray-300 mb-10 max-w-2xl">
193
+ Agentic Vision revolutionizes visual intelligence with self-learning algorithms that adapt in real-time to dynamic environments, delivering unprecedented accuracy and insights.
194
+ </p>
195
+ <div class="flex flex-wrap gap-4">
196
+ <button class="px-8 py-4 rounded-full bg-gradient-to-r from-primary to-secondary text-dark font-bold text-lg hover:opacity-90 transition duration-300 glow-box">
197
+ Start Free Trial
198
+ </button>
199
+ <button class="px-8 py-4 rounded-full border-2 border-primary text-primary font-bold text-lg hover:bg-primary hover:bg-opacity-10 transition duration-300">
200
+ Watch Demo <i class="fas fa-play ml-2"></i>
201
+ </button>
202
+ </div>
203
+ </div>
204
+ <div class="relative">
205
+ <div class="gradient-border p-1 rounded-xl">
206
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
207
+ <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2232&q=80"
208
+ alt="AI Computer Vision"
209
+ class="w-full h-auto rounded-xl opacity-90 hover:opacity-100 transition duration-500">
210
+ <div class="absolute top-4 right-4 bg-gray-900 bg-opacity-70 rounded-full p-3">
211
+ <div class="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
212
+ </div>
213
+ <div class="absolute bottom-4 left-4 bg-gray-900 bg-opacity-70 rounded-lg p-3">
214
+ <div class="flex items-center">
215
+ <div class="pulse w-3 h-3 rounded-full bg-primary mr-2"></div>
216
+ <span class="text-sm text-primary font-bold">LIVE PROCESSING</span>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-primary rounded-full filter blur-3xl opacity-20 -z-10"></div>
222
+ <div class="absolute -top-10 -right-10 w-40 h-40 bg-secondary rounded-full filter blur-3xl opacity-20 -z-10"></div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ <div class="scroll-down">
227
+ <i class="fas fa-chevron-down"></i>
228
+ </div>
229
+ </section>
230
+
231
+ <!-- Clients Section -->
232
+ <section class="py-16 bg-gray-900 bg-opacity-50 backdrop-blur-sm">
233
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
234
+ <p class="text-center text-gray-400 mb-12">TRUSTED BY INNOVATIVE COMPANIES WORLDWIDE</p>
235
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center">
236
+ <div class="flex justify-center">
237
+ <img src="https://logo.clearbit.com/nvidia.com" alt="NVIDIA" class="h-8 opacity-70 hover:opacity-100 transition duration-300">
238
+ </div>
239
+ <div class="flex justify-center">
240
+ <img src="https://logo.clearbit.com/tesla.com" alt="Tesla" class="h-8 opacity-70 hover:opacity-100 transition duration-300">
241
+ </div>
242
+ <div class="flex justify-center">
243
+ <img src="https://logo.clearbit.com/ibm.com" alt="IBM" class="h-8 opacity-70 hover:opacity-100 transition duration-300">
244
+ </div>
245
+ <div class="flex justify-center">
246
+ <img src="https://logo.clearbit.com/lockheedmartin.com" alt="Lockheed Martin" class="h-8 opacity-70 hover:opacity-100 transition duration-300">
247
+ </div>
248
+ <div class="flex justify-center">
249
+ <img src="https://logo.clearbit.com/siemens.com" alt="Siemens" class="h-8 opacity-70 hover:opacity-100 transition duration-300">
250
+ </div>
251
+ <div class="flex justify-center">
252
+ <img src="https://logo.clearbit.com/ge.com" alt="GE" class="h-8 opacity-70 hover:opacity-100 transition duration-300">
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Features Section -->
259
+ <section id="features" class="py-28 relative">
260
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
261
+ <div class="text-center mb-20">
262
+ <span class="inline-block px-4 py-2 bg-gray-800 rounded-full mb-4">
263
+ <span class="text-primary font-bold">FEATURES</span>
264
+ </span>
265
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">
266
+ <span class="gradient-text">Next-Gen</span> Vision Capabilities
267
+ </h2>
268
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
269
+ Our autonomous AI vision system learns and adapts to your specific needs, delivering real-time insights with unparalleled accuracy.
270
+ </p>
271
+ </div>
272
+
273
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
274
+ <!-- Feature 1 -->
275
+ <div class="feature-card bg-gray-900 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 hover:border-primary transition duration-500">
276
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
277
+ <i class="fas fa-brain text-3xl text-primary"></i>
278
+ </div>
279
+ <h3 class="text-2xl font-bold mb-4">Self-Learning Algorithms</h3>
280
+ <p class="text-gray-300 mb-6">
281
+ Our models continuously improve through experience, adapting to new scenarios without human intervention.
282
+ </p>
283
+ <div class="flex items-center text-primary font-medium">
284
+ <span>Learn more</span>
285
+ <i class="fas fa-arrow-right ml-2"></i>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Feature 2 -->
290
+ <div class="feature-card bg-gray-900 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 hover:border-primary transition duration-500">
291
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
292
+ <i class="fas fa-bolt text-3xl text-primary"></i>
293
+ </div>
294
+ <h3 class="text-2xl font-bold mb-4">Real-Time Processing</h3>
295
+ <p class="text-gray-300 mb-6">
296
+ Analyze video streams at 120fps with sub-10ms latency, enabling instant decision-making.
297
+ </p>
298
+ <div class="flex items-center text-primary font-medium">
299
+ <span>Learn more</span>
300
+ <i class="fas fa-arrow-right ml-2"></i>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Feature 3 -->
305
+ <div class="feature-card bg-gray-900 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 hover:border-primary transition duration-500">
306
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
307
+ <i class="fas fa-shield-alt text-3xl text-primary"></i>
308
+ </div>
309
+ <h3 class="text-2xl font-bold mb-4">Edge Computing</h3>
310
+ <p class="text-gray-300 mb-6">
311
+ Deploy on-premises or at the edge with our optimized models that run without cloud dependency.
312
+ </p>
313
+ <div class="flex items-center text-primary font-medium">
314
+ <span>Learn more</span>
315
+ <i class="fas fa-arrow-right ml-2"></i>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Feature 4 -->
320
+ <div class="feature-card bg-gray-900 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 hover:border-primary transition duration-500">
321
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
322
+ <i class="fas fa-project-diagram text-3xl text-primary"></i>
323
+ </div>
324
+ <h3 class="text-2xl font-bold mb-4">Multi-Sensor Fusion</h3>
325
+ <p class="text-gray-300 mb-6">
326
+ Integrate data from cameras, LiDAR, radar, and thermal sensors for comprehensive environmental understanding.
327
+ </p>
328
+ <div class="flex items-center text-primary font-medium">
329
+ <span>Learn more</span>
330
+ <i class="fas fa-arrow-right ml-2"></i>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Feature 5 -->
335
+ <div class="feature-card bg-gray-900 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 hover:border-primary transition duration-500">
336
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
337
+ <i class="fas fa-lock text-3xl text-primary"></i>
338
+ </div>
339
+ <h3 class="text-2xl font-bold mb-4">Privacy-First</h3>
340
+ <p class="text-gray-300 mb-6">
341
+ Process sensitive data locally with our on-device solutions that never send raw data to the cloud.
342
+ </p>
343
+ <div class="flex items-center text-primary font-medium">
344
+ <span>Learn more</span>
345
+ <i class="fas fa-arrow-right ml-2"></i>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Feature 6 -->
350
+ <div class="feature-card bg-gray-900 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 hover:border-primary transition duration-500">
351
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
352
+ <i class="fas fa-cogs text-3xl text-primary"></i>
353
+ </div>
354
+ <h3 class="text-2xl font-bold mb-4">Customizable Models</h3>
355
+ <p class="text-gray-300 mb-6">
356
+ Tailor our vision models to your specific domain with our no-code training platform.
357
+ </p>
358
+ <div class="flex items-center text-primary font-medium">
359
+ <span>Learn more</span>
360
+ <i class="fas fa-arrow-right ml-2"></i>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ <div class="absolute -bottom-20 left-0 w-full h-20 bg-gradient-to-t from-darker to-transparent -z-10"></div>
366
+ </section>
367
+
368
+ <!-- Technology Section -->
369
+ <section id="technology" class="py-28 bg-gray-900 bg-opacity-50 backdrop-blur-sm">
370
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
371
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
372
+ <div class="relative">
373
+ <div class="gradient-border p-1 rounded-xl">
374
+ <div class="bg-gray-900 rounded-xl overflow-hidden relative">
375
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2285&q=80"
376
+ alt="AI Technology"
377
+ class="w-full h-auto rounded-xl">
378
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>
379
+ <div class="absolute bottom-0 left-0 p-8">
380
+ <h3 class="text-2xl font-bold text-white mb-2">Neural Architecture</h3>
381
+ <p class="text-gray-300">Our proprietary neural networks achieve state-of-the-art performance</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ <div class="absolute -top-10 -left-10 w-40 h-40 bg-primary rounded-full filter blur-3xl opacity-10 -z-10"></div>
386
+ </div>
387
+
388
+ <div>
389
+ <span class="inline-block px-4 py-2 bg-gray-800 rounded-full mb-4">
390
+ <span class="text-primary font-bold">TECHNOLOGY</span>
391
+ </span>
392
+ <h2 class="text-4xl md:text-5xl font-bold mb-8">
393
+ <span class="gradient-text">Breakthrough</span> AI Architecture
394
+ </h2>
395
+
396
+ <div class="space-y-8">
397
+ <div class="flex">
398
+ <div class="mr-6">
399
+ <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center">
400
+ <span class="text-primary font-bold text-xl">01</span>
401
+ </div>
402
+ </div>
403
+ <div>
404
+ <h3 class="text-xl font-bold mb-2">Transformer-Based Vision</h3>
405
+ <p class="text-gray-300">
406
+ Leveraging the latest transformer architectures adapted for computer vision tasks, achieving superior performance on complex scenes.
407
+ </p>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="flex">
412
+ <div class="mr-6">
413
+ <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center">
414
+ <span class="text-primary font-bold text-xl">02</span>
415
+ </div>
416
+ </div>
417
+ <div>
418
+ <h3 class="text-xl font-bold mb-2">Neuromorphic Computing</h3>
419
+ <p class="text-gray-300">
420
+ Inspired by biological neural systems, our models process information more efficiently, reducing power consumption by up to 90%.
421
+ </p>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="flex">
426
+ <div class="mr-6">
427
+ <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center">
428
+ <span class="text-primary font-bold text-xl">03</span>
429
+ </div>
430
+ </div>
431
+ <div>
432
+ <h3 class="text-xl font-bold mb-2">Federated Learning</h3>
433
+ <p class="text-gray-300">
434
+ Our decentralized training approach allows models to improve across multiple installations while preserving data privacy.
435
+ </p>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </section>
443
+
444
+ <!-- Stats Section -->
445
+ <section class="py-20 bg-gradient-to-br from-gray-900 to-darker">
446
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
447
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
448
+ <div class="p-8">
449
+ <div class="text-5xl font-bold text-primary mb-2">99.7%</div>
450
+ <div class="text-gray-300">Accuracy</div>
451
+ </div>
452
+ <div class="p-8">
453
+ <div class="text-5xl font-bold text-primary mb-2">10ms</div>
454
+ <div class="text-gray-300">Latency</div>
455
+ </div>
456
+ <div class="p-8">
457
+ <div class="text-5xl font-bold text-primary mb-2">120+</div>
458
+ <div class="text-gray-300">FPS Processing</div>
459
+ </div>
460
+ <div class="p-8">
461
+ <div class="text-5xl font-bold text-primary mb-2">1M+</div>
462
+ <div class="text-gray-300">Daily Predictions</div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </section>
467
+
468
+ <!-- Use Cases Section -->
469
+ <section id="use-cases" class="py-28 relative">
470
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
471
+ <div class="text-center mb-20">
472
+ <span class="inline-block px-4 py-2 bg-gray-800 rounded-full mb-4">
473
+ <span class="text-primary font-bold">USE CASES</span>
474
+ </span>
475
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">
476
+ <span class="gradient-text">Transformative</span> Applications
477
+ </h2>
478
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
479
+ From autonomous vehicles to industrial inspection, our technology is powering the next generation of vision-enabled applications.
480
+ </p>
481
+ </div>
482
+
483
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
484
+ <!-- Use Case 1 -->
485
+ <div class="gradient-border p-1 rounded-xl h-full">
486
+ <div class="bg-gray-900 rounded-xl h-full p-8">
487
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
488
+ <i class="fas fa-car text-3xl text-primary"></i>
489
+ </div>
490
+ <h3 class="text-2xl font-bold mb-4">Autonomous Vehicles</h3>
491
+ <p class="text-gray-300 mb-6">
492
+ Enable self-driving cars to perceive and understand complex urban environments with human-like intuition.
493
+ </p>
494
+ <div class="mt-6 pt-6 border-t border-gray-800">
495
+ <div class="flex items-center">
496
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
497
+ <i class="fas fa-check text-primary"></i>
498
+ </div>
499
+ <span class="text-gray-300">Object Detection</span>
500
+ </div>
501
+ <div class="flex items-center mt-4">
502
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
503
+ <i class="fas fa-check text-primary"></i>
504
+ </div>
505
+ <span class="text-gray-300">Path Prediction</span>
506
+ </div>
507
+ <div class="flex items-center mt-4">
508
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
509
+ <i class="fas fa-check text-primary"></i>
510
+ </div>
511
+ <span class="text-gray-300">Traffic Analysis</span>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Use Case 2 -->
518
+ <div class="gradient-border p-1 rounded-xl h-full">
519
+ <div class="bg-gray-900 rounded-xl h-full p-8">
520
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
521
+ <i class="fas fa-industry text-3xl text-primary"></i>
522
+ </div>
523
+ <h3 class="text-2xl font-bold mb-4">Smart Manufacturing</h3>
524
+ <p class="text-gray-300 mb-6">
525
+ Automate quality control and predictive maintenance with vision systems that learn from every inspection.
526
+ </p>
527
+ <div class="mt-6 pt-6 border-t border-gray-800">
528
+ <div class="flex items-center">
529
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
530
+ <i class="fas fa-check text-primary"></i>
531
+ </div>
532
+ <span class="text-gray-300">Defect Detection</span>
533
+ </div>
534
+ <div class="flex items-center mt-4">
535
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
536
+ <i class="fas fa-check text-primary"></i>
537
+ </div>
538
+ <span class="text-gray-300">Process Optimization</span>
539
+ </div>
540
+ <div class="flex items-center mt-4">
541
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
542
+ <i class="fas fa-check text-primary"></i>
543
+ </div>
544
+ <span class="text-gray-300">Safety Monitoring</span>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+
550
+ <!-- Use Case 3 -->
551
+ <div class="gradient-border p-1 rounded-xl h-full">
552
+ <div class="bg-gray-900 rounded-xl h-full p-8">
553
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mb-6">
554
+ <i class="fas fa-shield-alt text-3xl text-primary"></i>
555
+ </div>
556
+ <h3 class="text-2xl font-bold mb-4">Security & Surveillance</h3>
557
+ <p class="text-gray-300 mb-6">
558
+ Intelligent monitoring systems that detect anomalies and threats in real-time while preserving privacy.
559
+ </p>
560
+ <div class="mt-6 pt-6 border-t border-gray-800">
561
+ <div class="flex items-center">
562
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
563
+ <i class="fas fa-check text-primary"></i>
564
+ </div>
565
+ <span class="text-gray-300">Anomaly Detection</span>
566
+ </div>
567
+ <div class="flex items-center mt-4">
568
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
569
+ <i class="fas fa-check text-primary"></i>
570
+ </div>
571
+ <span class="text-gray-300">Facial Recognition</span>
572
+ </div>
573
+ <div class="flex items-center mt-4">
574
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-3">
575
+ <i class="fas fa-check text-primary"></i>
576
+ </div>
577
+ <span class="text-gray-300">Crowd Analysis</span>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ <div class="absolute -bottom-20 left-0 w-full h-20 bg-gradient-to-t from-darker to-transparent -z-10"></div>
585
+ </section>
586
+
587
+ <!-- Demo Section -->
588
+ <section class="py-28 bg-gray-900 bg-opacity-50 backdrop-blur-sm">
589
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
590
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
591
+ <div>
592
+ <span class="inline-block px-4 py-2 bg-gray-800 rounded-full mb-4">
593
+ <span class="text-primary font-bold">LIVE DEMO</span>
594
+ </span>
595
+ <h2 class="text-4xl md:text-5xl font-bold mb-8">
596
+ <span class="gradient-text">Experience</span> the Power
597
+ </h2>
598
+ <p class="text-xl text-gray-300 mb-8">
599
+ See our AI vision system in action. Upload your own images or try our interactive demo to witness real-time object detection and scene understanding.
600
+ </p>
601
+ <div class="flex flex-wrap gap-4">
602
+ <button class="px-8 py-4 rounded-full bg-gradient-to-r from-primary to-secondary text-dark font-bold text-lg hover:opacity-90 transition duration-300">
603
+ Try Live Demo
604
+ </button>
605
+ <button class="px-8 py-4 rounded-full border-2 border-primary text-primary font-bold text-lg hover:bg-primary hover:bg-opacity-10 transition duration-300">
606
+ Request Custom Demo
607
+ </button>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="relative">
612
+ <div class="gradient-border p-1 rounded-xl">
613
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
614
+ <div class="relative">
615
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80"
616
+ alt="AI Demo"
617
+ class="w-full h-auto rounded-t-xl">
618
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-70"></div>
619
+ <div class="absolute bottom-0 left-0 p-6">
620
+ <div class="flex items-center">
621
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse"></div>
622
+ <span class="text-sm text-green-500 font-bold">ACTIVE PROCESSING</span>
623
+ </div>
624
+ </div>
625
+ </div>
626
+ <div class="p-6">
627
+ <div class="flex justify-between items-center mb-4">
628
+ <div>
629
+ <span class="text-primary font-bold">12 objects detected</span>
630
+ <span class="text-gray-400 ml-2">(98.7% confidence)</span>
631
+ </div>
632
+ <div class="text-gray-400">0.4s processing time</div>
633
+ </div>
634
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
635
+ <div class="bg-primary h-2.5 rounded-full" style="width: 98.7%"></div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ <div class="absolute -top-10 -right-10 w-40 h-40 bg-secondary rounded-full filter blur-3xl opacity-20 -z-10"></div>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </section>
645
+
646
+ <!-- Pricing Section -->
647
+ <section id="pricing" class="py-28 relative">
648
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
649
+ <div class="text-center mb-20">
650
+ <span class="inline-block px-4 py-2 bg-gray-800 rounded-full mb-4">
651
+ <span class="text-primary font-bold">PRICING</span>
652
+ </span>
653
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">
654
+ <span class="gradient-text">Flexible</span> Plans
655
+ </h2>
656
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
657
+ Choose the plan that fits your needs, from experimentation to enterprise-scale deployment.
658
+ </p>
659
+ </div>
660
+
661
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
662
+ <!-- Starter Plan -->
663
+ <div class="bg-gray-900 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 hover:border-primary transition duration-500">
664
+ <div class="mb-8">
665
+ <h3 class="text-2xl font-bold mb-2">Starter</h3>
666
+ <p class="text-gray-300">Perfect for testing and small projects</p>
667
+ </div>
668
+ <div class="mb-8">
669
+ <div class="text-5xl font-bold mb-2">$99<span class="text-xl text-gray-400">/mo</span></div>
670
+ <p class="text-gray-300">or $999/year (save 15%)</p>
671
+ </div>
672
+ <div class="mb-8">
673
+ <div class="flex items-center mb-4">
674
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
675
+ <i class="fas fa-check text-primary text-xs"></i>
676
+ </div>
677
+ <span>10,000 monthly predictions</span>
678
+ </div>
679
+ <div class="flex items-center mb-4">
680
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
681
+ <i class="fas fa-check text-primary text-xs"></i>
682
+ </div>
683
+ <span>2 pre-trained models</span>
684
+ </div>
685
+ <div class="flex items-center mb-4">
686
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
687
+ <i class="fas fa-check text-primary text-xs"></i>
688
+ </div>
689
+ <span>Community support</span>
690
+ </div>
691
+ <div class="flex items-center">
692
+ <div class="w-5 h-5 bg-gray-700 rounded-full flex items-center justify-center mr-3">
693
+ <i class="fas fa-times text-gray-500 text-xs"></i>
694
+ </div>
695
+ <span class="text-gray-500">Custom model training</span>
696
+ </div>
697
+ </div>
698
+ <button class="w-full py-3 rounded-full border-2 border-primary text-primary font-bold hover:bg-primary hover:bg-opacity-10 transition duration-300">
699
+ Get Started
700
+ </button>
701
+ </div>
702
+
703
+ <!-- Pro Plan (Featured) -->
704
+ <div class="relative">
705
+ <div class="absolute -top-4 -left-4 -right-4 -bottom-4 bg-gradient-to-br from-primary to-secondary rounded-xl opacity-20 -z-10"></div>
706
+ <div class="bg-gray-900 rounded-xl p-8 border border-primary glow-box">
707
+ <div class="mb-8">
708
+ <div class="flex justify-between items-start">
709
+ <div>
710
+ <h3 class="text-2xl font-bold mb-2">Pro</h3>
711
+ <p class="text-gray-300">For growing businesses and teams</p>
712
+ </div>
713
+ <div class="px-3 py-1 bg-primary bg-opacity-20 rounded-full text-primary text-sm font-bold">
714
+ POPULAR
715
+ </div>
716
+ </div>
717
+ </div>
718
+ <div class="mb-8">
719
+ <div class="text-5xl font-bold mb-2">$499<span class="text-xl text-gray-400">/mo</span></div>
720
+ <p class="text-gray-300">or $4,999/year (save 15%)</p>
721
+ </div>
722
+ <div class="mb-8">
723
+ <div class="flex items-center mb-4">
724
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
725
+ <i class="fas fa-check text-primary text-xs"></i>
726
+ </div>
727
+ <span>100,000 monthly predictions</span>
728
+ </div>
729
+ <div class="flex items-center mb-4">
730
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
731
+ <i class="fas fa-check text-primary text-xs"></i>
732
+ </div>
733
+ <span>10 pre-trained models</span>
734
+ </div>
735
+ <div class="flex items-center mb-4">
736
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
737
+ <i class="fas fa-check text-primary text-xs"></i>
738
+ </div>
739
+ <span>Priority support</span>
740
+ </div>
741
+ <div class="flex items-center">
742
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
743
+ <i class="fas fa-check text-primary text-xs"></i>
744
+ </div>
745
+ <span>Custom model training</span>
746
+ </div>
747
+ </div>
748
+ <button class="w-full py-3 rounded-full bg-gradient-to-r from-primary to-secondary text-dark font-bold hover:opacity-90 transition duration-300">
749
+ Get Started
750
+ </button>
751
+ </div>
752
+ </div>
753
+
754
+ <!-- Enterprise Plan -->
755
+ <div class="bg-gray-900 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 hover:border-primary transition duration-500">
756
+ <div class="mb-8">
757
+ <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
758
+ <p class="text-gray-300">For large-scale deployments</p>
759
+ </div>
760
+ <div class="mb-8">
761
+ <div class="text-5xl font-bold mb-2">Custom</div>
762
+ <p class="text-gray-300">Tailored to your requirements</p>
763
+ </div>
764
+ <div class="mb-8">
765
+ <div class="flex items-center mb-4">
766
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
767
+ <i class="fas fa-check text-primary text-xs"></i>
768
+ </div>
769
+ <span>Unlimited predictions</span>
770
+ </div>
771
+ <div class="flex items-center mb-4">
772
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
773
+ <i class="fas fa-check text-primary text-xs"></i>
774
+ </div>
775
+ <span>All pre-trained models</span>
776
+ </div>
777
+ <div class="flex items-center mb-4">
778
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
779
+ <i class="fas fa-check text-primary text-xs"></i>
780
+ </div>
781
+ <span>24/7 dedicated support</span>
782
+ </div>
783
+ <div class="flex items-center">
784
+ <div class="w-5 h-5 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-3">
785
+ <i class="fas fa-check text-primary text-xs"></i>
786
+ </div>
787
+ <span>Custom solutions</span>
788
+ </div>
789
+ </div>
790
+ <button class="w-full py-3 rounded-full border-2 border-primary text-primary font-bold hover:bg-primary hover:bg-opacity-10 transition duration-300">
791
+ Contact Sales
792
+ </button>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </section>
797
+
798
+ <!-- CTA Section -->
799
+ <section class="py-28 bg-gradient-to-br from-gray-900 to-darker">
800
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
801
+ <h2 class="text-4xl md:text-5xl font-bold mb-8">
802
+ <span class="gradient-text">Ready to Transform</span> Your Vision Capabilities?
803
+ </h2>
804
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-12">
805
+ Join thousands of innovators who are leveraging Agentic Vision to build the next generation of intelligent applications.
806
+ </p>
807
+ <div class="flex flex-wrap justify-center gap-6">
808
+ <button class="px-8 py-4 rounded-full bg-gradient-to-r from-primary to-secondary text-dark font-bold text-lg hover:opacity-90 transition duration-300 glow-box">
809
+ Start Free Trial
810
+ </button>
811
+ <button class="px-8 py-4 rounded-full border-2 border-primary text-primary font-bold text-lg hover:bg-primary hover:bg-opacity-10 transition duration-300">
812
+ Schedule Demo <i class="fas fa-calendar-alt ml-2"></i>
813
+ </button>
814
+ </div>
815
+ </div>
816
+ </section>
817
+
818
+ <!-- Contact Section -->
819
+ <section id="contact" class="py-28 relative">
820
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
821
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
822
+ <div>
823
+ <span class="inline-block px-4 py-2 bg-gray-800 rounded-full mb-4">
824
+ <span class="text-primary font-bold">CONTACT</span>
825
+ </span>
826
+ <h2 class="text-4xl md:text-5xl font-bold mb-8">
827
+ <span class="gradient-text">Get in Touch</span> With Us
828
+ </h2>
829
+ <p class="text-xl text-gray-300 mb-12">
830
+ Have questions about our technology or pricing? Our team is ready to help you find the right solution for your needs.
831
+ </p>
832
+
833
+ <div class="space-y-8">
834
+ <div class="flex items-start">
835
+ <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mr-6">
836
+ <i class="fas fa-envelope text-primary text-xl"></i>
837
+ </div>
838
+ <div>
839
+ <h3 class="text-xl font-bold mb-2">Email Us</h3>
840
+ <p class="text-gray-300">[email protected]</p>
841
+ <p class="text-gray-300">[email protected]</p>
842
+ </div>
843
+ </div>
844
+
845
+ <div class="flex items-start">
846
+ <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mr-6">
847
+ <i class="fas fa-phone-alt text-primary text-xl"></i>
848
+ </div>
849
+ <div>
850
+ <h3 class="text-xl font-bold mb-2">Call Us</h3>
851
+ <p class="text-gray-300">+1 (555) 123-4567</p>
852
+ <p class="text-gray-300">Mon-Fri, 9am-5pm PST</p>
853
+ </div>
854
+ </div>
855
+
856
+ <div class="flex items-start">
857
+ <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mr-6">
858
+ <i class="fas fa-map-marker-alt text-primary text-xl"></i>
859
+ </div>
860
+ <div>
861
+ <h3 class="text-xl font-bold mb-2">Visit Us</h3>
862
+ <p class="text-gray-300">123 AI Boulevard</p>
863
+ <p class="text-gray-300">San Francisco, CA 94107</p>
864
+ </div>
865
+ </div>
866
+ </div>
867
+ </div>
868
+
869
+ <div class="gradient-border p-1 rounded-xl">
870
+ <div class="bg-gray-900 rounded-xl p-8">
871
+ <h3 class="text-2xl font-bold mb-8">Send us a message</h3>
872
+ <form>
873
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
874
+ <div>
875
+ <label for="name" class="block text-gray-300 mb-2">Name</label>
876
+ <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
877
+ </div>
878
+ <div>
879
+ <label for="email" class="block text-gray-300 mb-2">Email</label>
880
+ <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
881
+ </div>
882
+ </div>
883
+ <div class="mb-6">
884
+ <label for="subject" class="block text-gray-300 mb-2">Subject</label>
885
+ <input type="text" id="subject" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
886
+ </div>
887
+ <div class="mb-6">
888
+ <label for="message" class="block text-gray-300 mb-2">Message</label>
889
+ <textarea id="message" rows="5" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
890
+ </div>
891
+ <button type="submit" class="w-full py-4 rounded-full bg-gradient-to-r from-primary to-secondary text-dark font-bold hover:opacity-90 transition duration-300">
892
+ Send Message
893
+ </button>
894
+ </form>
895
+ </div>
896
+ </div>
897
+ </div>
898
+ </div>
899
+ <div class="absolute -bottom-20 left-0 w-full h-20 bg-gradient-to-t from-darker to-transparent -z-10"></div>
900
+ </section>
901
+
902
+ <!-- Footer -->
903
+ <footer class="bg-darker py-16">
904
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
905
+ <div class="grid grid-cols-1 md:grid-cols-5 gap-12">
906
+ <div class="md:col-span-2">
907
+ <div class="flex items-center space-x-2 mb-6">
908
+ <div class="hexagon w-10 h-10 bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
909
+ <i class="fas fa-eye text-white text-lg"></i>
910
+ </div>
911
+ <span class="text-2xl font-bold gradient-text">AGENTIC VISION</span>
912
+ </div>
913
+ <p class="text-gray-400 mb-6">
914
+ The future of autonomous computer vision powered by self-learning AI algorithms.
915
+ </p>
916
+ <div class="flex space-x-4">
917
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-primary hover:bg-gray-700 transition duration-300">
918
+ <i class="fab fa-twitter"></i>
919
+ </a>
920
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-primary hover:bg-gray-700 transition duration-300">
921
+ <i class="fab fa-linkedin-in"></i>
922
+ </a>
923
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-primary hover:bg-gray-700 transition duration-300">
924
+ <i class="fab fa-github"></i>
925
+ </a>
926
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-primary hover:bg-gray-700 transition duration-300">
927
+ <i class="fab fa-youtube"></i>
928
+ </a>
929
+ </div>
930
+ </div>
931
+
932
+ <div>
933
+ <h3 class="text-lg font-bold text-white mb-6">Product</h3>
934
+ <ul class="space-y-3">
935
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Features</a></li>
936
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Pricing</a></li>
937
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Demo</a></li>
938
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">API</a></li>
939
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Integrations</a></li>
940
+ </ul>
941
+ </div>
942
+
943
+ <div>
944
+ <h3 class="text-lg font-bold text-white mb-6">Resources</h3>
945
+ <ul class="space-y-3">
946
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Documentation</a></li>
947
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Tutorials</a></li>
948
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Blog</a></li>
949
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Case Studies</a></li>
950
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Research</a></li>
951
+ </ul>
952
+ </div>
953
+
954
+ <div>
955
+ <h3 class="text-lg font-bold text-white mb-6">Company</h3>
956
+ <ul class="space-y-3">
957
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">About</a></li>
958
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Careers</a></li>
959
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Press</a></li>
960
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Partners</a></li>
961
+ <li><a href="#" class="text-gray-400 hover:text-primary transition duration-300">Contact</a></li>
962
+ </ul>
963
+ </div>
964
+ </div>
965
+
966
+ <div class="border-t border-gray-800 mt-16 pt-10 flex flex-col md:flex-row justify-between items-center">
967
+ <p class="text-gray-400 mb-4 md:mb-0">
968
+ © 2023 Agentic Vision. All rights reserved.
969
+ </p>
970
+ <div class="flex space-x-6">
971
+ <a href="#" class="text-gray-400 hover:text-primary transition duration-300">Privacy Policy</a>
972
+ <a href="#" class="text-gray-400 hover:text-primary transition duration-300">Terms of Service</a>
973
+ <a href="#" class="text-gray-400 hover:text-primary transition duration-300">Cookies</a>
974
+ </div>
975
+ </div>
976
+ </div>
977
+ </footer>
978
+
979
+ <script>
980
+ // Initialize Vanta.js animated background
981
+ VANTA.NET({
982
+ el: "#vanta-canvas",
983
+ mouseControls: true,
984
+ touchControls: true,
985
+ gyroControls: false,
986
+ minHeight: 200.00,
987
+ minWidth: 200.00,
988
+ scale: 1.00,
989
+ scaleMobile: 1.00,
990
+ color: 0x00f0ff,
991
+ backgroundColor: 0x050508,
992
+ points: 12.00,
993
+ maxDistance: 20.00,
994
+ spacing: 15.00
995
+ });
996
+
997
+ // Theme toggle functionality
998
+ const themeToggle = document.getElementById('theme-toggle');
999
+ const html = document.documentElement;
1000
+
1001
+ themeToggle.addEventListener('click', () => {
1002
+ html.classList.toggle('dark');
1003
+ const isDark = html.classList.contains('dark');
1004
+
1005
+ if (isDark) {
1006
+ themeToggle.innerHTML = '<i class="fas fa-moon text-primary"></i>';
1007
+ } else {
1008
+ themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-400"></i>';
1009
+ }
1010
+ });
1011
+
1012
+ // Smooth scrolling for anchor links
1013
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1014
+ anchor.addEventListener('click', function (e) {
1015
+ e.preventDefault();
1016
+
1017
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1018
+ behavior: 'smooth'
1019
+ });
1020
+ });
1021
+ });
1022
+
1023
+ // Animation on scroll
1024
+ const observerOptions = {
1025
+ threshold: 0.1
1026
+ };
1027
+
1028
+ const observer = new IntersectionObserver((entries) => {
1029
+ entries.forEach(entry => {
1030
+ if (entry.isIntersecting) {
1031
+ entry.target.classList.add('animate-fadeIn');
1032
+ observer.unobserve(entry.target);
1033
+ }
1034
+ });
1035
+ }, observerOptions);
1036
+
1037
+ document.querySelectorAll('.feature-card, .gradient-border').forEach(el => {
1038
+ observer.observe(el);
1039
+ });
1040
+ </script>
1041
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Klliu04/testing123" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1042
+ </html>