Hugging Face's logo

Spaces:
federi
/
connect-ai
Running

App Files Community
federi commited on
Commit
caac2f3
·
verified ·
1 Parent(s): f0fd0aa

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +942 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Connect Ai
3
- emoji: 🚀
4
  colorFrom: pink
5
- colorTo: yellow
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: connect-ai
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: purple
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,942 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Connect AI - Smart Access & Surveillance Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .video-container {
18
+ position: relative;
19
+ padding-bottom: 56.25%;
20
+ height: 0;
21
+ overflow: hidden;
22
+ }
23
+ .video-container iframe {
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ }
30
+ .feature-icon {
31
+ transition: all 0.3s ease;
32
+ }
33
+ .feature-card:hover .feature-icon {
34
+ transform: scale(1.1);
35
+ }
36
+ .nav-link {
37
+ position: relative;
38
+ }
39
+ .nav-link:after {
40
+ content: '';
41
+ position: absolute;
42
+ width: 0;
43
+ height: 2px;
44
+ bottom: -2px;
45
+ left: 0;
46
+ background-color: #3b82f6;
47
+ transition: width 0.3s ease;
48
+ }
49
+ .nav-link:hover:after {
50
+ width: 100%;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="font-sans antialiased text-gray-800">
55
+ <!-- Header -->
56
+ <header class="gradient-bg text-white sticky top-0 z-50 shadow-lg">
57
+ <div class="container mx-auto px-6 py-4">
58
+ <div class="flex items-center justify-between">
59
+ <div class="flex items-center">
60
+ <div class="mr-4">
61
+ <i class="fas fa-robot text-3xl text-blue-300"></i>
62
+ </div>
63
+ <div>
64
+ <h1 class="text-2xl font-bold">Connect<span class="text-blue-300">AI</span></h1>
65
+ <p class="text-xs text-blue-200">Smart Access & Surveillance</p>
66
+ </div>
67
+ </div>
68
+ <nav class="hidden md:flex space-x-8">
69
+ <a href="#home" class="nav-link text-white hover:text-blue-300 font-medium">Home</a>
70
+ <a href="#features" class="nav-link text-white hover:text-blue-300 font-medium">Features</a>
71
+ <a href="#solutions" class="nav-link text-white hover:text-blue-300 font-medium">Solutions</a>
72
+ <a href="#pricing" class="nav-link text-white hover:text-blue-300 font-medium">Pricing</a>
73
+ <a href="#contact" class="nav-link text-white hover:text-blue-300 font-medium">Contact</a>
74
+ </nav>
75
+ <div class="md:hidden">
76
+ <button id="menu-toggle" class="text-white focus:outline-none">
77
+ <i class="fas fa-bars text-2xl"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <!-- Mobile menu -->
83
+ <div id="mobile-menu" class="hidden md:hidden gradient-bg px-6 pb-4">
84
+ <div class="flex flex-col space-y-3">
85
+ <a href="#home" class="text-white hover:text-blue-300 font-medium">Home</a>
86
+ <a href="#features" class="text-white hover:text-blue-300 font-medium">Features</a>
87
+ <a href="#solutions" class="text-white hover:text-blue-300 font-medium">Solutions</a>
88
+ <a href="#pricing" class="text-white hover:text-blue-300 font-medium">Pricing</a>
89
+ <a href="#contact" class="text-white hover:text-blue-300 font-medium">Contact</a>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Hero Section -->
95
+ <section id="home" class="gradient-bg text-white py-20">
96
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
97
+ <div class="md:w-1/2 mb-10 md:mb-0">
98
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">
99
+ Next-Gen Access Control <br>with <span class="text-blue-300">AI & RFID</span>
100
+ </h1>
101
+ <p class="text-xl md:text-2xl mb-8 text-blue-100">
102
+ Secure your premises with our advanced facial recognition and RFID automation system.
103
+ </p>
104
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
105
+ <a href="#contact" class="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">
106
+ Get Started
107
+ </a>
108
+ <a href="#features" class="border-2 border-white text-white hover:bg-blue-700 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">
109
+ Learn More
110
+ </a>
111
+ </div>
112
+ </div>
113
+ <div class="md:w-1/2">
114
+ <div class="video-container rounded-xl shadow-2xl overflow-hidden">
115
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Trusted By Section -->
122
+ <section class="bg-gray-50 py-12">
123
+ <div class="container mx-auto px-6">
124
+ <h2 class="text-center text-gray-500 text-sm font-semibold uppercase tracking-wider mb-8">
125
+ Trusted by industry leaders
126
+ </h2>
127
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
128
+ <div class="h-12 flex items-center">
129
+ <i class="fab fa-microsoft text-4xl text-gray-500 hover:text-blue-600 transition"></i>
130
+ </div>
131
+ <div class="h-12 flex items-center">
132
+ <i class="fab fa-google text-4xl text-gray-500 hover:text-blue-600 transition"></i>
133
+ </div>
134
+ <div class="h-12 flex items-center">
135
+ <i class="fab fa-amazon text-4xl text-gray-500 hover:text-blue-600 transition"></i>
136
+ </div>
137
+ <div class="h-12 flex items-center">
138
+ <i class="fab fa-apple text-4xl text-gray-500 hover:text-blue-600 transition"></i>
139
+ </div>
140
+ <div class="h-12 flex items-center">
141
+ <i class="fab fa-ubuntu text-4xl text-gray-500 hover:text-blue-600 transition"></i>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </section>
146
+
147
+ <!-- Features Section -->
148
+ <section id="features" class="py-20 bg-white">
149
+ <div class="container mx-auto px-6">
150
+ <div class="text-center mb-16">
151
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
152
+ Advanced Security <span class="text-blue-600">Features</span>
153
+ </h2>
154
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
155
+ Our system combines cutting-edge technologies to deliver unparalleled security and convenience.
156
+ </p>
157
+ </div>
158
+
159
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
160
+ <!-- Feature 1 -->
161
+ <div class="feature-card bg-gray-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
162
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
163
+ <i class="fas fa-id-card feature-icon text-white text-2xl"></i>
164
+ </div>
165
+ <h3 class="text-xl font-bold text-gray-800 mb-3">RFID Access Control</h3>
166
+ <p class="text-gray-600">
167
+ Seamless entry with RFID cards or tags. Our system supports multiple authentication levels and instant deactivation of lost credentials.
168
+ </p>
169
+ </div>
170
+
171
+ <!-- Feature 2 -->
172
+ <div class="feature-card bg-gray-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
173
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
174
+ <i class="fas fa-user-shield feature-icon text-white text-2xl"></i>
175
+ </div>
176
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Facial Recognition</h3>
177
+ <p class="text-gray-600">
178
+ State-of-the-art facial recognition with 99.8% accuracy. Works in various lighting conditions and detects masks or disguises.
179
+ </p>
180
+ </div>
181
+
182
+ <!-- Feature 3 -->
183
+ <div class="feature-card bg-gray-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
184
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
185
+ <i class="fas fa-bell feature-icon text-white text-2xl"></i>
186
+ </div>
187
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Real-time Alerts</h3>
188
+ <p class="text-gray-600">
189
+ Instant notifications for unauthorized access attempts, tailgating, or suspicious activities sent directly to your devices.
190
+ </p>
191
+ </div>
192
+
193
+ <!-- Feature 4 -->
194
+ <div class="feature-card bg-gray-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
195
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
196
+ <i class="fas fa-cloud feature-icon text-white text-2xl"></i>
197
+ </div>
198
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Cloud Integration</h3>
199
+ <p class="text-gray-600">
200
+ All access logs and facial recognition data securely stored in the cloud with military-grade encryption and easy retrieval.
201
+ </p>
202
+ </div>
203
+
204
+ <!-- Feature 5 -->
205
+ <div class="feature-card bg-gray-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
206
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
207
+ <i class="fas fa-mobile-alt feature-icon text-white text-2xl"></i>
208
+ </div>
209
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Mobile Management</h3>
210
+ <p class="text-gray-600">
211
+ Complete system control from your smartphone. Grant temporary access, view live feeds, or check logs anytime, anywhere.
212
+ </p>
213
+ </div>
214
+
215
+ <!-- Feature 6 -->
216
+ <div class="feature-card bg-gray-50 rounded-xl p-8 transition duration-300 hover:shadow-lg">
217
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
218
+ <i class="fas fa-chart-line feature-icon text-white text-2xl"></i>
219
+ </div>
220
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Analytics Dashboard</h3>
221
+ <p class="text-gray-600">
222
+ Comprehensive analytics on access patterns, peak hours, and security incidents with customizable reports and export options.
223
+ </p>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Solutions Section -->
230
+ <section id="solutions" class="py-20 bg-gray-50">
231
+ <div class="container mx-auto px-6">
232
+ <div class="text-center mb-16">
233
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
234
+ Tailored <span class="text-blue-600">Solutions</span> for Every Need
235
+ </h2>
236
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
237
+ Our system adapts to various environments and security requirements.
238
+ </p>
239
+ </div>
240
+
241
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
242
+ <!-- Solution 1 -->
243
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
244
+ <div class="h-48 gradient-bg flex items-center justify-center">
245
+ <i class="fas fa-building text-white text-6xl"></i>
246
+ </div>
247
+ <div class="p-8">
248
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Corporate Offices</h3>
249
+ <p class="text-gray-600 mb-4">
250
+ Secure your business premises with multi-factor authentication, visitor management, and employee tracking.
251
+ </p>
252
+ <ul class="space-y-2 text-gray-600">
253
+ <li class="flex items-start">
254
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
255
+ <span>Department-specific access levels</span>
256
+ </li>
257
+ <li class="flex items-start">
258
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
259
+ <span>Visitor pre-registration system</span>
260
+ </li>
261
+ <li class="flex items-start">
262
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
263
+ <span>Integration with HR systems</span>
264
+ </li>
265
+ </ul>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Solution 2 -->
270
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
271
+ <div class="h-48 gradient-bg flex items-center justify-center">
272
+ <i class="fas fa-home text-white text-6xl"></i>
273
+ </div>
274
+ <div class="p-8">
275
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Residential Complexes</h3>
276
+ <p class="text-gray-600 mb-4">
277
+ Protect your residents with smart access control for gates, elevators, and common areas.
278
+ </p>
279
+ <ul class="space-y-2 text-gray-600">
280
+ <li class="flex items-start">
281
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
282
+ <span>Resident mobile app integration</span>
283
+ </li>
284
+ <li class="flex items-start">
285
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
286
+ <span>Delivery personnel management</span>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
290
+ <span>Emergency lockdown features</span>
291
+ </li>
292
+ </ul>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Solution 3 -->
297
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
298
+ <div class="h-48 gradient-bg flex items-center justify-center">
299
+ <i class="fas fa-industry text-white text-6xl"></i>
300
+ </div>
301
+ <div class="p-8">
302
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Industrial Facilities</h3>
303
+ <p class="text-gray-600 mb-4">
304
+ High-security solutions for restricted areas, hazardous zones, and equipment access.
305
+ </p>
306
+ <ul class="space-y-2 text-gray-600">
307
+ <li class="flex items-start">
308
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
309
+ <span>PPE detection and enforcement</span>
310
+ </li>
311
+ <li class="flex items-start">
312
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
313
+ <span>Time-based access restrictions</span>
314
+ </li>
315
+ <li class="flex items-start">
316
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
317
+ <span>Integration with safety systems</span>
318
+ </li>
319
+ </ul>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </section>
325
+
326
+ <!-- How It Works Section -->
327
+ <section class="py-20 bg-white">
328
+ <div class="container mx-auto px-6">
329
+ <div class="text-center mb-16">
330
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
331
+ How Connect<span class="text-blue-600">AI</span> Works
332
+ </h2>
333
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
334
+ Simple setup, intelligent operation, powerful results.
335
+ </p>
336
+ </div>
337
+
338
+ <div class="flex flex-col md:flex-row items-center">
339
+ <div class="md:w-1/2 mb-10 md:mb-0">
340
+ <div class="relative">
341
+ <div class="absolute -left-4 -top-4 w-32 h-32 rounded-full bg-blue-100 opacity-50"></div>
342
+ <div class="absolute -right-4 -bottom-4 w-32 h-32 rounded-full bg-blue-100 opacity-50"></div>
343
+ <div class="relative bg-gray-50 rounded-xl p-8 shadow-lg">
344
+ <div class="flex items-start mb-8">
345
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-4">
346
+ <span class="text-white font-bold">1</span>
347
+ </div>
348
+ <div>
349
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Installation</h3>
350
+ <p class="text-gray-600">
351
+ Our certified technicians install RFID readers and high-resolution cameras at all entry points.
352
+ </p>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="flex items-start mb-8">
357
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-4">
358
+ <span class="text-white font-bold">2</span>
359
+ </div>
360
+ <div>
361
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Enrollment</h3>
362
+ <p class="text-gray-600">
363
+ Authorized personnel are enrolled in the system with RFID credentials and facial biometrics.
364
+ </p>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="flex items-start">
369
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-4">
370
+ <span class="text-white font-bold">3</span>
371
+ </div>
372
+ <div>
373
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Operation</h3>
374
+ <p class="text-gray-600">
375
+ The system automatically grants or denies access based on real-time authentication.
376
+ </p>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="md:w-1/2">
384
+ <div class="bg-gray-50 rounded-xl p-8 shadow-lg">
385
+ <div class="flex items-center mb-6">
386
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mr-4">
387
+ <i class="fas fa-shield-alt text-white text-2xl"></i>
388
+ </div>
389
+ <h3 class="text-xl font-bold text-gray-800">Security Benefits</h3>
390
+ </div>
391
+
392
+ <div class="space-y-6">
393
+ <div class="flex items-start">
394
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
395
+ <i class="fas fa-check text-blue-600 text-sm"></i>
396
+ </div>
397
+ <div>
398
+ <h4 class="font-semibold text-gray-800">Eliminate Unauthorized Access</h4>
399
+ <p class="text-gray-600">
400
+ Our multi-factor authentication ensures only authorized individuals can enter secured areas.
401
+ </p>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="flex items-start">
406
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
407
+ <i class="fas fa-check text-blue-600 text-sm"></i>
408
+ </div>
409
+ <div>
410
+ <h4 class="font-semibold text-gray-800">Comprehensive Audit Trails</h4>
411
+ <p class="text-gray-600">
412
+ Every access attempt is logged with timestamp, location, and authentication method.
413
+ </p>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="flex items-start">
418
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
419
+ <i class="fas fa-check text-blue-600 text-sm"></i>
420
+ </div>
421
+ <div>
422
+ <h4 class="font-semibold text-gray-800">Instant Threat Detection</h4>
423
+ <p class="text-gray-600">
424
+ The system identifies and alerts on suspicious behavior patterns or unauthorized access attempts.
425
+ </p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- Pricing Section -->
436
+ <section id="pricing" class="py-20 bg-gray-50">
437
+ <div class="container mx-auto px-6">
438
+ <div class="text-center mb-16">
439
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
440
+ Simple, Transparent <span class="text-blue-600">Pricing</span>
441
+ </h2>
442
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
443
+ Choose the plan that fits your security needs.
444
+ </p>
445
+ </div>
446
+
447
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
448
+ <!-- Basic Plan -->
449
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
450
+ <div class="gradient-bg text-white py-6 px-8">
451
+ <h3 class="text-xl font-bold">Starter</h3>
452
+ <p class="text-blue-100">Small businesses & offices</p>
453
+ </div>
454
+ <div class="p-8">
455
+ <div class="mb-6">
456
+ <span class="text-4xl font-bold text-gray-800">$99</span>
457
+ <span class="text-gray-600">/month</span>
458
+ </div>
459
+ <ul class="space-y-4 mb-8">
460
+ <li class="flex items-start">
461
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
462
+ <span>Up to 5 entry points</span>
463
+ </li>
464
+ <li class="flex items-start">
465
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
466
+ <span>50 RFID credentials</span>
467
+ </li>
468
+ <li class="flex items-start">
469
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
470
+ <span>Basic facial recognition</span>
471
+ </li>
472
+ <li class="flex items-start">
473
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
474
+ <span>Email alerts</span>
475
+ </li>
476
+ <li class="flex items-start text-gray-400">
477
+ <i class="fas fa-times mt-1 mr-2"></i>
478
+ <span>No mobile app</span>
479
+ </li>
480
+ <li class="flex items-start text-gray-400">
481
+ <i class="fas fa-times mt-1 mr-2"></i>
482
+ <span>No analytics dashboard</span>
483
+ </li>
484
+ </ul>
485
+ <a href="#contact" class="block w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-3 px-4 rounded-lg text-center transition duration-300">
486
+ Get Started
487
+ </a>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Professional Plan -->
492
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden transform scale-105">
493
+ <div class="relative">
494
+ <div class="absolute top-0 right-0 bg-yellow-400 text-xs font-bold px-3 py-1 rounded-bl-lg">
495
+ POPULAR
496
+ </div>
497
+ <div class="gradient-bg text-white py-6 px-8">
498
+ <h3 class="text-xl font-bold">Professional</h3>
499
+ <p class="text-blue-100">Medium businesses & residential</p>
500
+ </div>
501
+ </div>
502
+ <div class="p-8">
503
+ <div class="mb-6">
504
+ <span class="text-4xl font-bold text-gray-800">$299</span>
505
+ <span class="text-gray-600">/month</span>
506
+ </div>
507
+ <ul class="space-y-4 mb-8">
508
+ <li class="flex items-start">
509
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
510
+ <span>Up to 15 entry points</span>
511
+ </li>
512
+ <li class="flex items-start">
513
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
514
+ <span>200 RFID credentials</span>
515
+ </li>
516
+ <li class="flex items-start">
517
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
518
+ <span>Advanced facial recognition</span>
519
+ </li>
520
+ <li class="flex items-start">
521
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
522
+ <span>Push notifications</span>
523
+ </li>
524
+ <li class="flex items-start">
525
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
526
+ <span>Mobile app included</span>
527
+ </li>
528
+ <li class="flex items-start text-gray-400">
529
+ <i class="fas fa-times mt-1 mr-2"></i>
530
+ <span>Basic analytics only</span>
531
+ </li>
532
+ </ul>
533
+ <a href="#contact" class="block w-full gradient-bg hover:opacity-90 text-white font-semibold py-3 px-4 rounded-lg text-center transition duration-300">
534
+ Get Started
535
+ </a>
536
+ </div>
537
+ </div>
538
+
539
+ <!-- Enterprise Plan -->
540
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
541
+ <div class="gradient-bg text-white py-6 px-8">
542
+ <h3 class="text-xl font-bold">Enterprise</h3>
543
+ <p class="text-blue-100">Large facilities & industrial</p>
544
+ </div>
545
+ <div class="p-8">
546
+ <div class="mb-6">
547
+ <span class="text-4xl font-bold text-gray-800">$899</span>
548
+ <span class="text-gray-600">/month</span>
549
+ </div>
550
+ <ul class="space-y-4 mb-8">
551
+ <li class="flex items-start">
552
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
553
+ <span>Unlimited entry points</span>
554
+ </li>
555
+ <li class="flex items-start">
556
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
557
+ <span>Unlimited RFID credentials</span>
558
+ </li>
559
+ <li class="flex items-start">
560
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
561
+ <span>Premium facial recognition</span>
562
+ </li>
563
+ <li class="flex items-start">
564
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
565
+ <span>Multi-channel alerts</span>
566
+ </li>
567
+ <li class="flex items-start">
568
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
569
+ <span>Mobile app + web portal</span>
570
+ </li>
571
+ <li class="flex items-start">
572
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
573
+ <span>Advanced analytics dashboard</span>
574
+ </li>
575
+ </ul>
576
+ <a href="#contact" class="block w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-3 px-4 rounded-lg text-center transition duration-300">
577
+ Get Started
578
+ </a>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="mt-12 text-center">
584
+ <p class="text-gray-600 mb-4">Need a custom solution for your organization?</p>
585
+ <a href="#contact" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-2 rounded-lg font-semibold transition duration-300">
586
+ Contact Sales
587
+ </a>
588
+ </div>
589
+ </div>
590
+ </section>
591
+
592
+ <!-- Testimonials Section -->
593
+ <section class="py-20 bg-white">
594
+ <div class="container mx-auto px-6">
595
+ <div class="text-center mb-16">
596
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
597
+ What Our <span class="text-blue-600">Clients</span> Say
598
+ </h2>
599
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
600
+ Don't just take our word for it - hear from our satisfied customers.
601
+ </p>
602
+ </div>
603
+
604
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
605
+ <!-- Testimonial 1 -->
606
+ <div class="bg-gray-50 rounded-xl p-8">
607
+ <div class="flex items-center mb-6">
608
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
609
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-full h-full object-cover">
610
+ </div>
611
+ <div>
612
+ <h4 class="font-bold text-gray-800">Sarah Johnson</h4>
613
+ <p class="text-gray-600 text-sm">Office Manager, TechCorp</p>
614
+ </div>
615
+ </div>
616
+ <p class="text-gray-600 italic mb-4">
617
+ "Since implementing ConnectAI, our office security has improved dramatically. The facial recognition is incredibly accurate and our employees love the convenience."
618
+ </p>
619
+ <div class="flex text-yellow-400">
620
+ <i class="fas fa-star"></i>
621
+ <i class="fas fa-star"></i>
622
+ <i class="fas fa-star"></i>
623
+ <i class="fas fa-star"></i>
624
+ <i class="fas fa-star"></i>
625
+ </div>
626
+ </div>
627
+
628
+ <!-- Testimonial 2 -->
629
+ <div class="bg-gray-50 rounded-xl p-8">
630
+ <div class="flex items-center mb-6">
631
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
632
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-full h-full object-cover">
633
+ </div>
634
+ <div>
635
+ <h4 class="font-bold text-gray-800">Michael Chen</h4>
636
+ <p class="text-gray-600 text-sm">Security Director, LuxeResidences</p>
637
+ </div>
638
+ </div>
639
+ <p class="text-gray-600 italic mb-4">
640
+ "The RFID system integrated perfectly with our existing infrastructure. The real-time alerts have helped us prevent several unauthorized access attempts."
641
+ </p>
642
+ <div class="flex text-yellow-400">
643
+ <i class="fas fa-star"></i>
644
+ <i class="fas fa-star"></i>
645
+ <i class="fas fa-star"></i>
646
+ <i class="fas fa-star"></i>
647
+ <i class="fas fa-star"></i>
648
+ </div>
649
+ </div>
650
+
651
+ <!-- Testimonial 3 -->
652
+ <div class="bg-gray-50 rounded-xl p-8">
653
+ <div class="flex items-center mb-6">
654
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
655
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="David Rodriguez" class="w-full h-full object-cover">
656
+ </div>
657
+ <div>
658
+ <h4 class="font-bold text-gray-800">David Rodriguez</h4>
659
+ <p class="text-gray-600 text-sm">Facilities Manager, InduTech</p>
660
+ </div>
661
+ </div>
662
+ <p class="text-gray-600 italic mb-4">
663
+ "The analytics dashboard gives us incredible insights into access patterns. We've optimized our security staffing based on the data."
664
+ </p>
665
+ <div class="flex text-yellow-400">
666
+ <i class="fas fa-star"></i>
667
+ <i class="fas fa-star"></i>
668
+ <i class="fas fa-star"></i>
669
+ <i class="fas fa-star"></i>
670
+ <i class="fas fa-star-half-alt"></i>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </div>
675
+ </section>
676
+
677
+ <!-- CTA Section -->
678
+ <section class="gradient-bg text-white py-20">
679
+ <div class="container mx-auto px-6 text-center">
680
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
681
+ Ready to Transform Your Security?
682
+ </h2>
683
+ <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-8">
684
+ Schedule a free consultation with our security experts to discuss your needs.
685
+ </p>
686
+ <a href="#contact" class="inline-block bg-white hover:bg-blue-50 text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg transition duration-300">
687
+ Get a Free Demo
688
+ </a>
689
+ </div>
690
+ </section>
691
+
692
+ <!-- Contact Section -->
693
+ <section id="contact" class="py-20 bg-white">
694
+ <div class="container mx-auto px-6">
695
+ <div class="flex flex-col md:flex-row">
696
+ <div class="md:w-1/2 mb-10 md:mb-0">
697
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">
698
+ Get in <span class="text-blue-600">Touch</span>
699
+ </h2>
700
+ <p class="text-gray-600 mb-8 text-lg">
701
+ Have questions about our solutions? Our team is here to help.
702
+ </p>
703
+
704
+ <div class="space-y-6">
705
+ <div class="flex items-start">
706
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-4">
707
+ <i class="fas fa-map-marker-alt text-white"></i>
708
+ </div>
709
+ <div>
710
+ <h4 class="font-bold text-gray-800">Our Location</h4>
711
+ <p class="text-gray-600">123 Security Lane, Tech City, TC 10101</p>
712
+ </div>
713
+ </div>
714
+
715
+ <div class="flex items-start">
716
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-4">
717
+ <i class="fas fa-phone-alt text-white"></i>
718
+ </div>
719
+ <div>
720
+ <h4 class="font-bold text-gray-800">Phone Number</h4>
721
+ <p class="text-gray-600">+1 (555) 123-4567</p>
722
+ </div>
723
+ </div>
724
+
725
+ <div class="flex items-start">
726
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-4">
727
+ <i class="fas fa-envelope text-white"></i>
728
+ </div>
729
+ <div>
730
+ <h4 class="font-bold text-gray-800">Email Address</h4>
731
+ <p class="text-gray-600">info@connectai.example</p>
732
+ </div>
733
+ </div>
734
+ </div>
735
+
736
+ <div class="mt-12">
737
+ <h4 class="font-bold text-gray-800 mb-4">Follow Us</h4>
738
+ <div class="flex space-x-4">
739
+ <a href="#" class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white hover:opacity-90 transition">
740
+ <i class="fab fa-facebook-f"></i>
741
+ </a>
742
+ <a href="#" class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white hover:opacity-90 transition">
743
+ <i class="fab fa-twitter"></i>
744
+ </a>
745
+ <a href="#" class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white hover:opacity-90 transition">
746
+ <i class="fab fa-linkedin-in"></i>
747
+ </a>
748
+ <a href="#" class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white hover:opacity-90 transition">
749
+ <i class="fab fa-instagram"></i>
750
+ </a>
751
+ </div>
752
+ </div>
753
+ </div>
754
+
755
+ <div class="md:w-1/2">
756
+ <div class="bg-gray-50 rounded-xl p-8 shadow-lg">
757
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Send Us a Message</h3>
758
+ <form id="contactForm">
759
+ <div class="mb-6">
760
+ <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
761
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
762
+ </div>
763
+
764
+ <div class="mb-6">
765
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
766
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
767
+ </div>
768
+
769
+ <div class="mb-6">
770
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
771
+ <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
772
+ </div>
773
+
774
+ <div class="mb-6">
775
+ <label for="company" class="block text-gray-700 font-medium mb-2">Company Name</label>
776
+ <input type="text" id="company" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
777
+ </div>
778
+
779
+ <div class="mb-6">
780
+ <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
781
+ <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required></textarea>
782
+ </div>
783
+
784
+ <button type="submit" class="w-full gradient-bg hover:opacity-90 text-white font-semibold py-3 px-4 rounded-lg transition duration-300">
785
+ Send Message
786
+ </button>
787
+ </form>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </section>
793
+
794
+ <!-- Footer -->
795
+ <footer class="bg-gray-900 text-white py-12">
796
+ <div class="container mx-auto px-6">
797
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
798
+ <div>
799
+ <div class="flex items-center mb-4">
800
+ <i class="fas fa-robot text-2xl text-blue-400 mr-2"></i>
801
+ <h3 class="text-xl font-bold">Connect<span class="text-blue-400">AI</span></h3>
802
+ </div>
803
+ <p class="text-gray-400">
804
+ Advanced access control and surveillance solutions powered by AI, RFID, and facial recognition technologies.
805
+ </p>
806
+ </div>
807
+
808
+ <div>
809
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
810
+ <ul class="space-y-2">
811
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
812
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
813
+ <li><a href="#solutions" class="text-gray-400 hover:text-white transition">Solutions</a></li>
814
+ <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Pricing</a></li>
815
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
816
+ </ul>
817
+ </div>
818
+
819
+ <div>
820
+ <h4 class="text-lg font-semibold mb-4">Solutions</h4>
821
+ <ul class="space-y-2">
822
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Corporate Security</a></li>
823
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Residential Access</a></li>
824
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Industrial Facilities</a></li>
825
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Healthcare Security</a></li>
826
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Education Campuses</a></li>
827
+ </ul>
828
+ </div>
829
+
830
+ <div>
831
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
832
+ <p class="text-gray-400 mb-4">
833
+ Subscribe to our newsletter for the latest updates and security insights.
834
+ </p>
835
+ <form class="flex">
836
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
837
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition">
838
+ <i class="fas fa-paper-plane"></i>
839
+ </button>
840
+ </form>
841
+ </div>
842
+ </div>
843
+
844
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
845
+ <p class="text-gray-400 mb-4 md:mb-0">
846
+ &copy; 2023 ConnectAI. All rights reserved.
847
+ </p>
848
+ <div class="flex space-x-6">
849
+ <a href="#" class="text-gray-400 hover:text-white transition">
850
+ <i class="fab fa-facebook-f"></i>
851
+ </a>
852
+ <a href="#" class="text-gray-400 hover:text-white transition">
853
+ <i class="fab fa-twitter"></i>
854
+ </a>
855
+ <a href="#" class="text-gray-400 hover:text-white transition">
856
+ <i class="fab fa-linkedin-in"></i>
857
+ </a>
858
+ <a href="#" class="text-gray-400 hover:text-white transition">
859
+ <i class="fab fa-instagram"></i>
860
+ </a>
861
+ </div>
862
+ </div>
863
+ </div>
864
+ </footer>
865
+
866
+ <script>
867
+ // Mobile menu toggle
868
+ document.getElementById('menu-toggle').addEventListener('click', function() {
869
+ const menu = document.getElementById('mobile-menu');
870
+ menu.classList.toggle('hidden');
871
+ });
872
+
873
+ // Smooth scrolling for anchor links
874
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
875
+ anchor.addEventListener('click', function (e) {
876
+ e.preventDefault();
877
+
878
+ const targetId = this.getAttribute('href');
879
+ const targetElement = document.querySelector(targetId);
880
+
881
+ if (targetElement) {
882
+ window.scrollTo({
883
+ top: targetElement.offsetTop - 80,
884
+ behavior: 'smooth'
885
+ });
886
+
887
+ // Close mobile menu if open
888
+ const mobileMenu = document.getElementById('mobile-menu');
889
+ if (!mobileMenu.classList.contains('hidden')) {
890
+ mobileMenu.classList.add('hidden');
891
+ }
892
+ }
893
+ });
894
+ });
895
+
896
+ // Form submission
897
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
898
+ e.preventDefault();
899
+
900
+ // Get form values
901
+ const name = document.getElementById('name').value;
902
+ const email = document.getElementById('email').value;
903
+ const phone = document.getElementById('phone').value;
904
+ const company = document.getElementById('company').value;
905
+ const message = document.getElementById('message').value;
906
+
907
+ // Here you would typically send the data to a server
908
+ // For this example, we'll just show an alert
909
+ alert(`Thank you, ${name}! Your message has been received. We'll contact you soon at ${email}.`);
910
+
911
+ // Reset form
912
+ this.reset();
913
+ });
914
+
915
+ // Animation on scroll
916
+ function animateOnScroll() {
917
+ const elements = document.querySelectorAll('.feature-card, .card-hover');
918
+
919
+ elements.forEach(element => {
920
+ const elementPosition = element.getBoundingClientRect().top;
921
+ const screenPosition = window.innerHeight / 1.3;
922
+
923
+ if (elementPosition < screenPosition) {
924
+ element.style.opacity = '1';
925
+ element.style.transform = 'translateY(0)';
926
+ }
927
+ });
928
+ }
929
+
930
+ // Set initial state for animation
931
+ document.querySelectorAll('.feature-card, .card-hover').forEach(element => {
932
+ element.style.opacity = '0';
933
+ element.style.transform = 'translateY(20px)';
934
+ element.style.transition = 'all 0.6s ease';
935
+ });
936
+
937
+ // Run animation on load and scroll
938
+ window.addEventListener('load', animateOnScroll);
939
+ window.addEventListener('scroll', animateOnScroll);
940
+ </script>
941
+ <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=federi/connect-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
942
+ </html>