Spaces:
Running
Running
File size: 14,656 Bytes
33af8c7 98ca434 33af8c7 | 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 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case Studies | Essential Engineering</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
<style>
.case-study-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-1"></div>
<!-- Navigation -->
<nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm shadow-sm fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex-shrink-0 flex items-center">
<img src="https://huggingface.co/spaces/mtourville/pureflow-mep-masters/resolve/main/images/Essential%20Logo.jpg" alt="Essential Engineering Logo" class="h-16 w-auto">
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-center space-x-8">
<a href="index.html" class="text-gray-600 hover:text-blue-600 transition">Home</a>
<a href="services.html" class="text-gray-600 hover:text-blue-600 transition">Services</a>
<a href="projects.html" class="text-blue-600 font-medium">Projects</a>
<a href="case-studies.html" class="text-gray-600 hover:text-blue-600 transition">Case Studies</a>
<a href="about.html" class="text-gray-600 hover:text-blue-600 transition">About</a>
<a href="contact.html" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
<a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</a>
</div>
</div>
<div class="md:hidden">
<button class="text-gray-600">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Case Studies Header -->
<section class="pt-32 pb-16 px-4 sm:px-6 lg:px-8 bg-white bg-opacity-90">
<div class="max-w-7xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-800">
Our <span class="text-blue-600">Success Stories</span>
</h1>
<p class="text-lg text-gray-600 mb-8 max-w-3xl mx-auto">
Explore how we've helped clients overcome complex engineering challenges in critical environments.
</p>
</div>
</section>
<!-- Case Studies Grid -->
<section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Case Study 1 -->
<div class="case-study-card bg-white rounded-xl border border-gray-100 transition duration-300 overflow-hidden">
<img src="http://static.photos/technology/1024x576/10" alt="Biotech Facility" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-blue-600 font-medium">PHARMACEUTICAL</span>
<h3 class="text-xl font-bold my-3">Biotech Cleanroom Expansion</h3>
<p class="text-gray-600 mb-4">
Designed ISO Class 5 cleanrooms for a leading biotech company, reducing energy consumption by 30% while improving particle counts.
</p>
<a href="#" class="text-blue-600 font-medium flex items-center">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Case Study 2 -->
<div class="case-study-card bg-white rounded-xl border border-gray-100 transition duration-300 overflow-hidden">
<img src="http://static.photos/technology/1024x576/11" alt="Semiconductor Facility" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-blue-600 font-medium">MICROELECTRONICS</span>
<h3 class="text-xl font-bold my-3">300mm Wafer Fab Upgrade</h3>
<p class="text-gray-600 mb-4">
Retrofit of a semiconductor facility to support next-gen 300mm wafer processing with zero downtime during construction.
</p>
<a href="#" class="text-blue-600 font-medium flex items-center">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Case Study 3 -->
<div class="case-study-card bg-white rounded-xl border border-gray-100 transition duration-300 overflow-hidden">
<img src="http://static.photos/technology/1024x576/12" alt="Research Lab" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-blue-600 font-medium">LIFE SCIENCES</span>
<h3 class="text-xl font-bold my-3">BSL-3 Research Laboratory</h3>
<p class="text-gray-600 mb-4">
Designed containment systems for a university research facility working with dangerous pathogens.
</p>
<a href="#" class="text-blue-600 font-medium flex items-center">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Case Study 4 -->
<div class="case-study-card bg-white rounded-xl border border-gray-100 transition duration-300 overflow-hidden">
<img src="http://static.photos/technology/1024x576/13" alt="Data Center" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-blue-600 font-medium">DATA CENTER</span>
<h3 class="text-xl font-bold my-3">Tier IV Data Center</h3>
<p class="text-gray-600 mb-4">
Mission critical design for a financial services company requiring 99.995% uptime with full redundancy.
</p>
<a href="#" class="text-blue-600 font-medium flex items-center">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Case Study 5 -->
<div class="case-study-card bg-white rounded-xl border border-gray-100 transition duration-300 overflow-hidden">
<img src="http://static.photos/technology/1024x576/14" alt="Manufacturing Facility" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-blue-600 font-medium">ADVANCED MANUFACTURING</span>
<h3 class="text-xl font-bold my-3">Battery Production Facility</h3>
<p class="text-gray-600 mb-4">
Designed dry room environment for lithium-ion battery production with dew point control at -60°F.
</p>
<a href="#" class="text-blue-600 font-medium flex items-center">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Case Study 6 -->
<div class="case-study-card bg-white rounded-xl border border-gray-100 transition duration-300 overflow-hidden">
<img src="http://static.photos/technology/1024x576/15" alt="Hospital" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-blue-600 font-medium">HEALTHCARE</span>
<h3 class="text-xl font-bold my-3">Hospital Pharmacy Sterile Compounding</h3>
<p class="text-gray-600 mb-4">
USP 797/800 compliant design for a 500-bed hospital's central pharmacy sterile compounding suite.
</p>
<a href="#" class="text-blue-600 font-medium flex items-center">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-blue-600 text-white">
<div class="max-w-7xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-6">Need Solutions for Your Critical Environment?</h2>
<p class="text-blue-100 max-w-2xl mx-auto mb-8">
Our team of MEP specialists is ready to discuss your project requirements and deliver solutions that meet the most stringent industry standards.
</p>
<a href="contact.html" class="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-md font-medium transition inline-block">
Contact Our Team
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-12">
<div>
<div class="flex items-center mb-6">
<img src="https://huggingface.co/spaces/mtourville/pureflow-mep-masters/resolve/main/images/Essential%20Logo.jpg" alt="Essential Engineering Logo" class="h-14 w-auto">
<span class="ml-3 text-xl font-bold">Essential Engineering Design Build Partnership</span>
</div>
<p class="text-gray-400 mb-6">
Specialized MEP solutions for critical environments in pharmaceutical, microelectronics, and advanced manufacturing.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="facebook"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Services</h4>
<ul class="space-y-3">
<li><a href="services.html#cleanroom-design" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
<li><a href="services.html#hvac-systems" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
<li><a href="services.html#process-piping" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
<li><a href="services.html#electrical-systems" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Resources</h4>
<ul class="space-y-3">
<li><a href="case-studies.html" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">White Papers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Industry Standards</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">Contact</h4>
<address class="not-italic text-gray-400">
<p class="mb-3">456 Innovation Parkway</p>
<p class="mb-3">Sanford, NC 27330</p>
<p class="mb-3">Phone: (617) 555-7890</p>
<p>Email: contact@essentialeng.com</p>
</address>
</div>
</div>
<div class="border-t border-gray-800 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 Essential Engineering Design Build Partnership. All rights reserved.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>
feather.replace();
VANTA.WAVES({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
shininess: 35.00,
waveHeight: 15.00,
waveSpeed: 0.60,
zoom: 0.75
});
</script>
</body>
</html> |