Spaces:
Running
Running
File size: 7,570 Bytes
8c78f48 502bcd9 8c78f48 | 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 | <!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> |