Merge branch 'feature-product' into development

app/Http/Controllers/ProductController.php

@@ -6,6 +6,7 @@ use App\Models\Gender;
 use App\Models\StoreCategory;
 use App\Repositories\Catalog\CategoryRepository;
 use App\Repositories\Catalog\GenderRepository;
+use App\Repositories\AnalyticsProductVisitRepository;
 use App\Repositories\Catalog\ProductRepository;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
@@ -477,11 +478,57 @@ class ProductController extends Controller
         ]);
     }
 
+    /**
+     * Track product visit analytics
+     */
+    private function trackProductVisit(int $productId, Request $request): void
+    {
+        try {
+            $analyticsRepository = new AnalyticsProductVisitRepository();
+            
+            $visitData = [
+                'item_id' => $productId,
+                'user_id' => auth()->id(),
+                'session_id' => session()->getId(),
+                'ip_address' => $request->ip(),
+                'user_agent' => $request->userAgent(),
+                'started_at' => now(),
+                'duration_seconds' => 0, // Will be updated when user leaves
+                'device_type' => $this->getDeviceType($request->userAgent()),
+            ];
+            
+            $analyticsRepository->create($visitData);
+        } catch (\Exception $e) {
+            // Log error but don't break the application
+            \Log::error('Failed to track product visit: ' . $e->getMessage());
+        }
+    }
+
+    /**
+     * Detect device type from user agent
+     */
+    private function getDeviceType(string $userAgent): string
+    {
+        $userAgent = strtolower($userAgent);
+        
+        if (strpos($userAgent, 'mobile') !== false) {
+            return 'Mobile';
+        }
+        
+        if (strpos($userAgent, 'tablet') !== false) {
+            return 'Tablet';
+        }
+        
+        return 'Desktop';
+    }
+
     public function detailFashion($slug, Request $request, ProductRepository $productRepository)
     {
-
         $product = $productRepository->show($slug);
 
+        // Track product visit analytics
+        $this->trackProductVisit($product->id, $request);
+
         $complete_look_products_data = $productRepository->getList([
             'category_id' => $product->category1_id,
             'limit' => 4,

app/Models/AnalyticsProductVisit.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class AnalyticsProductVisit extends Model
+{
+    protected $connection = 'ecommerce';
+    protected $table = 'analytics_product_visits';
+
+
+     protected $fillable = [
+        'item_id',
+        'user_id',
+        'session_id',
+        'started_at',
+        'ended_at',
+        'duration_seconds',
+        'ip_address',
+        'device_type',
+        'user_agent',
+        'referrer',
+    ];
+
+    protected $casts = [
+        'started_at' => 'datetime',
+        'ended_at' => 'datetime',
+    ];
+
+
+    public function calculateDuration(): void
+    {
+        if ($this->started_at && $this->ended_at) {
+            $this->duration_seconds = 
+                $this->ended_at->diffInSeconds($this->started_at);
+        }
+    }
+
+}

app/Repositories/AnalyticsProductVisitRepository.php

@@ -0,0 +1,255 @@
+<?php
+
+namespace App\Repositories;
+
+use App\Models\AnalyticsProductVisit;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Facades\DB;
+
+class AnalyticsProductVisitRepository
+{
+    /**
+     * Get all product visits with optional filtering
+     */
+    public function getAll(array $filters = []): Collection
+    {
+        $query = AnalyticsProductVisit::query();
+
+        // Filter by product ID
+        if (isset($filters['item_id'])) {
+            $query->where('item_id', $filters['item_id']);
+        }
+
+        // Filter by user ID
+        if (isset($filters['user_id'])) {
+            $query->where('user_id', $filters['user_id']);
+        }
+
+        // Filter by date range
+        if (isset($filters['date_from'])) {
+            $query->where('started_at', '>=', $filters['date_from']);
+        }
+
+        if (isset($filters['date_to'])) {
+            $query->where('started_at', '<=', $filters['date_to']);
+        }
+
+        // Filter by IP address
+        if (isset($filters['ip_address'])) {
+            $query->where('ip_address', $filters['ip_address']);
+        }
+
+        return $query->orderBy('started_at', 'desc')->get();
+    }
+
+    /**
+     * Get product visits with pagination
+     */
+    public function getPaginated(array $filters = [], int $perPage = 20): LengthAwarePaginator
+    {
+        $query = AnalyticsProductVisit::query();
+
+        // Apply same filters as getAll method
+        if (isset($filters['item_id'])) {
+            $query->where('item_id', $filters['item_id']);
+        }
+
+        if (isset($filters['user_id'])) {
+            $query->where('user_id', $filters['user_id']);
+        }
+
+        if (isset($filters['date_from'])) {
+            $query->where('started_at', '>=', $filters['date_from']);
+        }
+
+        if (isset($filters['date_to'])) {
+            $query->where('started_at', '<=', $filters['date_to']);
+        }
+
+        return $query->orderBy('started_at', 'desc')
+            ->paginate($perPage);
+    }
+
+    /**
+     * Create a new product visit record
+     */
+    public function create(array $data): AnalyticsProductVisit
+    {
+        return AnalyticsProductVisit::create($data);
+    }
+
+    /**
+     * Update existing product visit
+     */
+    public function update(int $id, array $data): bool
+    {
+        $visit = AnalyticsProductVisit::find($id);
+        
+        if (!$visit) {
+            return false;
+        }
+
+        return $visit->update($data);
+    }
+
+    /**
+     * Delete a product visit record
+     */
+    public function delete(int $id): bool
+    {
+        $visit = AnalyticsProductVisit::find($id);
+        
+        if (!$visit) {
+            return false;
+        }
+
+        return $visit->delete();
+    }
+
+    /**
+     * Get visit statistics
+     */
+    public function getStatistics(array $filters = []): array
+    {
+        $query = AnalyticsProductVisit::query();
+
+        // Apply date filters
+        if (isset($filters['date_from'])) {
+            $query->where('started_at', '>=', $filters['date_from']);
+        }
+
+        if (isset($filters['date_to'])) {
+            $query->where('started_at', '<=', $filters['date_to']);
+        }
+
+        $totalVisits = $query->count();
+        
+        $uniqueVisitors = $query->distinct('user_id')->count('user_id');
+        
+        $averageDuration = $query->avg('duration_seconds');
+        
+        $totalDuration = $query->sum('duration_seconds');
+
+        return [
+            'total_visits' => $totalVisits,
+            'unique_visitors' => $uniqueVisitors,
+            'average_duration_seconds' => round($averageDuration, 2),
+            'total_duration_seconds' => $totalDuration,
+            'average_duration_formatted' => $this->formatDuration($averageDuration),
+            'total_duration_formatted' => $this->formatDuration($totalDuration),
+        ];
+    }
+
+    /**
+     * Get most visited products
+     */
+    public function getMostVisitedProducts(int $limit = 10): array
+    {
+        return AnalyticsProductVisit::query()
+            ->selectRaw('item_id, COUNT(*) as visit_count, AVG(duration_seconds) as avg_duration')
+            ->groupBy('item_id')
+            ->orderBy('visit_count', 'desc')
+            ->limit($limit)
+            ->get()
+            ->toArray();
+    }
+
+    /**
+     * Get visits by device type
+     */
+    public function getVisitsByDeviceType(array $filters = []): array
+    {
+        $query = AnalyticsProductVisit::query();
+
+        if (isset($filters['date_from'])) {
+            $query->where('started_at', '>=', $filters['date_from']);
+        }
+
+        if (isset($filters['date_to'])) {
+            $query->where('started_at', '<=', $filters['date_to']);
+        }
+
+        return $query->selectRaw('device_type, COUNT(*) as count')
+            ->groupBy('device_type')
+            ->orderBy('count', 'desc')
+            ->get()
+            ->toArray();
+    }
+
+    /**
+     * Get daily visit statistics
+     */
+    public function getDailyStatistics(array $filters = []): array
+    {
+        $query = AnalyticsProductVisit::query();
+
+        if (isset($filters['date_from'])) {
+            $query->where('started_at', '>=', $filters['date_from']);
+        }
+
+        if (isset($filters['date_to'])) {
+            $query->where('started_at', '<=', $filters['date_to']);
+        }
+
+        return $query->selectRaw('DATE(started_at) as date, COUNT(*) as visits, COUNT(DISTINCT user_id) as unique_visitors')
+            ->groupBy('date')
+            ->orderBy('date', 'desc')
+            ->get()
+            ->toArray();
+    }
+
+    /**
+     * Format duration in human readable format
+     */
+    private function formatDuration(float $seconds): string
+    {
+        if ($seconds < 60) {
+            return round($seconds) . 's';
+        }
+
+        if ($seconds < 3600) {
+            $minutes = floor($seconds / 60);
+            $remainingSeconds = $seconds % 60;
+            return $minutes . 'm ' . round($remainingSeconds) . 's';
+        }
+
+        $hours = floor($seconds / 3600);
+        $remainingSeconds = $seconds % 3600;
+        $minutes = floor($remainingSeconds / 60);
+        $remainingSeconds = $remainingSeconds % 60;
+
+        return $hours . 'h ' . $minutes . 'm ' . round($remainingSeconds) . 's';
+    }
+
+    /**
+     * Get product visit by ID
+     */
+    public function findById(int $id): ?AnalyticsProductVisit
+    {
+        return AnalyticsProductVisit::find($id);
+    }
+
+    /**
+     * Get visits by session ID
+     */
+    public function getBySessionId(string $sessionId): Collection
+    {
+        return AnalyticsProductVisit::where('session_id', $sessionId)
+            ->orderBy('started_at', 'desc')
+            ->get();
+    }
+
+    /**
+     * Bulk insert visits
+     */
+    public function bulkInsert(array $visits): bool
+    {
+        try {
+            AnalyticsProductVisit::insert($visits);
+            return true;
+        } catch (\Exception $e) {
+            return false;
+        }
+    }
+}

app/View/Components/Grocery/HeaderGenderDropdown.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\View\Components\Grocery;
+
+use App\Repositories\Catalog\CategoryRepository;
+use App\Repositories\Catalog\GenderRepository;
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class HeaderGenderDropdown extends Component
+{
+
+    protected $categories = [];
+    protected $genders = [];
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(CategoryRepository $categoryRepository, GenderRepository $genderRepository)
+    {
+        $this->categories = $categoryRepository->getList([]);
+        $this->genders = $genderRepository->getList([]);
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+
+        return view('components.grocery.header-gender-dropdown', [
+            'categories' => $this->categories,
+            'genders' => $this->genders,
+        ]);
+    }
+}

config/database.php

@@ -112,6 +112,19 @@ return [
             // 'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'false'),
         ],
 
+
+
+        'ecommerce' => [
+            'driver' => 'sqlite',
+            'url' => env('DB_ECOMMERCE_URL'),
+            'database' => env('DB_ECOMMERCE_DATABASE', database_path('ecommerce.sqlite')),
+            'prefix' => '',
+            'foreign_key_constraints' => env('DB_ECOMMERCE_FOREIGN_KEYS', true),
+            'busy_timeout' => null,
+            'journal_mode' => null,
+            'synchronous' => null,
+        ],
+
     ],
 
     /*

database/migrations/2026_03_03_015321_create_analytics_product_visits_table.php

@@ -0,0 +1,47 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::connection('ecommerce')->create('analytics_product_visits', function (Blueprint $table) {
+            $table->id();
+
+            // Relasi dasar
+            $table->unsignedBigInteger('item_id')->index();
+            $table->unsignedBigInteger('user_id')->nullable()->index();
+            $table->string('session_id')->nullable()->index();
+
+            // Tracking waktu
+            $table->timestamp('started_at')->index();
+            $table->timestamp('ended_at')->nullable();
+            $table->integer('duration_seconds')->nullable();
+
+            // Optional analytics tambahan
+            $table->string('ip_address', 45)->nullable();
+            $table->string('device_type')->nullable();
+            $table->text('user_agent')->nullable();
+            $table->string('referrer')->nullable();
+
+            $table->timestamps();
+
+            // Index tambahan untuk performa
+            $table->index(['item_id', 'started_at']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::connection('ecommerce')->dropIfExists('analytics_product_visits');
+    }
+};

resources/views/components/grocery/featured-categories.blade.php

@@ -1,4 +1,4 @@
-<section class="container pt-4 pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+<section class="container-xxl pt-4 pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5 px-4">
     <div class="swiper"
         data-swiper='{
           "slidesPerView": 1,
@@ -13,6 +13,12 @@
             },
             "992": {
               "slidesPerView": 3
+            },
+            "1200": {
+              "slidesPerView": 4
+            },
+            "1400": {
+              "slidesPerView": 5
             }
           }
         }'>

resources/views/components/grocery/header-gender-dropdown.blade.php

@@ -0,0 +1,981 @@
+<div class="container-xxl navbar-nav px-3 d-none d-lg-flex">
+
+    @foreach ($genders as $key => $value)
+        <div class="dropdown position-static pb-lg-2">
+            <button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0"
+                data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
+
+                <span class="animate-target">{{ $value->name }}</span>
+            </button>
+            <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
+
+                <!-- Nav tabs -->
+                <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button type="button" class="nav-link text-uppercase active" id="womens-tab"
+                            data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab"
+                            aria-controls="womens-tab-pane" aria-selected="true">
+                            Women's
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab"
+                            data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane"
+                            aria-selected="false" tabindex="-1">
+                            Men's
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab"
+                            data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane"
+                            aria-selected="false" tabindex="-1">
+                            Kids'
+                        </button>
+                    </li>
+                </ul>
+
+                <!-- Tab panes -->
+                <div class="tab-content pb-xl-4">
+
+                    <!-- Women's tab -->
+                    <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
+                        aria-labelledby="womens-tab">
+                        <div class="row g-4">
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Clothing</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Shirts &amp; Tops</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Coats &amp; Outerwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Underwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sweatshirts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Dresses</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Swimwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Shoes</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Boots</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sandals</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Heels</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Loafers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Slippers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Oxfords</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Accessories</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Handbags</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Eyewear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Hats</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Watches</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Jewelry</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Belts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <div class="h6 mb-2">Specialty Sizes</div>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Plus Size</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Petite</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Wide Shoes</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Narrow Shoes</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                    <div
+                                        class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                        <div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
+                                        <div>
+                                            <a class="btn btn-sm btn-dark stretched-link"
+                                                href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
+                                        </div>
+                                    </div>
+                                    <img src="assets/img/mega-menu/fashion/01.jpg"
+                                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                        alt="Image">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Men's tab -->
+                    <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
+                        <div class="row g-4">
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Clothing</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">T-Shirts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Jeans</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Coats &amp; Outerwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sweatshirts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Underwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Pants</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Shoes</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sneakers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Oxfords</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Loafers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sandals</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Boots</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Slippers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Accessories</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Backpacks</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sunglasses</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Bags</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Watches</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Hats</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Belts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <div class="h6 mb-2">Specialty Shops</div>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Active Wear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sports Clothing</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Athletic Shoes</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
+                                <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                    <div
+                                        class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                        <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
+                                        <div>
+                                            <a class="btn btn-sm btn-dark stretched-link"
+                                                href="shop-catalog-fashion.html" data-bs-theme="dark">Shop now</a>
+                                        </div>
+                                    </div>
+                                    <img src="assets/img/mega-menu/fashion/02.jpg"
+                                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                        alt="Image">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Kids' tab -->
+                    <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
+                        <div class="row g-4">
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Boys</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Pants</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sneakers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Coats &amp; Outerwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sweatshirts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Boots</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Shorts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Girls</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Shirts &amp; Tops</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Dresses</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sneakers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Hoodies</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sandals</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Coats &amp; Outerwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Accessories</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Backpacks</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Gloves</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Shoe Laces</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Scarves</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Hats</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Belts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <div class="h6 mb-2">Shop by Age</div>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Infant</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Toddler</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Little Kid</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Big Kid</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                    <div
+                                        class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                        <div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
+                                        <div>
+                                            <a class="btn btn-sm btn-dark stretched-link"
+                                                href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
+                                        </div>
+                                    </div>
+                                    <img src="assets/img/mega-menu/fashion/03.jpg"
+                                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                        alt="Image">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endforeach
+
+
+    @foreach ($categories as $key => $value)
+        <div class="dropdown position-static pb-lg-2">
+            <button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0"
+                data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                aria-expanded="false">
+
+                <span class="animate-target">{{ $value->name }}</span>
+            </button>
+            <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
+
+                <!-- Nav tabs -->
+                <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button type="button" class="nav-link text-uppercase active" id="womens-tab"
+                            data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab"
+                            aria-controls="womens-tab-pane" aria-selected="true">
+                            Women's
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab"
+                            data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane"
+                            aria-selected="false" tabindex="-1">
+                            Men's
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab"
+                            data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane"
+                            aria-selected="false" tabindex="-1">
+                            Kids'
+                        </button>
+                    </li>
+                </ul>
+
+                <!-- Tab panes -->
+                <div class="tab-content pb-xl-4">
+
+                    <!-- Women's tab -->
+                    <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
+                        aria-labelledby="womens-tab">
+                        <div class="row g-4">
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Clothing</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Shirts &amp; Tops</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Coats &amp; Outerwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Underwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sweatshirts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Dresses</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Swimwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Shoes</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Boots</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sandals</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Heels</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Loafers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Slippers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Oxfords</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Accessories</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Handbags</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Eyewear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Hats</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Watches</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Jewelry</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Belts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <div class="h6 mb-2">Specialty Sizes</div>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Plus Size</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Petite</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Wide Shoes</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Narrow Shoes</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                    <div
+                                        class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                        <div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
+                                        <div>
+                                            <a class="btn btn-sm btn-dark stretched-link"
+                                                href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
+                                        </div>
+                                    </div>
+                                    <img src="assets/img/mega-menu/fashion/01.jpg"
+                                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                        alt="Image">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Men's tab -->
+                    <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
+                        <div class="row g-4">
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Clothing</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">T-Shirts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Jeans</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Coats &amp; Outerwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sweatshirts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Underwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Pants</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Shoes</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sneakers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Oxfords</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Loafers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sandals</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Boots</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Slippers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Accessories</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Backpacks</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sunglasses</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Bags</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Watches</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Hats</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Belts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <div class="h6 mb-2">Specialty Shops</div>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Active Wear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sports Clothing</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Athletic Shoes</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
+                                <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                    <div
+                                        class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                        <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
+                                        <div>
+                                            <a class="btn btn-sm btn-dark stretched-link"
+                                                href="shop-catalog-fashion.html" data-bs-theme="dark">Shop now</a>
+                                        </div>
+                                    </div>
+                                    <img src="assets/img/mega-menu/fashion/02.jpg"
+                                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                        alt="Image">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Kids' tab -->
+                    <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
+                        <div class="row g-4">
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Boys</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Pants</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sneakers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Coats &amp; Outerwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sweatshirts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Boots</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Shorts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Girls</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Shirts &amp; Tops</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Dresses</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sneakers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Hoodies</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Sandals</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Coats &amp; Outerwear</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                    href="shop-catalog-fashion.html">
+                                    <span class="animate-target">Accessories</span>
+                                </a>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Backpacks</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Gloves</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Shoe Laces</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Scarves</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Hats</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Belts</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">View all</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-2">
+                                <div class="h6 mb-2">Shop by Age</div>
+                                <ul class="nav flex-column gap-2 mt-0">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Infant</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Toddler</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Little Kid</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="shop-catalog-fashion.html">Big Kid</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                    <div
+                                        class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                        <div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
+                                        <div>
+                                            <a class="btn btn-sm btn-dark stretched-link"
+                                                href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
+                                        </div>
+                                    </div>
+                                    <img src="assets/img/mega-menu/fashion/03.jpg"
+                                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                        alt="Image">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endforeach
+
+</div>

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>

resources/views/components/grocery/popular-products.blade.php

@@ -1,8 +1,8 @@
-<section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+<section class="container-xxl pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
     <div class="row">
 
         <!-- Categories list -->
-        <div class="col-lg-3 pb-2 pb-sm-3 pb-md-4 mb-5 mb-lg-0">
+        <div class="col-lg-3 col-xl-2 pb-2 pb-sm-3 pb-md-4 mb-5 mb-lg-0">
             <h2 class="h3 border-bottom pb-3 pb-md-4 mb-4">{{ __('home_popular_products.category') }}</h2>
             <div class="row nav g-3 g-sm-4">
 
@@ -32,7 +32,7 @@
             </div>
         </div>
 
-        <div class="col-lg-9">
+        <div class="col-lg-9 col-xl-10">
             <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-lg-4">
                 <h2 class="h3 mb-0">{{ __('home_popular_products.title') }}</h2>
                 <div class="nav ms-3">
@@ -44,7 +44,7 @@
             </div>
 
             <!-- Products grid -->
-            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-4 g-4">
+            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-5 row-cols-xxl-6 g-4">
 
                 @foreach ($products as $key => $value)
                     <!-- Item -->

resources/views/components/grocery/shop-by-lifestyle.blade.php

@@ -1,23 +1,32 @@
-<section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+<section class="container-xxl pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
     <h2 class="h3 text-center pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5">Brands</h2>
     <div class="swiper pb-lg-2"
         data-swiper='{
           "slidesPerView": 1,
           "spaceBetween": 24,
+          "centeredSlides": true,
           "pagination": {
             "el": ".swiper-pagination",
             "clickable": true
           },
           "breakpoints": {
             "500": {
-              "slidesPerView": 2
+              "slidesPerView": 2,
+              "centeredSlides": false
             },
             "768": {
-              "slidesPerView": 3
+              "slidesPerView": 3,
+              "centeredSlides": false
             },
             "992": {
-              "slidesPerView": 4
+              "slidesPerView": 4,
+              "centeredSlides": false
+            },  
+            "1200": {
+              "slidesPerView": 5,
+              "centeredSlides": false
             }
+           
           }
         }'>
         <div class="swiper-wrapper">

resources/views/components/grocery/special-products.blade.php

@@ -1,8 +1,8 @@
-<section class="container pt-xl-2 pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+<section class="container-xxl      pt-xl-2 pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
     <div class="row">
 
         <!-- Banner -->
-        <div class="col-sm-5 col-md-4 col-lg-3 mb-5 mb-sm-0">
+        <div class="col-sm-5 col-md-4 col-lg-3 col-xl-2 mb-5 mb-sm-0">
             <div class="pe-lg-2 pe-xl-4">
                 <div class="rounded-4 overflow-hidden" style="background-color: #000000" data-bs-theme="light">
                     <div class="pt-3 px-3 mt-3 mx-3">
@@ -22,7 +22,7 @@
         </div>
 
         <!-- Special products carousel -->
-        <div class="col-sm-7 col-md-8 col-lg-9">
+        <div class="col-sm-7 col-md-8 col-lg-9 col-xl-10">
             <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-lg-4">
                 <h2 class="h3 mb-0">{{ __('special_product.title') }}</h2>
                 <div class="nav ms-3">
@@ -46,7 +46,15 @@
                 },
                 "992": {
                   "slidesPerView": 4
+                },
+                "1200": {
+                  "slidesPerView": 5
+                },
+                "1400": {
+                  "slidesPerView": 6
                 }
+
+
               }
             }'>
                 <div class="swiper-wrapper">

resources/views/components/grocery/top-header.blade.php

@@ -1,5 +1,5 @@
 <section class="border-top">
-    <div class="container py-lg-1">
+    <div class="container-xxl py-lg-1">
         <div class="overflow-auto" data-simplebar>
             <div class="nav flex-nowrap justify-content-between gap-4 py-2">
 

resources/views/components/layout/header-grocery.blade.php

@@ -7,7 +7,7 @@
 
 
     <header class="navbar navbar-expand-lg sticky-top d-block bg-body z-10 py-1 py-lg-0 py-xl-1 px-0">
-        <div class="container justify-content-start py-2 py-lg-3">
+        <div class="container-xxl justify-content-start py-2 py-lg-3">
 
             <!-- Offcanvas menu toggler (Hamburger) -->
             <button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
@@ -159,8 +159,15 @@
                 </a>
 
             </div>
+
+
+            
         </div>
 
+     
+            <x-grocery.header-gender-dropdown />
+     
+
         <!-- Search collapse available on screens < 768px wide (md breakpoint) -->
         <div class="collapse d-md-none" id="searchBar">
             <div class="container pt-2 pb-3">
@@ -179,8 +186,12 @@
         </div>
     </header>
 
+ 
+
     <x-grocery.top-header />
 
+
+
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // Handle desktop search form submission

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 -->
@@ -157,7 +155,7 @@
 
 
         <!-- CTA banners -->
-        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+        <section class="container-xxl pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
             <div class="row">
 
                 <!-- Mobile app CTA -->
@@ -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"

resources/views/layouts/partials/footer2.blade.php

@@ -1,5 +1,5 @@
 <footer class="footer bg-dark pb-4" data-bs-theme="dark">
-    <div class="container pb-md-3">
+    <div class="container-xxl pb-md-3">
 
         <!-- Features -->
         {{-- <div class="border-bottom py-5">