| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Gotham Nutra Labs - Premium Nutraceutical Solutions</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"> |
| | <script> |
| | tailwind.config = { |
| | darkMode: 'class', |
| | theme: { |
| | extend: { |
| | colors: { |
| | primary: { |
| | 50: '#f0fdf4', |
| | 100: '#dcfce7', |
| | 200: '#bbf7d0', |
| | 300: '#86efac', |
| | 400: '#4ade80', |
| | 500: '#22c55e', |
| | 600: '#16a34a', |
| | 700: '#15803d', |
| | 800: '#166534', |
| | 900: '#14532d', |
| | }, |
| | gotham: { |
| | concrete: '#2a2a2a', |
| | steel: '#4a5568', |
| | glass: 'rgba(255, 255, 255, 0.1)', |
| | neon: '#00ff88', |
| | } |
| | }, |
| | fontFamily: { |
| | 'bebas': ['Bebas Neue', 'cursive'], |
| | 'roboto': ['Roboto', 'sans-serif'], |
| | }, |
| | backdropBlur: { |
| | 'xl': '20px', |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | </head> |
| | <body class="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white overflow-x-hidden"> |
| | |
| | |
| | <div class="fixed inset-0 z-0"> |
| | <div class="absolute inset-0 bg-[url('https://static.photos/cityscape/1920x1080/42')] opacity-20 parallax-layer" data-speed="0.5"></div> |
| | <div class="absolute inset-0 bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900"></div> |
| | <div class="absolute inset-0" id="comic-overlay"></div> |
| | </div> |
| |
|
| | |
| | <custom-navbar></custom-navbar> |
| | |
| | <main class="relative z-10"> |
| | |
| | <section class="min-h-screen flex items-center justify-center relative"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <div class="glass-morphic max-w-4xl mx-auto p-12 rounded-2xl" data-aos="fade-up"> |
| | <div class="comic-border"> |
| | <h1 class="font-bebas text-6xl lg:text-8xl mb-4 text-primary-400 tracking-wider"> |
| | GOTHAM |
| | </h1> |
| | <h2 class="font-bebas text-4xl lg:text-6xl mb-6 text-primary-500 tracking-wide"> |
| | NUTRA LABS |
| | </h2> |
| | <p class="text-xl lg:text-2xl mb-8 text-gray-300 font-roboto"> |
| | Precision-Engineered Nutraceutical Solutions for the Modern World |
| | </p> |
| | <div class="flex flex-col sm:flex-row gap-6 justify-center"> |
| | <button onclick="openModal('products')" class="px-8 py-4 bg-primary-500 text-gray-900 rounded-lg font-bold hover:bg-primary-400 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-primary-500/50"> |
| | Explore Products |
| | </button> |
| | <button onclick="openModal('coa')" class="px-8 py-4 glass-border text-primary-400 rounded-lg font-bold hover:bg-gotham-glass transform hover:scale-105 transition-all duration-300"> |
| | View COA Data |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="absolute top-20 left-10 floating-element" data-aos="fade-right" data-aos-delay="200"> |
| | <div class="w-20 h-20 glass-morphic rounded-full flex items-center justify-center"> |
| | <i data-feather="shield" class="w-10 h-10 text-primary-400"></i> |
| | </div> |
| | </div> |
| | <div class="absolute top-40 right-10 floating-element" data-aos="fade-left" data-aos-delay="400"> |
| | <div class="w-16 h-16 glass-morphic rounded-lg flex items-center justify-center"> |
| | <i data-feather="award" class="w-8 h-8 text-primary-400"></i> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 relative"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="font-bebas text-5xl lg:text-6xl text-center mb-16 text-primary-400" data-aos="fade-up"> |
| | OUR CAPABILITIES |
| | </h2> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | <div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="100"> |
| | <div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="zap" class="w-8 h-8 text-primary-400"></i> |
| | </div> |
| | <h3 class="font-bebas text-2xl mb-3 text-primary-400">RAPID FORMULATION</h3> |
| | <p class="text-gray-400">Cutting-edge extraction processes delivering premium bioactive compounds with unmatched purity.</p> |
| | </div> |
| | <div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="200"> |
| | <div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="layers" class="w-8 h-8 text-primary-400"></i> |
| | </div> |
| | <h3 class="font-bebas text-2xl mb-3 text-primary-400">LAB GRADE QUALITY</h3> |
| | <p class="text-gray-400">ISO certified facilities with comprehensive COA documentation for every batch.</p> |
| | </div> |
| | <div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="300"> |
| | <div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="trending-up" class="w-8 h-8 text-primary-400"></i> |
| | </div> |
| | <h3 class="font-bebas text-2xl mb-3 text-primary-400">SCALABLE SOLUTIONS</h3> |
| | <p class="text-gray-400">From R&D to mass production, we scale with your business needs.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 relative"> |
| | <div class="container mx-auto px-6"> |
| | <div class="glass-morphic p-12 rounded-2xl"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center"> |
| | <div data-aos="fade-up" data-aos-delay="100"> |
| | <div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">500+</div> |
| | <div class="text-gray-400">PRODUCTS FORMULATED</div> |
| | </div> |
| | <div data-aos="fade-up" data-aos-delay="200"> |
| | <div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">99.8%</div> |
| | <div class="text-gray-400">PURITY RATE</div> |
| | </div> |
| | <div data-aos="fade-up" data-aos-delay="300"> |
| | <div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">24/7</div> |
| | <div class="text-gray-400">LAB OPERATIONS</div> |
| | </div> |
| | <div data-aos="fade-up" data-aos-delay="400"> |
| | <div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">50K+</div> |
| | <div class="text-gray-400">SATISFIED CLIENTS</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | </main> |
| |
|
| | |
| | <div id="products-modal" class="modal fixed inset-0 z-50 hidden"> |
| | <div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('products')"></div> |
| | <div class="modal-content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-6xl max-h-[90vh] overflow-y-auto"> |
| | <div class="glass-morphic p-8 rounded-2xl"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 class="font-bebas text-4xl text-primary-400">PRODUCT PORTFOLIO</h2> |
| | <button onclick="closeModal('products')" class="text-gray-400 hover:text-white"> |
| | <i data-feather="x" class="w-8 h-8"></i> |
| | </button> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | <div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('7OH-Coffee')"> |
| | <img src="https://static.photos/technology/320x240/123" alt="7OH Coffee Tablets" class="w-full h-48 object-cover rounded-lg mb-4"> |
| | <h3 class="font-bebas text-2xl text-primary-400 mb-2">7OH-Coffee Tablets</h3> |
| | <p class="text-gray-400 mb-4">100mg Premium Extract</p> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-primary-400 font-bold">$29.99</span> |
| | <span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span> |
| | </div> |
| | </div> |
| | <div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('Focus-Blend')"> |
| | <img src="https://static.photos/technology/320x240/456" alt="Focus Blend" class="w-full h-48 object-cover rounded-lg mb-4"> |
| | <h3 class="font-bebas text-2xl text-primary-400 mb-2">Focus Blend</h3> |
| | <p class="text-gray-400 mb-4">Cognitive Enhancement</p> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-primary-400 font-bold">$39.99</span> |
| | <span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span> |
| | </div> |
| | </div> |
| | <div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('Recovery-Plus')"> |
| | <img src="https://static.photos/technology/320x240/789" alt="Recovery Plus" class="w-full h-48 object-cover rounded-lg mb-4"> |
| | <h3 class="font-bebas text-2xl text-primary-400 mb-2">Recovery Plus</h3> |
| | <p class="text-gray-400 mb-4">Athletic Performance</p> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-primary-400 font-bold">$49.99</span> |
| | <span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="coa-modal" class="modal fixed inset-0 z-50 hidden"> |
| | <div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('coa')"></div> |
| | <div class="modal-content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-5xl max-h-[90vh] overflow-y-auto"> |
| | <div class="glass-morphic p-8 rounded-2xl"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 class="font-bebas text-4xl text-primary-400">CERTIFICATE OF ANALYSIS</h2> |
| | <button onclick="closeModal('coa')" class="text-gray-400 hover:text-white"> |
| | <i data-feather="x" class="w-8 h-8"></i> |
| | </button> |
| | </div> |
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| | <div> |
| | <canvas id="purityChart"></canvas> |
| | </div> |
| | <div> |
| | <canvas id="compoundChart"></canvas> |
| | </div> |
| | </div> |
| | <div class="mt-8 glass-border p-6 rounded-xl"> |
| | <h3 class="font-bebas text-2xl text-primary-400 mb-4">BATCH SPECIFICATIONS</h3> |
| | <div class="space-y-3"> |
| | <div class="flex justify-between border-b border-gray-700 pb-2"> |
| | <span class="text-gray-400">Product ID</span> |
| | <span class="text-primary-400">GNL-7OH-2024-001</span> |
| | </div> |
| | <div class="flex justify-between border-b border-gray-700 pb-2"> |
| | <span class="text-gray-400">Manufacture Date</span> |
| | <span class="text-primary-400">2024-01-15</span> |
| | </div> |
| | <div class="flex justify-between border-b border-gray-700 pb-2"> |
| | <span class="text-gray-400">Expiry Date</span> |
| | <span class="text-primary-400">2026-01-15</span> |
| | </div> |
| | <div class="flex justify-between border-b border-gray-700 pb-2"> |
| | <span class="text-gray-400">Purity</span> |
| | <span class="text-primary-400">99.8%</span> |
| | </div> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-400">Status</span> |
| | <span class="text-primary-400">✓ LAB CERTIFIED</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="product-modal" class="modal fixed inset-0 z-50 hidden"> |
| | <div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('product')"></div> |
| | <div class="modal-content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl max-h-[90vh] overflow-y-auto"> |
| | <div class="glass-morphic p-8 rounded-2xl"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 id="product-title" class="font-bebas text-4xl text-primary-400"></h2> |
| | <button onclick="closeModal('product')" class="text-gray-400 hover:text-white"> |
| | <i data-feather="x" class="w-8 h-8"></i> |
| | </button> |
| | </div> |
| | <div id="product-content"></div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script src="script.js"></script> |
| | <script src="components/navbar.js"></script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
