RegularDude23/buildmaster-pro-construct-with-confidence
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>BuildMaster Pro - Professional Construction Services</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 .hero-bg {12 background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://ngulikuy.my.id/images/1920/19821845/ilustrasi-kuli-bangunan_169-xmKGAOJbtzmvhhNTvBZLog.jpeg');13 background-size: cover;14 background-position: center;15 }16 .service-card:hover {17 transform: translateY(-5px);18 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);19 }20 .project-card {21 transition: all 0.3s ease;22 }23 .project-card:hover {24 transform: scale(1.03);25 }26 </style>27</head>28<body class="font-sans bg-gray-50">29 <!-- Navigation -->30 <nav class="bg-white shadow-md sticky top-0 z-50">31 <div class="container mx-auto px-6 py-3">32 <div class="flex justify-between items-center">33 <div class="flex items-center">34 <img src="https://ngulikuy.my.id/images/352/19757370/ChatGPTImage7Okt202513.20.47-K1uScyJXWPIyMTxBlIXXlA.png" alt="Logo" class="h-12">35 <a href="#" class="ml-2 text-xl font-bold text-gray-800">BuildMaster Pro</a>36 </div>37 <div class="hidden md:flex space-x-8">38 <a href="#" class="text-gray-800 hover:text-orange-500 font-medium">Home</a>39 <a href="#" class="text-gray-800 hover:text-orange-500 font-medium">About</a>40 <a href="#" class="text-gray-800 hover:text-orange-500 font-medium">Services</a>41 <a href="#" class="text-gray-800 hover:text-orange-500 font-medium">Projects</a>42 <a href="#" class="text-gray-800 hover:text-orange-500 font-medium">Pricing</a>43 <a href="#" class="text-gray-800 hover:text-orange-500 font-medium">Contact</a>44 </div>45 <button class="md:hidden focus:outline-none">46 <i data-feather="menu"></i>47 </button>48 <a href="#" class="hidden md:block bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md font-medium">Get a Quote</a>49 </div>50 </div>51 </nav>52 53 <!-- Hero Section -->54 <section class="hero-bg text-white py-24 md:py-32">55 <div class="container mx-auto px-6 text-center">56 <h1 class="text-4xl md:text-6xl font-bold mb-6">NGULI KUY</h1>57 <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Jika anda kuat, bertenaga, dan tahan lama, mari bergabung bersama kami.</p>58 <div class="space-x-4">59 <a href="#" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 rounded-md font-medium inline-block">Learn More</a>60 <a href="#" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-3 rounded-md font-medium inline-block">Contact Us</a>61 </div>62 </div>63 </section>64 65 <!-- About Section -->66 <section class="py-16 bg-white">67 <div class="container mx-auto px-6">68 <div class="text-center mb-12">69 <h2 class="text-3xl font-bold text-gray-800 mb-4">THE NGULI in Tangerang</h2>70 <p class="text-xl text-gray-600 max-w-3xl mx-auto">We are professional kuproy</p>71 </div>72 <div class="grid md:grid-cols-2 gap-12 items-center">73 <div>74 <p class="text-gray-700 mb-6">Kami adalah tim <span class="font-bold">pekerja konstruksi profesional</span> yang berkomitmen menghadirkan hasil terbaik dalam setiap proyek. Dengan pengalaman dan keahlian di bidang pembangunan, kami selalu mengutamakan <span class="font-bold">ketepatan waktu, kualitas kerja, serta kepuasan klien.</span></p>75 <div class="grid grid-cols-2 gap-6">76 <div class="bg-gray-100 p-6 rounded-lg">77 <div class="text-orange-500 mb-3">78 <i data-feather="award" class="w-8 h-8"></i>79 </div>80 <h3 class="font-bold text-lg mb-2">Profesional</h3>81 <p class="text-gray-600">Tim yang profesional, jujur, dan bertanggung jawab.</p>82 </div>83 <div class="bg-gray-100 p-6 rounded-lg">84 <div class="text-orange-500 mb-3">85 <i data-feather="clock" class="w-8 h-8"></i>86 </div>87 <h3 class="font-bold text-lg mb-2">Waktu</h3>88 <p class="text-gray-600">Pekerjaan tepat waktu sesuai jadwal.</p>89 </div>90 <div class="bg-gray-100 p-6 rounded-lg">91 <div class="text-orange-500 mb-3">92 <i data-feather="shield" class="w-8 h-8"></i>93 </div>94 <h3 class="font-bold text-lg mb-2">Terpercaya</h3>95 <p class="text-gray-600">Komitmen terhadap kepercayaan klien.</p>96 </div>97 <div class="bg-gray-100 p-6 rounded-lg">98 <div class="text-orange-500 mb-3">99 <i data-feather="dollar-sign" class="w-8 h-8"></i>100 </div>101 <h3 class="font-bold text-lg mb-2">Terjangkau</h3>102 <p class="text-gray-600">Harga yang terjangkau dan transparan.</p>103 </div>104 </div>105 </div>106 <div>107 <img src="https://ngulikuy.my.id/images/1024%2C821x675%2B189%2B0/19822398/090525700_1731384443-kuli-adalah-lRiScz-UB6r4nTcxziEOzA.jpg" alt="Construction Team" class="rounded-lg shadow-lg w-full">108 </div>109 </div>110 </div>111 </section>112 113 <!-- Services Section -->114 <section class="py-16 bg-gray-100">115 <div class="container mx-auto px-6">116 <div class="text-center mb-12">117 <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Services</h2>118 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Kami melayani berbagai kebutuhan konstruksi profesional</p>119 </div>120 <div class="grid md:grid-cols-3 gap-8">121 <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300">122 <img src="https://ngulikuy.my.id/images/1024%2C456x374%2B104%2B0/19822435/200968_pekerja-saat-mengerjakan-proyek-apartemen_665_374-3vei6kzWQ2J5-C86HAerDA.jpg" alt="About Us" class="w-full h-48 object-cover rounded mb-6">123 <h3 class="text-xl font-bold mb-4">About Us</h3>124 <p class="text-gray-600 mb-6">Ngulikuy menghadirkan layanan konstruksi berkualitas dengan hasil kokoh dan tepat waktu.</p>125 <a href="#" class="text-orange-500 font-medium flex items-center">126 Learn more127 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>128 </a>129 </div>130 <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300">131 <img src="https://ngulikuy.my.id/images/1024%2C874x720%2B102%2B0/19822527/146-HqHYq1miwXbBPCxMeeCM8g.jpg" alt="Services" class="w-full h-48 object-cover rounded mb-6">132 <h3 class="text-xl font-bold mb-4">Our Services</h3>133 <p class="text-gray-600 mb-6">Kami melayani pembangunan, renovasi, dan proyek konstruksi dengan tenaga profesional.</p>134 <a href="#" class="text-orange-500 font-medium flex items-center">135 Learn more136 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>137 </a>138 </div>139 <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300">140 <img src="https://ngulikuy.my.id/images/1920/19821868/upah-tukang-bangunan-QezrF1Bj14tjQPu4wB9Lfg.jpg" alt="Contact" class="w-full h-48 object-cover rounded mb-6">141 <h3 class="text-xl font-bold mb-4">Contact Us</h3>142 <p class="text-gray-600 mb-6">Konsultasikan proyek impian Anda bersama tim Ngulikuy sekarang juga!</p>143 <a href="#" class="text-orange-500 font-medium flex items-center">144 Learn more145 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>146 </a>147 </div>148 </div>149 </div>150 </section>151 152 <!-- Projects Section -->153 <section class="py-16 bg-white">154 <div class="container mx-auto px-6">155 <div class="text-center mb-12">156 <h2 class="text-3xl font-bold text-gray-800 mb-4">Latest Projects</h2>157 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Beberapa proyek terbaru yang telah kami kerjakan</p>158 </div>159 <div class="grid md:grid-cols-3 gap-8">160 <div class="project-card bg-white rounded-lg overflow-hidden shadow-lg">161 <img src="https://ngulikuy.my.id/images/1024%2C601x493%2B69%2B0/19823379/cara-membangun-rumah-dari-nol-EgioZomCwK3gKoLNW_Jznw.jpg" alt="Project 1" class="w-full h-56 object-cover">162 <div class="p-6">163 <h3 class="text-xl font-bold mb-2">Project 1</h3>164 <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>165 <a href="#" class="text-orange-500 font-medium flex items-center">166 View Project167 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>168 </a>169 </div>170 </div>171 <div class="project-card bg-white rounded-lg overflow-hidden shadow-lg">172 <img src="https://ngulikuy.my.id/images/1024%2C601x493%2B69%2B0/19823382/cara-membangun-rumah-dari-nol-kuli-31wmCZuLOZZuItLZbgx6RA.jpg" alt="Project 2" class="w-full h-56 object-cover">173 <div class="p-6">174 <h3 class="text-xl font-bold mb-2">Project 2</h3>175 <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>176 <a href="#" class="text-orange-500 font-medium flex items-center">177 View Project178 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>179 </a>180 </div>181 </div>182 <div class="project-card bg-white rounded-lg overflow-hidden shadow-lg">183 <img src="https://ngulikuy.my.id/images/1024%2C812x666%2B114%2B0/19823412/tips-bangun-rumah-sendiri-iRiwKPR-lXZGoc7xeEb3aA.jpg" alt="Project 3" class="w-full h-56 object-cover">184 <div class="p-6">185 <h3 class="text-xl font-bold mb-2">Project 3</h3>186 <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>187 <a href="#" class="text-orange-500 font-medium flex items-center">188 View Project189 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>190 </a>191 </div>192 </div>193 </div>194 <div class="text-center mt-12">195 <a href="#" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 rounded-md font-medium inline-block">View All Projects</a>196 </div>197 </div>198 </section>199 200 <!-- Contact Section -->201 <section class="py-16 bg-gray-100">202 <div class="container mx-auto px-6">203 <div class="grid md:grid-cols-2 gap-12">204 <div>205 <h2 class="text-3xl font-bold text-gray-800 mb-6">Get in touch</h2>206 <div class="space-y-6">207 <div class="flex items-start">208 <div class="text-orange-500 mr-4 mt-1">209 <i data-feather="map-pin" class="w-6 h-6"></i>210 </div>211 <div>212 <h3 class="font-bold text-lg mb-1">Address</h3>213 <p class="text-gray-600">123 Builder St<br>Tangerang 10110</p>214 </div>215 </div>216 <div class="flex items-start">217 <div class="text-orange-500 mr-4 mt-1">218 <i data-feather="phone" class="w-6 h-6"></i>219 </div>220 <div>221 <h3 class="font-bold text-lg mb-1">Call us</h3>222 <p class="text-gray-600">Phone: +62123456789<br>Mobile: +62123456789</p>223 </div>224 </div>225 <div class="flex items-start">226 <div class="text-orange-500 mr-4 mt-1">227 <i data-feather="mail" class="w-6 h-6"></i>228 </div>229 <div>230 <h3 class="font-bold text-lg mb-1">Mail us</h3>231 <p class="text-gray-600">info@ngulikuy.my.id</p>232 </div>233 </div>234 </div>235 <div class="mt-8">236 <h3 class="font-bold text-lg mb-4">Working time</h3>237 <ul class="space-y-2 text-gray-600">238 <li class="flex justify-between">239 <span>Monday</span>240 <span>9 AM - 7 PM</span>241 </li>242 <li class="flex justify-between">243 <span>Tuesday</span>244 <span>9 AM - 7 PM</span>245 </li>246 <li class="flex justify-between">247 <span>Wednesday</span>248 <span>9 AM - 7 PM</span>249 </li>250 <li class="flex justify-between">251 <span>Thursday</span>252 <span>9 AM - 7 PM</span>253 </li>254 <li class="flex justify-between">255 <span>Friday</span>256 <span>9 AM - 7 PM</span>257 </li>258 <li class="flex justify-between">259 <span>Saturday</span>260 <span>9 AM - 7 PM</span>261 </li>262 <li class="flex justify-between">263 <span>Sunday</span>264 <span>9 AM - 7 PM</span>265 </li>266 </ul>267 </div>268 </div>269 <div>270 <h2 class="text-3xl font-bold text-gray-800 mb-6">Send us a message</h2>271 <form class="space-y-6">272 <div>273 <label for="name" class="block text-gray-700 mb-2">Your Name</label>274 <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500">275 </div>276 <div>277 <label for="email" class="block text-gray-700 mb-2">Your Email</label>278 <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500">279 </div>280 <div>281 <label for="message" class="block text-gray-700 mb-2">Your Message</label>282 <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"></textarea>283 </div>284 <div class="flex items-center">285 <input type="checkbox" id="privacy" class="mr-2">286 <label for="privacy" class="text-gray-600">I have read and understand the <a href="#" class="text-orange-500">privacy policy</a>.</label>287 </div>288 <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-md font-medium">Send Message</button>289 </form>290 </div>291 </div>292 </div>293 </section>294 295 <!-- Footer -->296 <footer class="bg-gray-800 text-white py-12">297 <div class="container mx-auto px-6">298 <div class="grid md:grid-cols-4 gap-8">299 <div>300 <img src="https://ngulikuy.my.id/images/352/19757370/ChatGPTImage7Okt202513.20.47-K1uScyJXWPIyMTxBlIXXlA.png" alt="Logo" class="h-10 mb-4">301 <p class="text-gray-400">Ngulikuy adalah tim profesional di bidang konstruksi dan pembangunan, berdedikasi menghadirkan hasil terbaik dengan kualitas tinggi dan komitmen terhadap kepuasan klien.</p>302 <div class="flex space-x-4 mt-6">303 <a href="#" class="text-gray-400 hover:text-white">304 <i data-feather="facebook" class="w-5 h-5"></i>305 </a>306 <a href="#" class="text-gray-400 hover:text-white">307 <i data-feather="twitter" class="w-5 h-5"></i>308 </a>309 <a href="#" class="text-gray-400 hover:text-white">310 <i data-feather="instagram" class="w-5 h-5"></i>311 </a>312 </div>313 </div>314 <div>315 <h3 class="text-lg font-bold mb-4">Quick Links</h3>316 <ul class="space-y-2">317 <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>318 <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>319 <li><a href="#" class="text-gray-400 hover:text-white">Services</a></li>320 <li><a href="#" class="text-gray-400 hover:text-white">Projects</a></li>321 <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>322 </ul>323 </div>324 <div>325 <h3 class="text-lg font-bold mb-4">Services</h3>326 <ul class="space-y-2">327 <li><a href="#" class="text-gray-400 hover:text-white">Construction</a></li>328 <li><a href="#" class="text-gray-400 hover:text-white">Renovation</a></li>329 <li><a href="#" class="text-gray-400 hover:text-white">Architecture</a></li>330 <li><a href="#" class="text-gray-400 hover:text-white">Interior Design</a></li>331 <li><a href="#" class="text-gray-400 hover:text-white">Consultation</a></li>332 </ul>333 </div>334 <div>335 <h3 class="text-lg font-bold mb-4">Legal</h3>336 <ul class="space-y-2">337 <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>338 <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>339 <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>340 </ul>341 </div>342 </div>343 <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">344 <p class="text-gray-400">© 2023 BuildMaster Pro. All rights reserved.</p>345 <div class="flex space-x-6 mt-4 md:mt-0">346 <a href="#" class="text-gray-400 hover:text-white">Legal Notice</a>347 <a href="#" class="text-gray-400 hover:text-white">Privacy</a>348 </div>349 </div>350 </div>351 </footer>352 353 <script>354 feather.replace();355 </script>356</body>357</html>358