From 06ab0f42a5a1064aef99524300acf1a294803ccb Mon Sep 17 00:00:00 2001
From: Bayu Lukman Yusuf <bayuly94@gmail.com>
Date: Tue, 3 Mar 2026 14:52:32 +0700
Subject: [PATCH] banner aspect ratio

---
 .../components/grocery/home-slider.blade.php  | 81 +++++++++----------
 resources/views/home/grocery.blade.php        | 17 ++--
 2 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/resources/views/components/grocery/home-slider.blade.php b/resources/views/components/grocery/home-slider.blade.php
index d945102..a940c41 100644
--- a/resources/views/components/grocery/home-slider.blade.php
+++ b/resources/views/components/grocery/home-slider.blade.php
@@ -1,50 +1,47 @@
 <section class="position-relative">
-    <div class="swiper position-absolute top-0 start-0 w-100 h-100"
-        data-swiper='{
-          "effect": "fade",
-          "loop": true,
-          "speed": 400,
-          "pagination": {
-            "el": ".swiper-pagination",
-            "clickable": true
-          },
-          "autoplay": {
-            "delay": 5500,
-            "disableOnInteraction": false
-          }
-        }'
-        data-bs-theme="dark">
-        <div class="swiper-wrapper">
+    <div class="aspect-ratio-container" style="aspect-ratio: 900/446;">
+        <div class="swiper position-absolute top-0 start-0 w-100 h-100"
+            data-swiper='{
+              "effect": "fade",
+              "loop": true,
+              "speed": 400,
+              "pagination": {
+                "el": ".swiper-pagination",
+                "clickable": true
+              },
+              "autoplay": {
+                "delay": 5500,
+                "disableOnInteraction": false
+              }
+            }'
+            data-bs-theme="dark">
+            <div class="swiper-wrapper">
 
-            @foreach ($items as $item)
-                <div class="swiper-slide" style="background-color: #6dafca">
-                    {{-- <div class="position-absolute d-flex align-items-center w-100 h-100 z-2">
-                        <div class="container mt-lg-n4">
-                            <div class="row">
-                                <div class="col-9 col-sm-8 col-md-7 col-lg-6">
-                                    <p class="fs-sm text-white mb-lg-4">🔥 Free shipping - order over
-                                        <strong>50$</strong>
-                                    </p>
-                                    <h2 class="display-4 pb-2 pb-md-3 pb-lg-4">Healthy Food Available to Everyone</h2>
-                                    <a class="btn btn-lg btn-outline-light rounded-pill"
-                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop now</a>
+                @foreach ($items as $item)
+                    <div class="swiper-slide" style="background-color: #6dafca">
+                        {{-- <div class="position-absolute d-flex align-items-center w-100 h-100 z-2">
+                            <div class="container mt-lg-n4">
+                                <div class="row">
+                                    <div class="col-9 col-sm-8 col-md-7 col-lg-6">
+                                        <p class="fs-sm text-white mb-lg-4">🔥 Free shipping - order over
+                                            <strong>50$</strong>
+                                        </p>
+                                        <h2 class="display-4 pb-2 pb-md-3 pb-lg-4">Healthy Food Available to Everyone</h2>
+                                        <a class="btn btn-lg btn-outline-light rounded-pill"
+                                            href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop now</a>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </div> --}}
-                    <img src="{{ env('WMS_ASSET_URL') . '/' . $item->filename }}"
-                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
-                </div>
-            @endforeach
+                        </div> --}}
+                        <img src="{{ env('WMS_ASSET_URL') . '/' . $item->filename }}"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
+                    </div>
+                @endforeach
 
+            </div>
+
+            <!-- Slider pagination (Bullets) -->
+            <div class="swiper-pagination pb-sm-2"></div>
         </div>
-
-        <!-- Slider pagination (Bullets) -->
-        <div class="swiper-pagination pb-sm-2"></div>
     </div>
-    <div class="d-md-none" style="height: 380px"></div>
-    <div class="d-none d-md-block d-lg-none" style="height: 420px"></div>
-    <div class="d-none d-lg-block d-xl-none" style="height: 580px"></div>
-    <div class="d-none d-xl-block d-xxl-none" style="height: 660px"></div>
-    <div class="d-none d-xxl-block" style="height: 804px"></div>
 </section>
diff --git a/resources/views/home/grocery.blade.php b/resources/views/home/grocery.blade.php
index 0b64b46..42d1ac3 100644
--- a/resources/views/home/grocery.blade.php
+++ b/resources/views/home/grocery.blade.php
@@ -1,8 +1,6 @@
 @extends('layouts.landing', ['title' => config('app.tagline')])
 
 @section('content')
- 
-
     <x-layout.header-grocery />
 
 
@@ -26,7 +24,7 @@
 
 
         <!-- Banner + Special products -->
-        <x-grocery.special-products/>
+        <x-grocery.special-products />
 
 
         <!-- Recipes -->
@@ -166,12 +164,12 @@
                         class="d-flex flex-column flex-sm-row align-items-center h-100 bg-body-tertiary rounded-5 overflow-hidden">
                         <div class="order-sm-2 text-center text-sm-start pt-4 px-4 pb-2 pb-sm-4 mt-3 mt-sm-0">
                             <h2 class="h4 mb-4">Make online shop easier with our AsiaGolf App</h2>
