|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Varchas AI - IT Solutions & Services</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script> |
|
|
<script src="https://unpkg.com/three@0.132.2/examples/js/controls/OrbitControls.js"></script> |
|
|
<script src="https://unpkg.com/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
overflow-x: hidden; |
|
|
background-color: #0f172a; |
|
|
color: #f8fafc; |
|
|
} |
|
|
|
|
|
.hero-section { |
|
|
height: 100vh; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.canvas-container { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px) rotateX(5deg); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
|
|
} |
|
|
|
|
|
.parallax-section { |
|
|
background-attachment: fixed; |
|
|
background-position: center; |
|
|
background-repeat: no-repeat; |
|
|
background-size: cover; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tech-icon { |
|
|
transition: all 0.3s ease; |
|
|
filter: grayscale(100%); |
|
|
} |
|
|
|
|
|
.tech-icon:hover { |
|
|
filter: grayscale(0%); |
|
|
transform: scale(1.1) rotateY(15deg); |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.scroll-down { |
|
|
position: absolute; |
|
|
bottom: 30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
z-index: 10; |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
|
|
40% {transform: translateY(-20px);} |
|
|
60% {transform: translateY(-10px);} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-opacity-90 backdrop-blur-md bg-gray-900 shadow-lg"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-2xl font-bold text-blue-400">Varchas<span class="text-white">AI</span></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="#home" class="text-blue-400 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a> |
|
|
<a href="#services" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a> |
|
|
<a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a> |
|
|
<a href="#portfolio" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Portfolio</a> |
|
|
<a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button class="text-gray-300 hover:text-white focus:outline-none"> |
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-section"> |
|
|
<div class="canvas-container" id="canvas-container"></div> |
|
|
<div class="hero-content container mx-auto px-6 pt-32 md:pt-40 flex flex-col items-center justify-center h-full"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold text-center mb-6"> |
|
|
<span class="text-blue-400">Innovative</span> Tech Solutions |
|
|
</h1> |
|
|
<p class="text-lg md:text-xl text-center max-w-3xl mb-10 text-gray-300"> |
|
|
We transform your ideas into cutting-edge digital experiences with our expertise in Web Development, App Development, and AI/ML Solutions. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<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"> |
|
|
Explore Services |
|
|
</button> |
|
|
<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"> |
|
|
Contact Us |
|
|
</button> |
|
|
</div> |
|
|
<div class="scroll-down"> |
|
|
<div class="w-10 h-16 border-2 border-blue-400 rounded-full flex justify-center"> |
|
|
<div class="w-1 h-4 bg-blue-400 rounded-full mt-2 animate-bounce"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-gradient-to-b from-gray-900 to-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-400">Services</span></h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto">We offer comprehensive IT solutions tailored to your business needs</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="text-blue-400 text-4xl mb-6"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Web Development</h3> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
Custom websites and web applications built with modern technologies for optimal performance and user experience. |
|
|
</p> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> Responsive Design |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> E-commerce Solutions |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> CMS Integration |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="text-blue-400 text-4xl mb-6"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">App Development</h3> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
Native and cross-platform mobile applications that engage users and drive business growth. |
|
|
</p> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> iOS & Android Apps |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> React Native Development |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> Flutter Development |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="text-blue-400 text-4xl mb-6"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">AI/ML Solutions</h3> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
Leverage artificial intelligence and machine learning to automate processes and gain valuable insights. |
|
|
</p> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> Predictive Analytics |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> Computer Vision |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> Natural Language Processing |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-gray-800 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-purple-900/20"></div> |
|
|
<div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">About <span class="text-blue-400">Varchas AI</span></h2> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
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. |
|
|
</p> |
|
|
<p class="text-gray-400 mb-8"> |
|
|
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. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="bg-gray-700 bg-opacity-50 px-4 py-2 rounded-lg"> |
|
|
<span class="text-blue-400 font-bold">50+</span> |
|
|
<span class="text-gray-300">Projects</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 bg-opacity-50 px-4 py-2 rounded-lg"> |
|
|
<span class="text-blue-400 font-bold">30+</span> |
|
|
<span class="text-gray-300">Clients</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 bg-opacity-50 px-4 py-2 rounded-lg"> |
|
|
<span class="text-blue-400 font-bold">15+</span> |
|
|
<span class="text-gray-300">Experts</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 relative"> |
|
|
<div class="relative w-full h-80 lg:h-96 rounded-xl overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-70 rounded-xl"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-center p-8"> |
|
|
<div class="text-6xl text-white mb-4 floating"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-white mb-2">Innovation Driven</h3> |
|
|
<p class="text-gray-200">We constantly push boundaries to deliver exceptional results</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-400">Tech Stack</span></h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto">We work with the latest technologies to build robust solutions</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8"> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-react text-4xl text-blue-400 mb-2"></i> |
|
|
<span class="text-gray-300">React</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-node-js text-4xl text-green-500 mb-2"></i> |
|
|
<span class="text-gray-300">Node.js</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-python text-4xl text-yellow-400 mb-2"></i> |
|
|
<span class="text-gray-300">Python</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-js text-4xl text-yellow-300 mb-2"></i> |
|
|
<span class="text-gray-300">JavaScript</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-swift text-4xl text-orange-500 mb-2"></i> |
|
|
<span class="text-gray-300">Swift</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-android text-4xl text-green-400 mb-2"></i> |
|
|
<span class="text-gray-300">Android</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fas fa-database text-4xl text-blue-600 mb-2"></i> |
|
|
<span class="text-gray-300">MongoDB</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fas fa-fire text-4xl text-yellow-500 mb-2"></i> |
|
|
<span class="text-gray-300">Firebase</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-aws text-4xl text-orange-400 mb-2"></i> |
|
|
<span class="text-gray-300">AWS</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fas fa-robot text-4xl text-purple-400 mb-2"></i> |
|
|
<span class="text-gray-300">TensorFlow</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-docker text-4xl text-blue-500 mb-2"></i> |
|
|
<span class="text-gray-300">Docker</span> |
|
|
</div> |
|
|
<div class="tech-icon flex flex-col items-center p-6 bg-gray-800 rounded-xl hover:bg-gray-700 transition duration-300"> |
|
|
<i class="fab fa-git-alt text-4xl text-orange-600 mb-2"></i> |
|
|
<span class="text-gray-300">Git</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="portfolio" class="py-20 bg-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-400">Work</span></h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto">Explore some of our recent projects and success stories</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="group relative overflow-hidden rounded-xl shadow-lg transition duration-300 transform hover:-translate-y-2"> |
|
|
<div class="h-64 bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-shopping-cart text-6xl text-white opacity-80 group-hover:opacity-100 transition duration-300"></i> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">E-commerce Platform</h3> |
|
|
<p class="text-gray-400 mb-4">A full-featured online store with AI-powered recommendations</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-blue-900 text-blue-300 text-xs px-3 py-1 rounded-full">React</span> |
|
|
<span class="bg-purple-900 text-purple-300 text-xs px-3 py-1 rounded-full">Node.js</span> |
|
|
<span class="bg-green-900 text-green-300 text-xs px-3 py-1 rounded-full">MongoDB</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group relative overflow-hidden rounded-xl shadow-lg transition duration-300 transform hover:-translate-y-2"> |
|
|
<div class="h-64 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center"> |
|
|
<i class="fas fa-mobile-alt text-6xl text-white opacity-80 group-hover:opacity-100 transition duration-300"></i> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Fitness App</h3> |
|
|
<p class="text-gray-400 mb-4">AI-powered personal training app with real-time feedback</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-blue-900 text-blue-300 text-xs px-3 py-1 rounded-full">Flutter</span> |
|
|
<span class="bg-red-900 text-red-300 text-xs px-3 py-1 rounded-full">Firebase</span> |
|
|
<span class="bg-yellow-900 text-yellow-300 text-xs px-3 py-1 rounded-full">TensorFlow</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group relative overflow-hidden rounded-xl shadow-lg transition duration-300 transform hover:-translate-y-2"> |
|
|
<div class="h-64 bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-line text-6xl text-white opacity-80 group-hover:opacity-100 transition duration-300"></i> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Analytics Dashboard</h3> |
|
|
<p class="text-gray-400 mb-4">Real-time business intelligence with predictive analytics</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-blue-900 text-blue-300 text-xs px-3 py-1 rounded-full">React</span> |
|
|
<span class="bg-green-900 text-green-300 text-xs px-3 py-1 rounded-full">Python</span> |
|
|
<span class="bg-purple-900 text-purple-300 text-xs px-3 py-1 rounded-full">AWS</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<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"> |
|
|
View All Projects |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Client <span class="text-blue-400">Testimonials</span></h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto">What our clients say about working with us</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20 transition duration-300"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-4">JD</div> |
|
|
<div> |
|
|
<h4 class="font-bold">John Doe</h4> |
|
|
<p class="text-gray-400 text-sm">CEO, TechCorp</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
"Varchas AI transformed our e-commerce platform with their innovative approach. The team delivered beyond our expectations with their technical expertise." |
|
|
</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20 transition duration-300"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold mr-4">AS</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Alice Smith</h4> |
|
|
<p class="text-gray-400 text-sm">CTO, HealthTech</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
"The AI solution developed by Varchas AI has revolutionized our patient care system. Their team was responsive, professional, and delivered on time." |
|
|
</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-blue-500/20 transition duration-300"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-white font-bold mr-4">RJ</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Robert Johnson</h4> |
|
|
<p class="text-gray-400 text-sm">Director, FinServe</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
"Working with Varchas AI was a game-changer for our financial analytics platform. Their attention to detail and problem-solving skills are exceptional." |
|
|
</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col lg:flex-row"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Get In <span class="text-blue-400">Touch</span></h2> |
|
|
<p class="text-gray-400 mb-8"> |
|
|
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. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="text-blue-400 text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-white mb-1">Address</h4> |
|
|
<p class="text-gray-400">123 Tech Park, Silicon Valley, CA 94025</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-blue-400 text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-white mb-1">Email</h4> |
|
|
<p class="text-gray-400">contact@varchasai.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-blue-400 text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-white mb-1">Phone</h4> |
|
|
<p class="text-gray-400">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h4 class="font-bold text-white mb-4">Follow Us</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-gray-700 rounded-xl p-8 shadow-lg"> |
|
|
<h3 class="text-2xl font-bold mb-6">Send Us a Message</h3> |
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-gray-300 mb-2">Your Name</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-gray-300 mb-2">Email Address</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="subject" class="block text-gray-300 mb-2">Subject</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-gray-300 mb-2">Message</label> |
|
|
<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> |
|
|
</div> |
|
|
<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"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<span class="text-2xl font-bold text-blue-400">Varchas<span class="text-white">AI</span></span> |
|
|
<p class="text-gray-400 mt-2">Innovative Tech Solutions for the Digital Age</p> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0"> |
|
|
<a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a> |
|
|
<a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a> |
|
|
<a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a> |
|
|
<a href="#portfolio" class="text-gray-400 hover:text-white transition duration-300">Portfolio</a> |
|
|
<a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Varchas AI. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-blue-400 transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-blue-400 transition duration-300"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-blue-400 transition duration-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-blue-400 transition duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
function initThreeJS() { |
|
|
const container = document.getElementById('canvas-container'); |
|
|
|
|
|
|
|
|
const scene = new THREE.Scene(); |
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
container.appendChild(renderer.domElement); |
|
|
|
|
|
|
|
|
const ambientLight = new THREE.AmbientLight(0x404040); |
|
|
scene.add(ambientLight); |
|
|
|
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); |
|
|
directionalLight.position.set(1, 1, 1); |
|
|
scene.add(directionalLight); |
|
|
|
|
|
|
|
|
const geometry = new THREE.IcosahedronGeometry(1, 0); |
|
|
const material = new THREE.MeshPhongMaterial({ |
|
|
color: 0x3b82f6, |
|
|
emissive: 0x1e40af, |
|
|
emissiveIntensity: 0.2, |
|
|
shininess: 100, |
|
|
transparent: true, |
|
|
opacity: 0.8 |
|
|
}); |
|
|
|
|
|
const shapes = []; |
|
|
const count = 15; |
|
|
|
|
|
for (let i = 0; i < count; i++) { |
|
|
const shape = new THREE.Mesh(geometry, material.clone()); |
|
|
|
|
|
|
|
|
shape.position.x = Math.random() * 20 - 10; |
|
|
shape.position.y = Math.random() * 10 - 5; |
|
|
shape.position.z = Math.random() * 10 - 20; |
|
|
|
|
|
|
|
|
const size = Math.random() * 0.5 + 0.5; |
|
|
shape.scale.set(size, size, size); |
|
|
|
|
|
|
|
|
shape.rotation.x = Math.random() * Math.PI; |
|
|
shape.rotation.y = Math.random() * Math.PI; |
|
|
|
|
|
|
|
|
shape.userData = { |
|
|
speed: Math.random() * 0.02 + 0.01, |
|
|
rotationSpeed: Math.random() * 0.02 + 0.01 |
|
|
}; |
|
|
|
|
|
shapes.push(shape); |
|
|
scene.add(shape); |
|
|
} |
|
|
|
|
|
|
|
|
camera.position.z = 5; |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
}); |
|
|
|
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
|
|
|
shapes.forEach(shape => { |
|
|
shape.rotation.x += shape.userData.rotationSpeed * 0.5; |
|
|
shape.rotation.y += shape.userData.rotationSpeed; |
|
|
|
|
|
|
|
|
shape.position.y += Math.sin(Date.now() * shape.userData.speed * 0.001) * 0.01; |
|
|
}); |
|
|
|
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
|
|
|
animate(); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const scrollY = window.scrollY; |
|
|
camera.position.z = 5 + scrollY * 0.05; |
|
|
|
|
|
shapes.forEach(shape => { |
|
|
shape.position.x += (scrollY * 0.0005) * (shape.userData.speed * 50); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
initThreeJS(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const animateOnScroll = () => { |
|
|
const elements = document.querySelectorAll('.service-card, .tech-icon'); |
|
|
|
|
|
elements.forEach(element => { |
|
|
const elementPosition = element.getBoundingClientRect().top; |
|
|
const screenPosition = window.innerHeight / 1.3; |
|
|
|
|
|
if (elementPosition < screenPosition) { |
|
|
element.style.opacity = '1'; |
|
|
element.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.service-card, .tech-icon').forEach(el => { |
|
|
el.style.opacity = '0'; |
|
|
el.style.transform = 'translateY(20px)'; |
|
|
el.style.transition = 'all 0.5s ease'; |
|
|
}); |
|
|
|
|
|
window.addEventListener('scroll', animateOnScroll); |
|
|
animateOnScroll(); |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
