5TECH/five-node-tech-hub
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>IOT Services - FIVE NODE TECH</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://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');13 14 html {15 scroll-behavior: smooth;16 }17 18 body {19 font-family: 'Inter', sans-serif;20 }21 22 .iot-hero {23 background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%), 24 url('http://static.photos/technology/1200x630/7') center/cover no-repeat;25 }26 27 .dark-mode {28 background-color: #0f172a;29 color: #f8fafc;30 }31 32 .light-mode {33 background-color: #f8fafc;34 color: #1e293b;35 }36 37 .iot-card:hover {38 transform: translateY(-10px);39 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);40 }41 42 .nav-link {43 position: relative;44 }45 46 .nav-link:after {47 content: '';48 position: absolute;49 width: 0;50 height: 2px;51 bottom: -2px;52 left: 0;53 background-color: currentColor;54 transition: width 0.3s ease;55 }56 57 .nav-link:hover:after {58 width: 100%;59 }60 </style>61</head>62<body class="light-mode">63 <!-- Navigation -->64 <nav class="fixed w-full z-50 bg-white/90 dark:bg-dark/90 backdrop-blur-md shadow-sm">65 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">66 <div class="flex justify-between h-16 items-center">67 <div class="flex-shrink-0 flex items-center">68 <a href="index.html" class="text-primary text-2xl font-bold">FIVE NODE TECH</a>69 </div>70 <div class="hidden md:block">71 <div class="ml-10 flex items-center space-x-8">72 <a href="index.html" class="nav-link text-gray-600 dark:text-gray-300 font-medium">Home</a>73 <a href="about.html" class="nav-link text-gray-600 dark:text-gray-300 font-medium">About</a>74 <a href="services.html" class="nav-link text-gray-600 dark:text-gray-300 font-medium">Services</a>75 <a href="iot.html" class="nav-link text-dark dark:text-light font-medium">IOT Services</a>76 <a href="contact.html" class="nav-link text-gray-600 dark:text-gray-300 font-medium">Contact</a>77 <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">78 <i data-feather="moon" class="dark:hidden"></i>79 <i data-feather="sun" class="hidden dark:inline"></i>80 </button>81 </div>82 </div>83 <div class="-mr-2 flex md:hidden">84 <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-dark dark:text-light hover:text-primary focus:outline-none">85 <i data-feather="menu"></i>86 </button>87 </div>88 </div>89 </div>90 <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark shadow-lg">91 <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">92 <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">Home</a>93 <a href="about.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">About</a>94 <a href="services.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">Services</a>95 <a href="iot.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">IOT Services</a>96 <a href="contact.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">Contact</a>97 <button id="mobile-theme-toggle" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">98 Toggle Theme99 </button>100 </div>101 </div>102 </nav>103 104 <!-- Hero Section -->105 <section class="iot-hero text-white pt-32 pb-20">106 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">107 <h1 class="text-4xl md:text-5xl font-bold mb-6">Internet of Things Solutions</h1>108 <p class="text-xl mb-8 max-w-3xl mx-auto">Transform your business with our cutting-edge IoT solutions that connect devices, collect data, and drive intelligent decisions.</p>109 <a href="#contact" class="inline-block bg-white text-primary px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Get Started</a>110 </div>111 </section>112 113 <!-- IoT Solutions Section -->114 <section class="py-20">115 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">116 <div class="text-center mb-16">117 <h2 class="text-3xl md:text-4xl font-bold text-dark dark:text-light mb-4">Our IoT Services</h2>118 <div class="w-20 h-1 bg-primary mx-auto"></div>119 </div>120 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">121 <!-- IoT Service 1 -->122 <div class="iot-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition duration-500 transform">123 <div class="bg-primary/10 p-4 rounded-lg inline-block mb-6">124 <i data-feather="cpu" class="text-primary w-8 h-8"></i>125 </div>126 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">Smart Device Integration</h3>127 <p class="text-gray-600 dark:text-gray-300">Connect and manage your IoT devices seamlessly with our integration platform that supports multiple protocols and standards.</p>128 </div>129 130 <!-- IoT Service 2 -->131 <div class="iot-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition duration-500 transform">132 <div class="bg-secondary/10 p-4 rounded-lg inline-block mb-6">133 <i data-feather="database" class="text-secondary w-8 h-8"></i>134 </div>135 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">Data Analytics</h3>136 <p class="text-gray-600 dark:text-gray-300">Turn IoT-generated data into actionable insights with our powerful analytics and visualization tools.</p>137 </div>138 139 <!-- IoT Service 3 -->140 <div class="iot-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition duration-500 transform">141 <div class="bg-accent/10 p-4 rounded-lg inline-block mb-6">142 <i data-feather="shield" class="text-accent w-8 h-8"></i>143 </div>144 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">IoT Security</h3>145 <p class="text-gray-600 dark:text-gray-300">Protect your IoT ecosystem with our end-to-end security solutions including device authentication and data encryption.</p>146 </div>147 148 <!-- IoT Service 4 -->149 <div class="iot-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition duration-500 transform">150 <div class="bg-primary/10 p-4 rounded-lg inline-block mb-6">151 <i data-feather="cloud" class="text-primary w-8 h-8"></i>152 </div>153 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">Cloud Platform</h3>154 <p class="text-gray-600 dark:text-gray-300">Scalable cloud infrastructure to process, store and manage your IoT data with high availability.</p>155 </div>156 157 <!-- IoT Service 5 -->158 <div class="iot-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition duration-500 transform">159 <div class="bg-secondary/10 p-4 rounded-lg inline-block mb-6">160 <i data-feather="activity" class="text-secondary w-8 h-8"></i>161 </div>162 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">Predictive Maintenance</h3>163 <p class="text-gray-600 dark:text-gray-300">Leverage machine learning to predict equipment failures and optimize maintenance schedules.</p>164 </div>165 166 <!-- IoT Service 6 -->167 <div class="iot-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition duration-500 transform">168 <div class="bg-accent/10 p-4 rounded-lg inline-block mb-6">169 <i data-feather="zap" class="text-accent w-8 h-8"></i>170 </div>171 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">Energy Monitoring</h3>172 <p class="text-gray-600 dark:text-gray-300">Real-time energy consumption tracking and optimization for smart buildings and industrial applications.</p>173 </div>174 </div>175 </div>176 </section>177 178 <!-- Case Studies Section -->179 <section class="py-20 bg-gray-50 dark:bg-gray-900">180 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">181 <div class="text-center mb-16">182 <h2 class="text-3xl md:text-4xl font-bold text-dark dark:text-light mb-4">IoT Case Studies</h2>183 <div class="w-20 h-1 bg-primary mx-auto"></div>184 </div>185 <div class="grid md:grid-cols-2 gap-8">186 <!-- Case Study 1 -->187 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">188 <img src="http://static.photos/industry/640x360/1" alt="Smart Factory" class="w-full h-48 object-cover">189 <div class="p-6">190 <h3 class="text-xl font-bold text-dark dark:text-light mb-2">Smart Factory Implementation</h3>191 <p class="text-gray-600 dark:text-gray-300 mb-4">Reduced equipment downtime by 40% and increased production efficiency through IoT-enabled predictive maintenance.</p>192 <a href="#" class="text-primary font-medium hover:text-primary/80 transition">Read Case Study →</a>193 </div>194 </div>195 196 <!-- Case Study 2 -->197 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">198 <img src="http://static.photos/cityscape/640x360/2" alt="Smart City" class="w-full h-48 object-cover">199 <div class="p-6">200 <h3 class="text-xl font-bold text-dark dark:text-light mb-2">Smart City Infrastructure</h3>201 <p class="text-gray-600 dark:text-gray-300 mb-4">Deployed IoT sensors across the city to optimize traffic flow, reduce energy consumption, and improve public services.</p>202 <a href="#" class="text-primary font-medium hover:text-primary/80 transition">Read Case Study →</a>203 </div>204 </div>205 </div>206 </div>207 </section>208 209 <!-- CTA Section -->210 <section class="py-16 bg-gradient-to-r from-primary to-secondary text-white">211 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">212 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Connect Your World?</h2>213 <p class="text-xl mb-8 max-w-3xl mx-auto">Our IoT experts are ready to help you design and implement the perfect IoT solution for your business.</p>214 <a href="contact.html" class="inline-block bg-white text-primary px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Contact Us</a>215 </div>216 </section>217 218 <!-- Footer -->219 <footer class="bg-dark text-white py-12">220 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">221 <div class="md:flex md:justify-between">222 <div class="mb-8 md:mb-0">223 <h3 class="text-2xl font-bold mb-4">FIVE NODE TECH</h3>224 <p class="text-gray-400 max-w-md">Innovative technology solutions to help your business thrive in the digital era.</p>225 </div>226 <div class="grid grid-cols-2 md:grid-cols-3 gap-8">227 <div>228 <h4 class="text-lg font-semibold mb-4">Quick Links</h4>229 <ul class="space-y-2">230 <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>231 <li><a href="about.html" class="text-gray-400 hover:text-white transition">About</a></li>232 <li><a href="services.html" class="text-gray-400 hover:text-white transition">Services</a></li>233 <li><a href="iot.html" class="text-gray-400 hover:text-white transition">IOT Services</a></li>234 <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>235 </ul>236 </div>237 <div>238 <h4 class="text-lg font-semibold mb-4">Services</h4>239 <ul class="space-y-2">240 <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li>241 <li><a href="#" class="text-gray-400 hover:text-white transition">Mobile Apps</a></li>242 <li><a href="#" class="text-gray-400 hover:text-white transition">Cloud Solutions</a></li>243 <li><a href="#" class="text-gray-400 hover:text-white transition">IoT Services</a></li>244 </ul>245 </div>246 <div>247 <h4 class="text-lg font-semibold mb-4">Connect</h4>248 <div class="flex space-x-4">249 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>250 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>251 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>252 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>253 </div>254 </div>255 </div>256 </div>257 <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">258 <p class="text-gray-400">© 2023 FIVE NODE TECH. All rights reserved.</p>259 <div class="flex space-x-6 mt-4 md:mt-0">260 <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>261 <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>262 </div>263 </div>264 </div>265 </footer>266 267 <script>268 // Mobile menu toggle269 const mobileMenuButton = document.getElementById('mobile-menu-button');270 const mobileMenu = document.getElementById('mobile-menu');271 272 mobileMenuButton.addEventListener('click', () => {273 mobileMenu.classList.toggle('hidden');274 const icon = mobileMenuButton.querySelector('i');275 if (mobileMenu.classList.contains('hidden')) {276 feather.replace();277 } else {278 icon.setAttribute('data-feather', 'x');279 feather.replace();280 }281 });282 283 // Theme toggle284 const themeToggle = document.getElementById('theme-toggle');285 const mobileThemeToggle = document.getElementById('mobile-theme-toggle');286 const body = document.body;287 288 // Check for saved theme preference or use preferred color scheme289 if (localStorage.getItem('theme') === 'dark' || 290 (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {291 body.classList.add('dark-mode');292 body.classList.remove('light-mode');293 } else {294 body.classList.add('light-mode');295 body.classList.remove('dark-mode');296 }297 298 themeToggle.addEventListener('click', () => {299 toggleTheme();300 });301 302 mobileThemeToggle.addEventListener('click', () => {303 toggleTheme();304 mobileMenu.classList.add('hidden');305 feather.replace();306 });307 308 function toggleTheme() {309 if (body.classList.contains('dark-mode')) {310 body.classList.remove('dark-mode');311 body.classList.add('light-mode');312 localStorage.setItem('theme', 'light');313 } else {314 body.classList.remove('light-mode');315 body.classList.add('dark-mode');316 localStorage.setItem('theme', 'dark');317 }318 feather.replace();319 }320 321 // Initialize feather icons322 feather.replace();323 </script>324</body>325</html>