Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexGen Graphics - Power Your Imagination</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #c026d3 100%); | |
| } | |
| .card-gradient { | |
| background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6); | |
| } | |
| .btn-secondary { | |
| background: linear-gradient(90deg, #475569 0%, #1e293b 100%); | |
| } | |
| .btn-secondary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 25px rgba(71, 85, 105, 0.6); | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: scale(1.2) rotate(10deg); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-slate-900/50 backdrop-blur-md fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">NexGen GFX</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#home" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="#products" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Products</a> | |
| <a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a> | |
| <a href="#performance" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Performance</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <button class="btn-primary text-white px-6 py-2 rounded-full font-medium text-sm"> | |
| Pre-order Now <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="fade-in"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6"> | |
| Unleash <span class="text-yellow-300">Extreme</span> Performance | |
| </h1> | |
| <p class="text-lg text-gray-200 mb-8 max-w-lg"> | |
| Experience the next generation of graphics with our RTX 40 Series. Revolutionary architecture for unprecedented gaming, content creation, and AI performance. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="btn-primary text-white px-8 py-3 rounded-full font-medium"> | |
| Shop Now <i class="fas fa-bolt ml-2"></i> | |
| </button> | |
| <button class="btn-secondary text-white px-8 py-3 rounded-full font-medium"> | |
| Explore Tech <i class="fas fa-microchip ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-6"> | |
| <div class="text-sm"> | |
| <div class="text-blue-300 font-semibold">4K/8K Ready</div> | |
| <div class="text-white">Ultra HD Gaming</div> | |
| </div> | |
| <div class="text-sm"> | |
| <div class="text-purple-300 font-semibold">Ray Tracing</div> | |
| <div class="text-white">Hyper-Realistic</div> | |
| </div> | |
| <div class="text-sm"> | |
| <div class="text-pink-300 font-semibold">AI-Powered</div> | |
| <div class="text-white">DLSS 3.0</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative hidden md:block"> | |
| <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3" alt="Graphics Card" class="w-full h-auto max-w-xl floating"> | |
| <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-600 rounded-full opacity-20 filter blur-2xl"></div> | |
| <div class="absolute -top-10 -right-10 w-40 h-40 bg-blue-600 rounded-full opacity-20 filter blur-2xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Logo Cloud --> | |
| <div class="bg-slate-900 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Nvidia_logo.svg/1280px-Nvidia_logo.svg.png" alt="NVIDIA" class="h-12 opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/AMD_Logo.svg/1280px-AMD_Logo.svg.png" alt="AMD" class="h-8 opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/ASRock_logo.svg/1280px-ASRock_logo.svg.png" alt="ASRock" class="h-8 opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/ASUS_Logo.svg/1280px-ASUS_Logo.svg.png" alt="ASUS" class="h-8 opacity-80 hover:opacity-100 transition"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Products Section --> | |
| <section id="products" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Premium <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Collection</span></h2> | |
| <p class="max-w-2xl mx-auto text-gray-400">Choose from our cutting-edge lineup of graphics cards designed for gamers, creators, and professionals.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="card-gradient rounded-xl p-6 card-hover"> | |
| <div class="badge bg-blue-600/20 text-blue-400 px-3 py-1 rounded-full text-xs font-semibold mb-4">BEST SELLER</div> | |
| <div class="h-48 flex items-center justify-center mb-6"> | |
| <img src="https://images.unsplash.com/photo-1563213023-3a1a6a56fe1f?ixlib=rb-4.0.3" alt="RTX 4090" class="h-full object-contain"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">RTX 4090 Titan</h3> | |
| <p class="text-gray-400 text-sm mb-4">Experience uncompromised performance with our flagship GPU.</p> | |
| <div class="flex items-center text-yellow-400 mb-4"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <span class="text-gray-400 ml-2 text-sm">4.9 (128 reviews)</span> | |
| </div> | |
| <div class="flex items-end justify-between mt-6"> | |
| <div> | |
| <span class="text-gray-400 line-through text-sm">$1,999</span> | |
| <h4 class="text-2xl font-bold">$1,699</h4> | |
| </div> | |
| <button class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium"> | |
| Add to Cart <i class="fas fa-shopping-cart ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="card-gradient rounded-xl p-6 card-hover"> | |
| <div class="h-48 flex items-center justify-center mb-6"> | |
| <img src="https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-4.0.3" alt="RTX 4080" class="h-full object-contain"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">RTX 4080 Pro</h3> | |
| <p class="text-gray-400 text-sm mb-4">Perfect balance of performance and value for serious gamers.</p> | |
| <div class="flex items-center text-yellow-400 mb-4"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <span class="text-gray-400 ml-2 text-sm">4.7 (89 reviews)</span> | |
| </div> | |
| <div class="flex items-end justify-between mt-6"> | |
| <div> | |
| <span class="text-gray-400 line-through text-sm">$1,299</span> | |
| <h4 class="text-2xl font-bold">$1,099</h4> | |
| </div> | |
| <button class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium"> | |
| Add to Cart <i class="fas fa-shopping-cart ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="card-gradient rounded-xl p-6 card-hover"> | |
| <div class="badge bg-green-600/20 text-green-400 px-3 py-1 rounded-full text-xs font-semibold mb-4">NEW</div> | |
| <div class="h-48 flex items-center justify-center mb-6"> | |
| <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3" alt="RTX 4070" class="h-full object-contain"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">RTX 4070 Elite</h3> | |
| <p class="text-gray-400 text-sm mb-4">Exceptional 1440p gaming at an affordable price point.</p> | |
| <div class="flex items-center text-yellow-400 mb-4"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <span class="text-gray-400 ml-2 text-sm">4.5 (42 reviews)</span> | |
| </div> | |
| <div class="flex items-end justify-between mt-6"> | |
| <div> | |
| <h4 class="text-2xl font-bold">$799</h4> | |
| </div> | |
| <button class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium"> | |
| Add to Cart <i class="fas fa-shopping-cart ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <button class="btn-secondary text-white px-10 py-3 rounded-full font-medium"> | |
| View All Products <i class="fas fa-chevron-down ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900 border-t border-gray-800/50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Revolutionary <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Technology</span></h2> | |
| <p class="max-w-2xl mx-auto text-gray-400">Pushing the boundaries of what's possible in real-time graphics rendering and AI processing.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 group"> | |
| <div class="w-14 h-14 rounded-lg bg-blue-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-bolt feature-icon text-2xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">DLSS 3.0</h3> | |
| <p class="text-gray-400"> | |
| AI-powered frame generation delivers unmatched performance boosts while maintaining impeccable image quality. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 group"> | |
| <div class="w-14 h-14 rounded-lg bg-purple-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-sun feature-icon text-2xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Ray Tracing</h3> | |
| <p class="text-gray-400"> | |
| Hyper-realistic lighting, shadows, and reflections with dedicated RT cores for cinematic visual fidelity. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 group"> | |
| <div class="w-14 h-14 rounded-lg bg-pink-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-microchip feature-icon text-2xl text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">4th Gen Architecture</h3> | |
| <p class="text-gray-400"> | |
| Cutting-edge chip design with 50% more CUDA cores and 2x power efficiency over previous generation. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Performance Section --> | |
| <section id="performance" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-slate-900 to-indigo-900/20"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Benchmark <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Dominance</span></h2> | |
| <p class="text-gray-300 max-w-lg"> | |
| Our RTX 40 Series graphics cards redefine performance expectations, delivering unmatched frame rates at every resolution. | |
| </p> | |
| <div class="space-y-6"> | |
| <!-- Benchmark 1 --> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>1080P Ultra</span> | |
| <span>240 FPS</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <!-- Benchmark 2 --> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>1440P Ultra</span> | |
| <span>180 FPS</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <!-- Benchmark 3 --> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>4K Ultra</span> | |
| <span>120 FPS</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-pink-600 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <!-- Benchmark 4 --> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>8K Ultra</span> | |
| <span>60 FPS</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button class="btn-primary text-white px-8 py-3 rounded-full font-medium"> | |
| See Full Benchmarks <i class="fas fa-chart-line ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative hidden md:block"> | |
| <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3" alt="Gaming Performance" class="w-full rounded-xl border border-gray-700/50 shadow-2xl"> | |
| <div class="absolute -bottom-6 -left-6 w-56 h-56 bg-blue-600 rounded-full opacity-20 filter blur-xl z-0"></div> | |
| <div class="absolute -top-6 -right-6 w-40 h-40 bg-purple-600 rounded-full opacity-20 filter blur-xl z-0"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Gamers Say</span></h2> | |
| <p class="max-w-2xl mx-auto text-gray-400">Join thousands of satisfied customers who have upgraded their gaming experience.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-slate-800/50 rounded-xl p-6 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold mr-4">JK</div> | |
| <div> | |
| <h4 class="font-semibold">Jake K.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "The RTX 4090 is an absolute beast! I'm getting 120+ FPS in Cyberpunk 2077 with everything maxed out at 4K. Worth every penny." | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-slate-800/50 rounded-xl p-6 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center text-white font-bold mr-4">SM</div> | |
| <div> | |
| <h4 class="font-semibold">Sarah M.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "As a 3D artist, the rendering speeds are incredible. Halved my project completion times versus my old GPU." | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-slate-800/50 rounded-xl p-6 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-green-500 to-blue-600 flex items-center justify-center text-white font-bold mr-4">AT</div> | |
| <div> | |
| <h4 class="font-semibold">Alex T.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "The 4080 Pro hits the sweet spot for price-performance. Running every game I throw at it on max settings at 1440p." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-900/30 to-purple-900/30"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="bg-slate-900/50 backdrop-blur-md rounded-2xl p-8 md:p-12 border border-gray-700/50"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Upgrade</span> Your Experience?</h2> | |
| <p class="text-lg text-gray-300 mb-8"> | |
| Join millions of gamers and creators who have made the switch to our next-generation graphics cards. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="btn-primary text-white px-8 py-4 rounded-full font-medium"> | |
| Buy Now <i class="fas fa-shopping-bag ml-2"></i> | |
| </button> | |
| <button class="btn-secondary text-white px-8 py-4 rounded-full font-medium"> | |
| Compare Cards <i class="fas fa-list-ul ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact" class="bg-slate-900/90 py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800/50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent mb-6">NexGen GFX</h3> | |
| <p class="text-gray-400 text-sm"> | |
| Powering the future of gaming and creative work with cutting-edge graphics technology. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-gray-200 font-semibold mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">RTX 40 Series</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">RTX 30 Series</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Workstation GPUs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Accessories</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Software</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-gray-200 font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Drivers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">FAQs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Warranty</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Returns</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-gray-200 font-semibold mb-4">Newsletter</h4> | |
| <p class="text-gray-400 text-sm mb-4"> | |
| Stay updated with our latest products and offers. | |
| </p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="bg-slate-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-600 w-full"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800/50 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 NexGen Graphics. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple fade-in animation for elements with .fade-in class | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| fadeElements.forEach(el => { | |
| el.style.opacity = '0'; | |
| fadeInObserver.observe(el); | |
| }); | |
| // Smooth scroll for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=rz1x/deepsit-testing" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |