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>Our Projects - 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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');12 13 body {14 font-family: 'Poppins', sans-serif;15 scroll-behavior: smooth;16 }17 18 .nav-link {19 position: relative;20 }21 22 .nav-link:after {23 content: '';24 position: absolute;25 width: 0;26 height: 2px;27 bottom: -2px;28 left: 0;29 background-color: #3b82f6;30 transition: width 0.3s ease;31 }32 33 .nav-link:hover:after {34 width: 100%;35 }36 37 .project-card:hover {38 transform: translateY(-5px);39 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);40 }41 </style>42</head>43<body class="bg-gray-50">44 <!-- Navigation -->45 <nav class="fixed w-full z-50 bg-white shadow-sm">46 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">47 <div class="flex justify-between h-20 items-center">48 <div class="flex-shrink-0 flex items-center">49 <a href="index.html" class="text-blue-500 text-2xl font-bold flex items-center">50 <i data-feather="cpu" class="mr-2"></i>51 FIVE NODE TECH52 </a>53 </div>54 <div class="hidden md:block">55 <div class="ml-10 flex items-center space-x-8">56 <a href="index.html" class="nav-link text-gray-600 font-medium">Home</a>57 <a href="services.html" class="nav-link text-gray-600 font-medium">Services</a>58 <a href="projects.html" class="nav-link text-blue-500 font-medium">Projects</a>59 <a href="components.html" class="nav-link text-gray-600 font-medium">Components</a>60 <a href="contact.html" class="nav-link text-gray-600 font-medium">Contact</a>61 <a href="payment.html" class="flex items-center text-blue-500 font-medium">62 <i data-feather="shopping-cart" class="mr-1"></i>63 Cart64 </a>65 </div>66 </div>67 <div class="-mr-2 flex md:hidden">68 <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-blue-500 focus:outline-none">69 <i data-feather="menu"></i>70 </button>71 </div>72 </div>73 </div>74 <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">75 <div class="px-2 pt-2 pb-3 space-y-2 sm:px-3">76 <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-100">Home</a>77 <a href="services.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-100">Services</a>78 <a href="projects.html" class="block px-3 py-2 rounded-md text-base font-medium text-blue-500 hover:bg-gray-100">Projects</a>79 <a href="components.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-100">Components</a>80 <a href="contact.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-100">Contact</a>81 <a href="payment.html" class="block px-3 py-2 rounded-md text-base font-medium text-blue-500 hover:bg-gray-100 flex items-center">82 <i data-feather="shopping-cart" class="mr-2"></i>83 Cart84 </a>85 </div>86 </div>87 </nav>88 89 <!-- Hero Section -->90 <section class="pt-32 pb-20 bg-gradient-to-r from-blue-500 to-blue-600 text-white">91 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">92 <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Projects</h1>93 <p class="text-xl max-w-3xl mx-auto">See what we've built with Arduino, ESP32 and other microcontrollers.</p>94 </div>95 </section>96 97 <!-- Projects Section -->98 <section class="py-20">99 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">100 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">101 <!-- Project 1 -->102 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">103 <div class="h-48 bg-gray-300 overflow-hidden">104 <img src="http://static.photos/technology/640x360/4" alt="Smart Farm" class="w-full h-full object-cover">105 </div>106 <div class="p-6">107 <h3 class="text-xl font-bold text-gray-800 mb-2">Smart Farm Monitoring</h3>108 <p class="text-gray-600 mb-4">IoT solution for monitoring soil moisture, temperature and humidity in agricultural fields.</p>109 <div class="flex items-center text-sm text-gray-500">110 <i data-feather="cpu" class="mr-1 w-4 h-4"></i>111 <span class="mr-4">ESP32</span>112 <i data-feather="wifi" class="mr-1 w-4 h-4"></i>113 <span>LoRaWAN</span>114 </div>115 <a href="#project1" class="text-blue-500 font-medium flex items-center mt-4">116 View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>117 </a>118 </div>119 </div>120 121 <!-- Project 2 -->122 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">123 <div class="h-48 bg-gray-300 overflow-hidden">124 <img src="http://static.photos/technology/640x360/5" alt="Energy Monitor" class="w-full h-full object-cover">125 </div>126 <div class="p-6">127 <h3 class="text-xl font-bold text-gray-800 mb-2">Energy Monitoring System</h3>128 <p class="text-gray-600 mb-4">Real-time monitoring of electricity consumption with cloud dashboard.</p>129 <div class="flex items-center text-sm text-gray-500">130 <i data-feather="cpu" class="mr-1 w-4 h-4"></i>131 <span class="mr-4">NodeMCU</span>132 <i data-feather="zap" class="mr-1 w-4 h-4"></i>133 <span>Power Meter</span>134 </div>135 <a href="#project2" class="text-blue-500 font-medium flex items-center mt-4">136 View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>137 </a>138 </div>139 </div>140 141 <!-- Project 3 -->142 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">143 <div class="h-48 bg-gray-300 overflow-hidden">144 <img src="http://static.photos/technology/640x360/6" alt="Industrial Controller" class="w-full h-full object-cover">145 </div>146 <div class="p-6">147 <h3 class="text-xl font-bold text-gray-800 mb-2">Industrial Controller</h3>148 <p class="text-gray-600 mb-4">Custom PCB design for industrial automation with Modbus communication.</p>149 <div class="flex items-center text-sm text-gray-500">150 <i data-feather="cpu" class="mr-1 w-4 h-4"></i>151 <span class="mr-4">Arduino</span>152 <i data-feather="layout" class="mr-1 w-4 h-4"></i>153 <span>Custom PCB</span>154 </div>155 <a href="#project3" class="text-blue-500 font-medium flex items-center mt-4">156 View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>157 </a>158 </div>159 </div>160 161 <!-- Project 4 -->162 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">163 <div class="h-48 bg-gray-300 overflow-hidden">164 <img src="http://static.photos/technology/640x360/7" alt="Smart Parking" class="w-full h-full object-cover">165 </div>166 <div class="p-6">167 <h3 class="text-xl font-bold text-gray-800 mb-2">Smart Parking System</h3>168 <p class="text-gray-600 mb-4">Ultrasonic sensor-based parking spot detection with mobile app.</p>169 <div class="flex items-center text-sm text-gray-500">170 <i data-feather="cpu" class="mr-1 w-4 h-4"></i>171 <span class="mr-4">ESP32</span>172 <i data-feather="smartphone" class="mr-1 w-4 h-4"></i>173 <span>Mobile App</span>174 </div>175 <a href="#project4" class="text-blue-500 font-medium flex items-center mt-4">176 View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>177 </a>178 </div>179 </div>180 181 <!-- Project 5 -->182 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">183 <div class="h-48 bg-gray-300 overflow-hidden">184 <img src="http://static.photos/technology/640x360/8" alt="Water Quality" class="w-full h-full object-cover">185 </div>186 <div class="p-6">187 <h3 class="text-xl font-bold text-gray-800 mb-2">Water Quality Monitor</h3>188 <p class="text-gray-600 mb-4">IoT device for monitoring pH, turbidity and temperature of water.</p>189 <div class="flex items-center text-sm text-gray-500">190 <i data-feather="cpu" class="mr-1 w-4 h-4"></i>191 <span class="mr-4">Arduino</span>192 <i data-feather="droplet" class="mr-1 w-4 h-4"></i>193 <span>Sensors</span>194 </div>195 <a href="#project5" class="text-blue-500 font-medium flex items-center mt-4">196 View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>197 </a>198 </div>199 </div>200 201 <!-- Project 6 -->202 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">203 <div class="h-48 bg-gray-300 overflow-hidden">204 <img src="http://static.photos/technology/640x360/9" alt="Home Automation" class="w-full h-full object-cover">205 </div>206 <div class="p-6">207 <h3 class="text-xl font-bold text-gray-800 mb-2">Home Automation Hub</h3>208 <p class="text-gray-600 mb-4">Central control for smart home devices with voice assistant integration.</p>209 <div class="flex items-center text-sm text-gray-500">210 <i data-feather="cpu" class="mr-1 w-4 h-4"></i>211 <span class="mr-4">Raspberry Pi</span>212 <i data-feather="home" class="mr-1 w-4 h-4"></i>213 <span>Automation</span>214 </div>215 <a href="#project6" class="text-blue-500 font-medium flex items-center mt-4">216 View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>217 </a>218 </div>219 </div>220 </div>221 </div>222 </section>223 224 <!-- Footer -->225 <footer class="bg-gray-800 text-white py-12">226 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">227 <div class="md:flex md:justify-between">228 <div class="mb-8 md:mb-0">229 <a href="index.html" class="text-blue-400 text-2xl font-bold flex items-center">230 <i data-feather="cpu" class="mr-2"></i>231 FIVE NODE TECH232 </a>233 <p class="text-gray-400 mt-4 max-w-md">Professional Arduino, ESP32 and microcontroller solutions.</p>234 </div>235 <div class="grid grid-cols-2 md:grid-cols-3 gap-8">236 <div>237 <h4 class="text-lg font-semibold mb-4">Quick Links</h4>238 <ul class="space-y-2">239 <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>240 <li><a href="services.html" class="text-gray-400 hover:text-white transition">Services</a></li>241 <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>242 <li><a href="components.html" class="text-gray-400 hover:text-white transition">Components</a></li>243 <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>244 </ul>245 </div>246 <div>247 <h4 class="text-lg font-semibold mb-4">Services</h4>248 <ul class="space-y-2">249 <li><a href="services.html#iot" class="text-gray-400 hover:text-white transition">IoT Solutions</a></li>250 <li><a href="services.html#pcb" class="text-gray-400 hover:text-white transition">PCB Layout</a></li>251 <li><a href="services.html#dashboard" class="text-gray-400 hover:text-white transition">Dashboard</a></li>252 <li><a href="services.html#programming" class="text-gray-400 hover:text-white transition">Programming</a></li>253 </ul>254 </div>255 <div>256 <h4 class="text-lg font-semibold mb-4">Connect</h4>257 <div class="flex space-x-4">258 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>259 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>260 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>261 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>262 </div>263 </div>264 </div>265 </div>266 <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">267 <p class="text-gray-400">© 2023 FIVE NODE TECH. All rights reserved.</p>268 <div class="flex space-x-6 mt-4 md:mt-0">269 <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>270 <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>271 </div>272 </div>273 </div>274 </footer>275 276 <script>277 // Mobile menu toggle278 const mobileMenuButton = document.getElementById('mobile-menu-button');279 const mobileMenu = document.getElementById('mobile-menu');280 281 mobileMenuButton.addEventListener('click', () => {282 mobileMenu.classList.toggle('hidden');283 const icon = mobileMenuButton.querySelector('i');284 if (mobileMenu.classList.contains('hidden')) {285 feather.replace();286 } else {287 icon.setAttribute('data-feather', 'x');288 feather.replace();289 }290 });291 292 // Initialize feather icons293 feather.replace();294 </script>295</body>296</html>