Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vortex Labs - Innovation Unleashed</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%236366f1'/%3E%3Cpath d='M50 20 L60 40 L80 40 L65 55 L70 75 L50 60 L30 75 L35 55 L20 40 L40 40 Z' fill='white'/%3E%3C/svg%3E"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#ec4899', | |
| accent: '#10b981' | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'float-slow': 'float 10s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'spin-slow': 'spin 8s linear infinite', | |
| 'bounce-slow': 'bounce 4s infinite', | |
| 'gradient': 'gradient 8s ease infinite', | |
| 'marquee': 'marquee 20s linear infinite', | |
| 'marquee-reverse': 'marquee 20s linear infinite reverse', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-950 text-white overflow-x-hidden"> | |
| <!-- Animated Background --> | |
| <div class="fixed inset-0 -z-10 opacity-20"> | |
| <div class="absolute top-0 left-0 w-96 h-96 bg-primary rounded-full blur-3xl animate-float"></div> | |
| <div class="absolute bottom-0 right-0 w-96 h-96 bg-secondary rounded-full blur-3xl animate-float-slow"></div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent rounded-full blur-3xl animate-pulse-slow"></div> | |
| </div> | |
| <!-- Loading Screen --> | |
| <div id="loader" class="fixed inset-0 bg-gray-950 z-50 flex items-center justify-center transition-opacity duration-500"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin"></div> | |
| <div class="absolute inset-0 w-16 h-16 border-4 border-secondary border-t-transparent rounded-full animate-spin-slow"></div> | |
| </div> | |
| </div> | |
| <!-- Cursor Follower --> | |
| <div id="cursor" class="fixed w-6 h-6 bg-primary rounded-full pointer-events-none z-50 transition-transform duration-100 mix-blend-difference"></div> | |
| <!-- Navigation --> | |
| <vortex-navbar></vortex-navbar> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center px-4 relative"> | |
| <div class="absolute inset-0 bg-grid-pattern opacity-5"></div> | |
| <div class="text-center max-w-5xl mx-auto pt-20"> | |
| <div class="mb-6 opacity-0 animate-fade-in" style="animation-delay: 0.2s;"> | |
| <span class="inline-block px-4 py-2 bg-primary/10 border border-primary/30 rounded-full text-primary text-sm font-medium backdrop-blur-sm animate-pulse"> | |
| <i data-feather="zap" class="inline w-4 h-4 mr-2"></i> | |
| Innovating Tomorrow, Today | |
| </span> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 opacity-0 animate-fade-in-up" style="animation-delay: 0.4s;"> | |
| We Craft | |
| <span class="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent animate-gradient"> | |
| Digital Vortexes | |
| </span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto opacity-0 animate-fade-in-up" style="animation-delay: 0.6s;"> | |
| Transforming ideas into immersive experiences through cutting-edge technology and bold design. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center opacity-0 animate-fade-in" style="animation-delay: 0.8s;"> | |
| <a href="about.html" class="vortex-btn-primary"> | |
| <span>Explore Our Universe</span> | |
| <i data-feather="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i> | |
| </a> | |
| <a href="contact.html" class="vortex-btn-secondary"> | |
| <i data-feather="message-circle" class="w-5 h-5"></i> | |
| <span>Start a Project</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Scroll Indicator --> | |
| <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce-slow"> | |
| <div class="w-6 h-10 border-2 border-gray-400 rounded-full flex justify-center"> | |
| <div class="w-1 h-3 bg-gray-400 rounded-full mt-2 animate-pulse"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Marquee --> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |