| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Aurora Luxe Visualizer</title> |
| <meta name="description" content="Upload your products and create professional brand visuals instantly"> |
| <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 src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> |
| <style> |
| .hero-bg { |
| background: linear-gradient(135deg, #F4EDE4 0%, #C9A669 50%, #101010 100%); |
| } |
| .product-card:hover .product-overlay { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| </style> |
| </head> |
| <body class="bg-white font-sans"> |
| |
| <nav class="bg-white shadow-md"> |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold text-gray-800">Aurora Luxe</a> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition">Home</a> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition">Jewelry</a> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition">Apparel</a> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition">Campaigns</a> |
| </div> |
| <button class="bg-amber-600 text-white px-4 py-2 rounded-full hover:bg-amber-700 transition"> |
| Get Started |
| </button> |
| </div> |
| </nav> |
| |
| <section class="hero-bg text-white py-20" id="vanta-bg"> |
| <div class="container mx-auto px-6 text-center"> |
| <h1 class="text-5xl font-bold mb-6">Luxury Brand Imagery <br>Perfected</h1> |
| <p class="text-xl mb-10 max-w-2xl mx-auto">Photorealistic marketing visuals that showcase your products in their best light, every time.</p> |
| <div class="flex justify-center space-x-4"> |
| <label for="product-upload" class="bg-white text-amber-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition cursor-pointer"> |
| <input id="product-upload" type="file" accept="image/*" multiple class="hidden" /> |
| Upload Products |
| </label> |
| <button class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-amber-600 transition" id="generate-btn"> |
| Generate Visuals |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Your Visualizations</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8" id="visualization-container"> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="relative h-64 w-full bg-gray-200 rounded-md mb-4" id="canvas-container"> |
| <img id="background-canvas" class="absolute inset-0 w-full h-full object-cover rounded-md" style="display: none;"> |
| <img id="product-canvas" class="absolute inset-0 w-full h-full object-contain rounded-md" style="display: none;"> |
| <div class="absolute inset-0 flex items-center justify-center text-gray-500"> |
| Your visualization will appear here |
| </div> |
| </div> |
| <div class="flex flex-wrap gap-2 mb-4" id="background-options"></div> |
| <div class="flex space-x-2"> |
| <button class="bg-amber-500 text-white px-4 py-2 rounded hover:bg-amber-600" id="download-btn"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> Download |
| </button> |
| <button class="border border-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-100" id="new-visual-btn"> |
| <i data-feather="refresh-cw" class="w-4 h-4 mr-1"></i> New Visual |
| </button> |
| </div> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <h3 class="text-xl font-bold mb-4">Customize Placement</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 mb-2">Product Size</label> |
| <input type="range" id="product-size" min="0.1" max="1" step="0.1" value="0.5" class="w-full"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Rotation</label> |
| <input type="range" id="product-rotation" min="0" max="360" step="1" value="0" class="w-full"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Position X</label> |
| <input type="range" id="product-x" min="0" max="100" step="1" value="50" class="w-full"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Position Y</label> |
| <input type="range" id="product-y" min="0" max="100" step="1" value="50" class="w-full"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Precision Visualization</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition"> |
| <div class="text-amber-500 mb-4"> |
| <i data-feather="box" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Product Integration</h3> |
| <p class="text-gray-600">Seamlessly place your jewelry, apparel or products into photorealistic scenes with perfect lighting and perspective.</p> |
| </div> |
| <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition"> |
| <div class="text-amber-500 mb-4"> |
| <i data-feather="cpu" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Brand Consistency</h3> |
| <p class="text-gray-600">Maintain your unique aesthetic across all visuals with custom color grading and style controls.</p> |
| </div> |
| <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition"> |
| <div class="text-amber-500 mb-4"> |
| <i data-feather="sliders" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Smart Editing</h3> |
| <p class="text-gray-600">Non-destructive adjustments for lighting, composition and styling while preserving product fidelity.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Visualization Modes</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="relative overflow-hidden rounded-lg shadow-lg product-card"> |
| <img src="http://static.photos/luxury/640x360/1" alt="Jewelry Visualization" class="w-full h-64 object-cover"> |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition duration-300 p-6"> |
| <h3 class="text-white text-xl font-bold mb-2">Jewelry on Model</h3> |
| <p class="text-gray-200 text-center mb-4">Accurate placement with realistic skin interactions and lighting.</p> |
| <button class="bg-amber-500 text-white px-4 py-2 rounded hover:bg-amber-600">Try Now</button> |
| </div> |
| </div> |
| |
| |
| <div class="relative overflow-hidden rounded-lg shadow-lg product-card"> |
| <img src="http://static.photos/streetwear/640x360/2" alt="Apparel Visualization" class="w-full h-64 object-cover"> |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition duration-300 p-6"> |
| <h3 class="text-white text-xl font-bold mb-2">Apparel Mockups</h3> |
| <p class="text-gray-200 text-center mb-4">Natural fabric drape with perfect graphic placement and folds.</p> |
| <button class="bg-amber-500 text-white px-4 py-2 rounded hover:bg-amber-600">Try Now</button> |
| </div> |
| </div> |
| |
| |
| <div class="relative overflow-hidden rounded-lg shadow-lg product-card"> |
| <img src="http://static.photos/minimal/640x360/3" alt="Product Visualization" class="w-full h-64 object-cover"> |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition duration-300 p-6"> |
| <h3 class="text-white text-xl font-bold mb-2">Product Campaigns</h3> |
| <p class="text-gray-200 text-center mb-4">Hero shots with perfect lighting, composition and reflections.</p> |
| <button class="bg-amber-500 text-white px-4 py-2 rounded hover:bg-amber-600">Try Now</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-900 text-white"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="text-4xl font-bold mb-6">Ready to Elevate Your Brand Imagery?</h2> |
| <p class="text-xl mb-10 max-w-2xl mx-auto">Upload your products and receive photorealistic marketing visuals in 48 hours or less.</p> |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> |
| <label for="project-upload" class="bg-amber-600 text-white px-8 py-4 rounded-full font-medium hover:bg-amber-700 transition cursor-pointer"> |
| <input id="project-upload" type="file" accept="image/*" multiple class="hidden" /> |
| Start Your Project |
| <i data-feather="arrow-right" class="inline ml-2 w-5 h-5"></i> |
| </label> |
| <button class="border-2 border-white text-white px-8 py-4 rounded-full font-medium hover:bg-white hover:text-gray-900 transition"> |
| Schedule a Demo |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-100 py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <h3 class="text-2xl font-bold text-gray-800">Aurora Luxe</h3> |
| <p class="text-gray-600 mt-2">Luxury product visualization perfected.</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition"> |
| <i data-feather="instagram" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition"> |
| <i data-feather="linkedin" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| <div class="border-t border-gray-200 mt-8 pt-8 flex flex-col md:flex-row justify-between"> |
| <p class="text-gray-600 mb-4 md:mb-0">© 2023 Aurora Luxe. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition">Privacy</a> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition">Terms</a> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition">FAQ</a> |
| <a href="#" class="text-gray-600 hover:text-amber-600 transition">Contact</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| <script> |
| |
| let productImage = null; |
| let currentBackground = null; |
| const UNSPLASH_ACCESS_KEY = 'YOUR_UNSPLASH_ACCESS_KEY'; |
| |
| |
| async function getBackgroundImages(query = 'luxury') { |
| try { |
| const response = await fetch(`https://api.unsplash.com/search/photos?page=1&query=${query}&client_id=${UNSPLASH_ACCESS_KEY}`); |
| const data = await response.json(); |
| return data.results; |
| } catch (error) { |
| console.error('Error fetching backgrounds:', error); |
| return []; |
| } |
| } |
| |
| |
| async function showBackgroundOptions() { |
| const backgrounds = await getBackgroundImages(); |
| const container = document.getElementById('background-options'); |
| container.innerHTML = ''; |
| |
| backgrounds.forEach((bg, index) => { |
| const img = document.createElement('img'); |
| img.src = bg.urls.small; |
| img.alt = bg.alt_description || 'Background option'; |
| img.dataset.fullUrl = bg.urls.regular; |
| img.className = 'w-20 h-20 object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-amber-500'; |
| img.addEventListener('click', () => setBackground(bg.urls.regular)); |
| container.appendChild(img); |
| }); |
| } |
| |
| |
| function setBackground(url) { |
| currentBackground = url; |
| const bgCanvas = document.getElementById('background-canvas'); |
| bgCanvas.src = url; |
| bgCanvas.style.display = 'block'; |
| } |
| |
| |
| document.getElementById('product-upload').addEventListener('change', function(e) { |
| if (e.target.files.length > 0) { |
| productImage = URL.createObjectURL(e.target.files[0]); |
| const productCanvas = document.getElementById('product-canvas'); |
| productCanvas.src = productImage; |
| productCanvas.style.display = 'block'; |
| } |
| }); |
| |
| |
| document.getElementById('generate-btn').addEventListener('click', async function() { |
| if (!productImage) { |
| alert('Please upload a product image first'); |
| return; |
| } |
| await showBackgroundOptions(); |
| |
| |
| updateProductPosition(); |
| }); |
| |
| |
| function updateProductPosition() { |
| const productCanvas = document.getElementById('product-canvas'); |
| if (!productCanvas) return; |
| |
| const size = document.getElementById('product-size').value; |
| const rotation = document.getElementById('product-rotation').value; |
| const x = document.getElementById('product-x').value; |
| const y = document.getElementById('product-y').value; |
| |
| productCanvas.style.transform = `translate(-50%, -50%) rotate(${rotation}deg) scale(${size})`; |
| productCanvas.style.left = `${x}%`; |
| productCanvas.style.top = `${y}%`; |
| } |
| |
| |
| ['product-size', 'product-rotation', 'product-x', 'product-y'].forEach(id => { |
| document.getElementById(id).addEventListener('input', updateProductPosition); |
| }); |
| |
| |
| document.getElementById('download-btn').addEventListener('click', function() { |
| if (!productImage || !currentBackground) { |
| alert('Please generate a visualization first'); |
| return; |
| } |
| |
| const container = document.getElementById('canvas-container'); |
| html2canvas(container).then(canvas => { |
| const link = document.createElement('a'); |
| link.download = 'aurora-luxe-visualization.png'; |
| link.href = canvas.toDataURL('image/png'); |
| link.click(); |
| }); |
| }); |
| |
| |
| document.getElementById('new-visual-btn').addEventListener('click', function() { |
| document.getElementById('background-options').innerHTML = ''; |
| document.getElementById('background-canvas').style.display = 'none'; |
| document.getElementById('product-canvas').style.display = 'none'; |
| }); |
| |
| |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0xC9A669, |
| backgroundColor: 0xF4EDE4, |
| size: 0.8 |
| }); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
