-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
390 lines (360 loc) · 20.1 KB
/
Copy pathindex.html
File metadata and controls
390 lines (360 loc) · 20.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ApexAuto | Bengkel Spesialis & Perawatan Mobil Modern</title>
<meta name="description" content="ApexAuto menyediakan layanan perawatan mobil profesional mulai dari tune-up, ganti oli, hingga detailing premium dengan peralatan modern.">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNavbar">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#hero">
<i class="bi bi-nut-fill text-accent me-2"></i>
<span>APEX<span class="text-accent">AUTO</span></span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#hero">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Layanan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Galeri</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimoni</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Kontak</a>
</li>
</ul>
<div class="ms-lg-3 mt-3 mt-lg-0">
<a href="#contact" class="btn btn-accent btn-sm rounded-pill px-4">Booking Sekarang</a>
</div>
</div>
</div>
</nav>
<!-- HERO SECTION -->
<section id="hero" class="d-flex align-items-center justify-content-center">
<div class="hero-overlay"></div>
<div class="container position-relative z-3">
<div class="row align-items-center">
<div class="col-lg-7 text-center text-lg-start hero-text-col">
<span class="badge bg-accent-soft text-accent px-3 py-2 rounded-pill mb-3">Bengkel Mobil Terpercaya</span>
<h1 class="display-3 fw-extrabold text-white mb-3">
Performa Maksimal, <br> Berkendara <span class="gradient-text">Tanpa Cemas</span>
</h1>
<p class="lead text-gray mb-4">
Kami menghadirkan perpaduan mekanik ahli bersertifikat dan peralatan diagnostik modern untuk mengembalikan performa terbaik kendaraan Anda secara cepat, transparan, dan bergaransi.
</p>
<div class="d-flex flex-column flex-sm-row justify-content-center justify-content-lg-start gap-3">
<a href="#contact" class="btn btn-accent btn-lg px-4 py-3 rounded-pill fw-semibold shadow-accent">
Hubungi Kami <i class="bi bi-arrow-right ms-2"></i>
</a>
<a href="#services" class="btn btn-outline-light btn-lg px-4 py-3 rounded-pill">
Lihat Layanan
</a>
</div>
</div>
<div class="col-lg-5 d-none d-lg-block">
<div class="hero-img-wrapper">
<img src="assets/hero_banner.png" alt="ApexAuto Premium Workshop" class="img-fluid rounded-4 shadow-lg border border-dark-glow">
</div>
</div>
</div>
</div>
</section>
<!-- ABOUT US SECTION -->
<section id="about" class="section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="position-relative">
<img src="assets/service_maintenance.png" alt="Mekanik ApexAuto" class="img-fluid rounded-4 shadow-lg border border-dark-glow-subtle">
<div class="stats-badge p-4 rounded-4 shadow-lg d-none d-sm-block position-absolute bottom-0 end-0 bg-glass text-white border border-dark-glow">
<h3 class="fw-bold mb-0 text-accent">10+</h3>
<p class="mb-0 text-gray small">Tahun Pengalaman</p>
</div>
</div>
</div>
<div class="col-lg-6 ps-lg-5">
<span class="text-accent fw-bold text-uppercase tracking-widest small">Tentang ApexAuto</span>
<h2 class="section-title text-white mt-2 mb-4">Mendedikasikan Keahlian untuk Kenyamanan Anda</h2>
<p class="text-gray mb-4">
ApexAuto berdiri dengan satu komitmen sederhana: memberikan standar pelayanan bengkel terbaik tanpa kerumitan. Kami memahami bahwa kendaraan Anda adalah aset berharga untuk produktivitas harian. Itulah mengapa kami fokus pada pengerjaan presisi, kejelasan biaya sejak awal, dan suku cadang orisinil berkualitas tinggi.
</p>
<div class="row g-4 mb-4">
<div class="col-md-6 d-flex align-items-start">
<div class="feature-icon bg-accent-soft rounded-3 p-3 me-3 text-accent">
<i class="bi bi-shield-check fs-4"></i>
</div>
<div>
<h5 class="text-white fw-bold mb-2">Jaminan Garansi</h5>
<p class="text-gray small mb-0">Setiap pengerjaan suku cadang maupun perbaikan mesin bergaransi hingga 30 hari.</p>
</div>
</div>
<div class="col-md-6 d-flex align-items-start">
<div class="feature-icon bg-accent-soft rounded-3 p-3 me-3 text-accent">
<i class="bi bi-cpu fs-4"></i>
</div>
<div>
<h5 class="text-white fw-bold mb-2">Teknologi Modern</h5>
<p class="text-gray small mb-0">Sistem komputer scanner diagnostik termutakhir untuk hasil analisa super akurat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION -->
<section id="services" class="section-padding bg-dark-subtle-custom">
<div class="container">
<div class="text-center mb-5">
<span class="text-accent fw-bold text-uppercase tracking-widest small">Layanan Unggulan</span>
<h2 class="section-title text-white mt-2">Solusi Perawatan & Perbaikan</h2>
<p class="text-gray max-w-600 mx-auto">Mulai dari perawatan rutin pencegahan kerusakan hingga diagnosa kelistrikan mendalam, tim kami siap mengatasinya.</p>
</div>
<!-- Container Jasa (JS Rendered) -->
<div class="row g-4" id="services-container">
<!-- Rendered dynamically by script.js -->
</div>
</div>
</section>
<!-- GALLERY SECTION -->
<section id="gallery" class="section-padding">
<div class="container">
<div class="text-center mb-5">
<span class="text-accent fw-bold text-uppercase tracking-widest small">Dokumentasi Kerja</span>
<h2 class="section-title text-white mt-2">Galeri Aktivitas Bengkel</h2>
<p class="text-gray max-w-600 mx-auto">Lihat langsung kualitas ruang kerja, peralatan presisi, dan hasil pengerjaan tim mekanik profesional kami.</p>
</div>
<!-- Container Gallery (JS Rendered) -->
<div class="row g-3" id="gallery-container">
<!-- Rendered dynamically by script.js -->
</div>
</div>
</section>
<!-- TESTIMONIALS SECTION -->
<section id="testimonials" class="section-padding bg-dark-subtle-custom">
<div class="container">
<div class="text-center mb-5">
<span class="text-accent fw-bold text-uppercase tracking-widest small">Ulasan Pelanggan</span>
<h2 class="section-title text-white mt-2">Apa Kata Mereka Tentang Kami?</h2>
<p class="text-gray max-w-600 mx-auto">Kepuasan Anda adalah bukti integritas kami. Berikut ulasan nyata dari pelanggan setia ApexAuto.</p>
</div>
<!-- Testimonial Carousel (JS Rendered inside) -->
<div class="row justify-content-center">
<div class="col-lg-8">
<div id="testimonials-carousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel items and indicators will be rendered dynamically by script.js -->
</div>
</div>
</div>
</div>
</section>
<!-- FAQ SECTION -->
<section id="faq" class="section-padding">
<div class="container">
<div class="text-center mb-5">
<span class="text-accent fw-bold text-uppercase tracking-widest small">Tanya Jawab</span>
<h2 class="section-title text-white mt-2">Frequently Asked Questions</h2>
<p class="text-gray max-w-600 mx-auto">Temukan jawaban cepat mengenai jam operasional, estimasi biaya, dan mekanisme garansi kami.</p>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="accordion" id="faqAccordion">
<div class="accordion-item mb-3 rounded-3 overflow-hidden border-0">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-1" aria-expanded="false" aria-controls="faq-1">
Apakah perlu melakukan reservasi online sebelum datang ke bengkel?
</button>
</h2>
<div id="faq-1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Reservasi online tidak wajib, namun sangat kami rekomendasikan untuk menghindari antrean panjang, terutama di hari Sabtu dan Minggu. Melalui reservasi online, Anda dapat memilih waktu dan mempersiapkan kedatangan montir khusus.
</div>
</div>
</div>
<div class="accordion-item mb-3 rounded-3 overflow-hidden border-0">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-2" aria-expanded="false" aria-controls="faq-2">
Berapa lama estimasi waktu pengerjaan ganti oli dan tune-up?
</button>
</h2>
<div id="faq-2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Untuk servis ganti oli standar biasanya memakan waktu sekitar 20-30 menit. Sementara untuk paket Tune-Up berkala lengkap termasuk pembersihan throttle body dan pengecekan kelistrikan memakan waktu sekitar 60-90 menit.
</div>
</div>
</div>
<div class="accordion-item mb-3 rounded-3 overflow-hidden border-0">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-3" aria-expanded="false" aria-controls="faq-3">
Apakah suku cadang yang digunakan di ApexAuto dijamin orisinil?
</button>
</h2>
<div id="faq-3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Ya, kami menjamin 100% orisinalitas suku cadang pabrikan yang kami sediakan. Kami juga menawarkan opsi aftermarket berkualitas tinggi bersertifikasi SNI dengan konfirmasi persetujuan pemilik kendaraan terlebih dahulu.
</div>
</div>
</div>
<div class="accordion-item mb-3 rounded-3 overflow-hidden border-0">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-4" aria-expanded="false" aria-controls="faq-4">
Bagaimana klaim garansi jika terjadi kendala pasca perbaikan?
</button>
</h2>
<div id="faq-4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Anda cukup membawa nota pembayaran perbaikan/servis digital atau fisik ke bengkel kami kembali dalam jangka waktu maksimal 30 hari. Tim kami akan segera melakukan pengecekan ulang dan perbaikan tanpa dikenakan biaya tambahan jika terbukti dari kesalahan teknis atau part cacat.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT & LOKASI SECTION -->
<section id="contact" class="section-padding bg-dark-subtle-custom">
<div class="container">
<div class="row g-5 align-items-stretch">
<div class="col-lg-5">
<span class="text-accent fw-bold text-uppercase tracking-widest small">Kontak & Lokasi</span>
<h2 class="section-title text-white mt-2 mb-4">Temukan Bengkel Kami</h2>
<p class="text-gray mb-5">Kami berlokasi di pusat strategis kota dengan fasilitas ruang tunggu nyaman ber-AC, gratis kopi, dan Wi-Fi super cepat.</p>
<div class="d-flex align-items-center mb-4">
<div class="contact-icon bg-accent-soft text-accent rounded-circle me-3 d-flex align-items-center justify-content-center">
<i class="bi bi-geo-alt fs-5"></i>
</div>
<div>
<span class="text-gray small d-block">Alamat Kami</span>
<strong class="text-white">Jl. Automotive Raya No. 45, Kebayoran Baru, Jakarta Selatan</strong>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="contact-icon bg-accent-soft text-accent rounded-circle me-3 d-flex align-items-center justify-content-center">
<i class="bi bi-telephone fs-5"></i>
</div>
<div>
<span class="text-gray small d-block">Telepon / WhatsApp</span>
<strong class="text-white">+62 821-4567-8910</strong>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="contact-icon bg-accent-soft text-accent rounded-circle me-3 d-flex align-items-center justify-content-center">
<i class="bi bi-clock fs-5"></i>
</div>
<div>
<span class="text-gray small d-block">Jam Operasional</span>
<strong class="text-white">Senin - Sabtu: 08.00 - 17.00 | Minggu: Tutup</strong>
</div>
</div>
<div class="mt-5">
<a href="https://wa.me/6282145678910" target="_blank" class="btn btn-accent px-4 py-3 rounded-pill fw-semibold shadow-accent w-100 text-center">
<i class="bi bi-whatsapp me-2"></i> Hubungi Lewat WhatsApp
</a>
</div>
</div>
<div class="col-lg-7">
<div class="map-wrapper h-100 rounded-4 overflow-hidden shadow-lg border border-dark-glow position-relative" style="min-height: 350px;">
<!-- Google Maps Embed -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.2736195726243!2d106.8000454758784!3d-6.227602993760634!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f1505c2d3dd7%3A0x6795f9c0e5b72186!2sSenayan%20City!5e0!3m2!1sid!2sid!4v1719736800000!5m2!1sid!2sid"
width="100%"
height="100%"
style="border:0; position: absolute; top:0; left:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer py-5">
<div class="container">
<div class="row g-4">
<div class="col-lg-4 mb-4 mb-lg-0">
<a class="navbar-brand d-flex align-items-center mb-3" href="#hero">
<i class="bi bi-nut-fill text-accent me-2"></i>
<span class="text-white fw-bold">APEX<span class="text-accent">AUTO</span></span>
</a>
<p class="text-gray small">
Partner andalan terbaik perawatan mobil Anda dengan dukungan peralatan canggih dan jaminan pelayanan yang tulus dan transparan.
</p>
<div class="d-flex gap-3 mt-4">
<a href="#" class="social-link d-flex align-items-center justify-content-center text-gray rounded-circle border border-secondary" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link d-flex align-items-center justify-content-center text-gray rounded-circle border border-secondary" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-link d-flex align-items-center justify-content-center text-gray rounded-circle border border-secondary" aria-label="YouTube"><i class="bi bi-youtube"></i></a>
<a href="#" class="social-link d-flex align-items-center justify-content-center text-gray rounded-circle border border-secondary" aria-label="TikTok"><i class="bi bi-tiktok"></i></a>
</div>
</div>
<div class="col-6 col-lg-2 offset-lg-2">
<h6 class="text-white fw-bold mb-3">Tautan Pintar</h6>
<ul class="list-unstyled footer-links">
<li><a href="#hero" class="text-gray text-decoration-none small d-block mb-2">Beranda</a></li>
<li><a href="#about" class="text-gray text-decoration-none small d-block mb-2">Tentang Kami</a></li>
<li><a href="#services" class="text-gray text-decoration-none small d-block mb-2">Layanan Kami</a></li>
<li><a href="#gallery" class="text-gray text-decoration-none small d-block mb-2">Galeri Kerja</a></li>
</ul>
</div>
<div class="col-6 col-lg-2">
<h6 class="text-white fw-bold mb-3">Bantuan & Info</h6>
<ul class="list-unstyled footer-links">
<li><a href="#faq" class="text-gray text-decoration-none small d-block mb-2">Pertanyaan (FAQ)</a></li>
<li><a href="#contact" class="text-gray text-decoration-none small d-block mb-2">Kontak Kami</a></li>
<li><a href="#contact" class="text-gray text-decoration-none small d-block mb-2">Lokasi Bengkel</a></li>
<li><a href="#" class="text-gray text-decoration-none small d-block mb-2">Kebijakan Privasi</a></li>
</ul>
</div>
<div class="col-lg-2">
<h6 class="text-white fw-bold mb-3">Kategori Jasa</h6>
<ul class="list-unstyled footer-links">
<li><span class="text-gray small d-block mb-2">Tune-Up & Mesin</span></li>
<li><span class="text-gray small d-block mb-2">Rem & Kaki-kaki</span></li>
<li><span class="text-gray small d-block mb-2">Detailing & Coating</span></li>
<li><span class="text-gray small d-block mb-2">Ganti Oli Berkala</span></li>
</ul>
</div>
</div>
<hr class="border-secondary my-4">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
<p class="text-gray small mb-0">© 2026 ApexAuto. Hak Cipta Dilindungi Undang-Undang.</p>
<p class="text-gray small mb-0 mt-2 mt-md-0">Didesain dengan <i class="bi bi-heart-fill text-accent small"></i> untuk UMKM Indonesia.</p>
</div>
</div>
</footer>
<!-- Bootstrap Bundle JS (via CDN) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="script.js"></script>
</body>
</html>