Team Ai
Apppublic

5TECH/five-node-tech-hub

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
index.html342 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>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>