refactor styling code for florist and booking section in beranda, add new faq
This commit is contained in:
parent
2e1d977991
commit
d043117557
|
|
@ -401,37 +401,89 @@ .collage-wrapper {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Gambar Besar (2 buah ditumpuk) */
|
/* Container pembungkus kolase agar menempel ke pinggir */
|
||||||
.img-lg {
|
.collage-inner {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
/* Jarak antar gambar kolase */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
}
|
||||||
|
|
||||||
|
/* Gambar tumpuk (stacked) */
|
||||||
|
.img-florist-stacked {
|
||||||
|
width: 230px;
|
||||||
|
/* Lebar tetap agar tidak lari */
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
border-radius: 16px;
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Gambar Sedang/Kecil (1 buah di tengah) */
|
/* Gambar tunggal (single) */
|
||||||
.img-md {
|
.img-florist-single {
|
||||||
width: 100%;
|
width: 200px;
|
||||||
height: 220px;
|
/* Ukuran sedikit lebih kecil agar variatif */
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
border-radius: 16px;
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hover Effect */
|
/* Responsif: Agar di HP gambar tidak pecah */
|
||||||
.img-lg:hover,
|
@media (max-width: 768px) {
|
||||||
.img-md:hover {
|
|
||||||
|
.img-florist-stacked,
|
||||||
|
.img-florist-single {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container utama kolase */
|
||||||
|
.collage-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
width: fit-content;
|
||||||
|
/* Kunci: agar container hanya selebar gambarnya saja */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bagian yang isi 2 gambar tumpuk */
|
||||||
|
.collage-stacked {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
width: 220px;
|
||||||
|
/* Tentukan lebar pasti di sini */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bagian yang isi 1 gambar tunggal */
|
||||||
|
.collage-single {
|
||||||
|
width: 200px;
|
||||||
|
/* Tentukan lebar pasti di sini (buat sedikit lebih kecil agar manis) */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style gambar universal */
|
||||||
|
.img-collage {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 20px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-collage:hover {
|
||||||
transform: scale(1.03);
|
transform: scale(1.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive Fix (Mobile) */
|
/* Responsif untuk HP: kalau kekecilan, lebarnya jadi otomatis */
|
||||||
@media (max-width: 767.98px) {
|
@media (max-width: 576px) {
|
||||||
.collage-wrapper {
|
.collage-stacked {
|
||||||
margin-bottom: 30px;
|
width: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-lg,
|
.collage-single {
|
||||||
.img-md {
|
width: 120px;
|
||||||
height: 160px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,9 +29,9 @@
|
||||||
|
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
<div class="hero-image-wrapper position-relative" data-aos="fade-in" data-aos-delay="500">
|
<div class="hero-image-wrapper position-relative" data-aos="fade-in" data-aos-delay="500">
|
||||||
<img class="img-fluid arch-img img-1 shadow" src="{{ asset('img/hero-buket.jpg') }}"
|
<img class="img-fluid arch-img img-1 shadow" src="{{ asset('img/beranda/hero-buket.jpg') }}"
|
||||||
alt="Buket Bunga">
|
alt="Buket Bunga">
|
||||||
<img class="img-fluid arch-img img-2 shadow" src="{{ asset('img/hero-foto.jpg') }}"
|
<img class="img-fluid arch-img img-2 shadow" src="{{ asset('img/beranda/hero-foto.jpg') }}"
|
||||||
alt="Model Foto">
|
alt="Model Foto">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -40,26 +40,20 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- End Hero-->
|
<!-- End Hero-->
|
||||||
<section class="section-buket" id="florist">
|
<section class="section-buket py-5" id="florist">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
|
<div class="col-lg-6 d-flex justify-content-start mb-5 mb-lg-0">
|
||||||
<div class="col-lg-6 mb-5 mb-lg-0">
|
<div class="collage-container">
|
||||||
<div class="collage-wrapper florist-collage">
|
<div class="collage-stacked">
|
||||||
<div class="row g-3">
|
<img src="{{ asset('img/beranda/florist1.jpeg') }}" class="img-collage shadow-sm"
|
||||||
<div class="col-7">
|
alt="Buket 1">
|
||||||
<div class="d-flex flex-column gap-3">
|
<img src="{{ asset('img/beranda/florist3.jpeg') }}" class="img-collage shadow-sm"
|
||||||
<img src="{{ asset('img/hero-buket.jpg') }}"
|
alt="Buket 2">
|
||||||
class="img-fluid img-lg rounded-4 shadow-sm" alt="Buket 1">
|
</div>
|
||||||
<img src="{{ asset('img/hero-buket.jpg') }}"
|
<div class="collage-single">
|
||||||
class="img-fluid img-lg rounded-4 shadow-sm" alt="Buket 2">
|
<img src="{{ asset('img/beranda/florist2.jpeg') }}" class="img-collage shadow-sm"
|
||||||
</div>
|
alt="Buket 3">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-5 align-self-center">
|
|
||||||
<img src="{{ asset('img/hero-foto.jpg') }}" class="img-fluid img-md rounded-4 shadow-sm"
|
|
||||||
alt="Buket 3">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -67,54 +61,41 @@ class="img-fluid img-lg rounded-4 shadow-sm" alt="Buket 2">
|
||||||
<div class="col-lg-5 offset-lg-1">
|
<div class="col-lg-5 offset-lg-1">
|
||||||
<div class="buket-content">
|
<div class="buket-content">
|
||||||
<h2 class="buket-title">Florist</h2>
|
<h2 class="buket-title">Florist</h2>
|
||||||
<p class="buket-desc">
|
<p class="buket-desc">Flo.do menyajikan rangkaian bunga segar yang dirancang dengan keanggunan untuk
|
||||||
Flo.do menyajikan rangkaian bunga segar yang dirancang dengan keanggunan untuk
|
berbagai momen istimewa.</p>
|
||||||
berbagai momen istimewa, lengkap dengan katalog pilihan dan pemesanan yang mudah
|
|
||||||
secara online.
|
|
||||||
</p>
|
|
||||||
<a href="{{ route('pesan.buket') }}" class="btn btn-buket">Lihat Pilihan Bunga</a>
|
<a href="{{ route('pesan.buket') }}" class="btn btn-buket">Lihat Pilihan Bunga</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section-foto" id="photostudio">
|
<section class="section-foto py-5" id="photostudio">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
|
<div class="col-lg-5 order-2 order-lg-1">
|
||||||
<div class="col-lg-5 mb-5 mb-lg-0 order-2 order-lg-1">
|
|
||||||
<div class="foto-content">
|
<div class="foto-content">
|
||||||
<h2 class="foto-title">Self Photo Studio</h2>
|
<h2 class="foto-title">Self Photo Studio</h2>
|
||||||
<p class="foto-desc">
|
<p class="foto-desc">Flodo menghadirkan pengalaman self photo yang estetik dan personal di Nganjuk.
|
||||||
Flodo menghadirkan pengalaman self photo yang estetik dan personal di Nganjuk,
|
|
||||||
dengan pilihan paket dan jadwal yang dapat kamu atur langsung melalui website.
|
|
||||||
</p>
|
</p>
|
||||||
<a href="{{ route('booking.foto') }}" class="btn btn-foto">Lihat Paket Foto</a>
|
<a href="{{ route('booking.foto') }}" class="btn btn-foto">Lihat Paket Foto</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-6 offset-lg-1 order-1 order-lg-2 mb-5 mb-lg-0">
|
<div class="col-lg-6 offset-lg-1 order-1 order-lg-2 d-flex justify-content-end mb-5 mb-lg-0">
|
||||||
<div class="collage-wrapper foto-collage">
|
<div class="collage-container">
|
||||||
<div class="row g-3">
|
<div class="collage-single">
|
||||||
<div class="col-5 align-self-center">
|
<img src="{{ asset('img/beranda/florist2.jpeg') }}" class="img-collage shadow-sm"
|
||||||
<img src="{{ asset('img/hero-foto.jpg') }}" class="img-fluid img-md rounded-4 shadow-sm"
|
alt="Buket 3">
|
||||||
alt="Foto 3">
|
</div>
|
||||||
</div>
|
<div class="collage-stacked">
|
||||||
|
<img src="{{ asset('img/beranda/florist1.jpeg') }}" class="img-collage shadow-sm"
|
||||||
<div class="col-7">
|
alt="Buket 1">
|
||||||
<div class="d-flex flex-column gap-3">
|
<img src="{{ asset('img/beranda/florist3.jpeg') }}" class="img-collage shadow-sm"
|
||||||
<img src="{{ asset('img/hero-foto.jpg') }}" class="img-fluid img-lg rounded-4 shadow-sm"
|
alt="Buket 2">
|
||||||
alt="Foto 1">
|
|
||||||
<img src="{{ asset('img/hero-foto.jpg') }}" class="img-fluid img-lg rounded-4 shadow-sm"
|
|
||||||
alt="Foto 2">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -122,75 +103,94 @@ class="img-fluid img-lg rounded-4 shadow-sm" alt="Buket 2">
|
||||||
<section class="section faq__v2" id="faq">
|
<section class="section faq__v2" id="faq">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row mb-4">
|
<div class="row mb-4">
|
||||||
<div class="col-md-6 col-lg-7 mx-auto text-center">
|
<div class="col-md-6 col-lg-7 mx-auto text-center" data-aos="fade-up" data-aos-delay="0"
|
||||||
<h2 class="h2 fw-bold mb-3" data-aos="fade-up" data-aos-delay="0">Frequently Asked
|
data-aos-once="true">
|
||||||
Questions</h2>
|
<h2 class="h2 fw-bold mb-3">Frequently Asked Questions</h2>
|
||||||
<p data-aos="fade-up" data-aos-delay="100">Cari tahu tentang layanan florist dan self photo studio kami.
|
<p>Cari tahu tentang layanan florist dan self photo studio kami.</p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 mx-auto" data-aos="fade-up" data-aos-delay="200">
|
<div class="col-md-8 mx-auto" data-aos="fade-up" data-aos-delay="200" data-aos-once="true">
|
||||||
<div class="faq-content">
|
<div class="faq-content">
|
||||||
<div class="accordion custom-accordion" id="accordionPanelsStayOpenExample">
|
<div class="accordion custom-accordion" id="accordionPanelsStayOpenExample">
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header">
|
<h2 class="accordion-header">
|
||||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||||
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
|
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
|
||||||
aria-controls="panelsStayOpen-collapseOne"> Bagaimana cara memesan bunga di Flo.do?
|
aria-controls="panelsStayOpen-collapseOne">
|
||||||
|
Bagaimana cara memesan buket di Flo.do?
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="accordion-collapse collapse show" id="panelsStayOpen-collapseOne">
|
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
|
||||||
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
<div class="accordion-body">
|
||||||
Faucibus in libero risus semper habitant arcu eget. Et integer facilisi eget diam.
|
Pemesanan buket dapat dilakukan melalui menu Pesan Buket dengan memilih buket
|
||||||
|
favorit dari katalog yang tersedia. Anda dapat menggunakan fitur filter untuk
|
||||||
|
memudahkan pencarian. Setelah mengisi formulir pemesanan, silakan selesaikan
|
||||||
|
pembayaran. Setelah pembayaran berhasil, Anda akan diarahkan untuk mengonfirmasi
|
||||||
|
pesanan melalui WhatsApp Flo.do.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header">
|
<h2 class="accordion-header">
|
||||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||||
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
|
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
|
||||||
aria-controls="panelsStayOpen-collapseTwo"> Bagaimana cara memesan layanan foto di
|
aria-controls="panelsStayOpen-collapseTwo">
|
||||||
Flo.do? </button>
|
Bagaimana cara memesan layanan foto di Flo.do?
|
||||||
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo">
|
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
|
||||||
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
<div class="accordion-body">
|
||||||
Faucibus in libero risus semper habitant arcu eget. Et integer facilisi eget diam.
|
Pemesanan layanan foto dilakukan melalui menu Booking Foto dengan memilih paket foto
|
||||||
|
yang diinginkan, lalu menentukan tanggal dan jam yang tersedia pada kalender
|
||||||
|
booking. Setelah mengisi formulir pemesanan, lakukan pembayaran maksimal dalam waktu
|
||||||
|
2 jam dan unggah bukti transfer. Setelah pembayaran selesai, Anda akan diarahkan
|
||||||
|
untuk mengonfirmasi pesanan melalui WhatsApp Flo.do.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header">
|
<h2 class="accordion-header">
|
||||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||||
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
|
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
|
||||||
aria-controls="panelsStayOpen-collapseThree"> Apakah perlu booking jadwal untuk
|
aria-controls="panelsStayOpen-collapseThree">
|
||||||
self photo studio? </button>
|
Apakah perlu booking jadwal untuk self photo studio?
|
||||||
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree">
|
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
|
||||||
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
<div class="accordion-body">
|
||||||
Faucibus in libero risus semper habitant arcu eget. Et integer facilisi eget diam.
|
Ya, sangat disarankan. Dengan melakukan booking melalui website, slot waktu pilihan
|
||||||
|
Anda akan otomatis terkunci oleh sistem sehingga tidak terjadi bentrok jadwal dengan
|
||||||
|
pelanggan lain. Kami menyarankan booking dilakukan minimal H-1 sebelum kunjungan.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header">
|
<h2 class="accordion-header">
|
||||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||||
data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
|
data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
|
||||||
aria-controls="panelsStayOpen-collapseFour">Kapan hasil foto bisa diterima?
|
aria-controls="panelsStayOpen-collapseFour">
|
||||||
|
Bagaimana jika saya terlambat membayar setelah mengisi formulir booking sesi foto?
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseFour">
|
<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse">
|
||||||
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
<div class="accordion-body">
|
||||||
Faucibus in libero risus semper habitant arcu eget. Et integer facilisi eget diam.
|
Sistem menerapkan batas waktu pembayaran selama 2 jam setelah formulir booking
|
||||||
|
diisi. Jika hingga batas waktu tersebut bukti transfer belum diunggah, pesanan atau
|
||||||
|
slot jadwal foto akan otomatis dibatalkan agar dapat digunakan oleh pelanggan lain.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- End FAQ-->
|
|
||||||
</section>
|
</section>
|
||||||
<!-- End FAQ-->
|
<!-- End FAQ-->
|
||||||
@endsection
|
@endsection
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue