Hugging Face's logo

Spaces:
Meet1265
/
webport
Running

App Files Community
Meet1265 commited on
Commit
ebd960d
·
verified ·
1 Parent(s): da78839

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +757 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Webport
3
- emoji: 📉
4
  colorFrom: gray
5
- colorTo: gray
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: webport
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: green
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,757 @@
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>Varchas AI - IT Solutions & Services</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
9
+ <script src="https://unpkg.com/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
10
+ <script src="https://unpkg.com/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
14
+
15
+ body {
16
+ font-family: 'Poppins', sans-serif;
17
+ overflow-x: hidden;
18
+ background-color: #0f172a;
19
+ color: #f8fafc;
20
+ }
21
+
22
+ .hero-section {
23
+ height: 100vh;
24
+ position: relative;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .canvas-container {
29
+ position: absolute;
30
+ top: 0;
31
+ left: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ z-index: 1;
35
+ }
36
+
37
+ .hero-content {
38
+ position: relative;
39
+ z-index: 2;
40
+ }
41
+
42
+ .service-card {
43
+ transition: all 0.3s ease;
44
+ transform-style: preserve-3d;
45
+ perspective: 1000px;
46
+ }
47
+
48
+ .service-card:hover {
49
+ transform: translateY(-10px) rotateX(5deg);
50
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
51
+ }
52
+
53
+ .parallax-section {
54
+ background-attachment: fixed;
55
+ background-position: center;
56
+ background-repeat: no-repeat;
57
+ background-size: cover;
58
+ position: relative;
59
+ }
60
+
61
+ .tech-icon {
62
+ transition: all 0.3s ease;
63
+ filter: grayscale(100%);
64
+ }
65
+
66
+ .tech-icon:hover {
67
+ filter: grayscale(0%);
68
+ transform: scale(1.1) rotateY(15deg);
69
+ }
70
+
71
+ .floating {
72
+ animation: floating 6s ease-in-out infinite;
73
+ }
74
+
75
+ @keyframes floating {
76
+ 0% { transform: translateY(0px); }
77
+ 50% { transform: translateY(-20px); }
78
+ 100% { transform: translateY(0px); }
79
+ }
80
+
81
+ .scroll-down {
82
+ position: absolute;
83
+ bottom: 30px;
84
+ left: 50%;
85
+ transform: translateX(-50%);
86
+ z-index: 10;
87
+ animation: bounce 2s infinite;
88
+ }
89
+
90
+ @keyframes bounce {
91
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
92
+ 40% {transform: translateY(-20px);}
93
+ 60% {transform: translateY(-10px);}
94
+ }
95
+ </style>
96
+ </head>
97
+ <body>
98
+ <!-- Navigation -->
99
+ <nav class="fixed w-full z-50 bg-opacity-90 backdrop-blur-md bg-gray-900 shadow-lg">
100
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
101
+ <div class="flex items-center justify-between h-16">
102
+ <div class="flex items-center">
103
+ <div class="flex-shrink-0">
104
+ <span class="text-2xl font-bold text-blue-400">Varchas<span class="text-white">AI</span></span>
105
+ </div>
106
+ </div>
107
+ <div class="hidden md:block">
108
+ <div class="ml-10 flex items-baseline space-x-4">
109
+ <a href="#home" class="text-blue-400 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
110
+ <a href="#services" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
111
+ <a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
112
+ <a href="#portfolio" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Portfolio</a>
113
+ <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
114
+ </div>
115
+ </div>
116
+ <div class="hidden md:block">
117
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
118
+ Get Started
119
+ </button>
120
+ </div>
121
+ <div class="md:hidden">
122
+ <button class="text-gray-300 hover:text-white focus:outline-none">
123
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
124
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
125
+ </svg>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </nav>
131
+
132
+ <!-- Hero Section with 3D Background -->
133
+ <section id="home" class="hero-section">
134
+ <div class="canvas-container" id="canvas-container"></div>
135
+ <div class="hero-content container mx-auto px-6 pt-32 md:pt-40 flex flex-col items-center justify-center h-full">
136
+ <h1 class="text-4xl md:text-6xl font-bold text-center mb-6">
137
+ <span class="text-blue-400">Innovative</span> Tech Solutions
138
+ </h1>
139
+ <p class="text-lg md:text-xl text-center max-w-3xl mb-10 text-gray-300">
140
+ We transform your ideas into cutting-edge digital experiences with our expertise in Web Development, App Development, and AI/ML Solutions.
141
+ </p>
142
+ <div class="flex flex-col sm:flex-row gap-4">
143
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md text-lg font-medium transition duration-300 transform hover:scale-105">
144
+ Explore Services
145
+ </button>
146
+ <button class="border border-blue-400 text-blue-400 hover:bg-blue-900 hover:bg-opacity-30 px-8 py-3 rounded-md text-lg font-medium transition duration-300 transform hover:scale-105">
147
+ Contact Us
148
+ </button>
149
+ </div>
150
+ <div class="scroll-down">
151
+ <div class="w-10 h-16 border-2 border-blue-400 rounded-full flex justify-center">
152
+ <div class="w-1 h-4 bg-blue-400 rounded-full mt-2 animate-bounce"></div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </section>
157
+
158
+ <!-- Services Section -->
159
+ <section id="services" class="py-20 bg-gradient-to-b from-gray-900 to-gray-800">
160
+ <div class="container mx-auto px-6">
161
+ <div class="text-center mb-16">
162
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-400">Services</span></h2>
163
+ <p class="text-gray-400 max-w-2xl mx-auto">We offer comprehensive IT solutions tailored to your business needs</p>
164
+ </div>
165
+
166
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
167
+ <!-- Web Development -->
168
+ <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20">
169
+ <div class="text-blue-400 text-4xl mb-6">
170
+ <i class="fas fa-code"></i>
171
+ </div>
172
+ <h3 class="text-xl font-bold mb-4">Web Development</h3>
173
+ <p class="text-gray-400 mb-6">
174
+ Custom websites and web applications built with modern technologies for optimal performance and user experience.
175
+ </p>
176
+ <ul class="space-y-2 text-gray-400">
177
+ <li class="flex items-center">
178
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> Responsive Design
179
+ </li>
180
+ <li class="flex items-center">
181
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> E-commerce Solutions
182
+ </li>
183
+ <li class="flex items-center">
184
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> CMS Integration
185
+ </li>
186
+ </ul>
187
+ </div>
188
+
189
+ <!-- App Development -->
190
+ <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20">
191
+ <div class="text-blue-400 text-4xl mb-6">
192
+ <i class="fas fa-mobile-alt"></i>
193
+ </div>
194
+ <h3 class="text-xl font-bold mb-4">App Development</h3>
195
+ <p class="text-gray-400 mb-6">
196
+ Native and cross-platform mobile applications that engage users and drive business growth.
197
+ </p>
198
+ <ul class="space-y-2 text-gray-400">
199
+ <li class="flex items-center">
200
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> iOS & Android Apps
201
+ </li>
202
+ <li class="flex items-center">
203
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> React Native Development
204
+ </li>
205
+ <li class="flex items-center">
206
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> Flutter Development
207
+ </li>
208
+ </ul>
209
+ </div>
210
+
211
+ <!-- AI/ML Solutions -->
212
+ <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20">
213
+ <div class="text-blue-400 text-4xl mb-6">
214
+ <i class="fas fa-brain"></i>
215
+ </div>
216
+ <h3 class="text-xl font-bold mb-4">AI/ML Solutions</h3>
217
+ <p class="text-gray-400 mb-6">
218
+ Leverage artificial intelligence and machine learning to automate processes and gain valuable insights.
219
+ </p>
220
+ <ul class="space-y-2 text-gray-400">
221
+ <li class="flex items-center">
222
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> Predictive Analytics
223
+ </li>
224
+ <li class="flex items-center">
225
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> Computer Vision
226
+ </li>
227
+ <li class="flex items-center">
228
+ <i class="fas fa-check-circle text-blue-400 mr-2"></i> Natural Language Processing
229
+ </li>
230
+ </ul>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+ <!-- About Section with 3D Effect -->
237
+ <section id="about" class="py-20 bg-gray-800 relative overflow-hidden">
238
+ <div class="absolute inset-0 overflow-hidden">
239
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-purple-900/20"></div>
240
+ <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
241
+ </div>
242
+
243
+ <div class="container mx-auto px-6 relative z-10">
244
+ <div class="flex flex-col lg:flex-row items-center">
245
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
246
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">About <span class="text-blue-400">Varchas AI</span></h2>
247
+ <p class="text-gray-400 mb-6">
248
+ Founded in 2020, Varchas AI is a leading IT solutions provider specializing in cutting-edge technologies. Our team of experts is dedicated to delivering innovative solutions that drive business growth.
249
+ </p>
250
+ <p class="text-gray-400 mb-8">
251
+ We combine technical expertise with creative thinking to build digital products that make an impact. Our client-centric approach ensures we understand your unique needs and deliver tailored solutions.
252
+ </p>
253
+ <div class="flex flex-wrap gap-4">
254
+ <div class="bg-gray-700 bg-opacity-50 px-4 py-2 rounded-lg">
255
+ <span class="text-blue-400 font-bold">50+</span>
256
+ <span class="text-gray-300">Projects</span>
257
+ </div>
258
+ <div class="bg-gray-700 bg-opacity-50 px-4 py-2 rounded-lg">
259
+ <span class="text-blue-400 font-bold">30+</span>
260
+ <span class="text-gray-300">Clients</span>
261
+ </div>
262
+ <div class="bg-gray-700 bg-opacity-50 px-4 py-2 rounded-lg">
263
+ <span class="text-blue-400 font-bold">15+</span>
264
+ <span class="text-gray-300">Experts</span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ <div class="lg:w-1/2 relative">
269
+ <div class="relative w-full h-80 lg:h-96 rounded-xl overflow-hidden">
270
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-70 rounded-xl"></div>
271
+ <div class="absolute inset-0 flex items-center justify-center">
272
+ <div class="text-center p-8">
273
+ <div class="text-6xl text-white mb-4 floating">
274
+ <i class="fas fa-rocket"></i>
275
+ </div>
276
+ <h3 class="text-2xl font-bold text-white mb-2">Innovation Driven</h3>
277
+ <p class="text-gray-200">We constantly push boundaries to deliver exceptional results</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- Tech Stack Section -->
287
+ <section class="py-20 bg-gray-900">
288
+ <div class="container mx-auto px-6">
289
+ <div class="text-center mb-16">
290
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-400">Tech Stack</span></h2>
291
+ <p class="text-gray-400 max-w-2xl mx-auto">We work with the latest technologies to build robust solutions</p>
292
+ </div>
293
+
294
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8">
295
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
296
+ <i class="fab fa-react text-4xl text-blue-400 mb-2"></i>
297
+ <span class="text-gray-300">React</span>
298
+ </div>
299
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
300
+ <i class="fab fa-node-js text-4xl text-green-500 mb-2"></i>
301
+ <span class="text-gray-300">Node.js</span>
302
+ </div>
303
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
304
+ <i class="fab fa-python text-4xl text-yellow-400 mb-2"></i>
305
+ <span class="text-gray-300">Python</span>
306
+ </div>
307
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
308
+ <i class="fab fa-js text-4xl text-yellow-300 mb-2"></i>
309
+ <span class="text-gray-300">JavaScript</span>
310
+ </div>
311
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
312
+ <i class="fab fa-swift text-4xl text-orange-500 mb-2"></i>
313
+ <span class="text-gray-300">Swift</span>
314
+ </div>
315
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
316
+ <i class="fab fa-android text-4xl text-green-400 mb-2"></i>
317
+ <span class="text-gray-300">Android</span>
318
+ </div>
319
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
320
+ <i class="fas fa-database text-4xl text-blue-600 mb-2"></i>
321
+ <span class="text-gray-300">MongoDB</span>
322
+ </div>
323
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
324
+ <i class="fas fa-fire text-4xl text-yellow-500 mb-2"></i>
325
+ <span class="text-gray-300">Firebase</span>
326
+ </div>
327
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
328
+ <i class="fab fa-aws text-4xl text-orange-400 mb-2"></i>
329
+ <span class="text-gray-300">AWS</span>
330
+ </div>
331
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
332
+ <i class="fas fa-robot text-4xl text-purple-400 mb-2"></i>
333
+ <span class="text-gray-300">TensorFlow</span>
334
+ </div>
335
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
336
+ <i class="fab fa-docker text-4xl text-blue-500 mb-2"></i>
337
+ <span class="text-gray-300">Docker</span>
338
+ </div>
339
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300">
340
+ <i class="fab fa-git-alt text-4xl text-orange-600 mb-2"></i>
341
+ <span class="text-gray-300">Git</span>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </section>
346
+
347
+ <!-- Portfolio Section -->
348
+ <section id="portfolio" class="py-20 bg-gray-800">
349
+ <div class="container mx-auto px-6">
350
+ <div class="text-center mb-16">
351
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-400">Work</span></h2>
352
+ <p class="text-gray-400 max-w-2xl mx-auto">Explore some of our recent projects and success stories</p>
353
+ </div>
354
+
355
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
356
+ <!-- Project 1 -->
357
+ <div class="group relative overflow-hidden rounded-xl shadow-lg transition duration-300 transform hover:-translate-y-2">
358
+ <div class="h-64 bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
359
+ <i class="fas fa-shopping-cart text-6xl text-white opacity-80 group-hover:opacity-100 transition duration-300"></i>
360
+ </div>
361
+ <div class="bg-gray-700 p-6">
362
+ <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3>
363
+ <p class="text-gray-400 mb-4">A full-featured online store with AI-powered recommendations</p>
364
+ <div class="flex flex-wrap gap-2">
365
+ <span class="bg-blue-900 text-blue-300 text-xs px-3 py-1 rounded-full">React</span>
366
+ <span class="bg-purple-900 text-purple-300 text-xs px-3 py-1 rounded-full">Node.js</span>
367
+ <span class="bg-green-900 text-green-300 text-xs px-3 py-1 rounded-full">MongoDB</span>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Project 2 -->
373
+ <div class="group relative overflow-hidden rounded-xl shadow-lg transition duration-300 transform hover:-translate-y-2">
374
+ <div class="h-64 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center">
375
+ <i class="fas fa-mobile-alt text-6xl text-white opacity-80 group-hover:opacity-100 transition duration-300"></i>
376
+ </div>
377
+ <div class="bg-gray-700 p-6">
378
+ <h3 class="text-xl font-bold mb-2">Fitness App</h3>
379
+ <p class="text-gray-400 mb-4">AI-powered personal training app with real-time feedback</p>
380
+ <div class="flex flex-wrap gap-2">
381
+ <span class="bg-blue-900 text-blue-300 text-xs px-3 py-1 rounded-full">Flutter</span>
382
+ <span class="bg-red-900 text-red-300 text-xs px-3 py-1 rounded-full">Firebase</span>
383
+ <span class="bg-yellow-900 text-yellow-300 text-xs px-3 py-1 rounded-full">TensorFlow</span>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Project 3 -->
389
+ <div class="group relative overflow-hidden rounded-xl shadow-lg transition duration-300 transform hover:-translate-y-2">
390
+ <div class="h-64 bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center">
391
+ <i class="fas fa-chart-line text-6xl text-white opacity-80 group-hover:opacity-100 transition duration-300"></i>
392
+ </div>
393
+ <div class="bg-gray-700 p-6">
394
+ <h3 class="text-xl font-bold mb-2">Analytics Dashboard</h3>
395
+ <p class="text-gray-400 mb-4">Real-time business intelligence with predictive analytics</p>
396
+ <div class="flex flex-wrap gap-2">
397
+ <span class="bg-blue-900 text-blue-300 text-xs px-3 py-1 rounded-full">React</span>
398
+ <span class="bg-green-900 text-green-300 text-xs px-3 py-1 rounded-full">Python</span>
399
+ <span class="bg-purple-900 text-purple-300 text-xs px-3 py-1 rounded-full">AWS</span>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="text-center mt-12">
406
+ <button class="border border-blue-400 text-blue-400 hover:bg-blue-900 hover:bg-opacity-30 px-8 py-3 rounded-md text-lg font-medium transition duration-300">
407
+ View All Projects
408
+ </button>
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- Testimonials Section -->
414
+ <section class="py-20 bg-gray-900">
415
+ <div class="container mx-auto px-6">
416
+ <div class="text-center mb-16">
417
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Client <span class="text-blue-400">Testimonials</span></h2>
418
+ <p class="text-gray-400 max-w-2xl mx-auto">What our clients say about working with us</p>
419
+ </div>
420
+
421
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
422
+ <!-- Testimonial 1 -->
423
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20 transition duration-300">
424
+ <div class="flex items-center mb-6">
425
+ <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-4">JD</div>
426
+ <div>
427
+ <h4 class="font-bold">John Doe</h4>
428
+ <p class="text-gray-400 text-sm">CEO, TechCorp</p>
429
+ </div>
430
+ </div>
431
+ <p class="text-gray-300 mb-6">
432
+ "Varchas AI transformed our e-commerce platform with their innovative approach. The team delivered beyond our expectations with their technical expertise."
433
+ </p>
434
+ <div class="flex text-yellow-400">
435
+ <i class="fas fa-star"></i>
436
+ <i class="fas fa-star"></i>
437
+ <i class="fas fa-star"></i>
438
+ <i class="fas fa-star"></i>
439
+ <i class="fas fa-star"></i>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Testimonial 2 -->
444
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20 transition duration-300">
445
+ <div class="flex items-center mb-6">
446
+ <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold mr-4">AS</div>
447
+ <div>
448
+ <h4 class="font-bold">Alice Smith</h4>
449
+ <p class="text-gray-400 text-sm">CTO, HealthTech</p>
450
+ </div>
451
+ </div>
452
+ <p class="text-gray-300 mb-6">
453
+ "The AI solution developed by Varchas AI has revolutionized our patient care system. Their team was responsive, professional, and delivered on time."
454
+ </p>
455
+ <div class="flex text-yellow-400">
456
+ <i class="fas fa-star"></i>
457
+ <i class="fas fa-star"></i>
458
+ <i class="fas fa-star"></i>
459
+ <i class="fas fa-star"></i>
460
+ <i class="fas fa-star-half-alt"></i>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Testimonial 3 -->
465
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20 transition duration-300">
466
+ <div class="flex items-center mb-6">
467
+ <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-white font-bold mr-4">RJ</div>
468
+ <div>
469
+ <h4 class="font-bold">Robert Johnson</h4>
470
+ <p class="text-gray-400 text-sm">Director, FinServe</p>
471
+ </div>
472
+ </div>
473
+ <p class="text-gray-300 mb-6">
474
+ "Working with Varchas AI was a game-changer for our financial analytics platform. Their attention to detail and problem-solving skills are exceptional."
475
+ </p>
476
+ <div class="flex text-yellow-400">
477
+ <i class="fas fa-star"></i>
478
+ <i class="fas fa-star"></i>
479
+ <i class="fas fa-star"></i>
480
+ <i class="fas fa-star"></i>
481
+ <i class="fas fa-star"></i>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </section>
487
+
488
+ <!-- Contact Section -->
489
+ <section id="contact" class="py-20 bg-gray-800">
490
+ <div class="container mx-auto px-6">
491
+ <div class="flex flex-col lg:flex-row">
492
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
493
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Get In <span class="text-blue-400">Touch</span></h2>
494
+ <p class="text-gray-400 mb-8">
495
+ Have a project in mind or want to discuss how we can help your business? Reach out to us and our team will get back to you within 24 hours.
496
+ </p>
497
+
498
+ <div class="space-y-6">
499
+ <div class="flex items-start">
500
+ <div class="text-blue-400 text-xl mr-4 mt-1">
501
+ <i class="fas fa-map-marker-alt"></i>
502
+ </div>
503
+ <div>
504
+ <h4 class="font-bold text-white mb-1">Address</h4>
505
+ <p class="text-gray-400">123 Tech Park, Silicon Valley, CA 94025</p>
506
+ </div>
507
+ </div>
508
+
509
+ <div class="flex items-start">
510
+ <div class="text-blue-400 text-xl mr-4 mt-1">
511
+ <i class="fas fa-envelope"></i>
512
+ </div>
513
+ <div>
514
+ <h4 class="font-bold text-white mb-1">Email</h4>
515
+ <p class="text-gray-400">contact@varchasai.com</p>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="flex items-start">
520
+ <div class="text-blue-400 text-xl mr-4 mt-1">
521
+ <i class="fas fa-phone-alt"></i>
522
+ </div>
523
+ <div>
524
+ <h4 class="font-bold text-white mb-1">Phone</h4>
525
+ <p class="text-gray-400">+1 (555) 123-4567</p>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <div class="mt-8">
531
+ <h4 class="font-bold text-white mb-4">Follow Us</h4>
532
+ <div class="flex space-x-4">
533
+ <a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300">
534
+ <i class="fab fa-twitter"></i>
535
+ </a>
536
+ <a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300">
537
+ <i class="fab fa-linkedin"></i>
538
+ </a>
539
+ <a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300">
540
+ <i class="fab fa-github"></i>
541
+ </a>
542
+ <a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300">
543
+ <i class="fab fa-instagram"></i>
544
+ </a>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="lg:w-1/2">
550
+ <div class="bg-gray-700 rounded-xl p-8 shadow-lg">
551
+ <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3>
552
+ <form>
553
+ <div class="mb-6">
554
+ <label for="name" class="block text-gray-300 mb-2">Your Name</label>
555
+ <input type="text" id="name" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
556
+ </div>
557
+ <div class="mb-6">
558
+ <label for="email" class="block text-gray-300 mb-2">Email Address</label>
559
+ <input type="email" id="email" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
560
+ </div>
561
+ <div class="mb-6">
562
+ <label for="subject" class="block text-gray-300 mb-2">Subject</label>
563
+ <input type="text" id="subject" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
564
+ </div>
565
+ <div class="mb-6">
566
+ <label for="message" class="block text-gray-300 mb-2">Message</label>
567
+ <textarea id="message" rows="5" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white"></textarea>
568
+ </div>
569
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">
570
+ Send Message
571
+ </button>
572
+ </form>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </section>
578
+
579
+ <!-- Footer -->
580
+ <footer class="bg-gray-900 py-12">
581
+ <div class="container mx-auto px-6">
582
+ <div class="flex flex-col md:flex-row justify-between items-center">
583
+ <div class="mb-6 md:mb-0">
584
+ <span class="text-2xl font-bold text-blue-400">Varchas<span class="text-white">AI</span></span>
585
+ <p class="text-gray-400 mt-2">Innovative Tech Solutions for the Digital Age</p>
586
+ </div>
587
+ <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0">
588
+ <a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a>
589
+ <a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a>
590
+ <a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a>
591
+ <a href="#portfolio" class="text-gray-400 hover:text-white transition duration-300">Portfolio</a>
592
+ <a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a>
593
+ </div>
594
+ </div>
595
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
596
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Varchas AI. All rights reserved.</p>
597
+ <div class="flex space-x-6">
598
+ <a href="#" class="text-gray-500 hover:text-blue-400 transition duration-300">
599
+ <i class="fab fa-twitter"></i>
600
+ </a>
601
+ <a href="#" class="text-gray-500 hover:text-blue-400 transition duration-300">
602
+ <i class="fab fa-linkedin"></i>
603
+ </a>
604
+ <a href="#" class="text-gray-500 hover:text-blue-400 transition duration-300">
605
+ <i class="fab fa-github"></i>
606
+ </a>
607
+ <a href="#" class="text-gray-500 hover:text-blue-400 transition duration-300">
608
+ <i class="fab fa-instagram"></i>
609
+ </a>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </footer>
614
+
615
+ <!-- 3D Animation Script -->
616
+ <script>
617
+ // Initialize Three.js scene for the hero section
618
+ function initThreeJS() {
619
+ const container = document.getElementById('canvas-container');
620
+
621
+ // Scene setup
622
+ const scene = new THREE.Scene();
623
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
624
+ const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
625
+ renderer.setSize(window.innerWidth, window.innerHeight);
626
+ container.appendChild(renderer.domElement);
627
+
628
+ // Add lights
629
+ const ambientLight = new THREE.AmbientLight(0x404040);
630
+ scene.add(ambientLight);
631
+
632
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
633
+ directionalLight.position.set(1, 1, 1);
634
+ scene.add(directionalLight);
635
+
636
+ // Create floating geometric shapes
637
+ const geometry = new THREE.IcosahedronGeometry(1, 0);
638
+ const material = new THREE.MeshPhongMaterial({
639
+ color: 0x3b82f6,
640
+ emissive: 0x1e40af,
641
+ emissiveIntensity: 0.2,
642
+ shininess: 100,
643
+ transparent: true,
644
+ opacity: 0.8
645
+ });
646
+
647
+ const shapes = [];
648
+ const count = 15;
649
+
650
+ for (let i = 0; i < count; i++) {
651
+ const shape = new THREE.Mesh(geometry, material.clone());
652
+
653
+ // Random position
654
+ shape.position.x = Math.random() * 20 - 10;
655
+ shape.position.y = Math.random() * 10 - 5;
656
+ shape.position.z = Math.random() * 10 - 20;
657
+
658
+ // Random size
659
+ const size = Math.random() * 0.5 + 0.5;
660
+ shape.scale.set(size, size, size);
661
+
662
+ // Random rotation
663
+ shape.rotation.x = Math.random() * Math.PI;
664
+ shape.rotation.y = Math.random() * Math.PI;
665
+
666
+ // Store reference for animation
667
+ shape.userData = {
668
+ speed: Math.random() * 0.02 + 0.01,
669
+ rotationSpeed: Math.random() * 0.02 + 0.01
670
+ };
671
+
672
+ shapes.push(shape);
673
+ scene.add(shape);
674
+ }
675
+
676
+ // Camera position
677
+ camera.position.z = 5;
678
+
679
+ // Handle window resize
680
+ window.addEventListener('resize', () => {
681
+ camera.aspect = window.innerWidth / window.innerHeight;
682
+ camera.updateProjectionMatrix();
683
+ renderer.setSize(window.innerWidth, window.innerHeight);
684
+ });
685
+
686
+ // Animation loop
687
+ function animate() {
688
+ requestAnimationFrame(animate);
689
+
690
+ // Animate shapes
691
+ shapes.forEach(shape => {
692
+ shape.rotation.x += shape.userData.rotationSpeed * 0.5;
693
+ shape.rotation.y += shape.userData.rotationSpeed;
694
+
695
+ // Float up and down
696
+ shape.position.y += Math.sin(Date.now() * shape.userData.speed * 0.001) * 0.01;
697
+ });
698
+
699
+ renderer.render(scene, camera);
700
+ }
701
+
702
+ animate();
703
+
704
+ // Parallax effect on scroll
705
+ window.addEventListener('scroll', () => {
706
+ const scrollY = window.scrollY;
707
+ camera.position.z = 5 + scrollY * 0.05;
708
+
709
+ shapes.forEach(shape => {
710
+ shape.position.x += (scrollY * 0.0005) * (shape.userData.speed * 50);
711
+ });
712
+ });
713
+ }
714
+
715
+ // Initialize when DOM is loaded
716
+ document.addEventListener('DOMContentLoaded', () => {
717
+ initThreeJS();
718
+
719
+ // Smooth scrolling for anchor links
720
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
721
+ anchor.addEventListener('click', function (e) {
722
+ e.preventDefault();
723
+
724
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
725
+ behavior: 'smooth'
726
+ });
727
+ });
728
+ });
729
+
730
+ // Animate elements when they come into view
731
+ const animateOnScroll = () => {
732
+ const elements = document.querySelectorAll('.service-card, .tech-icon');
733
+
734
+ elements.forEach(element => {
735
+ const elementPosition = element.getBoundingClientRect().top;
736
+ const screenPosition = window.innerHeight / 1.3;
737
+
738
+ if (elementPosition < screenPosition) {
739
+ element.style.opacity = '1';
740
+ element.style.transform = 'translateY(0)';
741
+ }
742
+ });
743
+ };
744
+
745
+ // Set initial state
746
+ document.querySelectorAll('.service-card, .tech-icon').forEach(el => {
747
+ el.style.opacity = '0';
748
+ el.style.transform = 'translateY(20px)';
749
+ el.style.transition = 'all 0.5s ease';
750
+ });
751
+
752
+ window.addEventListener('scroll', animateOnScroll);
753
+ animateOnScroll(); // Run once on load
754
+ });
755
+ </script>
756
+ <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=Meet1265/webport" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
757
+ </html>
prompts.txt ADDED
File without changes