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>About Us - 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://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');13 14 html {15 scroll-behavior: smooth;16 }17 18 body {19 font-family: 'Inter', sans-serif;20 }21 22 .nav-link {23 position: relative;24 }25 26 .nav-link:after {27 content: '';28 position: absolute;29 width: 0;30 height: 2px;31 bottom: -2px;32 left: 0;33 background-color: currentColor;34 transition: width 0.3s ease;35 }36 37 .nav-link:hover:after {38 width: 100%;39 }40 41 .dark-mode {42 background-color: #0f172a;43 color: #f8fafc;44 }45 46 .light-mode {47 background-color: #f8fafc;48 color: #1e293b;49 }50 51 .timeline-item:before {52 content: '';53 position: absolute;54 width: 20px;55 height: 20px;56 border-radius: 50%;57 left: -40px;58 top: 0;59 background-color: #2563eb;60 border: 4px solid #dbeafe;61 }62 </style>63</head>64<body class="light-mode">65 <!-- Navigation -->66 <nav class="fixed w-full z-50 bg-white/90 dark:bg-dark/90 backdrop-blur-md shadow-sm">67 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">68 <div class="flex justify-between h-16 items-center">69 <div class="flex-shrink-0 flex items-center">70 <a href="index.html" class="text-primary text-2xl font-bold">FIVE NODE TECH</a>71 </div>72 <div class="hidden md:block">73 <div class="ml-10 flex items-center space-x-8">74 <a href="index.html" class="nav-link text-gray-600 dark:text-gray-300 font-medium">Home</a>75 <a href="about.html" class="nav-link text-dark dark:text-light font-medium">About</a>76 <a href="services.html" class="nav-link text-gray-600 dark:text-gray-300 font-medium">Services</a>77 <a href="iot.html" class="nav-link text-gray-600 dark:text-gray-300 font-medium">IOT Services</a>78 <a href="contact.html" class="nav-link text-gray-600 dark:text-gray-300 font-medium">Contact</a>79<button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">80 <i data-feather="moon" class="dark:hidden"></i>81 <i data-feather="sun" class="hidden dark:inline"></i>82 </button>83 </div>84 </div>85 <div class="-mr-2 flex md:hidden">86 <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-dark dark:text-light hover:text-primary focus:outline-none">87 <i data-feather="menu"></i>88 </button>89 </div>90 </div>91 </div>92 <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark shadow-lg">93 <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">94 <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">Home</a>95 <a href="about.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">About</a>96 <a href="services.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">Services</a>97 <a href="iot.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">IOT Services</a>98 <a href="contact.html" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">Contact</a>99<button id="mobile-theme-toggle" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-light">100 Toggle Theme101 </button>102 </div>103 </div>104 </nav>105 106 <!-- Hero Section -->107 <section class="pt-32 pb-20 bg-gradient-to-r from-primary to-secondary text-white">108 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">109 <h1 class="text-4xl md:text-5xl font-bold mb-6">About FIVE NODE TECH</h1>110 <p class="text-xl max-w-3xl mx-auto">We are a team of passionate technologists dedicated to delivering innovative solutions that drive business growth.</p>111 </div>112 </section>113 114 <!-- Our Story Section -->115 <section class="py-20">116 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">117 <div class="text-center mb-16">118 <h2 class="text-3xl md:text-4xl font-bold text-dark dark:text-light mb-4">Our Story</h2>119 <div class="w-20 h-1 bg-primary mx-auto"></div>120 </div>121 <div class="md:flex items-center">122 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">123 <h3 class="text-2xl font-bold text-dark dark:text-light mb-6">From Humble Beginnings to Industry Leaders</h3>124 <p class="text-gray-600 dark:text-gray-300 mb-6">Founded in 2018, FIVE NODE TECH started as a small team of five developers with a shared vision to create impactful technology solutions.</p>125 <p class="text-gray-600 dark:text-gray-300 mb-6">Today, we've grown into a full-service technology firm serving clients across multiple industries and continents, but we've never lost our startup mentality and commitment to excellence.</p>126 <p class="text-gray-600 dark:text-gray-300">Our journey has been guided by our core values of innovation, integrity, and customer success.</p>127 </div>128 <div class="md:w-1/2">129 <img src="http://static.photos/office/1024x576/3" alt="Our Office" class="rounded-xl shadow-lg w-full">130 </div>131 </div>132 </div>133 </section>134 135 <!-- Timeline Section -->136 <section class="py-20 bg-gray-50 dark:bg-gray-900">137 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">138 <div class="text-center mb-16">139 <h2 class="text-3xl md:text-4xl font-bold text-dark dark:text-light mb-4">Our Journey</h2>140 <div class="w-20 h-1 bg-primary mx-auto"></div>141 </div>142 <div class="relative max-w-3xl mx-auto">143 <div class="absolute h-full w-1 bg-gray-200 dark:bg-gray-700 left-4 md:left-1/2 -ml-1 top-0"></div>144 145 <!-- Timeline Item 1 -->146 <div class="relative mb-12 pl-10 md:pl-0">147 <div class="md:flex items-center">148 <div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">149 <h4 class="font-bold text-lg text-dark dark:text-light">2018</h4>150 </div>151 <div class="md:w-1/2 pl-10 md:pl-8 relative timeline-item">152 <h4 class="font-bold text-lg text-dark dark:text-light mb-2">Company Founded</h4>153 <p class="text-gray-600 dark:text-gray-300">Five friends with a shared vision started FIVE NODE TECH in a small Jakarta office.</p>154 </div>155 </div>156 </div>157 158 <!-- Timeline Item 2 -->159 <div class="relative mb-12 pl-10 md:pl-0">160 <div class="md:flex items-center">161 <div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0 order-2 md:order-1">162 <h4 class="font-bold text-lg text-dark dark:text-light">2019</h4>163 </div>164 <div class="md:w-1/2 pl-10 md:pl-8 relative timeline-item order-1 md:order-2">165 <h4 class="font-bold text-lg text-dark dark:text-light mb-2">First Major Client</h4>166 <p class="text-gray-600 dark:text-gray-300">Secured our first enterprise client, marking our entry into the corporate market.</p>167 </div>168 </div>169 </div>170 171 <!-- Timeline Item 3 -->172 <div class="relative mb-12 pl-10 md:pl-0">173 <div class="md:flex items-center">174 <div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">175 <h4 class="font-bold text-lg text-dark dark:text-light">2020</h4>176 </div>177 <div class="md:w-1/2 pl-10 md:pl-8 relative timeline-item">178 <h4 class="font-bold text-lg text-dark dark:text-light mb-2">International Expansion</h4>179 <p class="text-gray-600 dark:text-gray-300">Began serving clients in Southeast Asia and Australia, expanding our global footprint.</p>180 </div>181 </div>182 </div>183 184 <!-- Timeline Item 4 -->185 <div class="relative mb-12 pl-10 md:pl-0">186 <div class="md:flex items-center">187 <div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0 order-2 md:order-1">188 <h4 class="font-bold text-lg text-dark dark:text-light">2021</h4>189 </div>190 <div class="md:w-1/2 pl-10 md:pl-8 relative timeline-item order-1 md:order-2">191 <h4 class="font-bold text-lg text-dark dark:text-light mb-2">Team Growth</h4>192 <p class="text-gray-600 dark:text-gray-300">Expanded our team to 50+ professionals across development, design, and consulting.</p>193 </div>194 </div>195 </div>196 197 <!-- Timeline Item 5 -->198 <div class="relative mb-12 pl-10 md:pl-0">199 <div class="md:flex items-center">200 <div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">201 <h4 class="font-bold text-lg text-dark dark:text-light">2023</h4>202 </div>203 <div class="md:w-1/2 pl-10 md:pl-8 relative timeline-item">204 <h4 class="font-bold text-lg text-dark dark:text-light mb-2">Digital Transformation Leaders</h4>205 <p class="text-gray-600 dark:text-gray-300">Recognized as one of Indonesia's top digital transformation solution providers.</p>206 </div>207 </div>208 </div>209 </div>210 </div>211 </section>212 213 <!-- Team Section -->214 <section class="py-20">215 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">216 <div class="text-center mb-16">217 <h2 class="text-3xl md:text-4xl font-bold text-dark dark:text-light mb-4">Meet Our Team</h2>218 <div class="w-20 h-1 bg-primary mx-auto"></div>219 <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">Our team of experts brings together diverse skills and experiences to deliver exceptional results.</p>220 </div>221 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">222 <!-- Team Member 1 -->223 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">224 <img src="http://static.photos/people/640x360/1" alt="Team Member" class="w-full h-64 object-cover">225 <div class="p-6">226 <h4 class="text-xl font-bold text-dark dark:text-light mb-1">Aditya Pratama</h4>227 <p class="text-primary mb-4">CEO & Founder</p>228 <p class="text-gray-600 dark:text-gray-300 text-sm">Visionary leader with 15+ years in tech industry.</p>229 </div>230 </div>231 232 <!-- Team Member 2 -->233 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">234 <img src="http://static.photos/people/640x360/2" alt="Team Member" class="w-full h-64 object-cover">235 <div class="p-6">236 <h4 class="text-xl font-bold text-dark dark:text-light mb-1">Budi Santoso</h4>237 <p class="text-primary mb-4">CTO</p>238 <p class="text-gray-600 dark:text-gray-300 text-sm">Technology architect and innovation driver.</p>239 </div>240 </div>241 242 <!-- Team Member 3 -->243 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">244 <img src="http://static.photos/people/640x360/3" alt="Team Member" class="w-full h-64 object-cover">245 <div class="p-6">246 <h4 class="text-xl font-bold text-dark dark:text-light mb-1">Citra Dewi</h4>247 <p class="text-primary mb-4">Head of Design</p>248 <p class="text-gray-600 dark:text-gray-300 text-sm">Creating beautiful, functional user experiences.</p>249 </div>250 </div>251 252 <!-- Team Member 4 -->253 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">254 <img src="http://static.photos/people/640x360/4" alt="Team Member" class="w-full h-64 object-cover">255 <div class="p-6">256 <h4 class="text-xl font-bold text-dark dark:text-light mb-1">Dian Kusuma</h4>257 <p class="text-primary mb-4">Head of Development</p>258 <p class="text-gray-600 dark:text-gray-300 text-sm">Leading our team of talented developers.</p>259 </div>260 </div>261 </div>262 </div>263 </section>264 265 <!-- Values Section -->266 <section class="py-20 bg-gray-50 dark:bg-gray-900">267 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">268 <div class="text-center mb-16">269 <h2 class="text-3xl md:text-4xl font-bold text-dark dark:text-light mb-4">Our Values</h2>270 <div class="w-20 h-1 bg-primary mx-auto"></div>271 </div>272 <div class="grid md:grid-cols-3 gap-8">273 <!-- Value 1 -->274 <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md">275 <div class="bg-primary/10 p-4 rounded-lg inline-block mb-6">276 <i data-feather="zap" class="text-primary w-8 h-8"></i>277 </div>278 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">Innovation</h3>279 <p class="text-gray-600 dark:text-gray-300">We constantly push boundaries to deliver cutting-edge solutions that solve real business challenges.</p>280 </div>281 282 <!-- Value 2 -->283 <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md">284 <div class="bg-primary/10 p-4 rounded-lg inline-block mb-6">285 <i data-feather="heart" class="text-primary w-8 h-8"></i>286 </div>287 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">Integrity</h3>288 <p class="text-gray-600 dark:text-gray-300">We build trust through transparency, honesty, and ethical business practices.</p>289 </div>290 291 <!-- Value 3 -->292 <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md">293 <div class="bg-primary/10 p-4 rounded-lg inline-block mb-6">294 <i data-feather="users" class="text-primary w-8 h-8"></i>295 </div>296 <h3 class="text-xl font-bold text-dark dark:text-light mb-4">Collaboration</h3>297 <p class="text-gray-600 dark:text-gray-300">We believe in the power of teamwork and partner closely with our clients.</p>298 </div>299 </div>300 </div>301 </section>302 303 <!-- CTA Section -->304 <section class="py-16 bg-gradient-to-r from-primary to-secondary text-white">305 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">306 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>307 <p class="text-xl mb-8 max-w-3xl mx-auto">Discover how our technology solutions can drive your digital transformation journey.</p>308 <a href="contact.html" class="inline-block bg-white text-primary px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Get In Touch</a>309 </div>310 </section>311 312 <!-- Footer -->313 <footer class="bg-dark 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 <h3 class="text-2xl font-bold mb-4">FIVE NODE TECH</h3>318 <p class="text-gray-400 max-w-md">Innovative technology solutions to help your business thrive in the digital era.</p>319 </div>320 <div class="grid grid-cols-2 md:grid-cols-3 gap-8">321 <div>322 <h4 class="text-lg font-semibold mb-4">Quick Links</h4>323 <ul class="space-y-2">324 <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>325 <li><a href="about.html" class="text-gray-400 hover:text-white transition">About</a></li>326 <li><a href="services.html" class="text-gray-400 hover:text-white transition">Services</a></li>327 <li><a href="iot.html" class="text-gray-400 hover:text-white transition">IOT Services</a></li>328 <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>329</ul>330 </div>331 <div>332 <h4 class="text-lg font-semibold mb-4">Services</h4>333 <ul class="space-y-2">334 <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li>335 <li><a href="#" class="text-gray-400 hover:text-white transition">Mobile Apps</a></li>336 <li><a href="#" class="text-gray-400 hover:text-white transition">Cloud Solutions</a></li>337 <li><a href="#" class="text-gray-400 hover:text-white transition">Cybersecurity</a></li>338 </ul>339 </div>340 <div>341 <h4 class="text-lg font-semibold mb-4">Connect</h4>342 <div class="flex space-x-4">343 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>344 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>345 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>346 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>347 </div>348 </div>349 </div>350 </div>351 <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">352 <p class="text-gray-400">© 2023 FIVE NODE TECH. All rights reserved.</p>353 <div class="flex space-x-6 mt-4 md:mt-0">354 <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>355 <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>356 </div>357 </div>358 </div>359 </footer>360 361 <script>362 // Mobile menu toggle363 const mobileMenuButton = document.getElementById('mobile-menu-button');364 const mobileMenu = document.getElementById('mobile-menu');365 366 mobileMenuButton.addEventListener('click', () => {367 mobileMenu.classList.toggle('hidden');368 const icon = mobileMenuButton.querySelector('i');369 if (mobileMenu.classList.contains('hidden')) {370 feather.replace();371 } else {372 icon.setAttribute('data-feather', 'x');373 feather.replace();374 }375 });376 377 // Theme toggle378 const themeToggle = document.getElementById('theme-toggle');379 const mobileThemeToggle = document.getElementById('mobile-theme-toggle');380 const body = document.body;381 382 // Check for saved theme preference or use preferred color scheme383 if (localStorage.getItem('theme') === 'dark' || 384 (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {385 body.classList.add('dark-mode');386 body.classList.remove('light-mode');387 } else {388 body.classList.add('light-mode');389 body.classList.remove('dark-mode');390 }391 392 themeToggle.addEventListener('click', () => {393 toggleTheme();394 });395 396 mobileThemeToggle.addEventListener('click', () => {397 toggleTheme();398 mobileMenu.classList.add('hidden');399 feather.replace();400 });401 402 function toggleTheme() {403 if (body.classList.contains('dark-mode')) {404 body.classList.remove('dark-mode');405 body.classList.add('light-mode');406 localStorage.setItem('theme', 'light');407 } else {408 body.classList.remove('light-mode');409 body.classList.add('dark-mode');410 localStorage.setItem('theme', 'dark');411 }412 feather.replace();413 }414 415 // Initialize feather icons416 feather.replace();417 </script>418</body>419</html>420 