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>Components - 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 .component-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-blue-500 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-blue-500 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">Components We Use</h1>93 <p class="text-xl max-w-3xl mx-auto">High-quality electronic components for your microcontroller projects.</p>94 </div>95 </section>96 97 <!-- Components 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-4 gap-6">101 <!-- Microcontrollers -->102 <div class="component-card bg-white p-6 rounded-xl shadow-md transition duration-300">103 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">104 <i data-feather="cpu" class="text-blue-500 w-6 h-6"></i>105 </div>106 <h3 class="text-xl font-bold text-gray-800 mb-4">Microcontrollers</h3>107 <ul class="space-y-3 text-gray-600">108 <li class="flex items-center">109 <i data-feather="check" class="text-blue-500 mr-2"></i>110 <span>Arduino Uno/Nano</span>111 </li>112 <li class="flex items-center">113 <i data-feather="check" class="text-blue-500 mr-2"></i>114 <span>ESP32</span>115 </li>116 <li class="flex items-center">117 <i data-feather="check" class="text-blue-500 mr-2"></i>118 <span>NodeMCU (ESP8266)</span>119 </li>120 <li class="flex items-center">121 <i data-feather="check" class="text-blue-500 mr-2"></i>122 <span>Raspberry Pi Pico</span>123 </li>124 </ul>125 </div>126 127 <!-- Sensors -->128 <div class="component-card bg-white p-6 rounded-xl shadow-md transition duration-300">129 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">130 <i data-feather="thermometer" class="text-blue-500 w-6 h-6"></i>131 </div>132 <h3 class="text-xl font-bold text-gray-800 mb-4">Sensors</h3>133 <ul class="space-y-3 text-gray-600">134 <li class="flex items-center">135 <i data-feather="check" class="text-blue-500 mr-2"></i>136 <span>DHT11/DHT22</span>137 </li>138 <li class="flex items-center">139 <i data-feather="check" class="text-blue-500 mr-2"></i>140 <span>HC-SR04 Ultrasonic</span>141 </li>142 <li class="flex items-center">143 <i data-feather="check" class="text-blue-500 mr-2"></i>144 <span>MQ Gas Sensors</span>145 </li>146 <li class="flex items-center">147 <i data-feather="check" class="text-blue-500 mr-2"></i>148 <span>Soil Moisture</span>149 </li>150 </ul>151 </div>152 153 <!-- Communication -->154 <div class="component-card bg-white p-6 rounded-xl shadow-md transition duration-300">155 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">156 <i data-feather="wifi" class="text-blue-500 w-6 h-6"></i>157 </div>158 <h3 class="text-xl font-bold text-gray-800 mb-4">Communication</h3>159 <ul class="space-y-3 text-gray-600">160 <li class="flex items-center">161 <i data-feather="check" class="text-blue-500 mr-2"></i>162 <span>ESP-01 WiFi</span>163 </li>164 <li class="flex items-center">165 <i data-feather="check" class="text-blue-500 mr-2"></i>166 <span>HC-05 Bluetooth</span>167 </li>168 <li class="flex items-center">169 <i data-feather="check" class="text-blue-500 mr-2"></i>170 <span>SIM800L GSM</span>171 </li>172 <li class="flex items-center">173 <i data-feather="check" class="text-blue-500 mr-2"></i>174 <span>LoRa Modules</span>175 </li>176 </ul>177 </div>178 179 <!-- Displays -->180 <div class="component-card bg-white p-6 rounded-xl shadow-md transition duration-300">181 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">182 <i data-feather="monitor" class="text-blue-500 w-6 h-6"></i>183 </div>184 <h3 class="text-xl font-bold text-gray-800 mb-4">Displays</h3>185 <ul class="space-y-3 text-gray-600">186 <li class="flex items-center">187 <i data-feather="check" class="text-blue-500 mr-2"></i>188 <span>OLED 0.96"</span>189 </li>190 <li class="flex items-center">191 <i data-feather="check" class="text-blue-500 mr-2"></i>192 <span>LCD 16x2</span>193 </li>194 <li class="flex items-center">195 <i data-feather="check" class="text-blue-500 mr-2"></i>196 <span>TFT Displays</span>197 </li>198 <li class="flex items-center">199 <i data-feather="check" class="text-blue-500 mr-2"></i>200 <span>LED Matrix</span>201 </li>202 </ul>203 </div>204 205 <!-- Power -->206 <div class="component-card bg-white p-6 rounded-xl shadow-md transition duration-300">207 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">208 <i data-feather="zap" class="text-blue-500 w-6 h-6"></i>209 </div>210 <h3 class="text-xl font-bold text-gray-800 mb-4">Power</h3>211 <ul class="space-y-3 text-gray-600">212 <li class="flex items-center">213 <i data-feather="check" class="text-blue-500 mr-2"></i>214 <span>18650 Batteries</span>215 </li>216 <li class="flex items-center">217 <i data-feather="check" class="text-blue-500 mr-2"></i>218 <span>TP4056 Chargers</span>219 </li>220 <li class="flex items-center">221 <i data-feather="check" class="text-blue-500 mr-2"></i>222 <span>Voltage Regulators</span>223 </li>224 <li class="flex items-center">225 <i data-feather="check" class="text-blue-500 mr-2"></i>226 <span>Solar Chargers</span>227 </li>228 </ul>229 </div>230 231 <!-- Actuators -->232 <div class="component-card bg-white p-6 rounded-xl shadow-md transition duration-300">233 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">234 <i data-feather="settings" class="text-blue-500 w-6 h-6"></i>235 </div>236 <h3 class="text-xl font-bold text-gray-800 mb-4">Actuators</h3>237 <ul class="space-y-3 text-gray-600">238 <li class="flex items-center">239 <i data-feather="check" class="text-blue-500 mr-2"></i>240 <span>Servo Motors</span>241 </li>242 <li class="flex items-center">243 <i data-feather="check" class="text-blue-500 mr-2"></i>244 <span>DC Motors</span>245 </li>246 <li class="flex items-center">247 <i data-feather="check" class="text-blue-500 mr-2"></i>248 <span>Relay Modules</span>249 </li>250 <li class="flex items-center">251 <i data-feather="check" class="text-blue-500 mr-2"></i>252 <span>Solenoids</span>253 </li>254 </ul>255 </div>256 257 <!-- Modules -->258 <div class="component-card bg-white p-6 rounded-xl shadow-md transition duration-300">259 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">260 <i data-feather="box" class="text-blue-500 w-6 h-6"></i>261 </div>262 <h3 class="text-xl font-bold text-gray-800 mb-4">Modules</h3>263 <ul class="space-y-3 text-gray-600">264 <li class="flex items-center">265 <i data-feather="check" class="text-blue-500 mr-2"></i>266 <span>RFID Readers</span>267 </li>268 <li class="flex items-center">269 <i data-feather="check" class="text-blue-500 mr-2"></i>270 <span>RTC Modules</span>271 </li>272 <li class="flex items-center">273 <i data-feather="check" class="text-blue-500 mr-2"></i>274 <span>Motor Drivers</span>275 </li>276 <li class="flex items-center">277 <i data-feather="check" class="text-blue-500 mr-2"></i>278 <span>IR Remote Kits</span>279 </li>280 </ul>281 </div>282 283 <!-- Accessories -->284 <div class="component-card bg-white p-6 rounded-xl shadow-md transition duration-300">285 <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6">286 <i data-feather="tool" class="text-blue-500 w-6 h-6"></i>287 </div>288 <h3 class="text-xl font-bold text-gray-800 mb-4">Accessories</h3>289 <ul class="space-y-3 text-gray-600">290 <li class="flex items-center">291 <i data-feather="check" class="text-blue-500 mr-2"></i>292 <span>Breadboards</span>293 </li>294 <li class="flex items-center">295 <i data-feather="check" class="text-blue-500 mr-2"></i>296 <span>Jumper Wires</span>297 </li>298 <li class="flex items-center">299 <i data-feather="check" class="text-blue-500 mr-2"></i>300 <span>Protoboards</span>301 </li>302 <li class="flex items-center">303 <i data-feather="check" class="text-blue-500 mr-2"></i>304 <span>Cases & Enclosures</span>305 </li>306 </ul>307 </div>308 </div>309 </div>310 </section>311 312 <!-- Footer -->313 <footer class="bg-gray-800 text-white py-12">314 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">315 <div class="md:flex md:justify-between">316 <div class="mb-8 md:mb-0">317 <a href="index.html" class="text-blue-400 text-2xl font-bold flex items-center">318 <i data-feather="cpu" class="mr-2"></i>319 FIVE NODE TECH320 </a>321 <p class="text-gray-400 mt-4 max-w-md">Professional Arduino, ESP32 and microcontroller solutions.</p>322 </div>323 <div class="grid grid-cols-2 md:grid-cols-3 gap-8">324 <div>325 <h4 class="text-lg font-semibold mb-4">Quick Links</h4>326 <ul class="space-y-2">327 <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>328 <li><a href="services.html" class="text-gray-400 hover:text-white transition">Services</a></li>329 <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>330 <li><a href="components.html" class="text-gray-400 hover:text-white transition">Components</a></li>331 <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>332 </ul>333 </div>334 <div>335 <h4 class="text-lg font-semibold mb-4">Services</h4>336 <ul class="space-y-2">337 <li><a href="services.html#iot" class="text-gray-400 hover:text-white transition">IoT Solutions</a></li>338 <li><a href="services.html#pcb" class="text-gray-400 hover:text-white transition">PCB Layout</a></li>339 <li><a href="services.html#dashboard" class="text-gray-400 hover:text-white transition">Dashboard</a></li>340 <li><a href="services.html#programming" class="text-gray-400 hover:text-white transition">Programming</a></li>341 </ul>342 </div>343 <div>344 <h4 class="text-lg font-semibold mb-4">Connect</h4>345 <div class="flex space-x-4">346 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>347 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>348 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>349 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>350 </div>351 </div>352 </div>353 </div>354 <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">355 <p class="text-gray-400">© 2023 FIVE NODE TECH. All rights reserved.</p>356 <div class="flex space-x-6 mt-4 md:mt-0">357 <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>358 <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>359 </div>360 </div>361 </div>362 </footer>363 364 <script>365 // Mobile menu toggle366 const mobileMenuButton = document.getElementById('mobile-menu-button');367 const mobileMenu = document.getElementById('mobile-menu');368 369 mobileMenuButton.addEventListener('click', () => {370 mobileMenu.classList.toggle('hidden');371 const icon = mobileMenuButton.querySelector('i');372 if (mobileMenu.classList.contains('hidden')) {373 feather.replace();374 } else {375 icon.setAttribute('data-feather', 'x');376 feather.replace();377 }378 });379 380 // Initialize feather icons381 feather.replace();382 </script>383</body>384</html>