Team Ai
Apppublic

5TECH/five-node-tech-hub

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