Build a professional, multi-section homepage for "BLU2", a corporate industrial company specializing in Diesel Exhaust Fluid (DEF).
380f2a5
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BLU2 | Performance & Purity in Diesel Exhaust Fluid</title> | |
| <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://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#004171', | |
| secondary: '#00A0B0', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="font-sans antialiased"> | |
| <!-- Navigation Component --> | |
| <script src="components/navigation.js"></script> | |
| <custom-navigation></custom-navigation> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen bg-primary text-white"> | |
| <div class="absolute inset-0 bg-black opacity-40"></div> | |
| <div class="container mx-auto px-6 h-full flex items-center relative z-10"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-5xl font-bold mb-4">Performance & Purity for Canadian Logistics</h1> | |
| <p class="text-xl mb-8">The reliable supply chain partner for Diesel Exhaust Fluid</p> | |
| <div class="flex gap-4"> | |
| <a href="#products" class="bg-secondary hover:bg-opacity-90 text-white px-6 py-3 rounded-lg font-medium transition">Discover our Products</a> | |
| <a href="#distribution" class="border-2 border-white hover:bg-white hover:text-primary px-6 py-3 rounded-lg font-medium transition">View Distribution Network</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold text-primary mb-6">About BLU2</h2> | |
| <p class="text-lg text-gray-700 mb-6">Founded by François Roy, BLU2 has established itself as a market leader in the Canadian diesel industry, providing high-quality Diesel Exhaust Fluid (DEF) to keep fleets compliant and efficient.</p> | |
| <a href="#" class="text-secondary font-medium flex items-center gap-2"> | |
| Read our story | |
| <i data-feather="arrow-right"></i> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://static.photos/industry/1024x576/1" alt="BLU2 Industrial Facility" class="rounded-lg shadow-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- BLU2 Advantage --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-primary text-center mb-12">The BLU2 Advantage</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="text-primary mb-4"> | |
| <i data-feather="tool" class="w-12 h-12 mx-auto"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Maintenance Savings</h3> | |
| <p class="text-gray-600">Extend filter life and reduce maintenance costs with our pure DEF formula.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="text-primary mb-4"> | |
| <i data-feather="droplet" class="w-12 h-12 mx-auto"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Fuel Economy</h3> | |
| <p class="text-gray-600">Optimize your fuel consumption while meeting emission standards.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="text-primary mb-4"> | |
| <i data-feather="check-circle" class="w-12 h-12 mx-auto"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Eco-Compliance</h3> | |
| <p class="text-gray-600">Meet and exceed CO2 emission standards with our certified DEF solution.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="text-primary mb-4"> | |
| <i data-feather="wind" class="w-12 h-12 mx-auto"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Green Technology</h3> | |
| <p class="text-gray-600">Reduce NOx emissions with our advanced SCR-compatible fluid.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- DEF Calculator --> | |
| <section id="calculator" class="py-20 bg-primary text-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Estimate Your Fleet's Needs</h2> | |
| <div class="max-w-3xl mx-auto bg-white bg-opacity-10 p-8 rounded-lg"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div> | |
| <label class="block mb-2">Fuel Consumption (L/100km)</label> | |
| <input type="number" class="w-full px-4 py-2 rounded text-gray-800" placeholder="e.g. 35"> | |
| </div> | |
| <div> | |
| <label class="block mb-2">Annual Kilometers</label> | |
| <input type="number" class="w-full px-4 py-2 rounded text-gray-800" placeholder="e.g. 100,000"> | |
| </div> | |
| <div> | |
| <label class="block mb-2">Fleet Size</label> | |
| <input type="number" class="w-full px-4 py-2 rounded text-gray-800" placeholder="e.g. 10"> | |
| </div> | |
| </div> | |
| <button class="bg-secondary hover:bg-opacity-90 text-white px-8 py-3 rounded-lg font-medium transition mx-auto block"> | |
| Calculate Volume | |
| </button> | |
| <div id="results" class="mt-8 hidden"> | |
| <div class="bg-white bg-opacity-20 p-6 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-4">Estimated Annual DEF Consumption</h3> | |
| <p class="text-2xl">3,500 <span class="text-lg">liters</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer Component --> | |
| <script src="components/footer.js"></script> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| // Simple calculator functionality | |
| document.querySelector('button').addEventListener('click', function() { | |
| document.getElementById('results').classList.remove('hidden'); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |