Spaces:
Running
Running
add one more card of name agentic ai solutions and add animations to all cards on hover - Follow Up Deployment
2e7669f
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Veldev - Future of Development</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <style> | |
| :root { | |
| --primary: #00ffff; | |
| --secondary: #ff00ff; | |
| --dark: #0a0a0a; | |
| --darker: #000000; | |
| } | |
| body { | |
| background: var(--darker); | |
| color: #ffffff; | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary); | |
| border: 1px solid var(--primary); | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.05); | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 2px; | |
| height: 2px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; } | |
| 50% { transform: translateY(-100px) rotate(180deg); opacity: 1; } | |
| } | |
| @keyframes float1 { | |
| 0% { transform: translate(-20%, -20%) rotate(0deg); } | |
| 100% { transform: translate(20%, 20%) rotate(360deg); } | |
| } | |
| @keyframes float2 { | |
| 0% { transform: translate(10%, 10%) rotate(0deg); } | |
| 100% { transform: translate(-10%, -10%) rotate(-360deg); } | |
| } | |
| .animate-float1 { | |
| animation: float1 30s linear infinite alternate; | |
| } | |
| .animate-float2 { | |
| animation: float2 40s linear infinite alternate; | |
| } | |
| .glow-button { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .glow-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: radial-gradient(circle, var(--primary), transparent); | |
| transition: all 0.5s ease; | |
| transform: translate(-50%, -50%); | |
| border-radius: 50%; | |
| } | |
| .glow-button:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .tech-grid { | |
| background-image: | |
| linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .scroll-reveal { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| } | |
| .scroll-reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| transition: all 0.8s ease; | |
| } | |
| .typing-text { | |
| border-right: 2px solid var(--primary); | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { border-color: var(--primary); } | |
| 51%, 100% { border-color: transparent; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full z-50 glass-card"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-2xl font-bold gradient-text">VELDEV</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="hover:text-cyan-400 transition-colors">Home</a> | |
| <a href="#about" class="hover:text-cyan-400 transition-colors">About</a> | |
| <a href="#services" class="hover:text-cyan-400 transition-colors">Services</a> | |
| <a href="#contact" class="hover:text-cyan-400 transition-colors">Contact</a> | |
| </div> | |
| <button class="md:hidden" onclick="toggleMenu()"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden"> | |
| <div class="flex justify-end p-6"> | |
| <button onclick="toggleMenu()"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="flex flex-col items-center space-y-8 text-2xl"> | |
| <a href="#home" onclick="toggleMenu()" class="hover:text-cyan-400">Home</a> | |
| <a href="#about" onclick="toggleMenu()" class="hover:text-cyan-400">About</a> | |
| <a href="#services" onclick="toggleMenu()" class="hover:text-cyan-400">Services</a> | |
| <a href="#contact" onclick="toggleMenu()" class="hover:text-cyan-400">Contact</a> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden"> | |
| <div class="absolute inset-0 tech-grid opacity-20"></div> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-transparent via-cyan-900/10 to-transparent animate-float1"></div> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-transparent via-purple-900/10 to-transparent animate-float2"></div> | |
| </div> | |
| <div class="container mx-auto px-6 text-center z-10"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-6"> | |
| <span class="gradient-text">VELOPING</span> THE FUTURE | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 text-gray-300"> | |
| <span id="typing-text" class="typing-text"></span> | |
| </p> | |
| <button class="glow-button px-8 py-4 text-lg font-semibold rounded-full border border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-black transition-all"> | |
| EXPLORE NOW | |
| </button> | |
| </div> | |
| <div id="particles"></div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="scroll-reveal"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 gradient-text">ABOUT US</h2> | |
| <p class="text-gray-300 text-lg leading-relaxed mb-4"> | |
| We are pioneers in cutting-edge technology solutions, crafting digital experiences that transcend the ordinary. Our expertise lies in creating immersive, futuristic applications that push the boundaries of what's possible. | |
| </p> | |
| <p class="text-gray-300 text-lg leading-relaxed"> | |
| From AI-powered systems to blockchain innovations, we're not just developing software – we're architecting the future of human-technology interaction. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="glass-card p-6 rounded-lg hover-scale"> | |
| <i class="fas fa-robot text-4xl gradient-text mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">AI Solutions</h3> | |
| <p class="text-gray-400">Next-gen AI implementations</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-lg hover-scale"> | |
| <i class="fas fa-cube text-4xl gradient-text mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">Blockchain</h3> | |
| <p class="text-gray-400">Decentralized applications</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-lg hover-scale"> | |
| <i class="fas fa-vr-cardboard text-4xl gradient-text mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">VR/AR</h3> | |
| <p class="text-gray-400">Immersive experiences</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-lg hover-scale"> | |
| <i class="fas fa-cloud text-4xl gradient-text mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">Cloud Native</h3> | |
| <p class="text-gray-400">Scalable cloud solutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tech Stack Section --> | |
| <section class="py-16 bg-gray-900/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 gradient-text">OUR TECH STACK</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6"> | |
| <div class="glass-card p-4 rounded-lg flex flex-col items-center hover-scale"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" class="w-16 h-16 mb-2" alt="React"/> | |
| <span class="text-sm">React</span> | |
| </div> | |
| <div class="glass-card p-4 rounded-lg flex flex-col items-center hover-scale"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" class="w-16 h-16 mb-2" alt="Node.js"/> | |
| <span class="text-sm">Node.js</span> | |
| </div> | |
| <div class="glass-card p-4 rounded-lg flex flex-col items-center hover-scale"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" class="w-16 h-16 mb-2" alt="Python"/> | |
| <span class="text-sm">Python</span> | |
| </div> | |
| <div class="glass-card p-4 rounded-lg flex flex-col items-center hover-scale"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-plain.svg" class="w-16 h-16 mb-2" alt="Rust"/> | |
| <span class="text-sm">Rust</span> | |
| </div> | |
| <div class="glass-card p-4 rounded-lg flex flex-col items-center hover-scale"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/solidity/solidity-original.svg" class="w-16 h-16 mb-2" alt="Solidity"/> | |
| <span class="text-sm">Solidity</span> | |
| </div> | |
| <div class="glass-card p-4 rounded-lg flex flex-col items-center hover-scale"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tensorflow/tensorflow-original.svg" class="w-16 h-16 mb-2" alt="TensorFlow"/> | |
| <span class="text-sm">TensorFlow</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-12 gradient-text">OUR SERVICES</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="glass-card p-8 rounded-lg scroll-reveal hover-scale"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-code text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Web Development</h3> | |
| <p class="text-gray-300 mb-4">Cutting-edge web applications with futuristic designs and lightning-fast performance.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li>• Progressive Web Apps</li> | |
| <li>• Microservices Architecture</li> | |
| <li>• Real-time Applications</li> | |
| </ul> | |
| </div> | |
| <div class="glass-card p-8 rounded-lg scroll-reveal hover-scale"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-mobile-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Mobile Development</h3> | |
| <p class="text-gray-300 mb-4">Cross-platform mobile solutions that deliver native performance and stunning UI.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li>• React Native</li> | |
| <li>• Flutter Development</li> | |
| <li>• IoT Integration</li> | |
| </ul> | |
| </div> | |
| <div class="glass-card p-8 rounded-lg scroll-reveal hover-scale"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">AI & Machine Learning</h3> | |
| <p class="text-gray-300 mb-4">Intelligent systems that learn, adapt, and evolve with your business needs.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li>• Predictive Analytics</li> | |
| <li>• Computer Vision</li> | |
| <li>• NLP Solutions</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-gray-900/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 gradient-text">WHAT OUR CLIENTS SAY</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="glass-card p-6 rounded-lg scroll-reveal hover-scale"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-cyan-400 to-purple-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">JD</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">John Doe</h4> | |
| <p class="text-sm text-gray-400">CEO, TechCorp</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300">"Veldev transformed our digital presence with their cutting-edge solutions. Their team delivered beyond our expectations."</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-lg scroll-reveal hover-scale"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-cyan-400 to-purple-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">AS</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Alice Smith</h4> | |
| <p class="text-sm text-gray-400">CTO, InnovateX</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300">"The AI solution they built for us has increased our operational efficiency by 40%. Highly recommended!"</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-lg scroll-reveal hover-scale"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-cyan-400 to-purple-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">RJ</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Robert Johnson</h4> | |
| <p class="text-sm text-gray-400">Founder, BlockChain Ltd</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300">"Their blockchain expertise helped us launch our product 3 months ahead of schedule. Exceptional work!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-12 gradient-text">GET IN TOUCH</h2> | |
| <div class="max-w-2xl mx-auto"> | |
| <form class="glass-card p-8 rounded-lg scroll-reveal" onsubmit="handleSubmit(event)"> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <input type="text" placeholder="Your Name" class="bg-transparent border-b border-gray-600 py-2 focus:border-cyan-400 outline-none transition-colors"> | |
| <input type="email" placeholder="Your Email" class="bg-transparent border-b border-gray-600 py-2 focus:border-cyan-400 outline-none transition-colors"> | |
| </div> | |
| <input type="text" placeholder="Subject" class="w-full bg-transparent border-b border-gray-600 py-2 mb-6 focus:border-cyan-400 outline-none transition-colors"> | |
| <textarea placeholder="Your Message" rows="5" class="w-full bg-transparent border-b border-gray-600 py-2 mb-6 focus:border-cyan-400 outline-none transition-colors resize-none"></textarea> | |
| <button type="submit" class="w-full py-3 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-lg font-semibold hover:shadow-lg hover:shadow-cyan-400/50 transition-all"> | |
| SEND MESSAGE | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 border-t border-gray-800"> | |
| <div class="container mx-auto px-6 mb-12"> | |
| <div class="glass-card p-8 rounded-lg max-w-4xl mx-auto"> | |
| <h3 class="text-2xl font-bold mb-4 gradient-text text-center">STAY UPDATED</h3> | |
| <p class="text-gray-300 text-center mb-6">Subscribe to our newsletter for the latest tech insights and updates</p> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input type="email" placeholder="Your Email" class="flex-grow bg-transparent border-b border-gray-600 py-2 focus:border-cyan-400 outline-none transition-colors"> | |
| <button class="px-6 py-2 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-lg font-semibold hover:shadow-lg hover:shadow-cyan-400/50 transition-all"> | |
| SUBSCRIBE | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-2xl font-bold gradient-text mb-4 md:mb-0">VELDEV</div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8 text-gray-400"> | |
| <p>© 2024 Veldev. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // GSAP Animations | |
| gsap.registerPlugin(); | |
| // Typing Animation | |
| const typingText = document.getElementById('typing-text'); | |
| const textArray = ['Next-gen Development Solutions', 'AI-Powered Applications', 'Blockchain Innovations', 'Future-Ready Technology']; | |
| let textIndex = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| function typeText() { | |
| const currentText = textArray[textIndex]; | |
| if (isDeleting) { | |
| typingText.textContent = currentText.substring(0, charIndex - 1); | |
| charIndex--; | |
| } else { | |
| typingText.textContent = currentText.substring(0, charIndex + 1); | |
| charIndex++; | |
| } | |
| if (!isDeleting && charIndex === currentText.length) { | |
| setTimeout(() => isDeleting = true, 2000); | |
| } else if (isDeleting && charIndex === 0) { | |
| isDeleting = false; | |
| textIndex = (textIndex + 1) % textArray.length; | |
| } | |
| setTimeout(typeText, isDeleting ? 50 : 100); | |
| } | |
| // Particle System | |
| function createParticles() { | |
| const particlesContainer = document.getElementById('particles'); | |
| for (let i = 0; i < 50; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.animationDelay = Math.random() * 6 + 's'; | |
| particle.style.animationDuration = (Math.random() * 3 + 3) + 's'; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| // Scroll Reveal | |
| function revealOnScroll() { | |
| const reveals = document.querySelectorAll('.scroll-reveal'); | |
| reveals.forEach(element => { | |
| const windowHeight = window.innerHeight; | |
| const elementTop = element.getBoundingClientRect().top; | |
| const elementVisible = 150; | |
| if (elementTop < windowHeight - elementVisible) { | |
| element.classList.add('active'); | |
| } | |
| }); | |
| } | |
| // Smooth Scroll | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }); | |
| }); | |
| // Mobile Menu Toggle | |
| function toggleMenu() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| // Form Submission | |
| function handleSubmit(event) { | |
| event.preventDefault(); | |
| alert('Thank you for your message! We will get back to you soon.'); | |
| event.target.reset(); | |
| } | |
| // Initialize | |
| window.addEventListener('scroll', revealOnScroll); | |
| window.addEventListener('load', () => { | |
| createParticles(); | |
| revealOnScroll(); | |
| typeText(); | |
| }); | |
| // GSAP Hero Animation | |
| gsap.from("h1", { duration: 1.5, y: 50, opacity: 0, ease: "power3.out" }); | |
| gsap.from("p", { duration: 1.5, y: 30, opacity: 0, delay: 0.5, ease: "power3.out" }); | |
| gsap.from("button", { duration: 1.5, y: 30, opacity: 0, delay: 1, ease: "power3.out" }); | |
| </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=huzaifa113/rankinggeeks" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |