File size: 7,298 Bytes
380f2a5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<!DOCTYPE html>
<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> |