Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Qdrant Vision Quest - AI Image Search</title> | |
| <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> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .search-input { | |
| transition: all 0.3s ease; | |
| } | |
| .search-input:focus { | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="search" class="h-8 w-8 text-indigo-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">Qdrant Vision Quest</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Search</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Models</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">API</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i data-feather="menu" class="block h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Discover Images with AI Power | |
| </h1> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl text-indigo-100"> | |
| Qdrant Vision Quest harnesses cutting-edge machine learning to help you find and organize visual content like never before. | |
| </p> | |
| <div class="mt-10 flex justify-center"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| Try Demo | |
| </a> | |
| </div> | |
| <div class="ml-3 rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| A better way to search images | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Leverage state-of-the-art visual search technology powered by Qdrant vector database. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition duration-300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i data-feather="search"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Semantic Search</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Find images based on meaning, not just keywords. Our AI understands context. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition duration-300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i data-feather="upload"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Image Indexing</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Easily add your own images to the database with customizable metadata. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition duration-300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white"> | |
| <i data-feather="cpu"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Multiple Models</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Choose from different AI models to optimize for speed or accuracy. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Search Section --> | |
| <div class="py-12 bg-gray-50"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Try it out | |
| </h2> | |
| <p class="mt-4 text-lg text-gray-500"> | |
| Experience the power of visual search with our interactive demo. | |
| </p> | |
| </div> | |
| <div class="mt-10 bg-white shadow rounded-lg p-6"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="search" class="h-5 w-5 text-gray-400"></i> | |
| </div> | |
| <input id="search" name="search" class="search-input block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Search for images..." type="search"> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3"> | |
| <div class="relative"> | |
| <div class="aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/nature/320x240/1" alt="Nature" class="w-full h-full object-cover"> | |
| </div> | |
| <button class="absolute top-2 right-2 bg-white p-1 rounded-full shadow-sm text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i data-feather="heart" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <div class="aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/cityscape/320x240/2" alt="City" class="w-full h-full object-cover"> | |
| </div> | |
| <button class="absolute top-2 right-2 bg-white p-1 rounded-full shadow-sm text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i data-feather="heart" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <div class="aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/food/320x240/3" alt="Food" class="w-full h-full object-cover"> | |
| </div> | |
| <button class="absolute top-2 right-2 bg-white p-1 rounded-full shadow-sm text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i data-feather="heart" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Load More Results | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-indigo-700"> | |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Ready to dive in?</span> | |
| <span class="block">Start your visual search journey today.</span> | |
| </h2> | |
| <p class="mt-4 text-lg leading-6 text-indigo-200"> | |
| Integrate our API or use our hosted solution to power your applications. | |
| </p> | |
| <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"> | |
| Sign up for free | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-4"> | |
| <div class="space-y-4"> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Product</h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Features </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Pricing </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> API </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Integrations </a> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Documentation </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Guides </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Blog </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Support </a> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> About </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Careers </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Privacy </a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> Terms </a> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="github" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="mail" class="h-6 w-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex justify-between"> | |
| <p class="text-base text-gray-400"> | |
| © 2023 Qdrant Vision Quest. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <span class="sr-only">Privacy Policy</span> | |
| Privacy | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <span class="sr-only">Terms of Service</span> | |
| Terms | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Simple animation for the features on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const featureCards = document.querySelectorAll('.card-hover'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| featureCards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`; | |
| observer.observe(card); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |