Hugging Face's logo

Spaces:
SharmaAmit1818
/
s
Running

App Files Community
SharmaAmit1818 commited on
Commit
6583422
·
verified ·
1 Parent(s): b4f251a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1289 -18
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: S
3
- emoji: 🐠
4
- colorFrom: yellow
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: s
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,1290 @@
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="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>VritantaNextGen | Web Development, RPA & AI 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
+ <script src="https://unpkg.com/scrollreveal"></script>
10
+ <style>
11
+ /* Custom CSS for animations and effects */
12
+ @keyframes float {
13
+ 0%, 100% { transform: translateY(0); }
14
+ 50% { transform: translateY(-20px); }
15
+ }
16
+
17
+ .floating {
18
+ animation: float 6s ease-in-out infinite;
19
+ }
20
+
21
+ .card-hover-effect {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .card-hover-effect:hover {
26
+ transform: translateY(-10px);
27
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
+ }
29
+
30
+ .service-icon {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .service-card:hover .service-icon {
35
+ transform: scale(1.2);
36
+ }
37
+
38
+ .timeline-item::before {
39
+ content: '';
40
+ position: absolute;
41
+ left: -40px;
42
+ top: 0;
43
+ width: 20px;
44
+ height: 20px;
45
+ border-radius: 50%;
46
+ background: #3b82f6;
47
+ border: 4px solid white;
48
+ }
49
+
50
+ .custom-cursor {
51
+ width: 30px;
52
+ height: 30px;
53
+ border-radius: 50%;
54
+ background: rgba(59, 130, 246, 0.5);
55
+ pointer-events: none;
56
+ position: fixed;
57
+ transform: translate(-50%, -50%);
58
+ z-index: 9999;
59
+ mix-blend-mode: difference;
60
+ transition: transform 0.1s ease;
61
+ }
62
+
63
+ .cursor-hover {
64
+ transform: translate(-50%, -50%) scale(1.5);
65
+ background: rgba(59, 130, 246, 0.8);
66
+ }
67
+
68
+ .dark .dark\:bg-gray-900 {
69
+ background-color: #111827;
70
+ }
71
+
72
+ .dark .dark\:text-white {
73
+ color: #fff;
74
+ }
75
+
76
+ .dark .dark\:bg-gray-800 {
77
+ background-color: #1f2937;
78
+ }
79
+
80
+ .project-modal {
81
+ opacity: 0;
82
+ visibility: hidden;
83
+ transition: all 0.3s ease;
84
+ }
85
+
86
+ .project-modal.active {
87
+ opacity: 1;
88
+ visibility: visible;
89
+ }
90
+
91
+ .loading-screen {
92
+ position: fixed;
93
+ top: 0;
94
+ left: 0;
95
+ width: 100%;
96
+ height: 100%;
97
+ background-color: #3b82f6;
98
+ display: flex;
99
+ justify-content: center;
100
+ align-items: center;
101
+ z-index: 9999;
102
+ transition: opacity 0.5s ease;
103
+ }
104
+
105
+ .loading-screen.hidden {
106
+ opacity: 0;
107
+ pointer-events: none;
108
+ }
109
+
110
+ .loading-spinner {
111
+ width: 50px;
112
+ height: 50px;
113
+ border: 5px solid rgba(255, 255, 255, 0.3);
114
+ border-radius: 50%;
115
+ border-top-color: white;
116
+ animation: spin 1s ease-in-out infinite;
117
+ }
118
+
119
+ @keyframes spin {
120
+ to { transform: rotate(360deg); }
121
+ }
122
+
123
+ .nav-link {
124
+ position: relative;
125
+ }
126
+
127
+ .nav-link::after {
128
+ content: '';
129
+ position: absolute;
130
+ bottom: -5px;
131
+ left: 0;
132
+ width: 0;
133
+ height: 2px;
134
+ background-color: #3b82f6;
135
+ transition: width 0.3s ease;
136
+ }
137
+
138
+ .nav-link:hover::after {
139
+ width: 100%;
140
+ }
141
+
142
+ .blog-card {
143
+ transition: all 0.3s ease;
144
+ }
145
+
146
+ .blog-card:hover {
147
+ transform: translateY(-5px);
148
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
149
+ }
150
+ </style>
151
+ </head>
152
+ <body class="font-sans bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-white transition-colors duration-300">
153
+ <!-- Loading Screen -->
154
+ <div class="loading-screen fixed inset-0 bg-blue-500 z-50 flex items-center justify-center transition-opacity duration-500">
155
+ <div class="loading-spinner w-12 h-12 border-4 border-white border-t-transparent rounded-full animate-spin"></div>
156
+ </div>
157
+
158
+ <!-- Custom Cursor -->
159
+ <div class="custom-cursor"></div>
160
+
161
+ <!-- Navigation -->
162
+ <nav class="fixed w-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-md z-50 shadow-sm transition-all duration-300">
163
+ <div class="container mx-auto px-6 py-4">
164
+ <div class="flex justify-between items-center">
165
+ <a href="#" class="text-2xl font-bold text-blue-500">Vritanta<span class="text-gray-800 dark:text-white">NextGen</span></a>
166
+
167
+ <!-- Desktop Navigation -->
168
+ <div class="hidden md:flex space-x-8">
169
+ <a href="#home" class="nav-link">Home</a>
170
+ <a href="#services" class="nav-link">Services</a>
171
+ <a href="#portfolio" class="nav-link">Portfolio</a>
172
+ <a href="#about" class="nav-link">About</a>
173
+ <a href="#blog" class="nav-link">Blog</a>
174
+ <a href="#contact" class="nav-link">Contact</a>
175
+ </div>
176
+
177
+ <!-- Dark Mode Toggle -->
178
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
179
+ <i class="fas fa-moon dark:hidden"></i>
180
+ <i class="fas fa-sun hidden dark:block"></i>
181
+ </button>
182
+
183
+ <!-- Mobile Menu Button -->
184
+ <button id="mobile-menu-button" class="md:hidden p-2 rounded-full bg-gray-200 dark:bg-gray-700">
185
+ <i class="fas fa-bars"></i>
186
+ </button>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Mobile Menu -->
191
+ <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 px-6 py-4 shadow-lg">
192
+ <div class="flex flex-col space-y-4">
193
+ <a href="#home" class="nav-link">Home</a>
194
+ <a href="#services" class="nav-link">Services</a>
195
+ <a href="#portfolio" class="nav-link">Portfolio</a>
196
+ <a href="#about" class="nav-link">About</a>
197
+ <a href="#blog" class="nav-link">Blog</a>
198
+ <a href="#contact" class="nav-link">Contact</a>
199
+ </div>
200
+ </div>
201
+ </nav>
202
+
203
+ <!-- Hero Section -->
204
+ <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
205
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-20 dark:opacity-10"></div>
206
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-10 dark:opacity-5"></div>
207
+
208
+ <div class="container mx-auto px-6 z-10">
209
+ <div class="flex flex-col lg:flex-row items-center justify-between">
210
+ <div class="lg:w-1/2 mb-12 lg:mb-0 text-center lg:text-left">
211
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
212
+ <span class="text-blue-500">Innovative</span> Digital Solutions
213
+ </h1>
214
+ <p class="text-xl md:text-2xl mb-8 text-gray-600 dark:text-gray-300">
215
+ We transform businesses with cutting-edge web development, RPA, and AI automation.
216
+ </p>
217
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center lg:justify-start">
218
+ <a href="#contact" class="px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-300 shadow-lg hover:shadow-xl">
219
+ Get Started
220
+ </a>
221
+ <a href="#portfolio" class="px-8 py-3 border-2 border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-800 rounded-lg font-medium transition-colors duration-300">
222
+ View Work
223
+ </a>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="lg:w-1/2 flex justify-center">
228
+ <div class="relative w-full max-w-md">
229
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
230
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
231
+ <div class="absolute top-0 right-20 w-32 h-32 bg-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
232
+
233
+ <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden card-hover-effect">
234
+ <div class="h-64 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
235
+ <i class="fas fa-code text-white text-8xl"></i>
236
+ </div>
237
+ <div class="p-6">
238
+ <h3 class="text-xl font-bold mb-2">Next-Gen Solutions</h3>
239
+ <p class="text-gray-600 dark:text-gray-300">We combine web technologies with AI to create powerful business solutions.</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
248
+ <a href="#services" class="text-gray-600 dark:text-gray-300 hover:text-blue-500">
249
+ <i class="fas fa-chevron-down text-2xl"></i>
250
+ </a>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Services Section -->
255
+ <section id="services" class="py-20 bg-gray-100 dark:bg-gray-800">
256
+ <div class="container mx-auto px-6">
257
+ <div class="text-center mb-16">
258
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-500">Services</span></h2>
259
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
260
+ We offer comprehensive digital solutions to help your business thrive in the modern landscape.
261
+ </p>
262
+ </div>
263
+
264
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
265
+ <!-- Web Development -->
266
+ <div class="service-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
267
+ <div class="p-6">
268
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto service-icon">
269
+ <i class="fas fa-code text-blue-500 dark:text-blue-300 text-2xl"></i>
270
+ </div>
271
+ <h3 class="text-xl font-bold mb-2 text-center">Web Development</h3>
272
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-4">
273
+ Custom, responsive websites and web applications tailored to your needs.
274
+ </p>
275
+ <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
276
+ <li class="flex items-center">
277
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
278
+ Frontend & Backend Development
279
+ </li>
280
+ <li class="flex items-center">
281
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
282
+ E-commerce Solutions
283
+ </li>
284
+ <li class="flex items-center">
285
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
286
+ CMS Integration
287
+ </li>
288
+ </ul>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- RPA -->
293
+ <div class="service-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
294
+ <div class="p-6">
295
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto service-icon">
296
+ <i class="fas fa-robot text-blue-500 dark:text-blue-300 text-2xl"></i>
297
+ </div>
298
+ <h3 class="text-xl font-bold mb-2 text-center">Intelligent RPA</h3>
299
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-4">
300
+ Automate repetitive tasks with intelligent Robotic Process Automation.
301
+ </p>
302
+ <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
303
+ <li class="flex items-center">
304
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
305
+ Process Automation
306
+ </li>
307
+ <li class="flex items-center">
308
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
309
+ AI-Powered Bots
310
+ </li>
311
+ <li class="flex items-center">
312
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
313
+ Workflow Optimization
314
+ </li>
315
+ </ul>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Data Analysis -->
320
+ <div class="service-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
321
+ <div class="p-6">
322
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto service-icon">
323
+ <i class="fas fa-chart-bar text-blue-500 dark:text-blue-300 text-2xl"></i>
324
+ </div>
325
+ <h3 class="text-xl font-bold mb-2 text-center">Data Analysis</h3>
326
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-4">
327
+ Transform your data into actionable insights with powerful analytics.
328
+ </p>
329
+ <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
330
+ <li class="flex items-center">
331
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
332
+ Power BI Dashboards
333
+ </li>
334
+ <li class="flex items-center">
335
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
336
+ Data Visualization
337
+ </li>
338
+ <li class="flex items-center">
339
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
340
+ Business Intelligence
341
+ </li>
342
+ </ul>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- AI Automation -->
347
+ <div class="service-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
348
+ <div class="p-6">
349
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto service-icon">
350
+ <i class="fas fa-brain text-blue-500 dark:text-blue-300 text-2xl"></i>
351
+ </div>
352
+ <h3 class="text-xl font-bold mb-2 text-center">AI Automation</h3>
353
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-4">
354
+ Leverage AI to automate complex processes and enhance decision-making.
355
+ </p>
356
+ <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
357
+ <li class="flex items-center">
358
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
359
+ Zapier Integration
360
+ </li>
361
+ <li class="flex items-center">
362
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
363
+ Machine Learning
364
+ </li>
365
+ <li class="flex items-center">
366
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
367
+ Smart Workflows
368
+ </li>
369
+ </ul>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </section>
375
+
376
+ <!-- Portfolio Section -->
377
+ <section id="portfolio" class="py-20 bg-white dark:bg-gray-900">
378
+ <div class="container mx-auto px-6">
379
+ <div class="text-center mb-16">
380
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-500">Portfolio</span></h2>
381
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
382
+ Explore our recent projects and see how we've helped businesses transform digitally.
383
+ </p>
384
+ </div>
385
+
386
+ <!-- Portfolio Filter -->
387
+ <div class="flex flex-wrap justify-center mb-12 gap-2">
388
+ <button class="portfolio-filter px-4 py-2 rounded-full bg-blue-500 text-white" data-filter="all">
389
+ All
390
+ </button>
391
+ <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 hover:text-white transition-colors duration-300" data-filter="web">
392
+ Web Development
393
+ </button>
394
+ <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 hover:text-white transition-colors duration-300" data-filter="rpa">
395
+ RPA
396
+ </button>
397
+ <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 hover:text-white transition-colors duration-300" data-filter="data">
398
+ Data Analysis
399
+ </button>
400
+ <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 hover:text-white transition-colors duration-300" data-filter="ai">
401
+ AI Automation
402
+ </button>
403
+ </div>
404
+
405
+ <!-- Portfolio Grid -->
406
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
407
+ <!-- Project 1 -->
408
+ <div class="portfolio-item web card-hover-effect" data-category="web">
409
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
410
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative">
411
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="E-commerce Platform" class="absolute inset-0 w-full h-full object-cover opacity-70">
412
+ <h3 class="text-xl font-bold text-white relative z-10">E-commerce Platform</h3>
413
+ </div>
414
+ <div class="p-6">
415
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
416
+ A custom e-commerce solution with advanced product filtering and payment integration.
417
+ </p>
418
+ <div class="flex flex-wrap gap-2 mb-4">
419
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">React</span>
420
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Node.js</span>
421
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">MongoDB</span>
422
+ </div>
423
+ <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project1">
424
+ View Details
425
+ </button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Project 2 -->
431
+ <div class="portfolio-item rpa card-hover-effect" data-category="rpa">
432
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
433
+ <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative">
434
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Invoice Processing Automation" class="absolute inset-0 w-full h-full object-cover opacity-70">
435
+ <h3 class="text-xl font-bold text-white relative z-10">Invoice Processing Automation</h3>
436
+ </div>
437
+ <div class="p-6">
438
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
439
+ Automated invoice processing system that reduced manual work by 80% for our client.
440
+ </p>
441
+ <div class="flex flex-wrap gap-2 mb-4">
442
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">UiPath</span>
443
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">OCR</span>
444
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">AI</span>
445
+ </div>
446
+ <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project2">
447
+ View Details
448
+ </button>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Project 3 -->
454
+ <div class="portfolio-item data card-hover-effect" data-category="data">
455
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
456
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center relative">
457
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sales Analytics Dashboard" class="absolute inset-0 w-full h-full object-cover opacity-70">
458
+ <h3 class="text-xl font-bold text-white relative z-10">Sales Analytics Dashboard</h3>
459
+ </div>
460
+ <div class="p-6">
461
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
462
+ Interactive Power BI dashboard providing real-time sales insights and forecasting.
463
+ </p>
464
+ <div class="flex flex-wrap gap-2 mb-4">
465
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Power BI</span>
466
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">SQL</span>
467
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Azure</span>
468
+ </div>
469
+ <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project3">
470
+ View Details
471
+ </button>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Project 4 -->
477
+ <div class="portfolio-item ai card-hover-effect" data-category="ai">
478
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
479
+ <div class="h-48 bg-gradient-to-r from-yellow-400 to-red-500 flex items-center justify-center relative">
480
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Customer Support Automation" class="absolute inset-0 w-full h-full object-cover opacity-70">
481
+ <h3 class="text-xl font-bold text-white relative z-10">Customer Support Automation</h3>
482
+ </div>
483
+ <div class="p-6">
484
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
485
+ AI-powered chatbot and ticketing system that handles 70% of customer inquiries.
486
+ </p>
487
+ <div class="flex flex-wrap gap-2 mb-4">
488
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Zapier</span>
489
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">NLP</span>
490
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Chatbot</span>
491
+ </div>
492
+ <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project4">
493
+ View Details
494
+ </button>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- Project 5 -->
500
+ <div class="portfolio-item web card-hover-effect" data-category="web">
501
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
502
+ <div class="h-48 bg-gradient-to-r from-indigo-500 to-blue-500 flex items-center justify-center relative">
503
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Corporate Website" class="absolute inset-0 w-full h-full object-cover opacity-70">
504
+ <h3 class="text-xl font-bold text-white relative z-10">Corporate Website</h3>
505
+ </div>
506
+ <div class="p-6">
507
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
508
+ Modern corporate website with CMS integration for easy content management.
509
+ </p>
510
+ <div class="flex flex-wrap gap-2 mb-4">
511
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">WordPress</span>
512
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">PHP</span>
513
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">MySQL</span>
514
+ </div>
515
+ <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project5">
516
+ View Details
517
+ </button>
518
+ </div>
519
+ </div>
520
+ </div>
521
+
522
+ <!-- Project 6 -->
523
+ <div class="portfolio-item rpa ai card-hover-effect" data-category="rpa,ai">
524
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
525
+ <div class="h-48 bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center relative">
526
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="HR Onboarding Automation" class="absolute inset-0 w-full h-full object-cover opacity-70">
527
+ <h3 class="text-xl font-bold text-white relative z-10">HR Onboarding Automation</h3>
528
+ </div>
529
+ <div class="p-6">
530
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
531
+ Automated employee onboarding system with document verification and training assignment.
532
+ </p>
533
+ <div class="flex flex-wrap gap-2 mb-4">
534
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Automation Anywhere</span>
535
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">AI</span>
536
+ <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">HRIS Integration</span>
537
+ </div>
538
+ <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project6">
539
+ View Details
540
+ </button>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </section>
547
+
548
+ <!-- Project Modals -->
549
+ <div class="project-modal fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 hidden">
550
+ <div class="bg-white dark:bg-gray-800 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
551
+ <div class="relative">
552
+ <button class="close-modal absolute top-4 right-4 bg-gray-200 dark:bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300">
553
+ <i class="fas fa-times"></i>
554
+ </button>
555
+
556
+ <div id="project1-content" class="project-content hidden">
557
+ <div class="h-64 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative">
558
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="E-commerce Platform" class="absolute inset-0 w-full h-full object-cover opacity-70">
559
+ <h3 class="text-3xl font-bold text-white relative z-10">E-commerce Platform</h3>
560
+ </div>
561
+ <div class="p-8">
562
+ <div class="flex flex-wrap gap-4 mb-6">
563
+ <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">React</span>
564
+ <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">Node.js</span>
565
+ <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">MongoDB</span>
566
+ <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">Stripe</span>
567
+ </div>
568
+
569
+ <h4 class="text-xl font-bold mb-4">Project Overview</h4>
570
+ <p class="text-gray-600 dark:text-gray-300 mb-6">
571
+ We developed a custom e-commerce platform for a fashion retailer that needed a scalable solution to handle their growing product catalog and customer base. The platform features advanced product filtering, personalized recommendations, and seamless checkout with multiple payment options.
572
+ </p>
573
+
574
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
575
+ <div>
576
+ <h4 class="text-xl font-bold mb-4">Challenges</h4>
577
+ <ul class="space-y-3 text-gray-600 dark:text-gray-300">
578
+ <li class="flex items-start">
579
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
580
+ Handling large product catalog with complex attributes
581
+ </li>
582
+ <li class="flex items-start">
583
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
584
+ Implementing real-time inventory management
585
+ </li>
586
+ <li class="flex items-start">
587
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
588
+ Creating personalized shopping experience
589
+ </li>
590
+ </ul>
591
+ </div>
592
+ <div>
593
+ <h4 class="text-xl font-bold mb-4">Results</h4>
594
+ <ul class="space-y-3 text-gray-600 dark:text-gray-300">
595
+ <li class="flex items-start">
596
+ <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i>
597
+ 45% increase in conversion rate
598
+ </li>
599
+ <li class="flex items-start">
600
+ <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i>
601
+ 30% reduction in cart abandonment
602
+ </li>
603
+ <li class="flex items-start">
604
+ <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i>
605
+ Ability to handle 10x more products than previous system
606
+ </li>
607
+ </ul>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="flex flex-wrap gap-4">
612
+ <a href="#" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-300">
613
+ Visit Live Site
614
+ </a>
615
+ <a href="#" class="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg font-medium transition-colors duration-300">
616
+ View Case Study
617
+ </a>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <div id="project2-content" class="project-content hidden">
623
+ <div class="h-64 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative">
624
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Invoice Processing Automation" class="absolute inset-0 w-full h-full object-cover opacity-70">
625
+ <h3 class="text-3xl font-bold text-white relative z-10">Invoice Processing Automation</h3>
626
+ </div>
627
+ <div class="p-8">
628
+ <div class="flex flex-wrap gap-4 mb-6">
629
+ <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">UiPath</span>
630
+ <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">OCR</span>
631
+ <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">AI</span>
632
+ <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">SAP Integration</span>
633
+ </div>
634
+
635
+ <h4 class="text-xl font-bold mb-4">Project Overview</h4>
636
+ <p class="text-gray-600 dark:text-gray-300 mb-6">
637
+ We implemented an intelligent invoice processing system for a manufacturing company that was struggling with manual data entry errors and slow processing times. The solution combines OCR technology with AI-powered validation to extract and process invoice data automatically.
638
+ </p>
639
+
640
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
641
+ <div>
642
+ <h4 class="text-xl font-bold mb-4">Challenges</h4>
643
+ <ul class="space-y-3 text-gray-600 dark:text-gray-300">
644
+ <li class="flex items-start">
645
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
646
+ Handling various invoice formats from different vendors
647
+ </li>
648
+ <li class="flex items-start">
649
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
650
+ Ensuring accurate data extraction from poor quality scans
651
+ </li>
652
+ <li class="flex items-start">
653
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
654
+ Integrating with existing ERP system
655
+ </li>
656
+ </ul>
657
+ </div>
658
+ <div>
659
+ <h4 class="text-xl font-bold mb-4">Results</h4>
660
+ <ul class="space-y-3 text-gray-600 dark:text-gray-300">
661
+ <li class="flex items-start">
662
+ <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i>
663
+ 80% reduction in manual processing time
664
+ </li>
665
+ <li class="flex items-start">
666
+ <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i>
667
+ 95% accuracy in data extraction
668
+ </li>
669
+ <li class="flex items-start">
670
+ <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i>
671
+ Process 500+ invoices daily with minimal human intervention
672
+ </li>
673
+ </ul>
674
+ </div>
675
+ </div>
676
+
677
+ <div class="flex flex-wrap gap-4">
678
+ <a href="#" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-300">
679
+ Request Demo
680
+ </a>
681
+ </div>
682
+ </div>
683
+ </div>
684
+
685
+ <!-- Other project modals would follow the same pattern -->
686
+
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+ <!-- About Section -->
692
+ <section id="about" class="py-20 bg-gray-100 dark:bg-gray-800">
693
+ <div class="container mx-auto px-6">
694
+ <div class="text-center mb-16">
695
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">About <span class="text-blue-500">Us</span></h2>
696
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
697
+ We're a team of passionate technologists dedicated to solving business challenges with innovative digital solutions.
698
+ </p>
699
+ </div>
700
+
701
+ <div class="flex flex-col lg:flex-row gap-12 mb-20">
702
+ <div class="lg:w-1/2">
703
+ <h3 class="text-2xl font-bold mb-6">Our Story</h3>
704
+ <p class="text-gray-600 dark:text-gray-300 mb-6">
705
+ Founded in 2018, VritantaNextGen started as a small web development agency with a vision to bridge the gap between business needs and technological solutions. Over the years, we've expanded our expertise to include intelligent automation, data analytics, and AI solutions.
706
+ </p>
707
+ <p class="text-gray-600 dark:text-gray-300">
708
+ Today, we're proud to have served over 50 clients across various industries, helping them streamline operations, gain insights from data, and create impactful digital experiences.
709
+ </p>
710
+ </div>
711
+
712
+ <div class="lg:w-1/2">
713
+ <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md p-6">
714
+ <h3 class="text-2xl font-bold mb-6">Our Timeline</h3>
715
+
716
+ <div class="relative pl-10">
717
+ <!-- Timeline Item 1 -->
718
+ <div class="timeline-item relative pb-8">
719
+ <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm">
720
+ <h4 class="font-bold text-lg mb-2">Company Founded</h4>
721
+ <p class="text-gray-600 dark:text-gray-300 text-sm">June 2018</p>
722
+ <p class="text-gray-600 dark:text-gray-300 mt-2">
723
+ Started as a web development agency with 3 team members.
724
+ </p>
725
+ </div>
726
+ </div>
727
+
728
+ <!-- Timeline Item 2 -->
729
+ <div class="timeline-item relative pb-8">
730
+ <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm">
731
+ <h4 class="font-bold text-lg mb-2">First RPA Project</h4>
732
+ <p class="text-gray-600 dark:text-gray-300 text-sm">March 2019</p>
733
+ <p class="text-gray-600 dark:text-gray-300 mt-2">
734
+ Implemented our first robotic process automation solution for a logistics client.
735
+ </p>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- Timeline Item 3 -->
740
+ <div class="timeline-item relative pb-8">
741
+ <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm">
742
+ <h4 class="font-bold text-lg mb-2">AI Division Launched</h4>
743
+ <p class="text-gray-600 dark:text-gray-300 text-sm">January 2021</p>
744
+ <p class="text-gray-600 dark:text-gray-300 mt-2">
745
+ Expanded our services to include AI-powered automation solutions.
746
+ </p>
747
+ </div>
748
+ </div>
749
+
750
+ <!-- Timeline Item 4 -->
751
+ <div class="timeline-item relative">
752
+ <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm">
753
+ <h4 class="font-bold text-lg mb-2">50+ Clients Served</h4>
754
+ <p class="text-gray-600 dark:text-gray-300 text-sm">Present</p>
755
+ <p class="text-gray-600 dark:text-gray-300 mt-2">
756
+ Grown to a team of 15 experts serving clients across multiple industries.
757
+ </p>
758
+ </div>
759
+ </div>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ </div>
764
+
765
+ <!-- Team Section -->
766
+ <div class="text-center mb-12">
767
+ <h3 class="text-2xl md:text-3xl font-bold mb-4">Meet Our <span class="text-blue-500">Team</span></h3>
768
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
769
+ Our talented team brings together diverse expertise to deliver exceptional results.
770
+ </p>
771
+ </div>
772
+
773
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
774
+ <!-- Team Member 1 -->
775
+ <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover-effect">
776
+ <div class="h-64 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative">
777
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 object-cover">
778
+ </div>
779
+ <div class="p-6 text-center">
780
+ <h4 class="text-xl font-bold mb-1">Rajesh Kumar</h4>
781
+ <p class="text-blue-500 mb-4">CEO & Founder</p>
782
+ <p class="text-gray-600 dark:text-gray-300 text-sm">
783
+ 15+ years of experience in software development and business strategy.
784
+ </p>
785
+ <div class="flex justify-center space-x-4 mt-4">
786
+ <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300">
787
+ <i class="fab fa-linkedin-in"></i>
788
+ </a>
789
+ <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300">
790
+ <i class="fab fa-twitter"></i>
791
+ </a>
792
+ </div>
793
+ </div>
794
+ </div>
795
+
796
+ <!-- Team Member 2 -->
797
+ <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover-effect">
798
+ <div class="h-64 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative">
799
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 object-cover">
800
+ </div>
801
+ <div class="p-6 text-center">
802
+ <h4 class="text-xl font-bold mb-1">Priya Sharma</h4>
803
+ <p class="text-blue-500 mb-4">CTO</p>
804
+ <p class="text-gray-600 dark:text-gray-300 text-sm">
805
+ Expert in AI and automation technologies with a PhD in Computer Science.
806
+ </p>
807
+ <div class="flex justify-center space-x-4 mt-4">
808
+ <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300">
809
+ <i class="fab fa-linkedin-in"></i>
810
+ </a>
811
+ <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300">
812
+ <i class="fab fa-github"></i>
813
+ </a>
814
+ </div>
815
+ </div>
816
+ </div>
817
+
818
+ <!-- Team Member 3 -->
819
+ <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover-effect">
820
+ <div class="h-64 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center relative">
821
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team Member" class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 object-cover">
822
+ </div>
823
+ <div class="p-6 text-center">
824
+ <h4 class="text-xl font-bold mb-1">Amit Patel</h4>
825
+ <p class="text-blue-500 mb-4">Head of RPA</p>
826
+ <p class="text-gray-600 dark:text-gray-300 text-sm">
827
+ Automation specialist with certifications in UiPath and Automation Anywhere.
828
+ </p>
829
+ <div class="flex justify-center space-x-4 mt-4">
830
+ <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300">
831
+ <i class="fab fa-linkedin-in"></i>
832
+ </a>
833
+ </div>
834
+ </div>
835
+ </div>
836
+
837
+ <!-- Team Member 4 -->
838
+ <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover-effect">
839
+ <div class="h-64 bg-gradient-to-r from-yellow-400 to-red-500 flex items-center justify-center relative">
840
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Team Member" class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 object-cover">
841
+ </div>
842
+ <div class="p-6 text-center">
843
+ <h4 class="text-xl font-bold mb-1">Neha Gupta</h4>
844
+ <p class="text-blue-500 mb-4">Data Analytics Lead</p>
845
+ <p class="text-gray-600 dark:text-gray-300 text-sm">
846
+ Power BI expert with background in business intelligence and data visualization.
847
+ </p>
848
+ <div class="flex justify-center space-x-4 mt-4">
849
+ <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300">
850
+ <i class="fab fa-linkedin-in"></i>
851
+ </a>
852
+ <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300">
853
+ <i class="fab fa-twitter"></i>
854
+ </a>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </section>
861
+
862
+ <!-- Blog Section -->
863
+ <section id="blog" class="py-20 bg-white dark:bg-gray-900">
864
+ <div class="container mx-auto px-6">
865
+ <div class="text-center mb-16">
866
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-500">Blog</span></h2>
867
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
868
+ Insights, trends, and best practices in web development, automation, and AI.
869
+ </p>
870
+ </div>
871
+
872
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
873
+ <!-- Blog Post 1 -->
874
+ <div class="blog-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
875
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative">
876
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog Post" class="absolute inset-0 w-full h-full object-cover">
877
+ </div>
878
+ <div class="p-6">
879
+ <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3">
880
+ <span>June 15, 2023</span>
881
+ <span class="mx-2">•</span>
882
+ <span>5 min read</span>
883
+ </div>
884
+ <h3 class="text-xl font-bold mb-3">The Future of Web Development in 2023</h3>
885
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
886
+ Explore the emerging trends and technologies shaping the future of web development this year.
887
+ </p>
888
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition-colors duration-300 inline-flex items-center">
889
+ Read More <i class="fas fa-arrow-right ml-2"></i>
890
+ </a>
891
+ </div>
892
+ </div>
893
+
894
+ <!-- Blog Post 2 -->
895
+ <div class="blog-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
896
+ <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative">
897
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Blog Post" class="absolute inset-0 w-full h-full object-cover">
898
+ </div>
899
+ <div class="p-6">
900
+ <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3">
901
+ <span>May 28, 2023</span>
902
+ <span class="mx-2">•</span>
903
+ <span>7 min read</span>
904
+ </div>
905
+ <h3 class="text-xl font-bold mb-3">How RPA is Transforming Business Operations</h3>
906
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
907
+ Discover how robotic process automation is helping businesses achieve unprecedented efficiency.
908
+ </p>
909
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition-colors duration-300 inline-flex items-center">
910
+ Read More <i class="fas fa-arrow-right ml-2"></i>
911
+ </a>
912
+ </div>
913
+ </div>
914
+
915
+ <!-- Blog Post 3 -->
916
+ <div class="blog-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
917
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center relative">
918
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog Post" class="absolute inset-0 w-full h-full object-cover">
919
+ </div>
920
+ <div class="p-6">
921
+ <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3">
922
+ <span>April 12, 2023</span>
923
+ <span class="mx-2">•</span>
924
+ <span>4 min read</span>
925
+ </div>
926
+ <h3 class="text-xl font-bold mb-3">Power BI vs Tableau: Which is Right for You?</h3>
927
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
928
+ A comprehensive comparison of the two leading business intelligence tools to help you choose.
929
+ </p>
930
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition-colors duration-300 inline-flex items-center">
931
+ Read More <i class="fas fa-arrow-right ml-2"></i>
932
+ </a>
933
+ </div>
934
+ </div>
935
+ </div>
936
+
937
+ <div class="text-center">
938
+ <a href="#" class="px-6 py-3 border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-800 rounded-lg font-medium transition-colors duration-300 inline-flex items-center">
939
+ View All Posts <i class="fas fa-arrow-right ml-2"></i>
940
+ </a>
941
+ </div>
942
+ </div>
943
+ </section>
944
+
945
+ <!-- Contact Section -->
946
+ <section id="contact" class="py-20 bg-gray-100 dark:bg-gray-800">
947
+ <div class="container mx-auto px-6">
948
+ <div class="text-center mb-16">
949
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In <span class="text-blue-500">Touch</span></h2>
950
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
951
+ Have a project in mind or want to learn more about our services? We'd love to hear from you.
952
+ </p>
953
+ </div>
954
+
955
+ <div class="flex flex-col lg:flex-row gap-12">
956
+ <div class="lg:w-1/2">
957
+ <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md p-8 h-full">
958
+ <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
959
+
960
+ <div class="space-y-6">
961
+ <div class="flex items-start">
962
+ <div class="bg-blue-100 dark:bg-blue-900 rounded-full w-12 h-12 flex items-center justify-center mr-4">
963
+ <i class="fas fa-map-marker-alt text-blue-500 dark:text-blue-300"></i>
964
+ </div>
965
+ <div>
966
+ <h4 class="font-bold mb-1">Our Location</h4>
967
+ <p class="text-gray-600 dark:text-gray-300">123 Tech Park, Bangalore, India - 560001</p>
968
+ </div>
969
+ </div>
970
+
971
+ <div class="flex items-start">
972
+ <div class="bg-blue-100 dark:bg-blue-900 rounded-full w-12 h-12 flex items-center justify-center mr-4">
973
+ <i class="fas fa-envelope text-blue-500 dark:text-blue-300"></i>
974
+ </div>
975
+ <div>
976
+ <h4 class="font-bold mb-1">Email Us</h4>
977
+ <p class="text-gray-600 dark:text-gray-300">[email protected]</p>
978
+ <p class="text-gray-600 dark:text-gray-300">[email protected]</p>
979
+ </div>
980
+ </div>
981
+
982
+ <div class="flex items-start">
983
+ <div class="bg-blue-100 dark:bg-blue-900 rounded-full w-12 h-12 flex items-center justify-center mr-4">
984
+ <i class="fas fa-phone-alt text-blue-500 dark:text-blue-300"></i>
985
+ </div>
986
+ <div>
987
+ <h4 class="font-bold mb-1">Call Us</h4>
988
+ <p class="text-gray-600 dark:text-gray-300">+91 9876543210</p>
989
+ <p class="text-gray-600 dark:text-gray-300">+91 1234567890</p>
990
+ </div>
991
+ </div>
992
+ </div>
993
+
994
+ <div class="mt-8">
995
+ <h4 class="font-bold mb-4">Follow Us</h4>
996
+ <div class="flex space-x-4">
997
+ <a href="#" class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-blue-500 hover:text-white transition-colors duration-300">
998
+ <i class="fab fa-facebook-f"></i>
999
+ </a>
1000
+ <a href="#" class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-blue-500 hover:text-white transition-colors duration-300">
1001
+ <i class="fab fa-twitter"></i>
1002
+ </a>
1003
+ <a href="#" class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-blue-500 hover:text-white transition-colors duration-300">
1004
+ <i class="fab fa-linkedin-in"></i>
1005
+ </a>
1006
+ <a href="#" class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-blue-500 hover:text-white transition-colors duration-300">
1007
+ <i class="fab fa-instagram"></i>
1008
+ </a>
1009
+ </div>
1010
+ </div>
1011
+ </div>
1012
+ </div>
1013
+
1014
+ <div class="lg:w-1/2">
1015
+ <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md p-8 h-full">
1016
+ <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3>
1017
+
1018
+ <form id="contact-form" class="space-y-6">
1019
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1020
+ <div>
1021
+ <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Name</label>
1022
+ <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required>
1023
+ </div>
1024
+ <div>
1025
+ <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Email</label>
1026
+ <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required>
1027
+ </div>
1028
+ </div>
1029
+
1030
+ <div>
1031
+ <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
1032
+ <input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required>
1033
+ </div>
1034
+
1035
+ <div>
1036
+ <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
1037
+ <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required></textarea>
1038
+ </div>
1039
+
1040
+ <button type="submit" class="w-full px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-300">
1041
+ Send Message
1042
+ </button>
1043
+ </form>
1044
+ </div>
1045
+ </div>
1046
+ </div>
1047
+ </div>
1048
+ </section>
1049
+
1050
+ <!-- Footer -->
1051
+ <footer class="bg-gray-900 text-white py-12">
1052
+ <div class="container mx-auto px-6">
1053
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
1054
+ <div>
1055
+ <h3 class="text-xl font-bold mb-4">VritantaNextGen</h3>
1056
+ <p class="text-gray-400">
1057
+ We transform businesses with cutting-edge web development, RPA, and AI automation solutions.
1058
+ </p>
1059
+ </div>
1060
+
1061
+ <div>
1062
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
1063
+ <ul class="space-y-2">
1064
+ <li><a href="#home" class="text-gray-400 hover:text-white transition-colors duration-300">Home</a></li>
1065
+ <li><a href="#services" class="text-gray-400 hover:text-white transition-colors duration-300">Services</a></li>
1066
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white transition-colors duration-300">Portfolio</a></li>
1067
+ <li><a href="#about" class="text-gray-400 hover:text-white transition-colors duration-300">About</a></li>
1068
+ <li><a href="#blog" class="text-gray-400 hover:text-white transition-colors duration-300">Blog</a></li>
1069
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
1070
+ </ul>
1071
+ </div>
1072
+
1073
+ <div>
1074
+ <h4 class="text-lg font-bold mb-4">Services</h4>
1075
+ <ul class="space-y-2">
1076
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Web Development</a></li>
1077
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Intelligent RPA</a></li>
1078
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Data Analysis</a></li>
1079
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">AI Automation</a></li>
1080
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Consulting</a></li>
1081
+ </ul>
1082
+ </div>
1083
+
1084
+ <div>
1085
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
1086
+ <p class="text-gray-400 mb-4">
1087
+ Subscribe to our newsletter for the latest updates and insights.
1088
+ </p>
1089
+ <form class="flex">
1090
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-900">
1091
+ <button type="submit" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-lg transition-colors duration-300">
1092
+ <i class="fas fa-paper-plane"></i>
1093
+ </button>
1094
+ </form>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
1099
+ <p class="text-gray-400 mb-4 md:mb-0">
1100
+ &copy; 2023 VritantaNextGen. All rights reserved.
1101
+ </p>
1102
+
1103
+ <div class="flex space-x-6">
1104
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
1105
+ <i class="fab fa-facebook-f"></i>
1106
+ </a>
1107
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
1108
+ <i class="fab fa-twitter"></i>
1109
+ </a>
1110
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
1111
+ <i class="fab fa-linkedin-in"></i>
1112
+ </a>
1113
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
1114
+ <i class="fab fa-instagram"></i>
1115
+ </a>
1116
+ </div>
1117
+ </div>
1118
+ </div>
1119
+ </footer>
1120
+
1121
+ <script>
1122
+ // Loading Screen
1123
+ document.addEventListener('DOMContentLoaded', function() {
1124
+ const loadingScreen = document.querySelector('.loading-screen');
1125
+ setTimeout(() => {
1126
+ loadingScreen.style.opacity = '0';
1127
+ setTimeout(() => {
1128
+ loadingScreen.style.display = 'none';
1129
+ }, 500);
1130
+ }, 1000);
1131
+ });
1132
+
1133
+ // Dark Mode Toggle
1134
+ const themeToggle = document.getElementById('theme-toggle');
1135
+ const html = document.documentElement;
1136
+
1137
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
1138
+ html.classList.add('dark');
1139
+ } else {
1140
+ html.classList.remove('dark');
1141
+ }
1142
+
1143
+ themeToggle.addEventListener('click', function() {
1144
+ html.classList.toggle('dark');
1145
+ localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
1146
+ });
1147
+
1148
+ // Mobile Menu Toggle
1149
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
1150
+ const mobileMenu = document.getElementById('mobile-menu');
1151
+
1152
+ mobileMenuButton.addEventListener('click', function() {
1153
+ mobileMenu.classList.toggle('hidden');
1154
+ });
1155
+
1156
+ // Smooth Scrolling for Anchor Links
1157
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1158
+ anchor.addEventListener('click', function(e) {
1159
+ e.preventDefault();
1160
+
1161
+ const targetId = this.getAttribute('href');
1162
+ const targetElement = document.querySelector(targetId);
1163
+
1164
+ if (targetElement) {
1165
+ window.scrollTo({
1166
+ top: targetElement.offsetTop - 80,
1167
+ behavior: 'smooth'
1168
+ });
1169
+
1170
+ // Close mobile menu if open
1171
+ if (!mobileMenu.classList.contains('hidden')) {
1172
+ mobileMenu.classList.add('hidden');
1173
+ }
1174
+ }
1175
+ });
1176
+ });
1177
+
1178
+ // Custom Cursor
1179
+ const cursor = document.querySelector('.custom-cursor');
1180
+
1181
+ document.addEventListener('mousemove', (e) => {
1182
+ cursor.style.left = e.clientX + 'px';
1183
+ cursor.style.top = e.clientY + 'px';
1184
+ });
1185
+
1186
+ // Add cursor hover effect on interactive elements
1187
+ const interactiveElements = document.querySelectorAll('a, button, input, .portfolio-item, .service-card, .blog-card, .nav-link');
1188
+
1189
+ interactiveElements.forEach(el => {
1190
+ el.addEventListener('mouseenter', () => {
1191
+ cursor.classList.add('cursor-hover');
1192
+ });
1193
+ el.addEventListener('mouseleave', () => {
1194
+ cursor.classList.remove('cursor-hover');
1195
+ });
1196
+ });
1197
+
1198
+ // Portfolio Filter
1199
+ const portfolioFilters = document.querySelectorAll('.portfolio-filter');
1200
+ const portfolioItems = document.querySelectorAll('.portfolio-item');
1201
+
1202
+ portfolioFilters.forEach(filter => {
1203
+ filter.addEventListener('click', function() {
1204
+ // Remove active class from all filters
1205
+ portfolioFilters.forEach(f => f.classList.remove('bg-blue-500', 'text-white'));
1206
+ // Add active class to clicked filter
1207
+ this.classList.add('bg-blue-500', 'text-white');
1208
+
1209
+ const filterValue = this.getAttribute('data-filter');
1210
+
1211
+ portfolioItems.forEach(item => {
1212
+ if (filterValue === 'all' || item.getAttribute('data-category').includes(filterValue)) {
1213
+ item.style.display = 'block';
1214
+ } else {
1215
+ item.style.display = 'none';
1216
+ }
1217
+ });
1218
+ });
1219
+ });
1220
+
1221
+ // Project Modals
1222
+ const viewProjectBtns = document.querySelectorAll('.view-project-btn');
1223
+ const projectModal = document.querySelector('.project-modal');
1224
+ const closeModalBtn = document.querySelector('.close-modal');
1225
+ const projectContents = document.querySelectorAll('.project-content');
1226
+
1227
+ viewProjectBtns.forEach(btn => {
1228
+ btn.addEventListener('click', function() {
1229
+ const projectId = this.getAttribute('data-project');
1230
+
1231
+ // Hide all project contents
1232
+ projectContents.forEach(content => {
1233
+ content.classList.add('hidden');
1234
+ });
1235
+
1236
+ // Show selected project content
1237
+ document.getElementById(`${projectId}-content`).classList.remove('hidden');
1238
+
1239
+ // Show modal
1240
+ projectModal.classList.add('active');
1241
+ document.body.style.overflow = 'hidden';
1242
+ });
1243
+ });
1244
+
1245
+ closeModalBtn.addEventListener('click', function() {
1246
+ projectModal.classList.remove('active');
1247
+ document.body.style.overflow = 'auto';
1248
+ });
1249
+
1250
+ // Close modal when clicking outside content
1251
+ projectModal.addEventListener('click', function(e) {
1252
+ if (e.target === projectModal) {
1253
+ projectModal.classList.remove('active');
1254
+ document.body.style.overflow = 'auto';
1255
+ }
1256
+ });
1257
+
1258
+ // Contact Form Submission
1259
+ const contactForm = document.getElementById('contact-form');
1260
+
1261
+ contactForm.addEventListener('submit', function(e) {
1262
+ e.preventDefault();
1263
+
1264
+ // Get form values
1265
+ const formData = new FormData(this);
1266
+ const data = Object.fromEntries(formData);
1267
+
1268
+ // Here you would typically send the data to your server
1269
+ console.log('Form submitted:', data);
1270
+
1271
+ // Show success message
1272
+ alert('Thank you for your message! We will get back to you soon.');
1273
+ this.reset();
1274
+ });
1275
+
1276
+ // Scroll Reveal Animation
1277
+ const scrollReveal = ScrollReveal({
1278
+ origin: 'bottom',
1279
+ distance: '60px',
1280
+ duration: 1000,
1281
+ delay: 200,
1282
+ reset: true
1283
+ });
1284
+
1285
+ // Reveal elements
1286
+ scrollReveal.reveal('.service-card, .portfolio-item, .blog-card', { interval: 200 });
1287
+ scrollReveal.reveal('.timeline-item', { interval: 200, origin: 'left' });
1288
+ });
1289
+ <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=SharmaAmit1818/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1290
  </html>