Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vawick | Enterprise Quantum Platform</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#FF4600', | |
| dark: '#000000', | |
| light: '#EDEDED', | |
| accent: '#0F0F10', | |
| border: '#1E1E20' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-bg { | |
| background: radial-gradient(ellipse at center, rgba(255,70,0,0.1) 0%, rgba(0,0,0,1) 70%); | |
| } | |
| .highlight-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px -5px rgba(255,70,0,0.1), 0 10px 10px -5px rgba(255,70,0,0.04); | |
| } | |
| .industry-tile:hover { | |
| border-color: #FF4600; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-light font-sans antialiased"> | |
| <!-- Hero Section --> | |
| <section id="hero" class="hero-bg relative overflow-hidden"> | |
| <div id="vanta-globe" class="absolute inset-0 z-0"></div> | |
| <div class="container mx-auto px-6 py-24 md:py-32 relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <span class="text-primary font-medium tracking-wider">ENTERPRISE QUANTUM PLATFORM</span> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mt-4">Solve real-world business problems with quantum.</h1> | |
| <p class="text-xl mt-6 opacity-90 max-w-2xl">An enterprise-ready platform to build, simulate, and scale quantum solutions faster—without low-level coding.</p> | |
| <ul class="mt-8 space-y-3"> | |
| <li class="flex items-center"><i data-feather="check" class="text-primary mr-3"></i> <span>Cloud-based quantum access</span></li> | |
| <li class="flex items-center"><i data-feather="check" class="text-primary mr-3"></i> <span>Automated circuit synthesis</span></li> | |
| <li class="flex items-center"><i data-feather="check" class="text-primary mr-3"></i> <span>Scalability for the future</span></li> | |
| <li class="flex items-center"><i data-feather="check" class="text-primary mr-3"></i> <span>Multi-hardware compatibility</span></li> | |
| </ul> | |
| <a href="#contact" class="mt-10 inline-block bg-primary hover:bg-opacity-90 text-white font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105"> | |
| LET'S TALK | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="http://static.photos/technology/1200x630/42" alt="Quantum IDE" class="rounded-xl shadow-2xl border border-opacity-20 border-accent max-w-md"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Logo Strip --> | |
| <section class="py-16 bg-opacity-50 bg-accent"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center"> | |
| <h3 class="text-sm uppercase tracking-wider text-primary mb-2">INNOVATING WITH THE BEST IN THE WORLD</h3> | |
| <p class="text-lg text-opacity-80 max-w-3xl mx-auto">Top tech, automotive, finance, aerospace, IT, and research companies trust us to accelerate their quantum breakthroughs.</p> | |
| </div> | |
| <div class="mt-12 flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <div class="text-2xl font-bold opacity-70">Intesa Sanpaolo</div> | |
| <div class="text-2xl font-bold opacity-70">Sequoia</div> | |
| <div class="text-2xl font-bold opacity-70">NTT</div> | |
| <div class="text-2xl font-bold opacity-70">Rolls-Royce</div> | |
| <div class="text-2xl font-bold opacity-70">KPMG</div> | |
| <div class="text-2xl font-bold opacity-70">Fraunhofer</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Feature Highlights --> | |
| <section class="py-24"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Lead business innovation and quantum initiatives</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="highlight-card bg-accent rounded-xl p-8 border border-border transition duration-300"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i data-feather="dollar-sign" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Unlock business value</h3> | |
| <p class="opacity-80">Use cases like risk modeling, optimization, and simulation.</p> | |
| </div> | |
| <div class="highlight-card bg-accent rounded-xl p-8 border border-border transition duration-300"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i data-feather="users" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Reduce reliance on scarce quantum talent</h3> | |
| <p class="opacity-80">High-level modeling and automation.</p> | |
| </div> | |
| <div class="highlight-card bg-accent rounded-xl p-8 border border-border transition duration-300"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Go from pilot to production fast</h3> | |
| <p class="opacity-80">Cloud-native, hardware-agnostic deployment.</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#contact" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white font-bold py-3 px-8 rounded-lg transition duration-300"> | |
| LET'S TALK | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Industry Grid --> | |
| <section class="py-24 bg-accent bg-opacity-30"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Business outcomes, not just quantum circuits</h2> | |
| <p class="text-lg opacity-80 max-w-3xl mx-auto">Quantum computing applications across industries delivering measurable impact</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="industry-tile bg-dark rounded-lg p-6 border border-border transition duration-300"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> | |
| <i data-feather="bar-chart-2" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Finance</h3> | |
| <p class="text-sm opacity-80">Quantum-accelerated risk modeling, fraud detection, and Monte Carlo simulations.</p> | |
| </div> | |
| <div class="industry-tile bg-dark rounded-lg p-6 border border-border transition duration-300"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> | |
| <i data-feather="flask" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Chem & Pharma</h3> | |
| <p class="text-sm opacity-80">Faster drug discovery, molecular modeling, and chemical simulations.</p> | |
| </div> | |
| <div class="industry-tile bg-dark rounded-lg p-6 border border-border transition duration-300"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> | |
| <i data-feather="cpu" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Manufacturing</h3> | |
| <p class="text-sm opacity-80">Optimize supply chains, workflows, and material discovery.</p> | |
| </div> | |
| <div class="industry-tile bg-dark rounded-lg p-6 border border-border transition duration-300"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> | |
| <i data-feather="truck" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Automotive</h3> | |
| <p class="text-sm opacity-80">Battery tech, autonomous algorithms, and design simulations.</p> | |
| </div> | |
| <div class="industry-tile bg-dark rounded-lg p-6 border border-border transition duration-300"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> | |
| <i data-feather="heart" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Healthcare</h3> | |
| <p class="text-sm opacity-80">Medical research, precision medicine, and genomics analysis.</p> | |
| </div> | |
| <div class="industry-tile bg-dark rounded-lg p-6 border border-border transition duration-300"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> | |
| <i data-feather="map-pin" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Logistics</h3> | |
| <p class="text-sm opacity-80">Route optimization, fleet management, and real-time tracking.</p> | |
| </div> | |
| <div class="industry-tile bg-dark rounded-lg p-6 border border-border transition duration-300"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> | |
| <i data-feather="shield" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Cybersecurity</h3> | |
| <p class="text-sm opacity-80">Anomaly detection, patch management, and network optimization.</p> | |
| </div> | |
| <div class="industry-tile bg-dark rounded-lg p-6 border border-border transition duration-300"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mb-4"> | |
| <i data-feather="wind" class="text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Aerospace</h3> | |
| <p class="text-sm opacity-80">System simulations, radar improvements, and materials development.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Audience Split --> | |
| <section class="py-24"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">From exploration to execution</h2> | |
| <p class="text-lg opacity-80 max-w-3xl mx-auto">Whether you're beginning or scaling a program, make confident, strategic progress.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div class="bg-accent rounded-xl p-8 border border-border"> | |
| <h3 class="text-xl font-bold mb-4 text-primary">For Innovation & Strategy Leaders</h3> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"><i data-feather="check" class="text-primary mr-3 mt-1"></i> <span>De-risk early investments with quick experimentation</span></li> | |
| <li class="flex items-start"><i data-feather="check" class="text-primary mr-3 mt-1"></i> <span>Align initiatives with core business KPIs</span></li> | |
| <li class="flex items-start"><i data-feather="check" class="text-primary mr-3 mt-1"></i> <span>Make the case for long-term ROI</span></li> | |
| </ul> | |
| <a href="#learn" class="inline-block border border-primary bg-primary bg-opacity-10 text-primary hover:bg-primary hover:text-white font-medium py-2 px-6 rounded-lg transition duration-300"> | |
| START LEARNING | |
| </a> | |
| </div> | |
| <div class="bg-accent rounded-xl p-8 border border-border"> | |
| <h3 class="text-xl font-bold mb-4 text-primary">For Technical Teams</h3> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"><i data-feather="check" class="text-primary mr-3 mt-1"></i> <span>Automate quantum circuit design</span></li> | |
| <li class="flex items-start"><i data-feather="check" class="text-primary mr-3 mt-1"></i> <span>Run apps on major quantum hardware via the cloud</span></li> | |
| <li class="flex items-start"><i data-feather="check" class="text-primary mr-3 mt-1"></i> <span>Eliminate gate-level complexity and accelerate development</span></li> | |
| </ul> | |
| <a href="#demo" class="inline-block border border-primary bg-primary bg-opacity-10 text-primary hover:bg-primary hover:text-white font-medium py-2 px-6 rounded-lg transition duration-300"> | |
| REQUEST A DEMO | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reasons Timeline --> | |
| <section class="py-24 bg-accent bg-opacity-30"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Why cloud quantum computing with us?</h2> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative"> | |
| <div class="absolute left-6 top-0 h-full w-0.5 bg-primary bg-opacity-30"></div> | |
| <div class="space-y-12"> | |
| <div class="relative pl-20"> | |
| <div class="absolute left-6 -ml-0.5 w-4 h-4 rounded-full bg-primary mt-2"></div> | |
| <h3 class="text-xl font-bold mb-3">No hardware, no bottlenecks</h3> | |
| <p class="opacity-80">Access the latest quantum processors without expensive infrastructure upgrades.</p> | |
| </div> | |
| <div class="relative pl-20"> | |
| <div class="absolute left-6 -ml-0.5 w-4 h-4 rounded-full bg-primary mt-2"></div> | |
| <h3 class="text-xl font-bold mb-3">Seamless hardware-agnostic development</h3> | |
| <p class="opacity-80">Design once and deploy across multiple QPU providers.</p> | |
| </div> | |
| <div class="relative pl-20"> | |
| <div class="absolute left-6 -ml-0.5 w-4 h-4 rounded-full bg-primary mt-2"></div> | |
| <h3 class="text-xl font-bold mb-3">Automate the hardest parts of quantum development</h3> | |
| <p class="opacity-80">Skip manual gate-level coding—our automation engine transforms functional models into optimized circuits.</p> | |
| </div> | |
| <div class="relative pl-20"> | |
| <div class="absolute left-6 -ml-0.5 w-4 h-4 rounded-full bg-primary mt-2"></div> | |
| <h3 class="text-xl font-bold mb-3">Faster time-to-value</h3> | |
| <p class="opacity-80">Eliminate setup and low-level programming so teams focus on real-world applications.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Footer --> | |
| <section id="contact" class="py-24 bg-dark bg-opacity-95 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-cover bg-center opacity-10" style="background-image: url('http://static.photos/abstract/1200x630/7');"></div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <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">LET'S BUILD YOUR QUANTUM FUTURE</h2> | |
| <p class="text-lg opacity-80 mb-8">Quantum computing is now a strategic enabler for the next wave of innovation. Our team is ready to explore how we can support your next quantum leap.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i data-feather="mail" class="text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Email us</h4> | |
| <p class="opacity-80">contact@vawick.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i data-feather="phone" class="text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Call us</h4> | |
| <p class="opacity-80">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-accent rounded-xl p-8 border border-border"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="firstName" class="block mb-2 font-medium">First name*</label> | |
| <input type="text" id="firstName" required class="w-full bg-dark border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="lastName" class="block mb-2 font-medium">Last name*</label> | |
| <input type="text" id="lastName" required class="w-full bg-dark border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 font-medium">Email*</label> | |
| <input type="email" id="email" required class="w-full bg-dark border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block mb-2 font-medium">Phone number</label> | |
| <input type="tel" id="phone" class="w-full bg-dark border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="company" class="block mb-2 font-medium">Company name</label> | |
| <input type="text" id="company" class="w-full bg-dark border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="country" class="block mb-2 font-medium">Country/Region*</label> | |
| <input type="text" id="country" required class="w-full bg-dark border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="message" class="block mb-2 font-medium">Message</label> | |
| <textarea id="message" rows="4" class="w-full bg-dark border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <button type="submit" class="w-full bg-primary hover:bg-opacity-90 text-white font-bold py-4 px-8 rounded-lg transition duration-300"> | |
| SUBMIT | |
| </button> | |
| </div> | |
| <div class="md:col-span-2 text-sm opacity-70"> | |
| By submitting this form, you agree to our <a href="/privacy" class="text-primary hover:underline">Privacy Policy</a> and <a href="/terms" class="text-primary hover:underline">User Terms</a>. | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="mt-16 pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <span class="text-2xl font-bold">Vawick</span> | |
| <span class="opacity-70 ml-2">© 2025</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="opacity-70 hover:opacity-100 transition duration-300"><i data-feather="twitter"></i></a> | |
| <a href="#" class="opacity-70 hover:opacity-100 transition duration-300"><i data-feather="linkedin"></i></a> | |
| <a href="#" class="opacity-70 hover:opacity-100 transition duration-300"><i data-feather="github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Initialize Vanta.js globe | |
| VANTA.GLOBE({ | |
| el: "#vanta-globe", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xFF4600, | |
| backgroundColor: 0x0, | |
| size: 0.8 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |