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;
|
||||
}
|
||||
|
||||
/* Gambar Besar (2 buah ditumpuk) */
|
||||
.img-lg {
|
||||
/* Container pembungkus kolase agar menempel ke pinggir */
|
||||
.collage-inner {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
/* Jarak antar gambar kolase */
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* Gambar tumpuk (stacked) */
|
||||
.img-florist-stacked {
|
||||
width: 230px;
|
||||
/* Lebar tetap agar tidak lari */
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Gambar Sedang/Kecil (1 buah di tengah) */
|
||||
.img-md {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
/* Gambar tunggal (single) */
|
||||
.img-florist-single {
|
||||
width: 200px;
|
||||
/* Ukuran sedikit lebih kecil agar variatif */
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Hover Effect */
|
||||
.img-lg:hover,
|
||||
.img-md:hover {
|
||||
/* Responsif: Agar di HP gambar tidak pecah */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Responsive Fix (Mobile) */
|
||||
@media (max-width: 767.98px) {
|
||||
.collage-wrapper {
|
||||
margin-bottom: 30px;
|
||||
/* Responsif untuk HP: kalau kekecilan, lebarnya jadi otomatis */
|
||||
@media (max-width: 576px) {
|
||||
.collage-stacked {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.img-lg,
|
||||
.img-md {
|
||||
height: 160px;
|
||||
.collage-single {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@
|
|||
|
||||
<div class="col-lg-6">
|
||||
<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">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,26 +40,20 @@
|
|||
</div>
|
||||
</section>
|
||||
<!-- End Hero-->
|
||||
<section class="section-buket" id="florist">
|
||||
<section class="section-buket py-5" id="florist">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<div class="col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="collage-wrapper florist-collage">
|
||||
<div class="row g-3">
|
||||
<div class="col-7">
|
||||
<div class="d-flex flex-column gap-3">
|
||||
<img src="{{ asset('img/hero-buket.jpg') }}"
|
||||
class="img-fluid img-lg rounded-4 shadow-sm" alt="Buket 1">
|
||||
<img src="{{ asset('img/hero-buket.jpg') }}"
|
||||
class="img-fluid img-lg rounded-4 shadow-sm" alt="Buket 2">
|
||||
</div>
|
||||
</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 class="col-lg-6 d-flex justify-content-start mb-5 mb-lg-0">
|
||||
<div class="collage-container">
|
||||
<div class="collage-stacked">
|
||||
<img src="{{ asset('img/beranda/florist1.jpeg') }}" class="img-collage shadow-sm"
|
||||
alt="Buket 1">
|
||||
<img src="{{ asset('img/beranda/florist3.jpeg') }}" class="img-collage shadow-sm"
|
||||
alt="Buket 2">
|
||||
</div>
|
||||
<div class="collage-single">
|
||||
<img src="{{ asset('img/beranda/florist2.jpeg') }}" class="img-collage shadow-sm"
|
||||
alt="Buket 3">
|
||||
</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="buket-content">
|
||||
<h2 class="buket-title">Florist</h2>
|
||||
<p class="buket-desc">
|
||||
Flo.do menyajikan rangkaian bunga segar yang dirancang dengan keanggunan untuk
|
||||
berbagai momen istimewa, lengkap dengan katalog pilihan dan pemesanan yang mudah
|
||||
secara online.
|
||||
</p>
|
||||
<p class="buket-desc">Flo.do menyajikan rangkaian bunga segar yang dirancang dengan keanggunan untuk
|
||||
berbagai momen istimewa.</p>
|
||||
<a href="{{ route('pesan.buket') }}" class="btn btn-buket">Lihat Pilihan Bunga</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-foto" id="photostudio">
|
||||
<section class="section-foto py-5" id="photostudio">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<div class="col-lg-5 mb-5 mb-lg-0 order-2 order-lg-1">
|
||||
<div class="col-lg-5 order-2 order-lg-1">
|
||||
<div class="foto-content">
|
||||
<h2 class="foto-title">Self Photo Studio</h2>
|
||||
<p class="foto-desc">
|
||||
Flodo menghadirkan pengalaman self photo yang estetik dan personal di Nganjuk,
|
||||
dengan pilihan paket dan jadwal yang dapat kamu atur langsung melalui website.
|
||||
<p class="foto-desc">Flodo menghadirkan pengalaman self photo yang estetik dan personal di Nganjuk.
|
||||
</p>
|
||||
<a href="{{ route('booking.foto') }}" class="btn btn-foto">Lihat Paket Foto</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 offset-lg-1 order-1 order-lg-2 mb-5 mb-lg-0">
|
||||
<div class="collage-wrapper foto-collage">
|
||||
<div class="row g-3">
|
||||
<div class="col-5 align-self-center">
|
||||
<img src="{{ asset('img/hero-foto.jpg') }}" class="img-fluid img-md rounded-4 shadow-sm"
|
||||
alt="Foto 3">
|
||||
</div>
|
||||
|
||||
<div class="col-7">
|
||||
<div class="d-flex flex-column gap-3">
|
||||
<img src="{{ asset('img/hero-foto.jpg') }}" class="img-fluid img-lg rounded-4 shadow-sm"
|
||||
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 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-container">
|
||||
<div class="collage-single">
|
||||
<img src="{{ asset('img/beranda/florist2.jpeg') }}" class="img-collage shadow-sm"
|
||||
alt="Buket 3">
|
||||
</div>
|
||||
<div class="collage-stacked">
|
||||
<img src="{{ asset('img/beranda/florist1.jpeg') }}" class="img-collage shadow-sm"
|
||||
alt="Buket 1">
|
||||
<img src="{{ asset('img/beranda/florist3.jpeg') }}" class="img-collage shadow-sm"
|
||||
alt="Buket 2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -122,75 +103,94 @@ class="img-fluid img-lg rounded-4 shadow-sm" alt="Buket 2">
|
|||
<section class="section faq__v2" id="faq">
|
||||
<div class="container">
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6 col-lg-7 mx-auto text-center">
|
||||
<h2 class="h2 fw-bold mb-3" data-aos="fade-up" data-aos-delay="0">Frequently Asked
|
||||
Questions</h2>
|
||||
<p data-aos="fade-up" data-aos-delay="100">Cari tahu tentang layanan florist dan self photo studio kami.
|
||||
</p>
|
||||
<div class="col-md-6 col-lg-7 mx-auto text-center" data-aos="fade-up" data-aos-delay="0"
|
||||
data-aos-once="true">
|
||||
<h2 class="h2 fw-bold mb-3">Frequently Asked Questions</h2>
|
||||
<p>Cari tahu tentang layanan florist dan self photo studio kami.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="accordion custom-accordion" id="accordionPanelsStayOpenExample">
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
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>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse show" id="panelsStayOpen-collapseOne">
|
||||
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Faucibus in libero risus semper habitant arcu eget. Et integer facilisi eget diam.
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
|
||||
<div class="accordion-body">
|
||||
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 class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
|
||||
aria-controls="panelsStayOpen-collapseTwo"> Bagaimana cara memesan layanan foto di
|
||||
Flo.do? </button>
|
||||
aria-controls="panelsStayOpen-collapseTwo">
|
||||
Bagaimana cara memesan layanan foto di Flo.do?
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo">
|
||||
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Faucibus in libero risus semper habitant arcu eget. Et integer facilisi eget diam.
|
||||
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
|
||||
<div class="accordion-body">
|
||||
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 class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
|
||||
aria-controls="panelsStayOpen-collapseThree"> Apakah perlu booking jadwal untuk
|
||||
self photo studio? </button>
|
||||
aria-controls="panelsStayOpen-collapseThree">
|
||||
Apakah perlu booking jadwal untuk self photo studio?
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree">
|
||||
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Faucibus in libero risus semper habitant arcu eget. Et integer facilisi eget diam.
|
||||
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
|
||||
<div class="accordion-body">
|
||||
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 class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
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>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseFour">
|
||||
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Faucibus in libero risus semper habitant arcu eget. Et integer facilisi eget diam.
|
||||
<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse">
|
||||
<div class="accordion-body">
|
||||
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>
|
||||
<!-- End FAQ-->
|
||||
</section>
|
||||
<!-- End FAQ-->
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in New Issue