Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SkyLens - Premium Drone Photography</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-image { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 80vh; | |
| } | |
| .gallery-item { | |
| transition: all 0.3s ease; | |
| } | |
| .gallery-item:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .category-btn.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <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 class="fas fa-drone-alt text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">SkyLens</span> | |
| </div> | |
| <div class="hidden md:ml-10 md:flex md:space-x-8"> | |
| <a href="#" class="text-blue-600 border-blue-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#gallery" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Gallery</a> | |
| <a href="#pricing" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Pricing</a> | |
| <a href="#about" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">About</a> | |
| <a href="#contact" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Cart (0) | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center md: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-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="#gallery" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Gallery</a> | |
| <a href="#pricing" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Pricing</a> | |
| <a href="#about" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a> | |
| <a href="#contact" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a> | |
| <div class="pt-4 pb-3 border-t border-gray-200"> | |
| <div class="flex items-center px-5"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium w-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Cart (0) | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="hero-image flex items-center justify-center"> | |
| <div class="text-center px-4"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Elevate Your Projects With Stunning Aerial Imagery</h1> | |
| <p class="text-xl text-white mb-8 max-w-3xl mx-auto">Premium quality drone photography for commercial and personal use. High-resolution, royalty-free digital downloads.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#gallery" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| Browse Gallery | |
| </a> | |
| <a href="#pricing" class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| View Pricing | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Categories --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Explore Our Collections</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Carefully curated categories to suit all your aerial photography needs</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2">Cityscapes</h3> | |
| <p class="text-gray-600">Urban landscapes from breathtaking heights</p> | |
| <a href="#" class="text-blue-500 hover:text-blue-700 font-medium inline-flex items-center mt-3"> | |
| View Collection | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1330&q=80');"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2">Nature</h3> | |
| <p class="text-gray-600">Stunning natural landscapes from above</p> | |
| <a href="#" class="text-blue-500 hover:text-blue-700 font-medium inline-flex items-center mt-3"> | |
| View Collection | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1509316785289-025f5b8b4b1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1376&q=80');"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2">Beaches</h3> | |
| <p class="text-gray-600">Coastal beauty from a unique perspective</p> | |
| <a href="#" class="text-blue-500 hover:text-blue-700 font-medium inline-flex items-center mt-3"> | |
| View Collection | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2">Architecture</h3> | |
| <p class="text-gray-600">Iconic buildings from dramatic angles</p> | |
| <a href="#" class="text-blue-500 hover:text-blue-700 font-medium inline-flex items-center mt-3"> | |
| View Collection | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Section --> | |
| <div id="gallery" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Premium Drone Photography</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">High-resolution images perfect for websites, marketing, and print</p> | |
| </div> | |
| <!-- Category Filters --> | |
| <div class="flex flex-wrap justify-center gap-2 mb-8"> | |
| <button class="category-btn active px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="all">All</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="landscape">Landscape</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="urban">Urban</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="nature">Nature</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="beach">Beach</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="architecture">Architecture</button> | |
| </div> | |
| <!-- Gallery Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Image 1 --> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="landscape"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Mountain Valley</h3> | |
| <p class="text-gray-600">Landscape</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">New</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xl font-bold text-gray-900">$29.99</span> | |
| <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image 2 --> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="urban"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">City Skyline</h3> | |
| <p class="text-gray-600">Urban</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Popular</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xl font-bold text-gray-900">$39.99</span> | |
| <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image 3 --> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="nature"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1330&q=80');"></div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Forest River</h3> | |
| <p class="text-gray-600">Nature</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xl font-bold text-gray-900">$24.99</span> | |
| <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image 4 --> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="beach"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1509316785289-025f5b8b4b1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1376&q=80');"></div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Tropical Beach</h3> | |
| <p class="text-gray-600">Beach</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xl font-bold text-gray-900">$34.99</span> | |
| <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image 5 --> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="architecture"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Modern Museum</h3> | |
| <p class="text-gray-600">Architecture</p> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Best Seller</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xl font-bold text-gray-900">$49.99</span> | |
| <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image 6 --> | |
| <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="landscape"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Sunset Lakes</h3> | |
| <p class="text-gray-600">Landscape</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xl font-bold text-gray-900">$29.99</span> | |
| <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="load-more bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"> | |
| Load More Photos | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pricing Section --> | |
| <div id="pricing" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Simple, Transparent Pricing</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Choose the perfect license for your needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Standard License --> | |
| <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden transform transition hover:scale-105"> | |
| <div class="px-6 py-8"> | |
| <div class="flex items-center justify-center"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-4 py-1 rounded-full">MOST POPULAR</span> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center mt-4">Standard License</h3> | |
| <div class="mt-6 text-center"> | |
| <span class="text-4xl font-bold text-gray-900">$29</span> | |
| <span class="text-gray-600">/image</span> | |
| </div> | |
| <ul class="mt-8 space-y-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Digital use (websites, social media)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Print up to 500 copies</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Single user license</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited impressions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 pb-8"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg"> | |
| Get Standard License | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Extended License --> | |
| <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden transform transition hover:scale-105"> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-2xl font-bold text-center">Extended License</h3> | |
| <div class="mt-6 text-center"> | |
| <span class="text-4xl font-bold text-gray-900">$99</span> | |
| <span class="text-gray-600">/image</span> | |
| </div> | |
| <ul class="mt-8 space-y-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>All Standard License features</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited print runs</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Multi-user license</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Use in merchandise for resale</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Use in templates/themes</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 pb-8"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg"> | |
| Get Extended License | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Custom License --> | |
| <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden transform transition hover:scale-105"> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-2xl font-bold text-center">Custom License</h3> | |
| <div class="mt-6 text-center"> | |
| <span class="text-4xl font-bold text-gray-900">Custom</span> | |
| </div> | |
| <ul class="mt-8 space-y-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Tailored to your specific needs</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Bulk discounts available</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Exclusive rights available</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Enterprise solutions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-6 pb-8"> | |
| <button class="w-full bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg"> | |
| Contact Us | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-blue-50 rounded-lg p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">License FAQ</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-900">What's the difference between Standard and Extended licenses?</h4> | |
| <p class="text-gray-600 mt-1">The Standard License is perfect for most digital and limited print uses, while the Extended License allows for merchandise, templates, and unlimited print runs.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-900">Do you offer discounts for bulk purchases?</h4> | |
| <p class="text-gray-600 mt-1">Yes! Contact us for custom pricing when purchasing multiple images. Discounts start at 5+ images.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-900">Can I upgrade my license later?</h4> | |
| <p class="text-gray-600 mt-1">Absolutely. You can upgrade from Standard to Extended at any time by paying the difference.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- About Section --> | |
| <div id="about" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-8 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">About SkyLens</h2> | |
| <p class="mt-4 text-lg text-gray-500"> | |
| SkyLens was founded in 2018 by professional drone pilots with a passion for aerial photography. | |
| We combine technical expertise with artistic vision to capture stunning perspectives from above. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3"> | |
| <i class="fas fa-camera text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Professional Equipment</h3> | |
| <p class="mt-1 text-gray-600"> | |
| We use only the highest quality drones and cameras, including DJI Inspire 2 with Zenmuse X7 cameras. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3"> | |
| <i class="fas fa-certificate text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Certified Pilots</h3> | |
| <p class="mt-1 text-gray-600"> | |
| All our pilots are FAA Part 107 certified with extensive safety training and flight experience. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3"> | |
| <i class="fas fa-edit text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Post-Processing</h3> | |
| <p class="mt-1 text-gray-600"> | |
| Every image is professionally edited to ensure perfect color, contrast, and clarity. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative rounded-lg shadow-lg overflow-hidden"> | |
| <img class="w-full h-auto" src="https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Drone pilot"> | |
| <div class="absolute inset-0 bg-blue-600 opacity-20"></div> | |
| </div> | |
| <div class="mt-6 relative rounded-lg shadow-lg overflow-hidden"> | |
| <img class="w-full h-auto" src="https://images.unsplash.com/photo-1517032222721-2c967968927e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Drone in action"> | |
| <div class="absolute inset-0 bg-blue-600 opacity-20"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">What Our Customers Say</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Don't just take our word for it</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Sarah Johnson</h3> | |
| <p class="text-gray-600">Marketing Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "The drone photos from SkyLens transformed our travel agency's website. The quality is exceptional and our bookings have increased by 30% since we started using their images." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Michael Chen</h3> | |
| <p class="text-gray-600">Creative Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "As a designer, I'm always looking for unique imagery. SkyLens provides perspectives I can't get anywhere else. Their extended license gives me the flexibility I need for client projects." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Emily Rodriguez</h3> | |
| <p class="text-gray-600">Publisher</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "We've licensed dozens of images from SkyLens for our travel magazines. The quality is consistently excellent and their customer service is top-notch. Highly recommended!" | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Section --> | |
| <div id="contact" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8"> | |
| <div class="mb-8 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Get In Touch</h2> | |
| <p class="mt-4 text-lg text-gray-500"> | |
| Have questions about licensing or need custom drone photography? Fill out the form and we'll get back to you within 24 hours. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3"> | |
| <i class="fas fa-envelope text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Email</h3> | |
| <p class="mt-1 text-gray-600"> | |
| contact@skylens.com | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3"> | |
| <i class="fas fa-phone-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Phone</h3> | |
| <p class="mt-1 text-gray-600"> | |
| (555) 123-4567 | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3"> | |
| <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Office</h3> | |
| <p class="mt-1 text-gray-600"> | |
| 123 Drone Street, Aerial City, AC 12345 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium text-gray-900">Follow Us</h3> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"> | |
| <i class="fab fa-instagram text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"> | |
| <i class="fab fa-facebook text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"> | |
| <i class="fab fa-pinterest text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="bg-white shadow-md rounded-lg p-6"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name</label> | |
| <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-blue-500" placeholder="Your name"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label> | |
| <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-blue-500" placeholder="Your email"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="subject" class="block text-gray-700 text-sm font-bold mb-2">Subject</label> | |
| <select id="subject" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-blue-500"> | |
| <option>General Inquiry</option> | |
| <option>Custom Photography Request</option> | |
| <option>Bulk Purchase</option> | |
| <option>License Questions</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 text-sm font-bold mb-2">Message</label> | |
| <textarea id="message" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-blue-500" placeholder="Your message"></textarea> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline w-full transition duration-300 transform hover:scale-105" type="button"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="bg-blue-600 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> | |
| <div class="mb-8 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl">Join Our Newsletter</h2> | |
| <p class="mt-4 text-lg text-blue-100"> | |
| Get exclusive discounts, new photo releases, and aerial photography tips delivered to your inbox. | |
| </p> | |
| </div> | |
| <div> | |
| <form class="sm:flex"> | |
| <label for="email-address" class="sr-only">Email address</label> | |
| <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-transparent placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white focus:border-white sm:max-w-xs rounded-md" placeholder="Enter your email"> | |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0"> | |
| <button type="submit" class="w-full bg-white border border-transparent rounded-md py-3 px-5 flex items-center justify-center text-base font-medium text-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </form> | |
| <p class="mt-3 text-sm text-blue-100"> | |
| We respect your privacy. Unsubscribe at any time. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Shop</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">All Photos</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">New Releases</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Best Sellers</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Collections</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Our Team</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">License Information</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white"> | |
| <i class="fab fa-pinterest text-xl"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-gray-300">Download our app</p> | |
| <div class="flex space-x-2 mt-2"> | |
| <a href="#" class="inline-block"> | |
| <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/320px-Download_on_the_App_Store_Badge.svg.png" alt="App Store"> | |
| </a> | |
| <a href="#" class="inline-block"> | |
| <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/320px-Google_Play_Store_badge_EN.svg.png" alt="Google Play"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 SkyLens Drone Photography. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Facebook</span> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Instagram</span> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Twitter</span> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Pinterest</span> | |
| <i class="fab fa-pinterest"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Shopping Cart Modal --> | |
| <div class="fixed inset-0 overflow-hidden z-50 hidden" id="cart-modal"> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" id="cart-modal-backdrop"></div> | |
| <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex"> | |
| <div class="w-screen max-w-md"> | |
| <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll"> | |
| <div class="flex-1 py-6 overflow-y-auto px-4 sm:px-6"> | |
| <div class="flex items-start justify-between"> | |
| <h2 class="text-lg font-medium text-gray-900">Shopping cart</h2> | |
| <div class="ml-3 h-7 flex items-center"> | |
| <button type="button" class="-m-2 p-2 text-gray-400 hover:text-gray-500" id="close-cart"> | |
| <span class="sr-only">Close panel</span> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <div class="flow-root"> | |
| <ul class="-my-6 divide-y divide-gray-200" id="cart-items"> | |
| <!-- Cart items will be added here dynamically --> | |
| <li class="py-6 flex"> | |
| <div class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="City Skyline" class="w-full h-full object-center object-cover"> | |
| </div> | |
| <div class="ml-4 flex-1 flex flex-col"> | |
| <div> | |
| <div class="flex justify-between text-base font-medium text-gray-900"> | |
| <h3>City Skyline</h3> | |
| <p class="ml-4">$39.99</p> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Urban</p> | |
| </div> | |
| <div class="flex-1 flex items-end justify-between text-sm"> | |
| <p class="text-gray-500">Standard License</p> | |
| <div class="flex"> | |
| <button type="button" class="font-medium text-blue-600 hover:text-blue-500">Remove</button> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 py-6 px-4 sm:px-6"> | |
| <div class="flex justify-between text-base font-medium text-gray-900"> | |
| <p>Subtotal</p> | |
| <p id="cart-total">$39.99</p> | |
| </div> | |
| <p class="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p> | |
| <div class="mt-6"> | |
| <a href="#" class="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"> | |
| Checkout | |
| </a> | |
| </div> | |
| <div class="mt-6 flex justify-center text-sm text-center text-gray-500"> | |
| <p> | |
| or | |
| <button type="button" class="text-blue-600 font-medium hover:text-blue-500 ml-1" id="continue-shopping">Continue Shopping</button> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Category filter | |
| const categoryButtons = document.querySelectorAll('.category-btn'); | |
| const galleryItems = document.querySelectorAll('.gallery-item'); | |
| categoryButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| categoryButtons.forEach(btn => btn.classList.remove('active')); | |
| // Add active class to clicked button | |
| this.classList.add('active'); | |
| const category = this.getAttribute('data-category'); | |
| // Filter gallery items | |
| galleryItems.forEach(item => { | |
| if (category === 'all' || item.getAttribute('data-category') === category) { | |
| item.style.display = 'block'; | |
| } else { | |
| item.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Shopping cart functionality | |
| const cartButton = document.querySelector('.add-to-cart'); | |
| const cartModal = document.getElementById('cart-modal'); | |
| const closeCart = document.getElementById('close-cart'); | |
| const continueShopping = document.getElementById('continue-shopping'); | |
| const cartModalBackdrop = document.getElementById('cart-modal-backdrop'); | |
| // Open cart modal | |
| document.querySelectorAll('.add-to-cart').forEach(button => { | |
| button.addEventListener('click', function() { | |
| cartModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| // Close cart modal | |
| function closeCartModal() { | |
| cartModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| closeCart.addEventListener('click', closeCartModal); | |
| continueShopping.addEventListener('click', closeCartModal); | |
| cartModalBackdrop.addEventListener('click', closeCartModal); | |
| // Load more photos | |
| document.querySelector('.load-more').addEventListener('click', function() { | |
| alert('More photos would be loaded in a real implementation!'); | |
| }); | |
| // Form submission | |
| document.querySelector('form button[type="button"]').addEventListener('click', function() { | |
| alert('Form would be submitted in a real implementation!'); | |
| }); | |
| // Newsletter subscription | |
| document.querySelector('.bg-blue-600 form button[type="submit"]').addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| alert('Thanks for subscribing to our newsletter!'); | |
| }); | |
| </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=Samoy/drone-magic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |