-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
397 lines (393 loc) · 28.7 KB
/
index.html
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
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trippi - Pure HTML</title>
<link rel="icon" href="assets/img/logo.png">
<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=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="w-full">
<header class="max-w-screen-xl mx-auto mb-8">
<nav class="px-4 sm:px-5 py-12 flex items-center justify-between space-x-12">
<div class="flex items-center space-x-8">
<div id="logo" class="flex items-center space-x-2">
<img src="assets/img/logo.png" class="w-8 h-8" alt="Trippi Logo">
<h5 class="text-xl font-bold text-[#094067]">Trippi</h5>
</div>
<div class="hidden px-5 py-3 w-[550px] border-2 border-[#094067] rounded-md lg:flex space-x-2 focus-within:ring-2 focus-within:ring-[#3DA9FC] ring-offset-2 transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="10" cy="10" r="7"></circle>
<line x1="21" y1="21" x2="15" y2="15"></line>
</svg>
<input class="w-full border-none outline-none focus:outline-none" type="text" placeholder="Cari tempat liburan, hotel, tiket pesawat, dll">
</div>
</div>
<div class="lg:hidden">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="4" y1="6" x2="20" y2="6"></line>
<line x1="4" y1="12" x2="20" y2="12"></line>
<line x1="4" y1="18" x2="20" y2="18"></line>
</svg>
</button>
</div>
<div class="hidden lg:flex items-center space-x-5">
<button class="px-5 py-3 rounded-md text-[#094067] font-semibold hover:text-[#094067]/75 transition duration-300">Login</button>
<button class="px-5 py-3 text-white bg-[#3DA9FC] rounded-md shadow-[0_6px_30px_rgba(61,169,252,0.6)] font-semibold hover:bg-[#3498E4] transition-colors duration-300">Register</button>
<button class="px-5 py-3 flex items-center space-x-1 font-semibold text-[#094067] hover:text-[#094067]/75 transition duration-300">
<span>ID</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
</div>
</nav>
</header>
<main class="max-w-screen-xl mx-auto overflow-x-hidden px-4 sm:px-5">
<!-- Hero Section -->
<section data-aos="fade-up" data-aos-duration="1000" class="grid grid-cols-6 lg:grid-cols-12 mb-20">
<div class="col-span-6 text-center lg:text-left">
<span class="inline-block px-3 py-1.5 mb-4 bg-[#3DA9FC] bg-opacity-10 text-[#3DA9FC] font-semibold tracking-wide rounded-full">•Healing kapanpun dan dimanapun!</span>
<h1 class="text-5xl sm:text-6xl md:text-7xl mb-4 font-extrabold text-[#094067] leading-tight">Jelajahi Dunia dan <span class="text-[#3DA9FC]">Temukan</span> Keindahannya</h1>
<p class="mb-6 text-base md:text-lg tracking-wide leading-8 font-medium text-[#5F6C7B] pr-0 md:pr-4 xl:pr-32">Trippi dapat membantu kamu menikmati perjalanan yang tak terlupakan. Mulailah petualangan baru dan jelajahi destinasi liburan terbaik di seluruh dunia.</p>
<div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-6 justify-center lg:justify-start">
<button class="w-full md:w-fit px-9 py-5 bg-[#3DA9FC] flex items-center justify-center md:justify-start text-white font-semibold rounded-md shadow-[0_6px_30px_rgba(61,169,252,0.6)] hover:bg-[#3498E4] group transition-colors duration-300">
<span>Lihat Destinasi</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-right group-hover:translate-x-1.5 transition duration-300" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="5" y1="12" x2="19" y2="12"></line>
<line x1="15" y1="16" x2="19" y2="12"></line>
<line x1="15" y1="8" x2="19" y2="12"></line>
</svg>
</button>
<button class="w-fit px-9 py-5 flex items-center justify-center md:justify-start text-[#3DA9FC] font-semibold space-x-4 hover:scale-105 transition duration-300">
<div class="p-4 rounded-full border border-[#3DA9FC]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" fill="#FFFFFE"/>
<path d="M7 4V20L20 12L7 4Z" fill="#3DA9FC"/>
</svg>
</div>
<span>Galeri Kami</span>
</button>
</div>
</div>
<div class="col-span-6 pl-24 hidden lg:block">
<img src="assets/img/hero-image.webp" alt="">
</div>
</section>
<!-- Partners Section -->
<section data-aos="fade-right" data-aos-delay="500" data-aos-duration="700" class="w-full flex flex-col lg:flex-row items-center justify-center space-y-11 lg:space-y-0 lg:space-x-11 py-12 mb-24">
<img src="assets/img/partners/agoda.png" class="h-[56px] lg:h-[35px] grayscale opacity-20 hover:grayscale-0 hover:opacity-100 transition duration-500" alt="">
<img src="assets/img/partners/tripadvisor.png" class="h-[56px] lg:h-[35px] grayscale opacity-20 hover:grayscale-0 hover:opacity-100 transition duration-500" alt="">
<img src="assets/img/partners/pegipegi.svg" class="h-[56px] lg:h-[35px] grayscale opacity-20 hover:grayscale-0 hover:opacity-100 transition duration-500" alt="">
<img src="assets/img/partners/reddorz.png" class="h-[56px] lg:h-[35px] grayscale opacity-20 hover:grayscale-0 hover:opacity-100 transition duration-500" alt="">
<img src="assets/img/partners/traveloka.png" class="h-[56px] lg:h-[35px] grayscale opacity-20 hover:grayscale-0 hover:opacity-100 transition duration-500" alt="">
</section>
<!-- Favorite Section -->
<section data-aos="zoom-in" data-aos-duration="1000" class="py-2 mb-16 text-center lg:text-left">
<span class="text-[#3DA9FC] inline-block font-semibold leading-tight mb-4">Destinasi Favorit</span>
<div class="flex items-center justify-between mb-8 lg:mb-5">
<h3 class="text-4xl text-[#094067] font-extrabold leading-tight w-full lg:w-fit">Top Destinasi Untuk Anak Muda Healing</h3>
<button class="hidden font-semibold text-[#3DA9FC] leading-tight lg:flex items-center space-x-2">
Lihat Selengkapnya
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="9 6 15 12 9 18"></polyline>
</svg>
</button>
</div>
<div class="grid grid-cols-4 lg:grid-cols-12 gap-y-12 lg:gap-y-0 lg:gap-x-12 mb-8">
<div class="col-span-4 flex flex-col items-center justify-center rounded-xl hover:scale-105 transition duration-300 cursor-pointer">
<img src="assets/img/destination/tangkuban-parahu.webp" class="h-[100%] aspect-video lg:aspect-auto object-cover object-center mb-4 rounded-xl shadow-[0_9px_40px_rgba(9,64,103,0.20)]" alt="">
<h5 class="text-xl text-[#094067] font-bold mb-3.5">Gunung Tangkuban Parahu</h5>
<p class="text-sm text-[#5F6C7B] font-medium">Bandung, Indonesia</p>
</div>
<div class="col-span-4 flex flex-col items-center justify-center rounded-xl hover:scale-105 transition duration-300 cursor-pointer">
<img src="assets/img/destination/sayang-heulang.webp" class="h-[100%] aspect-video lg:aspect-auto object-cover object-center mb-4 rounded-xl shadow-[0_9px_40px_rgba(9,64,103,0.20)]" alt="">
<h5 class="text-xl text-[#094067] font-bold mb-3.5">Pantai Sayang Heulang</h5>
<p class="text-sm text-[#5F6C7B] font-medium">Garut, Indonesia</p>
</div>
<div class="col-span-4 flex flex-col items-center justify-center rounded-xl hover:scale-105 transition duration-300 cursor-pointer">
<img src="assets/img/destination/sekitaran-lembang.webp" class="h-[100%] aspect-video lg:aspect-auto object-cover object-center mb-4 rounded-xl shadow-[0_9px_40px_rgba(9,64,103,0.20)]" alt="">
<h5 class="text-xl text-[#094067] font-bold mb-3.5">Sekitaran Lembang</h5>
<p class="text-sm text-[#5F6C7B] font-medium">Bandung, Indonesia</p>
</div>
</div>
<button class="font-semibold text-[#3DA9FC] leading-tight flex lg:hidden items-center mx-auto space-x-2">
Lihat Selengkapnya
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="9 6 15 12 9 18"></polyline>
</svg>
</button>
</section>
<!-- Booking Hotel Section -->
<section class="grid grid-cols-1 lg:grid-cols-2 pt-16 pb-8 lg:pb-56">
<div data-aos="fade-right" data-aos-duration="700" class="pt-12 text-center lg:text-left">
<span class="mb-4 text-[#3DA9FC] inline-block font-semibold leading-tight">Booking Penginapan</span>
<h2 class="mb-4 text-4xl md:text-5xl text-[#094067] font-extrabold leading-tight pr-0 xl:pr-8">Mau Cari Penginapan? Cari Disini Aja! 👍🏻</h2>
<p class="mb-8 text-base md:text-lg tracking-wide leading-8 font-medium text-[#5F6C7B] pr-0 xl:pr-24">Udah nemu tempat healing yang cocok tapi masih bingung cari penginapan terdekat? eits, tenang aja gen, di Trippi kalian juga bisa kok, cari penginapan terdekat!</p>
<button class="w-full lg:w-fit px-9 py-5 bg-[#3DA9FC] flex items-center justify-center text-white font-semibold rounded-md shadow-[0_6px_30px_rgba(61,169,252,0.6)] space-x-2.5 hover:bg-[#3498E4] transition-colors duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="10" cy="10" r="7"></circle>
<line x1="21" y1="21" x2="15" y2="15"></line>
</svg>
<span>Cari Penginapan</span>
</button>
</div>
<div data-aos="fade-left" data-aos-duration="700" class="relative">
<img src="assets/img/booking-hotel.webp" class="relative lg:absolute top-0 lg:-top-40 -left-32 md:-left-16 lg:-left-40 xl:-left-12 min-w-[620px] sm:min-w-[810px]" alt="">
</div>
</section>
<!-- Nearest Destination Section -->
<section data-aos="fade-up" data-aos-duration="1000" class="w-full flex flex-col items-center justify-center py-4 mb-40 text-center lg:text-left">
<span class="mb-4 text-[#3DA9FC] inline-block font-semibold leading-tight">Healing Tanpa Perlu Hilang</span>
<h2 class="mb-4 text-4xl md:text-5xl text-[#094067] font-extrabold leading-tight">Wisata Ke Tempat Terdekat? Gaskan!</h2>
<p class="mb-8 text-base md:text-lg tracking-wide leading-8 font-medium text-[#5F6C7B] text-center px-0 lg:px-64">Buat kamu yang gamau liburan jauh-jauh dari kantor rumah, tenang aja! Kamu juga bisa cari tempat Wisata terdekat supaya bisa siap sedia ketika dibutuhkan 😁</p>
<img src="assets/img/nearest-destination.webp" class="w-full mb-8 shadow-[0_2px_8px_rgba(0,0,0,0.13)]" alt="">
<button class="px-9 py-5 bg-[#3DA9FC] flex items-center text-white font-semibold rounded-md shadow-[0_6px_30px_rgba(61,169,252,0.6)] hover:bg-[#3498E4] group transition-all duration-300">
<span>Mulai Sekarang</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-right group-hover:translate-x-1.5 transition duration-300" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="5" y1="12" x2="19" y2="12"></line>
<line x1="15" y1="16" x2="19" y2="12"></line>
<line x1="15" y1="8" x2="19" y2="12"></line>
</svg>
</button>
</section>
<!-- Testimonial Section -->
<section data-aos="fade-down" data-aos-delay="100" data-aos-duration="700" class="relative w-[95%] mx-auto min-h-[742px] py-24 flex flex-col items-center bg-[#D8EEFE] bg-opacity-75 rounded-xl mb-24">
<span class="mb-4 text-[#3DA9FC] inline-block font-semibold leading-tight">Testimoni</span>
<h2 class="mb-4 text-4xl md:text-5xl text-[#094067] font-extrabold leading-tight text-center lg:text-left">Apa Kata Mereka Tentang Trippi?</h2>
<p class="mb-8 text-base md:text-lg tracking-wide leading-8 font-medium text-[#5F6C7B] text-center px-2 lg:px-56">Kalo seandainya kamu belum percaya sama aplikasi ini gapapa, percaya mah sama Tuhan. Tapi setelah baca ulasan-ulasan ini mungkin kamu akan sedikit mempertimbangkan 😏</p>
<div class="relative w-full">
<div class="absolute top-0 left-[-3%] w-[106%]">
<div class="swiper comment-slider px-5 h-[340px]">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide w-full max-h-[240px] md:max-h-[215px] xl:max-h-[260px] p-8 sm:px-12 sm:py-8 md:p-6 xl:p-8 rounded-xl shadow-lg bg-white flex flex-col justify-between">
<p class="text-sm sm:text-lg md:text-sm xl:text-base text-[#5F6C7B] leading-relaxed">“Aplikasinya sangat membantu, saya bingung mau ngabisin jatah cuti saya untuk apa, tapi dengan aplikasi ini saya menghabiskan jatah cuti saya untuk liburan, Thank you Trippi.”</p>
<div class="flex items-center space-x-4">
<img src="assets/img/avatar/sigit-rendang.jpg" class="w-10 xl:w-12 h-10 xl:h-12 rounded-full" alt="">
<div class="flex flex-col justify-between">
<h6 class="text-[#094067] font-medium">Sigit Rendang</h6>
<p class="text-sm text-[#5F6C7B]">Creative Designer</p>
</div>
</div>
</div>
<div class="swiper-slide w-full max-h-[240px] md:max-h-[215px] xl:max-h-[260px] px-12 py-8 md:p-6 xl:p-8 rounded-xl shadow-lg bg-white flex flex-col justify-between">
<p class="text-sm sm:text-lg md:text-sm xl:text-base text-[#5F6C7B] leading-relaxed">“Nah ini nih, aplikasi yang cocok banget untuk saya ketika pengen nyentuh rumput, biar ngga nolep terus di rumah, Terima kasih kepada Ortu saya, teman-teman saya, dan Trippi.”</p>
<div class="flex items-center space-x-4">
<img src="assets/img/avatar/ilham-jawir.jpg" class="w-10 xl:w-12 h-10 xl:h-12 rounded-full" alt="">
<div class="flex flex-col justify-between">
<h6 class="text-[#094067] font-medium">Ilham Jawir</h6>
<p class="text-sm text-[#5F6C7B]">Discord Moderator</p>
</div>
</div>
</div>
<div class="swiper-slide w-full max-h-[240px] md:max-h-[215px] xl:max-h-[260px] px-12 py-8 md:p-6 xl:p-8 rounded-xl shadow-lg bg-white flex flex-col justify-between">
<p class="text-sm sm:text-lg md:text-sm xl:text-base text-[#5F6C7B] leading-relaxed">“All in one aplikasi yang sangat membantu saya dan keluarga saya dikala ingin pergi berlibur, ga cuma bisa cari destinasi wisata, bahkan bisa booking hotel juga.”</p>
<div class="flex items-center space-x-4">
<img src="assets/img/avatar/giga-chad.jpg" class="w-10 xl:w-12 h-10 xl:h-12 rounded-full" alt="">
<div class="flex flex-col justify-between">
<h6 class="text-[#094067] font-medium">Giga Chad</h6>
<p class="text-sm text-[#5F6C7B]">CEO PT. Chad Selalu</p>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section data-aos="fade-up" data-aos-delay="50" data-aos-duration="500" class="w-full py-12 flex flex-col items-center mb-24 overflow-x-hidden">
<span class="mb-4 text-[#3DA9FC] inline-block font-semibold leading-tight">Banyak Yang Nanya</span>
<h2 class="mb-4 text-4xl md:text-5xl text-[#094067] font-extrabold leading-tight text-center lg:text-left">Pertanyaan Yang Sering Diajukan</h2>
<p class="mb-12 text-base md:text-lg tracking-wide leading-8 font-medium text-[#5F6C7B] text-center px-0 lg:px-52">Banyak banget yang sering nanya ginian, jadi biar mimin ga cape nih mimin tulisin aja semuanya di section ini. Kalau masih ada yang nanya kepala kau sini mimin genjreng 🤟🏻</p>
<div class="w-full max-w-2xl text-sm sm:text-base">
<div class="w-full px-7 py-5 border-b border-[rgba(144,180,206,0.25)] flex items-center justify-between text-[#094067]">
<span class="w-full font-medium text-base sm:text-lg">Apakah aplikasi ini sudah mendaftar di Kominfo?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down w-5 sm:w-6 h-5 sm:h-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="w-full px-7 py-5 border-b border-[rgba(144,180,206,0.25)] flex items-center justify-between text-[#094067]">
<span class="w-full font-medium text-base sm:text-lg">Apakah jika saya peduli maka saya lindungi juga?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down w-5 sm:w-6 h-5 sm:h-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="w-full border-b border-[rgba(144,180,206,0.25)] divide-y divide-[rgba(255, 255, 255, 0.1)] text-white bg-[#3DA9FC] rounded-md shadow-[0_30px_60px_rgba(9,64,103,0.25)]">
<div class="px-7 py-5 flex items-center justify-between">
<span class="w-full font-medium text-base sm:text-lg">Apakah aplikasi ini gratis?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="rotate-180 icon icon-tabler icon-tabler-chevron-down w-5 sm:w-6 h-5 sm:h-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="px-7 py-5">
<p>Gratis bang suer, paling ntar ada biaya admin aja pas elu pesen ticket atau booking hotel. Yakali gaada biaya admin, terus adminnya mau dapet duit darimana, masa ngepet 😭</p>
</div>
</div>
<div class="w-full px-7 py-5 border-b border-[rgba(144,180,206,0.25)] flex items-center justify-between text-[#094067]">
<span class="w-full font-medium text-base sm:text-lg">Apakah ada tutor supaya saya tetap bisa produk terus?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down w-5 sm:w-6 h-5 sm:h-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="w-full px-7 py-5 border-b border-[rgba(144,180,206,0.25)] flex items-center justify-between text-[#094067]">
<span class="w-full font-medium text-base sm:text-lg">Gatau lagi mau nambah pertanyaan apa</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down w-5 sm:w-6 h-5 sm:h-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="w-full px-7 py-5 border-b border-[rgba(144,180,206,0.25)] flex items-center justify-between text-[#094067]">
<span class="w-full font-medium text-base sm:text-lg">Yodahlah tinggal section CTA sama Footer doang, mending turu</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down w-5 sm:w-6 h-5 sm:h-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="w-full px-7 py-5 border-b border-[rgba(144,180,206,0.25)] flex items-center justify-between text-[#094067]">
<span class="w-full font-medium text-base sm:text-lg">Cara main lato-lato gimana sih?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down w-5 sm:w-6 h-5 sm:h-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
</div>
</section>
<!-- CTA Section -->
<section data-aos="zoom-in" data-aos-delay="50" data-aos-duration="500" class="relative w-full bg-[#D8EEFE] py-12 rounded-xl shadow-[0_6px_30px_rgba(9,64,103,0.13)] mb-24 overflow-hidden">
<div class="relative z-10 flex flex-col items-center px-4 sm:px-8">
<h3 class="text-2xl sm:text-3xl lg:text-4xl text-[#094067] text-center font-bold leading-tight px-0 lg:px-24 xl:px-48 mb-9">Pengen Dapet Info Seputar Destinasi Wisata? Yuk Berlangganan Di Newsletter Kami</h3>
<div class="w-full flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-4">
<div class="px-6 py-4 w-full md:w-[550px] bg-white shadow-md rounded-md flex space-x-2 focus-within:ring-2 focus-within:ring-[#3DA9FC] ring-offset-2 transition duration-300">
<input class="w-full border-none outline-none focus:outline-none" type="text" placeholder="Tulis alamat email kamu disini">
</div>
<button class="w-full sm:w-fit bg-[#EF4565] px-6 py-4 text-white font-bold shadow-md shadow-[rgba(239,69,101,0.25)] rounded-md hover:bg-[#d03753] transition-colors duration-300">Subscribe</button>
</div>
</div>
<div class="absolute top-[-140%] left-[-27%] w-[500px] h-[680px] border-8 border-[rgba(255,255,255,0.75)] rounded-full"></div>
<div class="absolute bottom-[-190%] left-[-25%] w-[500px] h-[680px] rotate-45 border-8 border-[rgba(255,255,255,0.75)] rounded-full"></div>
<div class="absolute top-[-140%] right-[-27%] w-[500px] h-[680px] border-8 border-[rgba(255,255,255,0.75)] rounded-full"></div>
<div class="absolute bottom-[-190%] right-[-16%] w-[500px] h-[680px] rotate-45 border-8 border-[rgba(255,255,255,0.75)] rounded-full"></div>
</section>
<!-- Footer Section -->
<section data-aos="fade-down">
<div class="py-12 grid grid-cols-6 lg:grid-cols-12 gap-y-8 lg:gap-y-0 lg:gap-x-8">
<div class="col-span-6 space-y-4">
<img src="assets/img/logo.png" class="w-9 h-9" alt="">
<h5 class="text-xl font-bold text-[#094067]">Trippi</h5>
<p class="text-[#5F6C7B] tracking-wide leading-relaxed pr-8">Trippi adalah situs untuk mencari destinasi wisata, termasuk rute pemberangkatan, dan booking penginapan terdekat.</p>
</div>
<div class="col-span-6 sm:col-span-2">
<h6 class="text-[#094067] text-sm font-bold uppercase tracking-wide mb-5">Halaman</h6>
<ul class="space-y-2">
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Destinasi Wisata</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Booking Penginapan</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Destinasi Terdekat</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Profil Saya</a>
</li>
</ul>
</div>
<div class="col-span-6 sm:col-span-2">
<h6 class="text-[#094067] text-sm font-bold uppercase tracking-wide mb-5">Tentang</h6>
<ul class="space-y-2">
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Tentang Kami</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Kebijakan Privasi</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Galeri</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Bantuan</a>
</li>
</ul>
</div>
<div class="col-span-6 sm:col-span-2">
<h6 class="text-[#094067] text-sm font-bold uppercase tracking-wide mb-5">Sosial Media</h6>
<ul class="space-y-2">
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Twitter</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Facebook</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Instagram</a>
</li>
<li>
<a href="#" class="text-[#5F6C7B] hover:text-[#33393f] transition duration-300">Tiktok</a>
</li>
</ul>
</div>
</div>
<div class="py-12 border-t border-[rgba(144,180,206,0.25)] text-center text-sm font-bold tracking-wide uppercase text-[#5F6C7B]">
COPYRIGHT © 2023 — DESIGN BY RSURYA99
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
const swiper = new Swiper('.comment-slider', {
// Optional parameters
loop: true,
slidesPerView: 1,
spaceBetween: 30,
breakpoints: {
768: {
slidesPerView: 2,
},
// when window width is >= 1024px
1024: {
slidesPerView: 3,
},
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>