BlueTrans / solutions.html
gaialive's picture
Update solutions.html
502bcd9 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solutions - GXS Blue Transformation</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-teal-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-16">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-16">
<h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-teal-500">
Our Solutions
</h1>
<p class="text-xl text-gray-700 max-w-3xl mx-auto">
Innovative approaches to the world's most pressing environmental challenges.
</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mb-16">
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="wind" class="text-green-600"></i>
</div>
<h2 class="text-2xl font-bold mb-4 text-green-700">Renewable Energy Systems</h2>
<p class="text-gray-700 mb-4">
Custom-designed solar, wind, and hybrid energy solutions tailored to local conditions and needs.
</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
<span>Micro-grid implementations</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
<span>Energy storage solutions</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
<span>Community energy programs</span>
</li>
</ul>
</div>
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="droplet" class="text-blue-600"></i>
</div>
<h2 class="text-2xl font-bold mb-4 text-blue-700">Water Purification</h2>
<p class="text-gray-700 mb-4">
Advanced filtration and purification systems for clean water access in any environment.
</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i data-feather="check" class="text-blue-500 mr-2 mt-1 w-4 h-4"></i>
<span>Portable purification units</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-blue-500 mr-2 mt-1 w-4 h-4"></i>
<span>Wastewater treatment</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-blue-500 mr-2 mt-1 w-4 h-4"></i>
<span>Rainwater harvesting systems</span>
</li>
</ul>
</div>
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all">
<div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="tree" class="text-teal-600"></i>
</div>
<h2 class="text-2xl font-bold mb-4 text-teal-700">Reforestation</h2>
<p class="text-gray-700 mb-4">
Comprehensive ecosystem restoration using native species and innovative planting techniques.
</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i data-feather="check" class="text-teal-500 mr-2 mt-1 w-4 h-4"></i>
<span>Drone-assisted seed planting</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-teal-500 mr-2 mt-1 w-4 h-4"></i>
<span>Community forestry programs</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-teal-500 mr-2 mt-1 w-4 h-4"></i>
<span>Carbon offset initiatives</span>
</li>
</ul>
</div>
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="cpu" class="text-green-600"></i>
</div>
<h2 class="text-2xl font-bold mb-4 text-green-700">Smart Agriculture</h2>
<p class="text-gray-700 mb-4">
IoT-enabled farming solutions that maximize yield while minimizing environmental impact.
</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
<span>Precision irrigation systems</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
<span>Soil health monitoring</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
<span>Organic pest management</span>
</li>
</ul>
</div>
</div>
<div class="text-center mt-12">
<a href="/contact.html" class="inline-block px-8 py-4 rounded-full bg-gradient-to-r from-green-600 to-teal-500 text-white font-bold text-xl hover:shadow-lg hover:scale-105 transition-all transform">
Request More Information
</a>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html>