From d043117557664bde0218f9fa52ffa0fa85813894 Mon Sep 17 00:00:00 2001
From: LailaWulandarii <E41220418@student.polije.ac.id>
Date: Fri, 2 Jan 2026 17:15:24 +0700
Subject: [PATCH] refactor styling code for florist and booking section in
 beranda, add new faq

---
 public/css/user/main.css               |  86 +++++++++++---
 resources/views/user/beranda.blade.php | 148 ++++++++++++-------------
 2 files changed, 143 insertions(+), 91 deletions(-)

diff --git a/public/css/user/main.css b/public/css/user/main.css
index 847d20e..ddb8760 100644
--- a/public/css/user/main.css
+++ b/public/css/user/main.css
@@ -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;
     }
 }
 
diff --git a/resources/views/user/beranda.blade.php b/resources/views/user/beranda.blade.php
index 137c2ba..65434e4 100644
--- a/resources/views/user/beranda.blade.php
+++ b/resources/views/user/beranda.blade.php
@@ -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