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>FIVE NODE TECH - Arduino & ESP Solutions</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 .service-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-gray-600 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-gray-600 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">Arduino & ESP Solutions</h1>93 <p class="text-xl max-w-3xl mx-auto">Professional services for Arduino, ESP32, NodeMCU and other microcontroller projects</p>94 <div class="mt-8">95 <a href="services.html" class="inline-block bg-white text-blue-500 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300 mr-4">Our Services</a>96 <a href="contact.html" class="inline-block bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-500 transition duration-300">Contact Us</a>97 </div>98 </div>99 </section>100 101 <!-- Services Section -->102 <section class="py-20">103 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">104 <div class="text-center mb-16">105 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Services</h2>106 <div class="w-20 h-1 bg-blue-500 mx-auto"></div>107 </div>108 109 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">110 <!-- Service 1 -->111 <div class="service-card bg-white p-6 rounded-xl shadow-md transition duration-300">112 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">113 <i data-feather="wifi" class="text-blue-500 w-6 h-6"></i>114 </div>115 <h3 class="text-xl font-bold text-gray-800 mb-4">IoT Solutions</h3>116 <p class="text-gray-600 mb-6">Custom IoT implementations using ESP32, NodeMCU and other platforms.</p>117 <a href="services.html#iot" class="text-blue-500 font-medium flex items-center">118 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>119 </a>120 </div>121 122 <!-- Service 2 -->123 <div class="service-card bg-white p-6 rounded-xl shadow-md transition duration-300">124 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">125 <i data-feather="layout" class="text-blue-500 w-6 h-6"></i>126 </div>127 <h3 class="text-xl font-bold text-gray-800 mb-4">PCB Layout</h3>128 <p class="text-gray-600 mb-6">Professional PCB design and prototyping services.</p>129 <a href="services.html#pcb" class="text-blue-500 font-medium flex items-center">130 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>131 </a>132 </div>133 134 <!-- Service 3 -->135 <div class="service-card bg-white p-6 rounded-xl shadow-md transition duration-300">136 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">137 <i data-feather="monitor" class="text-blue-500 w-6 h-6"></i>138 </div>139 <h3 class="text-xl font-bold text-gray-800 mb-4">Dashboard</h3>140 <p class="text-gray-600 mb-6">Real-time monitoring dashboards for your IoT projects.</p>141 <a href="services.html#dashboard" class="text-blue-500 font-medium flex items-center">142 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>143 </a>144 </div>145 146 <!-- Service 4 -->147 <div class="service-card bg-white p-6 rounded-xl shadow-md transition duration-300">148 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">149 <i data-feather="code" class="text-blue-500 w-6 h-6"></i>150 </div>151 <h3 class="text-xl font-bold text-gray-800 mb-4">Programming</h3>152 <p class="text-gray-600 mb-6">Custom programming for Arduino, ESP32, and NodeMCU.</p>153 <a href="services.html#programming" class="text-blue-500 font-medium flex items-center">154 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>155 </a>156 </div>157 </div>158 159 <div class="text-center mt-12">160 <a href="services.html" class="inline-block bg-blue-500 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-600 transition duration-300">View All Services</a>161 </div>162 </div>163 </section>164 165 <!-- Projects Section -->166 <section class="py-20 bg-gray-100">167 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">168 <div class="text-center mb-16">169 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Recent Projects</h2>170 <div class="w-20 h-1 bg-blue-500 mx-auto"></div>171 </div>172 173 <div class="grid md:grid-cols-3 gap-8">174 <!-- Project 1 -->175 <div class="bg-white rounded-xl shadow-md overflow-hidden">176 <div class="h-48 bg-gray-300 overflow-hidden">177 <img src="http://static.photos/technology/640x360/1" alt="IoT Project" class="w-full h-full object-cover">178 </div>179 <div class="p-6">180 <h3 class="text-xl font-bold text-gray-800 mb-2">Smart Home System</h3>181 <p class="text-gray-600 mb-4">IoT solution for home automation using ESP32 and NodeMCU.</p>182 <a href="projects.html#project1" class="text-blue-500 font-medium flex items-center">183 View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>184 </a>185 </div>186 </div>187 188 <!-- Project 2 -->189 <div class="bg-white rounded-xl shadow-md overflow-hidden">190 <div class="h-48 bg-gray-300 overflow-hidden">191 <img src="http://static.photos/technology/640x360/2" alt="PCB Project" class="w-full h-full object-cover">192 </div>193 <div class="p-6">194 <h3 class="text-xl font-bold text-gray-800 mb-2">Industrial Controller</h3>195 <p class="text-gray-600 mb-4">Custom PCB design for industrial automation controller.</p>196 <a href="projects.html#project2" class="text-blue-500 font-medium flex items-center">197 View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>198 </a>199 </div>200 </div>201 202 <!-- Project 3 -->203 <div class="bg-white rounded-xl shadow-md overflow-hidden">204 <div class="h-48 bg-gray-300 overflow-hidden">205 <img src="http://static.photos/technology/640x360/3" alt="Dashboard Project" class="w-full h-full object-cover">206 </div>207 <div class="p-6">208 <h3 class="text-xl font-bold text-gray-800 mb-2">Energy Monitoring</h3>209 <p class="text-gray-600 mb-4">Real-time energy monitoring dashboard with Arduino.</p>210 <a href="projects.html#project3" class="text-blue-500 font-medium flex items-center">211 View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>212 </a>213 </div>214 </div>215 </div>216 217 <div class="text-center mt-12">218 <a href="projects.html" class="inline-block bg-blue-500 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-600 transition duration-300">View All Projects</a>219 </div>220 </div>221 </section>222 223 <!-- Components Section -->224 <section class="py-20">225 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">226 <div class="text-center mb-16">227 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Components We Work With</h2>228 <div class="w-20 h-1 bg-blue-500 mx-auto"></div>229 </div>230 231 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6">232 <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center">233 <i data-feather="cpu" class="text-blue-500 w-10 h-10"></i>234 </div>235 <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center">236 <i data-feather="wifi" class="text-blue-500 w-10 h-10"></i>237 </div>238 <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center">239 <i data-feather="zap" class="text-blue-500 w-10 h-10"></i>240 </div>241 <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center">242 <i data-feather="thermometer" class="text-blue-500 w-10 h-10"></i>243 </div>244 <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center">245 <i data-feather="activity" class="text-blue-500 w-10 h-10"></i>246 </div>247 <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center">248 <i data-feather="bluetooth" class="text-blue-500 w-10 h-10"></i>249 </div>250 </div>251 252 <div class="text-center mt-12">253 <a href="components.html" class="inline-block bg-blue-500 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-600 transition duration-300">View All Components</a>254 </div>255 </div>256 </section>257 258 <!-- CTA Section -->259 <section class="py-16 bg-gradient-to-r from-blue-500 to-blue-600 text-white">260 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">261 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Project?</h2>262 <p class="text-xl mb-8 max-w-3xl mx-auto">Let's discuss how we can help with your Arduino, ESP32 or microcontroller needs.</p>263 <a href="contact.html" class="inline-block bg-white text-blue-500 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300 mr-4">Contact Us</a>264 <a href="payment.html" class="inline-block bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-500 transition duration-300">265 <i data-feather="shopping-cart" class="inline mr-2"></i> Order Now266 </a>267 </div>268 </section>269 270 <!-- Footer -->271 <footer class="bg-gray-800 text-white py-12">272 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">273 <div class="md:flex md:justify-between">274 <div class="mb-8 md:mb-0">275 <a href="index.html" class="text-blue-400 text-2xl font-bold flex items-center">276 <i data-feather="cpu" class="mr-2"></i>277 FIVE NODE TECH278 </a>279 <p class="text-gray-400 mt-4 max-w-md">Professional Arduino, ESP32 and microcontroller solutions.</p>280 </div>281 <div class="grid grid-cols-2 md:grid-cols-3 gap-8">282 <div>283 <h4 class="text-lg font-semibold mb-4">Quick Links</h4>284 <ul class="space-y-2">285 <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>286 <li><a href="services.html" class="text-gray-400 hover:text-white transition">Services</a></li>287 <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>288 <li><a href="components.html" class="text-gray-400 hover:text-white transition">Components</a></li>289 <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>290 </ul>291 </div>292 <div>293 <h4 class="text-lg font-semibold mb-4">Services</h4>294 <ul class="space-y-2">295 <li><a href="services.html#iot" class="text-gray-400 hover:text-white transition">IoT Solutions</a></li>296 <li><a href="services.html#pcb" class="text-gray-400 hover:text-white transition">PCB Layout</a></li>297 <li><a href="services.html#dashboard" class="text-gray-400 hover:text-white transition">Dashboard</a></li>298 <li><a href="services.html#programming" class="text-gray-400 hover:text-white transition">Programming</a></li>299 </ul>300 </div>301 <div>302 <h4 class="text-lg font-semibold mb-4">Connect</h4>303 <div class="flex space-x-4">304 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>305 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>306 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>307 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>308 </div>309 </div>310 </div>311 </div>312 <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">313 <p class="text-gray-400">© 2023 FIVE NODE TECH. All rights reserved.</p>314 <div class="flex space-x-6 mt-4 md:mt-0">315 <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>316 <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>317 </div>318 </div>319 </div>320 </footer>321 322 <script>323 // Mobile menu toggle324 const mobileMenuButton = document.getElementById('mobile-menu-button');325 const mobileMenu = document.getElementById('mobile-menu');326 327 mobileMenuButton.addEventListener('click', () => {328 mobileMenu.classList.toggle('hidden');329 const icon = mobileMenuButton.querySelector('i');330 if (mobileMenu.classList.contains('hidden')) {331 feather.replace();332 } else {333 icon.setAttribute('data-feather', 'x');334 feather.replace();335 }336 });337 338 // Initialize feather icons339 feather.replace();340 </script>341</body>342</html>