-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
318 lines (305 loc) · 20.4 KB
/
index.html
File metadata and controls
318 lines (305 loc) · 20.4 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bwarasa adalah website food delivery yang menyediakan kue burasa khas Bugis. Kue burasa adalah kue tradisional yang berasal dari daerah Bugis, Sulawesi Selatan, Indonesia. Kue ini terbuat dari tepung beras yang diolah dengan gula merah dan santan. Di Bwarasa, kami menyediakan kue burasa yang dijamin fresh dan lezat. Dengan website kami yang mudah digunakan, Anda dapat memesan kue burasa khas Bugis favorit Anda dengan mudah dan tanpa harus keluar rumah. Pesan sekarang dan rasakan kelezatan kue burasa asli Bugis di rumah Anda!">
<meta name="keywords" content="Kue burasa khas Bugis, Kue tradisional Bugis, Kue burasa online, Jual kue burasa, Kue burasa fresh, Kue burasa lezat, Kue burasa Sulawesi Selatan, Beli kue burasa online, Kue burasa asli Bugis, Pesan kue burasa online, Kue burasa enak, Kue tradisional Indonesia, Kue burasa authentic, Toko kue burasa online, Website kue burasa">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:description" content="Bwarasa adalah website food delivery yang menyediakan kue burasa khas Bugis yang fresh dan lezat, pesan sekarang di Bwarasa.com">
<meta property="og:url" content="https://perdiDev.github.io/bwarasa">
<meta property="og:type" content="website">
<meta property="og:title" content="Bwarasa - Kue Burasa Khas Bugis">
<meta property="og:image" content="https://perdiDev.github.io/bwarasa/dist/img/logo-bwarasa.png">
<link rel="apple-touch-icon" href="./dist/img/logo-circle.svg">
<title>Bwarasa - Kue Burasa Khas Bugis | Jual Kue Burasa Online</title>
<link href="./dist/output.css" rel="stylesheet">
<link rel="shortcut icon" href="./dist/img/logo-circle.svg" type="image/x-icon">
<!-- Font -->
<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=Fredoka:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="absolute top-0 left-0 z-10 w-full h-fit py-4 bg-secondary bg-opacity-30">
<div class="container mx-auto">
<div class="w-full flex justify-between items-center">
<div class="font-semibold text-primary text-2xl"><a href="#">Bwa<span class="text-secondary">rasa</span></a></div>
<div class="space-x-2 text-base">
<a href="#" class="hover:text-primary">Home</a>
<a href="#about" class="hover:text-primary hidden md:inline">Burasa</a>
<a href="#kualitas" class="hover:text-primary hidden md:inline">Kualitas</a>
<a href="#pesan" class="hover:text-primary hidden md:inline">Harga</a>
<a href="#pesan" class="bg-secondary py-[2px] p-1 text-white rounded-lg hover:bg-primary">Pesan</a>
</div>
</div>
</div>
</header>
<!-- End header -->
<!-- Hero section -->
<section id="home" class="container mx-auto">
<div class="w-full h-screen flex flex-col md:flex-row justify-center md:justify-between items-center">
<div class="w-full md:w-1/2 flex justify-end py-8 md:order-2">
<div class="w-3/5 md:w-3/2 lg:w-1/2 h-64 md:h-96 bg-secondary rounded-tl-[44px] md:rounded-tl-[64px] rounded-r-xl md:rounded-r-3xl relative group">
<div class="absolute w-64 md:w-96 lg:w-[32rem] right-0 bottom-6 lg:-bottom-4 group-hover:scale-105 transition-all">
<img src="./dist/img/hero/burasa-hero.webp" alt="Bwarasa Perdi" class="w-64 md:w-96 lg:w-[32rem]">
</div>
<div class="absolute w-16 md:w-24 lg:w-32 -right-4 md:-right-6 lg:-right-12 top-3 animate-space">
<img src="./dist/img/hero/burasa-hero-2.webp" alt="Bwarasa Perdi" class="w-16 md:w-24 lg:w-32">
</div>
</div>
</div>
<div class="md:w-1/2 space-y-4 md:space-y-6">
<div class="space-y-2">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-semibold">Nikmati pagi dengan Bwarasa</h1>
<h2 class="text-xl md:text-2xl font-normal">Ciptakan cita rasa yang tak terlupakan</h2>
</div>
<button class="bg-secondary px-8 md:px-12 py-1 rounded-lg tracking-wider hover:bg-primary">
<a href="#pesan" class="font-medium text-white text-xl">Pesan Sekarang</a>
</button>
</div>
</div>
</section>
<!-- End hero -->
<!-- About section -->
<section id="about" class="w-full bg-primary h-fit">
<div class="container mx-auto">
<div class="w-full flex flex-col gap-6 md:gap-2 lg:gap-0 md:flex-row md:items-center py-24 px-6">
<div class="md:w-5/12 flex justify-center">
<div class="w-52 md:w-72 aspect-square bg-secondary rounded-xl relative group transition-all">
<div class="w-64 md:w-80 absolute top-0 right-0 group-hover:scale-105 group-hover:-rotate-3 transition-all">
<img src="./dist/img/about/burasa-about.webp" alt="Bwarasa" class="w-full">
</div>
<div class="w-12 md:w-24 absolute bottom-0 right-0 group-hover:scale-95 group-hover:rotate-6 transition-all">
<img src="./dist/img/about/burasa-about-2.webp" alt="Bwarasa" class="w-full">
</div>
</div>
</div>
<div class="md:w-7/12 space-y-2">
<h3 class="font-medium text-2xl md:text-4xl">Bwarasa kue khas bugis</h3>
<p class="md:w-11/12 font-normal text-base text-greyness md:text-lg text-justify">
Kue ini nikmat dan gurih dengan bahan dasar yang legit gurih khas kelapa.
Kue ini biasanya dihidangkan ketika ada acara atau perayaan penting bagi masyarakat sulawesi.
Namun, sekarang kue ini bisa anda nikmati tanpa harus menunggu acara-acara tersebut.</p>
</div>
</div>
</div>
</section>
<!-- End about -->
<!-- Quality section -->
<section id="kualitas" class="container mx-auto">
<div class="w-full flex flex-col items-center py-24 space-y-5 md:space-y-8">
<h3 class="font-semibold text-xl md:text-2xl">Kualitas Bwarasa</h3>
<div class="w-full px-2 md:px-8 lg:px-36 flex flex-col md:flex-row justify-between gap-8">
<div class="md:w-1/2 space-y-8">
<div class="w-full flex gap-3 md:gap-6 items-center">
<div class="w-fit h-fit bg-secondary rounded-lg md:rounded-xl p-1 md:p-2 hover:bg-primary hover:scale-105 transition-all">
<img src="./dist/img/kualitas/toaster2.svg" alt="toaster-icon" class="w-12 h-12 md:w-16 md:h-16">
</div>
<div class="basis-4/5">
<h5 class="font-medium text-base md:text-lg">Rasa yang khas</h5>
<p class="text-sm md:text-base text-greyness font-normal leading-tight md:leading-snug">Setiap gigitan dipastikan memberikan kenikmatan yang sesuai</p>
</div>
</div>
<div class="w-full flex gap-3 md:gap-6 items-center">
<div class="w-fit h-fit bg-secondary rounded-lg md:rounded-xl p-1 md:p-2 hover:bg-primary hover:scale-105 transition-all">
<img src="./dist/img/kualitas/cutter.svg" alt="toaster-icon" class="w-12 h-12 md:w-16 md:h-16">
</div>
<div class="basis-4/5">
<h5 class="font-medium text-base md:text-lg">Gurih Kelapa</h5>
<p class="text-sm md:text-base text-greyness font-normal md:leading-snug">Setiap bijih diperhitungkan dengan komposisi yang pas</p>
</div>
</div>
</div>
<div class="md:w-1/2 space-y-8">
<div class="w-full flex gap-3 md:gap-6 items-center">
<div class="w-fit h-fit bg-secondary rounded-lg md:rounded-xl p-1 md:p-2 hover:bg-primary hover:scale-105 transition-all">
<img src="./dist/img/kualitas/glove.svg" alt="toaster-icon" class="w-12 h-12 md:w-16 md:h-16">
</div>
<div class="basis-4/5">
<h5 class="font-medium text-base md:text-lg">100% Higenis</h5>
<p class="text-sm md:text-base text-greyness font-normal md:leading-snug">Proses pembuatan dilakukan dengan memperhatikan kebersihan makanan</p>
</div>
</div>
<div class="w-full flex gap-3 md:gap-6 items-center">
<div class="w-fit h-fit bg-secondary rounded-lg md:rounded-xl p-1 md:p-2 hover:bg-primary hover:scale-105 transition-all">
<img src="./dist/img/kualitas/blender.svg" alt="toaster-icon" class="w-12 h-12 md:w-16 md:h-16">
</div>
<div class="basis-4/5">
<h5 class="font-medium text-base md:text-lg">Baru dibuat</h5>
<p class="text-sm md:text-base text-greyness font-normal md:leading-snug">Kue diproduksi setiap hari dengan bahan yang terbaru</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End quality -->
<!-- Offering section -->
<section id="offering" class="container mx-auto">
<div class="flex flex-col md:flex-row py-12 md:py-24 px-4 md:px-24 bg-primary rounded-xl gap-6">
<div class="md:w-2/5 md:order-2 flex justify-center md:justify-end p-6 md:p-0">
<img src="./dist/img/siap-antar/man-delivery.svg" alt="Bwarasa-siap-antar">
</div>
<div class="md:w-3/5">
<div class="">
<h1 class="text-4xl md:text-6xl font-bold mb-6 md:mb-10">Siap antar</h1>
</div>
<div class="space-y-6">
<div class="flex space-x-3 items-center hover:scale-105 transition-all">
<img src="./dist/img/siap-antar/truk.svg" alt="Bwarasa" class="w-8 md:w-10 lg:w-11">
<p class="font-medium text-sm md:text-lg leading-snug">Pembelian hanya berlaku untuk daerah sekitar segeri</p>
</div>
<div class="flex space-x-3 items-center hover:scale-105 transition-all">
<img src="./dist/img/siap-antar/keranjang.svg" alt="Bwarasa" class="w-8 md:w-10 lg:w-11">
<p class="font-medium text-sm md:text-lg leading-snug">Pesan terlebih dahulu untuk memastikan ketersediaan</p>
</div>
<div class="flex space-x-3 items-center hover:scale-105 transition-all">
<img src="./dist/img/siap-antar/invoice.svg" alt="Bwarasa" class="w-8 md:w-10 lg:w-11">
<p class="font-medium text-sm md:text-lg leading-snug">Total pesanan sudah termasuk ongkir</p>
</div>
</div>
</div>
</div>
</section>
<!-- End offering -->
<!-- Section Pesan -->
<section id="pesan" class="container mx-auto">
<div class="flex flex-col items-center py-16 gap-8">
<h3 class="font-semibold text-xl md:text-2xl">Pesan Sekarang</h3>
<div class="flex flex-col md:flex-row justify-center gap-5">
<div class="p-4 md:p-2 bg-secondary rounded-xl md:rounded-2xl flex md:flex-col items-center gap-3 md:gap-0 hover:scale-105 transition-all">
<h5 class="font-bold text-3xl">1</h5>
<p class="font-medium text-base md:w-32 text-center leading-tight">Klik pesanan yang diinginkan</p>
</div>
<div class="p-4 md:p-2 bg-secondary rounded-xl md:rounded-2xl flex md:flex-col items-center gap-3 md:gap-0 hover:scale-105 transition-all">
<h5 class="font-bold text-3xl">2</h5>
<p class="font-medium text-base md:w-32 text-center leading-tight">Konfirmasi pesanan</p>
</div>
<div class="p-4 md:p-2 bg-secondary rounded-xl md:rounded-2xl flex md:flex-col items-center gap-3 md:gap-0 hover:scale-105 transition-all">
<h5 class="font-bold text-3xl">3</h5>
<p class="font-medium text-base md:w-24 text-center leading-tight">Tunggu pesanan</p>
</div>
<div class="p-4 md:p-2 bg-secondary rounded-xl md:rounded-2xl flex md:flex-col items-center gap-3 md:gap-0 hover:scale-105 transition-all">
<h5 class="font-bold text-3xl">4</h5>
<p class="font-medium text-base md:w-32 text-center leading-tight">Bayar dan nikmati bwarasa</p>
</div>
</div>
</div>
</section>
<!-- End pesan -->
<!-- Harga -->
<section id="harga">
<div class="w-full pb-16 flex justify-center">
<div class="flex flex-col md:flex-row md:justify-center items-center gap-6">
<!-- Coba-coba -->
<div class="w-52 border border-primary px-4 py-4 md:px-5 rounded-xl hover:scale-105 transition-all">
<h5 class="font-semibold text-xl text-center">Coba-coba</h5>
<div class="py-3 space-y-[10px]">
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">30 biji bwarasa</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Gratis antar</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Mudah dipesan</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Prioritas</p>
</div>
<div class="flex items-center gap-2">
<p class="font-semibold text-base pl-[3px]">Rp.30.000</p>
</div>
</div>
<a href="https://api.whatsapp.com/send?phone=6287817022304&text=Pesan%20bwarasa%20versi%20coba-coba">
<button class="w-full h-fit py-1 bg-primary rounded-xl transition-colors hover:bg-secondary">
<p class="font-semibold text-lg">Pesan</p>
</button>
</a>
</div>
<!-- Teman ngeteh -->
<div class="w-52 bg-primary px-4 py-4 md:px-5 rounded-xl md:scale-105 hover:scale-110 transition-all">
<h5 class="font-semibold text-xl text-center">Teman Ngeteh</h5>
<div class="py-3 space-y-[10px]">
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">50 biji bwarasa</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Gratis antar</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Mudah dipesan</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Prioritas Utama</p>
</div>
<div class="flex items-center gap-2">
<p class="font-semibold text-base pl-[3px]">Rp.50.000</p>
</div>
</div>
<a href="https://api.whatsapp.com/send?phone=6287817022304&text=Pesan%20bwarasa%20versi%20teman%20ngeteh">
<button class="w-full h-fit py-1 bg-secondary rounded-xl transition-colors hover:bg-opacity-50">
<p class="font-semibold text-lg">Pesan</p>
</button>
</a>
</div>
<!-- Coba-coba -->
<div class="w-52 border border-primary px-4 py-4 md:px-5 rounded-xl hover:scale-105 transition-all">
<h5 class="font-semibold text-xl text-center">Oleh-oleh</h5>
<div class="py-3 space-y-[10px]">
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">100 biji bwarasa</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Gratis antar</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Mudah dipesan</p>
</div>
<div class="flex items-center gap-2">
<img src="./dist/img/price/ceklist.svg" alt="bwarasa" class="w-6 md:w-7">
<p class="font-medium text-base">Sangat prioritas</p>
</div>
<div class="flex items-center gap-2">
<p class="font-semibold text-base pl-[3px]">Rp.100.000</p>
</div>
</div>
<a href="https://api.whatsapp.com/send?phone=6287817022304&text=Pesan%20bwarasa%20versi%20oleh-oleh">
<button class="w-full h-fit py-1 bg-primary rounded-xl transition-colors hover:bg-secondary">
<p class="font-semibold text-lg">Pesan</p>
</button>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="container pt-10 pb-6 mx-auto">
<div class="w-full flex justify-center">
<div class="flex justify-center items-center gap-2 py-2 w-full md:w-1/2 bg-primary rounded-lg cursor-pointer hover:bg-opacity-70 animate-wiggle">
<a href="https://api.whatsapp.com/send?phone=6287817022304">
<p class="font-semibold animate-pulse">Hubungi penjual</p>
</a>
<a href="https://api.whatsapp.com/send?phone=6287817022304">
<img src="./dist/img/footer/arrow.svg" alt="arrow bwarasa" class="w-5 animate-more">
</a>
</div>
</div>
</footer>
</body>
</html>