SoulKingRule/climateshield-engineering-resilience-redefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Features | FacilityFlow Platform Capabilities</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 .functional-gray {13 background-color: #f8fafc;14 }15 .card-hover {16 transition: all 0.3s ease;17 }18 .card-hover:hover {19 transform: translateY(-5px);20 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);21 }22 .feature-icon {23 background-color: #e2e8f0;24 }25 </style>26</head>27<body class="font-sans antialiased functional-gray">28 <!-- Navigation -->29 <nav class="bg-white shadow-sm border-b border-gray-200">30 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">31 <div class="flex justify-between h-16">32 <div class="flex items-center">33 <div class="flex-shrink-0 flex items-center">34 <i data-feather="layers" class="h-8 w-8 text-gray-600"></i>35 <span class="ml-2 text-xl font-bold text-gray-800">FacilityFlow</span>36 </div>37 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">38 <a href="index.html" class="text-gray-500 hover:text-gray-600 px-3 py-2 font-medium">Home</a>39 <a href="features.html" class="text-gray-900 hover:text-gray-600 px-3 py-2 font-medium">Features</a>40 <a href="solutions.html" class="text-gray-500 hover:text-gray-600 px-3 py-2 font-medium">Solutions</a>41 <a href="about.html" class="text-gray-500 hover:text-gray-600 px-3 py-2 font-medium">About</a>42 <a href="contact.html" class="text-gray-500 hover:text-gray-600 px-3 py-2 font-medium">Contact</a>43 <a href="demo.html" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700">Request Demo</a>44 </div>45 </div>46 </div>47 </nav>48 49 <!-- Hero -->50 <div class="bg-white">51 <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">52 <div class="text-center">53 <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">54 Platform Features55 </h1>56 <p class="mt-6 max-w-lg mx-auto text-xl text-gray-600">57 Simple, powerful tools that transform complex building data into actionable insights.58 </p>59 </div>60 </div>61 </div>62 63 <!-- Core Features Grid -->64 <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">65 <div class="grid grid-cols-1 gap-12">66 <!-- Digitalization Accelerator -->67 <div class="card-hover bg-white p-8 rounded-lg shadow-sm border border-gray-200">68 <div class="flex items-center">69 <div class="flex-shrink-0 feature-icon rounded-md p-3">70 <i data-feather="zap" class="h-6 w-6 text-gray-600"></i>71 </div>72 <h2 class="mt-6 text-2xl font-bold text-gray-900">Digitalization Accelerator</h2>73 <p class="mt-4 text-gray-600">74 Connect our proprietary Edge Gateway to existing systems (BACnet, Modbus) and automatically generate your Functional Gray Model.75 </p>76 <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-8">77 <div>78 <h4 class="text-lg font-medium text-gray-900">Rapid Deployment</h4>79 <ul class="mt-4 space-y-2">80 <li class="flex items-center">81 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>82 <span class="ml-3 text-gray-600">Deploy in weeks, not years</span>83 </li>84 <li class="flex items-center">85 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>86 <span class="ml-3 text-gray-600">No complex BIM setup required</span>87 </li>88 </ul>89 </div>90 <div>91 <h4 class="text-lg font-medium text-gray-900">Legacy Building Support</h4>92 <ul class="mt-4 space-y-2">93 <li class="flex items-center">94 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>95 <span class="ml-3 text-gray-600">Works with existing low-tech systems</span>96 </li>97 <li class="flex items-center">98 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>99 <span class="ml-3 text-gray-600">No infrastructure upgrades needed</span>100 </li>101 </ul>102 </div>103 </div>104 </div>105 106 <!-- Functional Gray Model -->107 <div class="card-hover bg-white p-8 rounded-lg shadow-sm border border-gray-200">108 <div class="flex items-center">109 <div class="flex-shrink-0 feature-icon rounded-md p-3">110 <i data-feather="box" class="h-6 w-6 text-gray-600"></i>111 </div>112 <h2 class="mt-6 text-2xl font-bold text-gray-900">Functional Gray Model</h2>113 <p class="mt-4 text-gray-600">114 Simple, color-coded 3D visualization that prioritizes function over form.115 </p>116 <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-8">117 <div>118 <h4 class="text-lg font-medium text-gray-900">Performance Visualization</h4>119 <ul class="mt-4 space-y-2">120 <li class="flex items-center">121 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>122 <span class="ml-3 text-gray-600">HVAC efficiency at a glance</span>123 </li>124 <li class="flex items-center">125 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>126 <span class="ml-3 text-gray-600">Energy consumption tracking</span>127 </li>128 </ul>129 </div>130 <div>131 <h4 class="text-lg font-medium text-gray-900">Maintenance Prioritization</h4>132 <ul class="mt-4 space-y-2">133 <li class="flex items-center">134 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>135 <span class="ml-3 text-gray-600">Color-coded alert system</span>136 </li>137 <li class="flex items-center">138 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>139 <span class="ml-3 text-gray-600">Mobile-optimized viewing</span>140 </li>141 </ul>142 </div>143 </div>144 </div>145 146 <!-- Performance Scoring -->147 <div class="card-hover bg-white p-8 rounded-lg shadow-sm border border-gray-200">148 <div class="flex items-center">149 <div class="flex-shrink-0 feature-icon rounded-md p-3">150 <i data-feather="bar-chart-2" class="h-6 w-6 text-gray-600"></i>151 </div>152 <h2 class="mt-6 text-2xl font-bold text-gray-900">Performance Scoring</h2>153 <p class="mt-4 text-gray-600">154 Complex building data simplified into a single, actionable score you can track from anywhere.155 </p>156 <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-8">157 <div>158 <h4 class="text-lg font-medium text-gray-900">At-a-Glance Building Health</h4>159 <ul class="mt-4 space-y-2">160 <li class="flex items-center">161 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>162 <span class="ml-3 text-gray-600">Overall building performance score</span>163 </li>164 <li class="flex items-center">165 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>166 <span class="ml-3 text-gray-600">System-specific scoring (HVAC, lighting, etc.)</span>167 </li>168 </ul>169 </div>170 <div>171 <h4 class="text-lg font-medium text-gray-900">Trend Analysis</h4>172 <ul class="mt-4 space-y-2">173 <li class="flex items-center">174 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>175 <span class="ml-3 text-gray-600">Historical performance tracking</span>176 </li>177 <li class="flex items-center">178 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>179 <span class="ml-3 text-gray-600">Maintenance recommendation engine</span>180 </li>181 </ul>182 </div>183 </div>184 </div>185 186 <!-- Unified Data Platform -->187 <div class="card-hover bg-white p-8 rounded-lg shadow-sm border border-gray-200">188 <div class="flex items-center">189 <div class="flex-shrink-0 feature-icon rounded-md p-3">190 <i data-feather="database" class="h-6 w-6 text-gray-600"></i>191 </div>192 <h2 class="mt-6 text-2xl font-bold text-gray-900">Unified Data Platform</h2>193 <p class="mt-4 text-gray-600">194 Break down data silos and unify operations, maintenance, and project data.195 </p>196 <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-8">197 <div>198 <h4 class="text-lg font-medium text-gray-900">Cross-Functional Integration</h4>199 <ul class="mt-4 space-y-2">200 <li class="flex items-center">201 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>202 <span class="ml-3 text-gray-600">Operations data unification</span>203 </li>204 <li class="flex items-center">205 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>206 <span class="ml-3 text-gray-600">Maintenance workflow integration</span>207 </li>208 </ul>209 </div>210 <div>211 <h4 class="text-lg font-medium text-gray-900">Seamless Project Handoff</h4>212 <ul class="mt-4 space-y-2">213 <li class="flex items-center">214 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>215 <span class="ml-3 text-gray-600">Construction to operations transition</span>216 </li>217 <li class="flex items-center">218 <i data-feather="check" class="h-4 w-4 text-gray-600"></i>219 <span class="ml-3 text-gray-600">AEC collaboration tools</span>220 </li>221 </ul>222 </div>223 </div>224 </div>225 </div>226 </div>227 228 <!-- CTA Section -->229 <div class="bg-gray-600">230 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-16">231 <div class="text-center">232 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">233 Ready to See It in Action?234 </h2>235 <p class="mt-4 max-w-2xl mx-auto text-lg text-gray-300">236 Schedule a personalized demo to see how our platform can transform your building operations.237 </p>238 <div class="mt-8">239 <a href="demo.html" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">240 Request Your Demo241 </a>242 </div>243 </div>244 </div>245 </div>246 247 <!-- Footer -->248 <footer class="bg-gray-800">249 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">250 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">251 <div>252 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Platform</h3>253 <ul class="mt-4 space-y-4">254 <li><a href="features.html" class="text-base text-gray-300 hover:text-white">Features</a></li>255 <li><a href="solutions.html" class="text-base text-gray-300 hover:text-white">Solutions</a></li>256 <li><a href="pricing.html" class="text-base text-gray-300 hover:text-white">Pricing</a></li>257 </ul>258 </div>259 <div>260 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>261 <ul class="mt-4 space-y-4">262 <li><a href="case-studies.html" class="text-base text-gray-300 hover:text-white">Case Studies</a></li>263 <li><a href="blog.html" class="text-base text-gray-300 hover:text-white">Blog</a></li>264 <li><a href="support.html" class="text-base text-gray-300 hover:text-white">Support</a></li>265 </ul>266 </div>267 <div>268 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>269 <ul class="mt-4 space-y-4">270 <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About</a></li>271 <li><a href="careers.html" class="text-base text-gray-300 hover:text-white">Careers</a></li>272 <li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact</a></li>273 </ul>274 </div>275 <div>276 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>277 <ul class="mt-4 space-y-4">278 <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>279 <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>280 </ul>281 </div>282 </div>283 <div class="mt-12 border-t border-gray-700 pt-8">284 <p class="text-base text-gray-400 text-center">285 © 2024 FacilityFlow. All rights reserved.286 </p>287 </div>288 </div>289 </footer>290 291 <script>292 feather.replace();293 </script>294</body>295</html>