-                            <div
-                                class="d-flex flex-sm-wrap justify-content-center justify-content-sm-start gap-2 gap-sm-3">
-                                <a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0" href="https://play.google.com/store/apps/details?id=id.asiagolf.app&hl=id"
+                            <div class="d-flex flex-sm-wrap justify-content-center justify-content-sm-start gap-2 gap-sm-3">
+                                <a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0"
+                                    href="https://play.google.com/store/apps/details?id=id.asiagolf.app&hl=id"
                                     aria-label="Download on Google Play">
-                                    <svg class="flex-shrink-0 ms-n1 me-2" xmlns="http://www.w3.org/2000/svg"
-                                        width="24" height="24" viewBox="0 0 24 24" fill="none">
+                                    <svg class="flex-shrink-0 ms-n1 me-2" xmlns="http://www.w3.org/2000/svg" width="24"
+                                        height="24" viewBox="0 0 24 24" fill="none">
                                         <path
                                             d="M19.665 10.561l-3.251-1.878-3.329 3.329 3.328 3.329 3.263-1.884c.509-.309.812-.849.812-1.444s-.304-1.135-.823-1.451z"
                                             fill="#ffce00" />
@@ -191,7 +189,8 @@
                                             d="M24.575 9.45c-2.184 0-3.914 1.704-3.914 4.071 0 2.272 1.729 4.071 3.914 4.071s3.914-1.704 3.914-4.071c0-2.461-1.729-4.071-3.914-4.071zm0 6.438c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.184.947 2.184 2.462c0 1.42-1.001 2.462-2.184 2.462zM16.11 9.45c-2.184 0-3.914 1.704-3.914 4.071 0 2.272 1.729 4.071 3.914 4.071s3.914-1.704 3.914-4.071c0-2.461-1.729-4.071-3.914-4.071zm0 6.438c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.184.947 2.184 2.462c0 1.42-1.001 2.462-2.184 2.462zM6.007 10.681v1.704h3.914c-.091.947-.455 1.704-.91 2.177-.546.568-1.456 1.231-3.004 1.231-2.457 0-4.278-1.988-4.278-4.544s1.911-4.544 4.278-4.544c1.274 0 2.275.568 3.004 1.231l1.183-1.231C9.193 5.757 7.918 5 6.098 5 2.822 5 0 7.84 0 11.249s2.822 6.249 6.098 6.249c1.82 0 3.095-.568 4.187-1.799 1.092-1.136 1.456-2.745 1.456-3.976 0-.379 0-.757-.091-1.041H6.007zm41.322 1.325c-.364-.947-1.274-2.556-3.277-2.556s-3.641 1.61-3.641 4.071c0 2.272 1.638 4.071 3.823 4.071 1.729 0 2.822-1.136 3.186-1.799l-1.274-.947c-.455.663-1.001 1.136-1.911 1.136s-1.456-.379-1.911-1.231l5.188-2.272-.182-.473zm-5.279 1.326c0-1.515 1.183-2.367 2.002-2.367.637 0 1.274.379 1.456.852l-3.459 1.515zm-4.278 3.882h1.729V5.379h-1.729v11.834zm-2.73-6.911c-.455-.473-1.183-.947-2.093-.947-1.911 0-3.732 1.799-3.732 4.071s1.729 3.976 3.732 3.976c.91 0 1.638-.473 2.002-.947h.091v.568c0 1.515-.819 2.367-2.093 2.367-1.001 0-1.729-.757-1.911-1.42l-1.456.663C30.036 19.675 31.128 21 33.039 21c2.002 0 3.641-1.231 3.641-4.166V9.639h-1.638v.663zm-2.002 5.586c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.093 1.041 2.093 2.462-.91 2.462-2.093 2.462zM55.247 5.379h-4.096v11.834h1.729v-4.45h2.367c1.911 0 3.732-1.42 3.732-3.692s-1.82-3.692-3.732-3.692zm.091 5.681h-2.457V6.988h2.457c1.274 0 2.002 1.136 2.002 1.988-.091 1.041-.819 2.083-2.002 2.083zm10.467-1.704c-1.274 0-2.549.568-3.004 1.799l1.547.663c.364-.663.91-.852 1.547-.852.91 0 1.729.568 1.82 1.515v.095c-.273-.189-1.001-.473-1.729-.473-1.638 0-3.277.947-3.277 2.651 0 1.609 1.365 2.651 2.821 2.651 1.183 0 1.729-.568 2.184-1.136h.091v.947h1.638v-4.544c-.182-2.083-1.729-3.314-3.641-3.314zm-.182 6.533c-.546 0-1.365-.284-1.365-1.041 0-.947 1.001-1.231 1.82-1.231.728 0 1.092.189 1.547.379-.182 1.136-1.092 1.894-2.002 1.894zm9.557-6.249l-1.911 5.112h-.091l-2.002-5.112h-1.82l3.004 7.195-1.729 3.976h1.729L77 9.639h-1.82zm-15.291 7.574h1.729V5.379h-1.729v11.834z" />
                                     </svg>
                                 </a>
-                                <a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0" href="https://apps.apple.com/us/app/asiagolf-points/id6633417013"
+                                <a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0"
+                                    href="https://apps.apple.com/us/app/asiagolf-points/id6633417013"
                                     aria-label="Download on App Store">
                                     <i class="ci-apple lead ms-n1 me-2"></i>
                                     <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="77"