Team Ai
Apppublic

5TECH/five-node-tech-hub

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
components.html384 linesDownload Raw Back to root
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>