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 Services - 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 .service-card:hover {38 transform: translateY(-5px);39 }40 41 .tab-content {42 display: none;43 }44 45 .tab-content.active {46 display: block;47 }48 49 .tab-btn.active {50 color: #3b82f6;51 border-bottom: 2px solid #3b82f6;52 }53 </style>54</head>55<body class="bg-gray-50">56 <!-- Navigation -->57 <nav class="fixed w-full z-50 bg-white shadow-sm">58 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">59 <div class="flex justify-between h-20 items-center">60 <div class="flex-shrink-0 flex items-center">61 <a href="index.html" class="text-blue-500 text-2xl font-bold flex items-center">62 <i data-feather="cpu" class="mr-2"></i>63 FIVE NODE TECH64 </a>65 </div>66 <div class="hidden md:block">67 <div class="ml-10 flex items-center space-x-8">68 <a href="index.html" class="nav-link text-gray-600 font-medium">Home</a>69 <a href="services.html" class="nav-link text-blue-500 font-medium">Services</a>70 <a href="projects.html" class="nav-link text-gray-600 font-medium">Projects</a>71 <a href="components.html" class="nav-link text-gray-600 font-medium">Components</a>72 <a href="contact.html" class="nav-link text-gray-600 font-medium">Contact</a>73 <a href="payment.html" class="flex items-center text-blue-500 font-medium">74 <i data-feather="shopping-cart" class="mr-1"></i>75 Cart76 </a>77 </div>78 </div>79 <div class="-mr-2 flex md:hidden">80 <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">81 <i data-feather="menu"></i>82 </button>83 </div>84 </div>85 </div>86 <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">87 <div class="px-2 pt-2 pb-3 space-y-2 sm:px-3">88 <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>89 <a href="services.html" class="block px-3 py-2 rounded-md text-base font-medium text-blue-500 hover:bg-gray-100">Services</a>90 <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>91 <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>92 <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>93 <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">94 <i data-feather="shopping-cart" class="mr-2"></i>95 Cart96 </a>97 </div>98 </div>99 </nav>100 101 <!-- Hero Section -->102 <section class="pt-32 pb-20 bg-gradient-to-r from-blue-500 to-blue-600 text-white">103 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">104 <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Services</h1>105 <p class="text-xl max-w-3xl mx-auto">Professional Arduino, ESP32 and microcontroller services tailored to your needs.</p>106 </div>107 </section>108 109 <!-- Services Tabs -->110 <section class="py-20">111 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">112 <div class="flex flex-wrap border-b border-gray-200 mb-12">113 <button class="tab-btn active px-6 py-3 font-medium text-lg" data-tab="iot">IoT Solutions</button>114 <button class="tab-btn px-6 py-3 font-medium text-lg" data-tab="pcb">PCB Layout</button>115 <button class="tab-btn px-6 py-3 font-medium text-lg" data-tab="dashboard">Dashboard</button>116 <button class="tab-btn px-6 py-3 font-medium text-lg" data-tab="programming">Programming</button>117 </div>118 119 <div id="iot" class="tab-content active">120 <div class="md:flex items-center">121 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">122 <h3 class="text-2xl font-bold text-gray-800 mb-6">IoT Solutions</h3>123 <p class="text-gray-600 mb-6">We provide comprehensive IoT solutions using ESP32, NodeMCU and other platforms to connect your devices to the internet and enable smart functionality.</p>124 <div class="bg-blue-50 p-6 rounded-lg mb-6">125 <h4 class="font-bold text-gray-800 mb-2">Price: Rp 1,500,000</h4>126 <a href="payment.html" class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600 transition duration-300 mt-4">127 <i data-feather="shopping-cart" class="inline mr-2"></i> Add to Cart128 </a>129 </div>130 <h4 class="font-bold text-gray-800 mb-3">What's Included:</h4>131 <ul class="space-y-3 mb-6">132 <li class="flex items-center">133 <i data-feather="check" class="text-blue-500 mr-2"></i>134 <span class="text-gray-600">Custom IoT device setup</span>135 </li>136 <li class="flex items-center">137 <i data-feather="check" class="text-blue-500 mr-2"></i>138 <span class="text-gray-600">Cloud connectivity</span>139 </li>140 <li class="flex items-center">141 <i data-feather="check" class="text-blue-500 mr-2"></i>142 <span class="text-gray-600">Sensor integration</span>143 </li>144 <li class="flex items-center">145 <i data-feather="check" class="text-blue-500 mr-2"></i>146 <span class="text-gray-600">Basic dashboard</span>147 </li>148 </ul>149 </div>150 <div class="md:w-1/2">151 <img src="http://static.photos/technology/1024x576/10" alt="IoT Solutions" class="rounded-xl shadow-lg w-full">152 </div>153 </div>154 </div>155 156 <div id="pcb" class="tab-content">157 <div class="md:flex items-center">158 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">159 <h3 class="text-2xl font-bold text-gray-800 mb-6">PCB Layout</h3>160 <p class="text-gray-600 mb-6">Professional PCB design and prototyping services for your custom electronics projects.</p>161 <div class="bg-blue-50 p-6 rounded-lg mb-6">162 <h4 class="font-bold text-gray-800 mb-2">Price: Rp 1,500,000</h4>163 <a href="payment.html" class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600 transition duration-300 mt-4">164 <i data-feather="shopping-cart" class="inline mr-2"></i> Add to Cart165 </a>166 </div>167 <h4 class="font-bold text-gray-800 mb-3">What's Included:</h4>168 <ul class="space-y-3 mb-6">169 <li class="flex items-center">170 <i data-feather="check" class="text-blue-500 mr-2"></i>171 <span class="text-gray-600">Schematic design</span>172 </li>173 <li class="flex items-center">174 <i data-feather="check" class="text-blue-500 mr-2"></i>175 <span class="text-gray-600">PCB layout</span>176 </li>177 <li class="flex items-center">178 <i data-feather="check" class="text-blue-500 mr-2"></i>179 <span class="text-gray-600">Gerber files</span>180 </li>181 <li class="flex items-center">182 <i data-feather="check" class="text-blue-500 mr-2"></i>183 <span class="text-gray-600">1 revision</span>184 </li>185 </ul>186 </div>187 <div class="md:w-1/2">188 <img src="http://static.photos/technology/1024x576/11" alt="PCB Layout" class="rounded-xl shadow-lg w-full">189 </div>190 </div>191 </div>192 193 <div id="dashboard" class="tab-content">194 <div class="md:flex items-center">195 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">196 <h3 class="text-2xl font-bold text-gray-800 mb-6">Dashboard Monitoring</h3>197 <p class="text-gray-600 mb-6">Real-time monitoring dashboards to visualize data from your IoT devices and sensors.</p>198 <div class="bg-blue-50 p-6 rounded-lg mb-6">199 <h4 class="font-bold text-gray-800 mb-2">Price: Rp 1,500,000</h4>200 <a href="payment.html" class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600 transition duration-300 mt-4">201 <i data-feather="shopping-cart" class="inline mr-2"></i> Add to Cart202 </a>203 </div>204 <h4 class="font-bold text-gray-800 mb-3">What's Included:</h4>205 <ul class="space-y-3 mb-6">206 <li class="flex items-center">207 <i data-feather="check" class="text-blue-500 mr-2"></i>208 <span class="text-gray-600">Custom dashboard design</span>209 </li>210 <li class="flex items-center">211 <i data-feather="check" class="text-blue-500 mr-2"></i>212 <span class="text-gray-600">Real-time data visualization</span>213 </li>214 <li class="flex items-center">215 <i data-feather="check" class="text-blue-500 mr-2"></i>216 <span class="text-gray-600">Historical data storage</span>217 </li>218 <li class="flex items-center">219 <i data-feather="check" class="text-blue-500 mr-2"></i>220 <span class="text-gray-600">Mobile responsive</span>221 </li>222 </ul>223 </div>224 <div class="md:w-1/2">225 <img src="http://static.photos/technology/1024x576/12" alt="Dashboard" class="rounded-xl shadow-lg w-full">226 </div>227 </div>228 </div>229 230 <div id="programming" class="tab-content">231 <div class="md:flex items-center">232 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">233 <h3 class="text-2xl font-bold text-gray-800 mb-6">Programming Services</h3>234 <p class="text-gray-600 mb-6">Custom programming for Arduino, ESP32, NodeMCU and other microcontrollers.</p>235 <div class="bg-blue-50 p-6 rounded-lg mb-6">236 <h4 class="font-bold text-gray-800 mb-2">Price: Rp 1,500,000 (per platform)</h4>237 <div class="flex space-x-4 mt-4">238 <a href="payment.html" class="inline-block bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition duration-300">239 <i data-feather="shopping-cart" class="inline mr-2"></i> Arduino240 </a>241 <a href="payment.html" class="inline-block bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition duration-300">242 <i data-feather="shopping-cart" class="inline mr-2"></i> ESP32243 </a>244 <a href="payment.html" class="inline-block bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition duration-300">245 <i data-feather="shopping-cart" class="inline mr-2"></i> NodeMCU246 </a>247 </div>248 </div>249 <h4 class="font-bold text-gray-800 mb-3">What's Included:</h4>250 <ul class="space-y-3 mb-6">251 <li class="flex items-center">252 <i data-feather="check" class="text-blue-500 mr-2"></i>253 <span class="text-gray-600">Custom firmware development</span>254 </li>255 <li class="flex items-center">256 <i data-feather="check" class="text-blue-500 mr-2"></i>257 <span class="text-gray-600">Sensor integration</span>258 </li>259 <li class="flex items-center">260 <i data-feather="check" class="text-blue-500 mr-2"></i>261 <span class="text-gray-600">Communication protocols</span>262 </li>263 <li class="flex items-center">264 <i data-feather="check" class="text-blue-500 mr-2"></i>265 <span class="text-gray-600">Documentation</span>266 </li>267 </ul>268 </div>269 <div class="md:w-1/2">270 <img src="http://static.photos/technology/1024x576/13" alt="Programming" class="rounded-xl shadow-lg w-full">271 </div>272 </div>273 </div>274 </div>275 </section>276 277 <!-- Footer -->278 <footer class="bg-gray-800 text-white py-12">279 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">280 <div class="md:flex md:justify-between">281 <div class="mb-8 md:mb-0">282 <a href="index.html" class="text-blue-400 text-2xl font-bold flex items-center">283 <i data-feather="cpu" class="mr-2"></i>284 FIVE NODE TECH285 </a>286 <p class="text-gray-400 mt-4 max-w-md">Professional Arduino, ESP32 and microcontroller solutions.</p>287 </div>288 <div class="grid grid-cols-2 md:grid-cols-3 gap-8">289 <div>290 <h4 class="text-lg font-semibold mb-4">Quick Links</h4>291 <ul class="space-y-2">292 <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>293 <li><a href="services.html" class="text-gray-400 hover:text-white transition">Services</a></li>294 <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>295 <li><a href="components.html" class="text-gray-400 hover:text-white transition">Components</a></li>296 <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>297 </ul>298 </div>299 <div>300 <h4 class="text-lg font-semibold mb-4">Services</h4>301 <ul class="space-y-2">302 <li><a href="services.html#iot" class="text-gray-400 hover:text-white transition">IoT Solutions</a></li>303 <li><a href="services.html#pcb" class="text-gray-400 hover:text-white transition">PCB Layout</a></li>304 <li><a href="services.html#dashboard" class="text-gray-400 hover:text-white transition">Dashboard</a></li>305 <li><a href="services.html#programming" class="text-gray-400 hover:text-white transition">Programming</a></li>306 </ul>307 </div>308 <div>309 <h4 class="text-lg font-semibold mb-4">Connect</h4>310 <div class="flex space-x-4">311 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>312 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>313 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>314 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>315 </div>316 </div>317 </div>318 </div>319 <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">320 <p class="text-gray-400">© 2023 FIVE NODE TECH. All rights reserved.</p>321 <div class="flex space-x-6 mt-4 md:mt-0">322 <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>323 <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>324 </div>325 </div>326 </div>327 </footer>328 329 <script>330 // Mobile menu toggle331 const mobileMenuButton = document.getElementById('mobile-menu-button');332 const mobileMenu = document.getElementById('mobile-menu');333 334 mobileMenuButton.addEventListener('click', () => {335 mobileMenu.classList.toggle('hidden');336 const icon = mobileMenuButton.querySelector('i');337 if (mobileMenu.classList.contains('hidden')) {338 feather.replace();339 } else {340 icon.setAttribute('data-feather', 'x');341 feather.replace();342 }343 });344 345 // Tab functionality346 const tabBtns = document.querySelectorAll('.tab-btn');347 const tabContents = document.querySelectorAll('.tab-content');348 349 tabBtns.forEach(btn => {350 btn.addEventListener('click', () => {351 // Remove active class from all buttons and contents352 tabBtns.forEach(btn => btn.classList.remove('active'));353 tabContents.forEach(content => content.classList.remove('active'));354 355 // Add active class to clicked button356 btn.classList.add('active');357 358 // Show corresponding content359 const tabId = btn.getAttribute('data-tab');360 document.getElementById(tabId).classList.add('active');361 });362 });363 364 // Initialize feather icons365 feather.replace();366 </script>367</body>368</html>