Team Ai
Apppublic

5TECH/five-node-tech-hub

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