From 3b91c813dae2f500ee2c1ade5f25983d8a5c3070 Mon Sep 17 00:00:00 2001
From: Bayu Lukman Yusuf <bayuly94@gmail.com>
Date: Fri, 9 Jan 2026 10:20:44 +0700
Subject: [PATCH] popular product, brand

---
 app/Http/Controllers/ComponentController.php  |  34 +++
 app/Http/Controllers/ProductController.php    |  92 +++++++
 app/View/Components/Home/BrandHome.php        |  14 +-
 .../Components/Home/HomePopularProducts.php   |  22 ++
 app/View/Components/Home/HomeSlider.php       |  22 ++
 app/View/Components/Home/ProductHighlight.php |   9 +-
 resources/icons/cartzilla-icons.min.css       |   2 +-
 resources/js/components/product-highlights.js |   0
 resources/js/theme.js                         |   2 +-
 .../home/brand-home-fashion-v1.blade.php      |  95 +++++--
 .../home/home-popular-products.blade.php      | 248 +++++++++++++++++
 .../components/home/home-slider.blade.php     |  99 +++++++
 .../components/home/new-arrivals.blade.php    |   2 +-
 .../home/product-highlight.blade.php          | 231 +++++++++++++---
 resources/views/home/fashion-v1.blade.php     | 260 +-----------------
 routes/web.php                                |   8 +-
 16 files changed, 812 insertions(+), 328 deletions(-)
 create mode 100644 app/Http/Controllers/ComponentController.php
 create mode 100644 app/View/Components/Home/HomePopularProducts.php
 create mode 100644 app/View/Components/Home/HomeSlider.php
 create mode 100644 resources/js/components/product-highlights.js
 create mode 100644 resources/views/components/home/home-popular-products.blade.php
 create mode 100644 resources/views/components/home/home-slider.blade.php

diff --git a/app/Http/Controllers/ComponentController.php b/app/Http/Controllers/ComponentController.php
new file mode 100644
index 0000000..a65e2b2
--- /dev/null
+++ b/app/Http/Controllers/ComponentController.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class ComponentController extends Controller
+{
+    public function load(Request $request, $component)
+    {
+        $template = $request->get('template');
+        
+        // Map component names to their blade views
+        $componentMap = [
+            'home-popular-products' => 'components.home.home-popular-products',
+            'product-highlight' => 'components.home.product-highlight',
+            'new-arrivals' => 'components.home.new-arrivals',
+            'brand-home' => 'components.home.brand-home-' . ($template ?? 'fashion-v1'),
+        ];
+        
+        $view = $componentMap[$component] ?? null;
+        
+        if (!$view) {
+            return response()->json(['error' => 'Component not found'], 404);
+        }
+        
+        // For brand-home component, we need to pass the template parameter
+        if ($component === 'brand-home') {
+            return view($view, ['template' => $template]);
+        }
+        
+        return view($view);
+    }
+}
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
index 52278fb..8b1ae90 100644
--- a/app/Http/Controllers/ProductController.php
+++ b/app/Http/Controllers/ProductController.php
@@ -174,6 +174,98 @@ class ProductController extends Controller
         ]);
     }
 
+    public function brands(Request $request)
+    {
+        $brandRepository = new \App\Repositories\Catalog\BrandRepository;
+        $brands = $brandRepository->getList([]);
+        
+        // Render brand HTML
+        $brandHtml = '';
+        foreach ($brands as $brand) {
+            $brandHtml .= '<a class="swiper-slide text-body" href="' . route('product.index', ['brand' => $brand->slug]) . '" aria-label="' . $brand->name . '">';
+            $brandHtml .= '<img src="' . $brand->image_url . '" alt="' . $brand->name . '" class="object-fit-contain">';
+            $brandHtml .= '</a>';
+        }
+        
+        return response()->json([
+            'success' => true,
+            'brands' => $brandHtml
+        ]);
+    }
+
+    public function highlights(Request $request)
+    {
+        $type = $request->input('type', 'new');
+        $limit = 8;
+
+        $user = auth()->user();
+        $userId = $user ? $user->id : 0;
+        [$location_id, $is_consignment] = Cache::remember('employee_user_'.$userId, 60 * 60 * 24, function () use ($user) {
+
+            if ($user == null) {
+                return [10, false];
+            }
+
+            $employee = @$user->employee;
+            $location_id = @$employee->location_id;
+            $location = @$employee->location;
+            $is_consignment = (bool) @$location->is_consignment;
+
+            return [$location_id, $is_consignment];
+
+        });
+
+        $productRepository = new ProductRepository;
+        
+        // Set parameters based on type
+        $params = [
+            'limit' => $limit,
+            'location_id' => $location_id,
+            'is_consignment' => $is_consignment,
+        ];
+
+        switch ($type) {
+            case 'best_sellers':
+                $params['sort'] = 'random';
+                break;
+            case 'new_arrivals':
+                $params['sort'] = 'new';
+                break;
+            case 'sale_items':
+                $params['event'] = 'special-offer';
+                break;
+            case 'top_rated':
+                $params['sort'] = 'random';
+                break;
+            default:
+                $params['sort'] = 'new';
+                break;
+        }
+
+        $products = $productRepository->getList($params);
+
+        // Render product cards HTML
+        $productHtml = '';
+        if (count($products) == 0) {
+            $productHtml = '<div class="col-12 text-center py-4">';
+            $productHtml .= 'No products found';
+            $productHtml .= '</div>';
+        } else {
+            foreach ($products as $product) {
+                $productHtml .= '<div class="col mb-2 mb-sm-3 mb-md-0">';
+                $productHtml .= view('components.home.product-card', ['product' => $product])->render();
+                $productHtml .= '</div>';
+            }
+        }
+
+        return response()->json([
+            'success' => true,
+            'products' => $productHtml,
+            'count' => count($products),
+            'type' => $type
+        ]);
+    }
+
     public function detail($slug, Request $request, ProductRepository $productRepository)
     {
 
diff --git a/app/View/Components/Home/BrandHome.php b/app/View/Components/Home/BrandHome.php
index d42bc49..5842fb0 100644
--- a/app/View/Components/Home/BrandHome.php
+++ b/app/View/Components/Home/BrandHome.php
@@ -9,24 +9,16 @@ use Illuminate\View\Component;
 
 class BrandHome extends Component
 {
-    public $brands;
+
 
     public $template = 'fashion-v1';
 
     /**
      * Create a new component instance.
      */
-    public function __construct(BrandRepository $brandRepository)
+    public function __construct()
     {
-        $this->brands = $brandRepository->getList([]);
-
-        if ($this->brands->count() < 9) {
-            // Ensure we have at least 9 brands by duplicating if necessary
-            while ($this->brands->count() < 9) {
-                $this->brands = $this->brands->concat($this->brands);
-            }
-            $this->brands = $this->brands->take(9);
-        }
+     
     }
 
     /**
diff --git a/app/View/Components/Home/HomePopularProducts.php b/app/View/Components/Home/HomePopularProducts.php
new file mode 100644
index 0000000..9094351
--- /dev/null
+++ b/app/View/Components/Home/HomePopularProducts.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\View\Components\Home;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class HomePopularProducts extends Component
+{
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.home.home-popular-products');
+    }
+}
diff --git a/app/View/Components/Home/HomeSlider.php b/app/View/Components/Home/HomeSlider.php
new file mode 100644
index 0000000..21f5e0d
--- /dev/null
+++ b/app/View/Components/Home/HomeSlider.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\View\Components\Home;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class HomeSlider extends Component
+{
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.home.home-slider');
+    }
+}
diff --git a/app/View/Components/Home/ProductHighlight.php b/app/View/Components/Home/ProductHighlight.php
index 4e50897..745b55b 100644
--- a/app/View/Components/Home/ProductHighlight.php
+++ b/app/View/Components/Home/ProductHighlight.php
@@ -9,14 +9,11 @@ use Illuminate\View\Component;
 
 class ProductHighlight extends Component
 {
-    public $products;
 
-    public function __construct(ProductRepository $productRepository)
+
+    public function __construct()
     {
-        $params = [
-            'sort'  => 'new',
-        ];
-        $this->products = $productRepository->getList($params);
+  
     }
 
     /**
diff --git a/resources/icons/cartzilla-icons.min.css b/resources/icons/cartzilla-icons.min.css
index adcda1b..22bd6a7 100644
--- a/resources/icons/cartzilla-icons.min.css
+++ b/resources/icons/cartzilla-icons.min.css
@@ -1 +1 @@
-@font-face{font-display:block;font-family:AsiaGolf-icons;src:url(AsiaGolf-icons.woff2) format("woff2")}[class*=" ci-"]:before,[class^=ci-]:before{font-family:AsiaGolf-icons!important;font-style:normal;font-variant:normal;font-weight:400!important;line-height:1;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ci-activity:before{content:"\f101"}.ci-airbnb:before{content:"\f102"}.ci-airplay:before{content:"\f103"}.ci-alert-circle:before{content:"\f104"}.ci-alert-octagon:before{content:"\f105"}.ci-alert-triangle:before{content:"\f106"}.ci-align-center:before{content:"\f107"}.ci-align-justify:before{content:"\f108"}.ci-align-left:before{content:"\f109"}.ci-align-right:before{content:"\f10a"}.ci-anchor:before{content:"\f10b"}.ci-aperture:before{content:"\f10c"}.ci-apple:before{content:"\f10d"}.ci-archive:before{content:"\f10e"}.ci-arrow-down-circle:before{content:"\f10f"}.ci-arrow-down-left:before{content:"\f110"}.ci-arrow-down-right:before{content:"\f111"}.ci-arrow-down:before{content:"\f112"}.ci-arrow-left-circle:before{content:"\f113"}.ci-arrow-left:before{content:"\f114"}.ci-arrow-right-circle:before{content:"\f115"}.ci-arrow-right:before{content:"\f116"}.ci-arrow-up-circle:before{content:"\f117"}.ci-arrow-up-left:before{content:"\f118"}.ci-arrow-up-right:before{content:"\f119"}.ci-arrow-up:before{content:"\f11a"}.ci-at-sign:before{content:"\f11b"}.ci-auto:before{content:"\f11c"}.ci-avocado:before{content:"\f11d"}.ci-award:before{content:"\f11e"}.ci-banned:before{content:"\f11f"}.ci-bar-chart-2:before{content:"\f120"}.ci-bar-chart:before{content:"\f121"}.ci-battery-2:before{content:"\f122"}.ci-battery-charging:before{content:"\f123"}.ci-battery:before{content:"\f124"}.ci-behance:before{content:"\f125"}.ci-bell-off:before{content:"\f126"}.ci-bell:before{content:"\f127"}.ci-blogger:before{content:"\f128"}.ci-bluetooth:before{content:"\f129"}.ci-bold:before{content:"\f12a"}.ci-book-open:before{content:"\f12b"}.ci-book:before{content:"\f12c"}.ci-bookmark:before{content:"\f12d"}.ci-box:before{content:"\f12e"}.ci-briefcase:before{content:"\f12f"}.ci-broccoli:before{content:"\f130"}.ci-bullet:before{content:"\f131"}.ci-calendar:before{content:"\f132"}.ci-camera-2:before{content:"\f133"}.ci-camera-off:before{content:"\f134"}.ci-camera:before{content:"\f135"}.ci-cast:before{content:"\f136"}.ci-chat:before{content:"\f137"}.ci-check-circle:before{content:"\f138"}.ci-check-search:before{content:"\f139"}.ci-check-shield:before{content:"\f13a"}.ci-check-square:before{content:"\f13b"}.ci-check:before{content:"\f13c"}.ci-chevron-down:before{content:"\f13d"}.ci-chevron-left:before{content:"\f13e"}.ci-chevron-right:before{content:"\f13f"}.ci-chevron-up:before{content:"\f140"}.ci-chevrons-down:before{content:"\f141"}.ci-chevrons-left:before{content:"\f142"}.ci-chevrons-right:before{content:"\f143"}.ci-chevrons-up:before{content:"\f144"}.ci-click:before{content:"\f145"}.ci-clipboard:before{content:"\f146"}.ci-clock:before{content:"\f147"}.ci-close-circle:before{content:"\f148"}.ci-close-octagon:before{content:"\f149"}.ci-close-square:before{content:"\f14a"}.ci-close:before{content:"\f14b"}.ci-cloud-drizzle:before{content:"\f14c"}.ci-cloud-lightning:before{content:"\f14d"}.ci-cloud-off:before{content:"\f14e"}.ci-cloud-rain:before{content:"\f14f"}.ci-cloud-snow:before{content:"\f150"}.ci-cloud:before{content:"\f151"}.ci-code:before{content:"\f152"}.ci-codepen:before{content:"\f153"}.ci-coffee:before{content:"\f154"}.ci-columns:before{content:"\f155"}.ci-command:before{content:"\f156"}.ci-compass:before{content:"\f157"}.ci-computer:before{content:"\f158"}.ci-copy:before{content:"\f159"}.ci-corner-down-left:before{content:"\f15a"}.ci-corner-down-right:before{content:"\f15b"}.ci-corner-left-down:before{content:"\f15c"}.ci-corner-left-up:before{content:"\f15d"}.ci-corner-right-down:before{content:"\f15e"}.ci-corner-right-up:before{content:"\f15f"}.ci-corner-up-left:before{content:"\f160"}.ci-corner-up-right:before{content:"\f161"}.ci-credit-card:before{content:"\f162"}.ci-crop:before{content:"\f163"}.ci-crosshair:before{content:"\f164"}.ci-database:before{content:"\f165"}.ci-delete:before{content:"\f166"}.ci-delivery-2:before{content:"\f167"}.ci-delivery:before{content:"\f168"}.ci-disc:before{content:"\f169"}.ci-discord:before{content:"\f16a"}.ci-disqus:before{content:"\f16b"}.ci-divide:before{content:"\f16c"}.ci-dollar-sign:before{content:"\f16d"}.ci-download-cloud:before{content:"\f16e"}.ci-download:before{content:"\f16f"}.ci-dribbble:before{content:"\f170"}.ci-dropbox:before{content:"\f171"}.ci-droplet:before{content:"\f172"}.ci-edit-2:before{content:"\f173"}.ci-edit-3:before{content:"\f174"}.ci-edit:before{content:"\f175"}.ci-envato:before{content:"\f176"}.ci-evernote:before{content:"\f177"}.ci-external-link:before{content:"\f178"}.ci-eye-off:before{content:"\f179"}.ci-eye:before{content:"\f17a"}.ci-facebook:before{content:"\f17b"}.ci-fast-forward:before{content:"\f17c"}.ci-feather:before{content:"\f17d"}.ci-file-minus:before{content:"\f17e"}.ci-file-plus:before{content:"\f17f"}.ci-file-text:before{content:"\f180"}.ci-file:before{content:"\f181"}.ci-film:before{content:"\f182"}.ci-filter:before{content:"\f183"}.ci-flag:before{content:"\f184"}.ci-flickr:before{content:"\f185"}.ci-folder-minus:before{content:"\f186"}.ci-folder-plus:before{content:"\f187"}.ci-folder:before{content:"\f188"}.ci-food:before{content:"\f189"}.ci-foursquare:before{content:"\f18a"}.ci-frown:before{content:"\f18b"}.ci-game:before{content:"\f18c"}.ci-gift:before{content:"\f18d"}.ci-github:before{content:"\f18e"}.ci-globe:before{content:"\f18f"}.ci-gluten-free:before{content:"\f190"}.ci-google-drive:before{content:"\f191"}.ci-google-play:before{content:"\f192"}.ci-google:before{content:"\f193"}.ci-grid-2:before{content:"\f194"}.ci-grid:before{content:"\f195"}.ci-hanger:before{content:"\f196"}.ci-hangouts:before{content:"\f197"}.ci-hard-drive-2:before{content:"\f198"}.ci-hard-drive:before{content:"\f199"}.ci-hash:before{content:"\f19a"}.ci-headphones-2:before{content:"\f19b"}.ci-headphones:before{content:"\f19c"}.ci-heart-filled:before{content:"\f19d"}.ci-heart:before{content:"\f19e"}.ci-help-circle:before{content:"\f19f"}.ci-home:before{content:"\f1a0"}.ci-id-card:before{content:"\f1a1"}.ci-image:before{content:"\f1a2"}.ci-inbox:before{content:"\f1a3"}.ci-info:before{content:"\f1a4"}.ci-instagram:before{content:"\f1a5"}.ci-italic:before{content:"\f1a6"}.ci-key:before{content:"\f1a7"}.ci-kickstarter:before{content:"\f1a8"}.ci-layers-2:before{content:"\f1a9"}.ci-layers:before{content:"\f1aa"}.ci-layout:before{content:"\f1ab"}.ci-leaf:before{content:"\f1ac"}.ci-life-buoy:before{content:"\f1ad"}.ci-link-2:before{content:"\f1ae"}.ci-link:before{content:"\f1af"}.ci-linkedin:before{content:"\f1b0"}.ci-list:before{content:"\f1b1"}.ci-loader:before{content:"\f1b2"}.ci-lock:before{content:"\f1b3"}.ci-log-in:before{content:"\f1b4"}.ci-log-out:before{content:"\f1b5"}.ci-mail:before{content:"\f1b6"}.ci-map-pin:before{content:"\f1b7"}.ci-map:before{content:"\f1b8"}.ci-maximize-2:before{content:"\f1b9"}.ci-maximize:before{content:"\f1ba"}.ci-medium:before{content:"\f1bb"}.ci-meh:before{content:"\f1bc"}.ci-menu:before{content:"\f1bd"}.ci-message-circle:before{content:"\f1be"}.ci-message-square:before{content:"\f1bf"}.ci-messenger:before{content:"\f1c0"}.ci-mic-off:before{content:"\f1c1"}.ci-mic:before{content:"\f1c2"}.ci-minimize-2:before{content:"\f1c3"}.ci-minimize:before{content:"\f1c4"}.ci-minus-circle:before{content:"\f1c5"}.ci-minus-square:before{content:"\f1c6"}.ci-minus:before{content:"\f1c7"}.ci-monitor-2:before{content:"\f1c8"}.ci-monitor:before{content:"\f1c9"}.ci-moon:before{content:"\f1ca"}.ci-more-horizontal:before{content:"\f1cb"}.ci-more-vertical:before{content:"\f1cc"}.ci-mouse-pointer:before{content:"\f1cd"}.ci-move:before{content:"\f1ce"}.ci-music:before{content:"\f1cf"}.ci-myspace:before{content:"\f1d0"}.ci-navigation-2:before{content:"\f1d1"}.ci-navigation:before{content:"\f1d2"}.ci-odnoklassniki:before{content:"\f1d3"}.ci-open-source:before{content:"\f1d4"}.ci-package:before{content:"\f1d5"}.ci-paint:before{content:"\f1d6"}.ci-paperclip:before{content:"\f1d7"}.ci-patreon:before{content:"\f1d8"}.ci-pause-circle:before{content:"\f1d9"}.ci-pause:before{content:"\f1da"}.ci-pen-tool:before{content:"\f1db"}.ci-percent:before{content:"\f1dc"}.ci-phone-call:before{content:"\f1dd"}.ci-phone-forwarded:before{content:"\f1de"}.ci-phone-incoming:before{content:"\f1df"}.ci-phone-missed:before{content:"\f1e0"}.ci-phone-off:before{content:"\f1e1"}.ci-phone-outgoing:before{content:"\f1e2"}.ci-phone:before{content:"\f1e3"}.ci-pie-chart:before{content:"\f1e4"}.ci-pinterest:before{content:"\f1e5"}.ci-play-circle:before{content:"\f1e6"}.ci-play-filled:before{content:"\f1e7"}.ci-play:before{content:"\f1e8"}.ci-plus-circle:before{content:"\f1e9"}.ci-plus-square:before{content:"\f1ea"}.ci-plus:before{content:"\f1eb"}.ci-power:before{content:"\f1ec"}.ci-powerbank:before{content:"\f1ed"}.ci-printer-2:before{content:"\f1ee"}.ci-printer:before{content:"\f1ef"}.ci-product-hunt:before{content:"\f1f0"}.ci-quora:before{content:"\f1f1"}.ci-radio:before{content:"\f1f2"}.ci-reddit:before{content:"\f1f3"}.ci-refresh-ccw:before{content:"\f1f4"}.ci-refresh-cw:before{content:"\f1f5"}.ci-repeat:before{content:"\f1f6"}.ci-rewind:before{content:"\f1f7"}.ci-rocket:before{content:"\f1f8"}.ci-rotate-ccw:before{content:"\f1f9"}.ci-rotate-cw:before{content:"\f1fa"}.ci-rss-2:before{content:"\f1fb"}.ci-rss:before{content:"\f1fc"}.ci-ruler:before{content:"\f1fd"}.ci-save:before{content:"\f1fe"}.ci-scan:before{content:"\f1ff"}.ci-schedule:before{content:"\f200"}.ci-scissors:before{content:"\f201"}.ci-search:before{content:"\f202"}.ci-send:before{content:"\f203"}.ci-server:before{content:"\f204"}.ci-settings:before{content:"\f205"}.ci-share-2:before{content:"\f206"}.ci-share:before{content:"\f207"}.ci-shield-off:before{content:"\f208"}.ci-shield:before{content:"\f209"}.ci-shopping-bag:before{content:"\f20a"}.ci-shopping-cart:before{content:"\f20b"}.ci-shuffle:before{content:"\f20c"}.ci-sidebar:before{content:"\f20d"}.ci-skip-back:before{content:"\f20e"}.ci-skip-forward:before{content:"\f20f"}.ci-skype:before{content:"\f210"}.ci-slack:before{content:"\f211"}.ci-sliders:before{content:"\f212"}.ci-smartphone-2:before{content:"\f213"}.ci-smartphone:before{content:"\f214"}.ci-smile:before{content:"\f215"}.ci-snapchat:before{content:"\f216"}.ci-sort:before{content:"\f217"}.ci-soundcloud:before{content:"\f218"}.ci-speaker-2:before{content:"\f219"}.ci-speaker:before{content:"\f21a"}.ci-spotify:before{content:"\f21b"}.ci-stack-overflow:before{content:"\f21c"}.ci-star-filled:before{content:"\f21d"}.ci-star-half:before{content:"\f21e"}.ci-star:before{content:"\f21f"}.ci-steam:before{content:"\f220"}.ci-stop-circle:before{content:"\f221"}.ci-stumbleupon:before{content:"\f222"}.ci-sun:before{content:"\f223"}.ci-sunrise:before{content:"\f224"}.ci-sunset:before{content:"\f225"}.ci-table:before{content:"\f226"}.ci-tablet:before{content:"\f227"}.ci-tag:before{content:"\f228"}.ci-target:before{content:"\f229"}.ci-telegram:before{content:"\f22a"}.ci-terminal:before{content:"\f22b"}.ci-thermometer:before{content:"\f22c"}.ci-thumbs-down:before{content:"\f22d"}.ci-thumbs-up:before{content:"\f22e"}.ci-ticket:before{content:"\f22f"}.ci-tiktok:before{content:"\f230"}.ci-tinder:before{content:"\f231"}.ci-tool:before{content:"\f232"}.ci-trash-empty:before{content:"\f233"}.ci-trash:before{content:"\f234"}.ci-trello:before{content:"\f235"}.ci-trending-down:before{content:"\f236"}.ci-trending-up:before{content:"\f237"}.ci-triangle:before{content:"\f238"}.ci-truck:before{content:"\f239"}.ci-tumblr:before{content:"\f23a"}.ci-tv:before{content:"\f23b"}.ci-twitch:before{content:"\f23c"}.ci-type:before{content:"\f23d"}.ci-umbrella:before{content:"\f23e"}.ci-unlock:before{content:"\f23f"}.ci-upload-cloud:before{content:"\f240"}.ci-upload:before{content:"\f241"}.ci-user-check:before{content:"\f242"}.ci-user-plus:before{content:"\f243"}.ci-user-x:before{content:"\f244"}.ci-user:before{content:"\f245"}.ci-viber:before{content:"\f246"}.ci-video-off:before{content:"\f247"}.ci-video:before{content:"\f248"}.ci-vimeo:before{content:"\f249"}.ci-vk:before{content:"\f24a"}.ci-voicemail:before{content:"\f24b"}.ci-volume-1:before{content:"\f24c"}.ci-volume-2:before{content:"\f24d"}.ci-volume-x:before{content:"\f24e"}.ci-volume:before{content:"\f24f"}.ci-watch-2:before{content:"\f250"}.ci-watch:before{content:"\f251"}.ci-wechat:before{content:"\f252"}.ci-whatsapp:before{content:"\f253"}.ci-wifi-off:before{content:"\f254"}.ci-wifi:before{content:"\f255"}.ci-wind:before{content:"\f256"}.ci-x:before{content:"\f257"}.ci-xing:before{content:"\f258"}.ci-yelp:before{content:"\f259"}.ci-youtube:before{content:"\f25a"}.ci-zap-off:before{content:"\f25b"}.ci-zap:before{content:"\f25c"}.ci-zoom-in:before{content:"\f25d"}.ci-zoom-out:before{content:"\f25e"}
\ No newline at end of file
+@font-face{font-display:block;font-family:CartZilla-icons;src:url(CartZilla-icons.woff2) format("woff2")}[class*=" ci-"]:before,[class^=ci-]:before{font-family:CartZilla-icons!important;font-style:normal;font-variant:normal;font-weight:400!important;line-height:1;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ci-activity:before{content:"\f101"}.ci-airbnb:before{content:"\f102"}.ci-airplay:before{content:"\f103"}.ci-alert-circle:before{content:"\f104"}.ci-alert-octagon:before{content:"\f105"}.ci-alert-triangle:before{content:"\f106"}.ci-align-center:before{content:"\f107"}.ci-align-justify:before{content:"\f108"}.ci-align-left:before{content:"\f109"}.ci-align-right:before{content:"\f10a"}.ci-anchor:before{content:"\f10b"}.ci-aperture:before{content:"\f10c"}.ci-apple:before{content:"\f10d"}.ci-archive:before{content:"\f10e"}.ci-arrow-down-circle:before{content:"\f10f"}.ci-arrow-down-left:before{content:"\f110"}.ci-arrow-down-right:before{content:"\f111"}.ci-arrow-down:before{content:"\f112"}.ci-arrow-left-circle:before{content:"\f113"}.ci-arrow-left:before{content:"\f114"}.ci-arrow-right-circle:before{content:"\f115"}.ci-arrow-right:before{content:"\f116"}.ci-arrow-up-circle:before{content:"\f117"}.ci-arrow-up-left:before{content:"\f118"}.ci-arrow-up-right:before{content:"\f119"}.ci-arrow-up:before{content:"\f11a"}.ci-at-sign:before{content:"\f11b"}.ci-auto:before{content:"\f11c"}.ci-avocado:before{content:"\f11d"}.ci-award:before{content:"\f11e"}.ci-banned:before{content:"\f11f"}.ci-bar-chart-2:before{content:"\f120"}.ci-bar-chart:before{content:"\f121"}.ci-battery-2:before{content:"\f122"}.ci-battery-charging:before{content:"\f123"}.ci-battery:before{content:"\f124"}.ci-behance:before{content:"\f125"}.ci-bell-off:before{content:"\f126"}.ci-bell:before{content:"\f127"}.ci-blogger:before{content:"\f128"}.ci-bluetooth:before{content:"\f129"}.ci-bold:before{content:"\f12a"}.ci-book-open:before{content:"\f12b"}.ci-book:before{content:"\f12c"}.ci-bookmark:before{content:"\f12d"}.ci-box:before{content:"\f12e"}.ci-briefcase:before{content:"\f12f"}.ci-broccoli:before{content:"\f130"}.ci-bullet:before{content:"\f131"}.ci-calendar:before{content:"\f132"}.ci-camera-2:before{content:"\f133"}.ci-camera-off:before{content:"\f134"}.ci-camera:before{content:"\f135"}.ci-cast:before{content:"\f136"}.ci-chat:before{content:"\f137"}.ci-check-circle:before{content:"\f138"}.ci-check-search:before{content:"\f139"}.ci-check-shield:before{content:"\f13a"}.ci-check-square:before{content:"\f13b"}.ci-check:before{content:"\f13c"}.ci-chevron-down:before{content:"\f13d"}.ci-chevron-left:before{content:"\f13e"}.ci-chevron-right:before{content:"\f13f"}.ci-chevron-up:before{content:"\f140"}.ci-chevrons-down:before{content:"\f141"}.ci-chevrons-left:before{content:"\f142"}.ci-chevrons-right:before{content:"\f143"}.ci-chevrons-up:before{content:"\f144"}.ci-click:before{content:"\f145"}.ci-clipboard:before{content:"\f146"}.ci-clock:before{content:"\f147"}.ci-close-circle:before{content:"\f148"}.ci-close-octagon:before{content:"\f149"}.ci-close-square:before{content:"\f14a"}.ci-close:before{content:"\f14b"}.ci-cloud-drizzle:before{content:"\f14c"}.ci-cloud-lightning:before{content:"\f14d"}.ci-cloud-off:before{content:"\f14e"}.ci-cloud-rain:before{content:"\f14f"}.ci-cloud-snow:before{content:"\f150"}.ci-cloud:before{content:"\f151"}.ci-code:before{content:"\f152"}.ci-codepen:before{content:"\f153"}.ci-coffee:before{content:"\f154"}.ci-columns:before{content:"\f155"}.ci-command:before{content:"\f156"}.ci-compass:before{content:"\f157"}.ci-computer:before{content:"\f158"}.ci-copy:before{content:"\f159"}.ci-corner-down-left:before{content:"\f15a"}.ci-corner-down-right:before{content:"\f15b"}.ci-corner-left-down:before{content:"\f15c"}.ci-corner-left-up:before{content:"\f15d"}.ci-corner-right-down:before{content:"\f15e"}.ci-corner-right-up:before{content:"\f15f"}.ci-corner-up-left:before{content:"\f160"}.ci-corner-up-right:before{content:"\f161"}.ci-credit-card:before{content:"\f162"}.ci-crop:before{content:"\f163"}.ci-crosshair:before{content:"\f164"}.ci-database:before{content:"\f165"}.ci-delete:before{content:"\f166"}.ci-delivery-2:before{content:"\f167"}.ci-delivery:before{content:"\f168"}.ci-disc:before{content:"\f169"}.ci-discord:before{content:"\f16a"}.ci-disqus:before{content:"\f16b"}.ci-divide:before{content:"\f16c"}.ci-dollar-sign:before{content:"\f16d"}.ci-download-cloud:before{content:"\f16e"}.ci-download:before{content:"\f16f"}.ci-dribbble:before{content:"\f170"}.ci-dropbox:before{content:"\f171"}.ci-droplet:before{content:"\f172"}.ci-edit-2:before{content:"\f173"}.ci-edit-3:before{content:"\f174"}.ci-edit:before{content:"\f175"}.ci-envato:before{content:"\f176"}.ci-evernote:before{content:"\f177"}.ci-external-link:before{content:"\f178"}.ci-eye-off:before{content:"\f179"}.ci-eye:before{content:"\f17a"}.ci-facebook:before{content:"\f17b"}.ci-fast-forward:before{content:"\f17c"}.ci-feather:before{content:"\f17d"}.ci-file-minus:before{content:"\f17e"}.ci-file-plus:before{content:"\f17f"}.ci-file-text:before{content:"\f180"}.ci-file:before{content:"\f181"}.ci-film:before{content:"\f182"}.ci-filter:before{content:"\f183"}.ci-flag:before{content:"\f184"}.ci-flickr:before{content:"\f185"}.ci-folder-minus:before{content:"\f186"}.ci-folder-plus:before{content:"\f187"}.ci-folder:before{content:"\f188"}.ci-food:before{content:"\f189"}.ci-foursquare:before{content:"\f18a"}.ci-frown:before{content:"\f18b"}.ci-game:before{content:"\f18c"}.ci-gift:before{content:"\f18d"}.ci-github:before{content:"\f18e"}.ci-globe:before{content:"\f18f"}.ci-gluten-free:before{content:"\f190"}.ci-google-drive:before{content:"\f191"}.ci-google-play:before{content:"\f192"}.ci-google:before{content:"\f193"}.ci-grid-2:before{content:"\f194"}.ci-grid:before{content:"\f195"}.ci-hanger:before{content:"\f196"}.ci-hangouts:before{content:"\f197"}.ci-hard-drive-2:before{content:"\f198"}.ci-hard-drive:before{content:"\f199"}.ci-hash:before{content:"\f19a"}.ci-headphones-2:before{content:"\f19b"}.ci-headphones:before{content:"\f19c"}.ci-heart-filled:before{content:"\f19d"}.ci-heart:before{content:"\f19e"}.ci-help-circle:before{content:"\f19f"}.ci-home:before{content:"\f1a0"}.ci-id-card:before{content:"\f1a1"}.ci-image:before{content:"\f1a2"}.ci-inbox:before{content:"\f1a3"}.ci-info:before{content:"\f1a4"}.ci-instagram:before{content:"\f1a5"}.ci-italic:before{content:"\f1a6"}.ci-key:before{content:"\f1a7"}.ci-kickstarter:before{content:"\f1a8"}.ci-layers-2:before{content:"\f1a9"}.ci-layers:before{content:"\f1aa"}.ci-layout:before{content:"\f1ab"}.ci-leaf:before{content:"\f1ac"}.ci-life-buoy:before{content:"\f1ad"}.ci-link-2:before{content:"\f1ae"}.ci-link:before{content:"\f1af"}.ci-linkedin:before{content:"\f1b0"}.ci-list:before{content:"\f1b1"}.ci-loader:before{content:"\f1b2"}.ci-lock:before{content:"\f1b3"}.ci-log-in:before{content:"\f1b4"}.ci-log-out:before{content:"\f1b5"}.ci-mail:before{content:"\f1b6"}.ci-map-pin:before{content:"\f1b7"}.ci-map:before{content:"\f1b8"}.ci-maximize-2:before{content:"\f1b9"}.ci-maximize:before{content:"\f1ba"}.ci-medium:before{content:"\f1bb"}.ci-meh:before{content:"\f1bc"}.ci-menu:before{content:"\f1bd"}.ci-message-circle:before{content:"\f1be"}.ci-message-square:before{content:"\f1bf"}.ci-messenger:before{content:"\f1c0"}.ci-mic-off:before{content:"\f1c1"}.ci-mic:before{content:"\f1c2"}.ci-minimize-2:before{content:"\f1c3"}.ci-minimize:before{content:"\f1c4"}.ci-minus-circle:before{content:"\f1c5"}.ci-minus-square:before{content:"\f1c6"}.ci-minus:before{content:"\f1c7"}.ci-monitor-2:before{content:"\f1c8"}.ci-monitor:before{content:"\f1c9"}.ci-moon:before{content:"\f1ca"}.ci-more-horizontal:before{content:"\f1cb"}.ci-more-vertical:before{content:"\f1cc"}.ci-mouse-pointer:before{content:"\f1cd"}.ci-move:before{content:"\f1ce"}.ci-music:before{content:"\f1cf"}.ci-myspace:before{content:"\f1d0"}.ci-navigation-2:before{content:"\f1d1"}.ci-navigation:before{content:"\f1d2"}.ci-odnoklassniki:before{content:"\f1d3"}.ci-open-source:before{content:"\f1d4"}.ci-package:before{content:"\f1d5"}.ci-paint:before{content:"\f1d6"}.ci-paperclip:before{content:"\f1d7"}.ci-patreon:before{content:"\f1d8"}.ci-pause-circle:before{content:"\f1d9"}.ci-pause:before{content:"\f1da"}.ci-pen-tool:before{content:"\f1db"}.ci-percent:before{content:"\f1dc"}.ci-phone-call:before{content:"\f1dd"}.ci-phone-forwarded:before{content:"\f1de"}.ci-phone-incoming:before{content:"\f1df"}.ci-phone-missed:before{content:"\f1e0"}.ci-phone-off:before{content:"\f1e1"}.ci-phone-outgoing:before{content:"\f1e2"}.ci-phone:before{content:"\f1e3"}.ci-pie-chart:before{content:"\f1e4"}.ci-pinterest:before{content:"\f1e5"}.ci-play-circle:before{content:"\f1e6"}.ci-play-filled:before{content:"\f1e7"}.ci-play:before{content:"\f1e8"}.ci-plus-circle:before{content:"\f1e9"}.ci-plus-square:before{content:"\f1ea"}.ci-plus:before{content:"\f1eb"}.ci-power:before{content:"\f1ec"}.ci-powerbank:before{content:"\f1ed"}.ci-printer-2:before{content:"\f1ee"}.ci-printer:before{content:"\f1ef"}.ci-product-hunt:before{content:"\f1f0"}.ci-quora:before{content:"\f1f1"}.ci-radio:before{content:"\f1f2"}.ci-reddit:before{content:"\f1f3"}.ci-refresh-ccw:before{content:"\f1f4"}.ci-refresh-cw:before{content:"\f1f5"}.ci-repeat:before{content:"\f1f6"}.ci-rewind:before{content:"\f1f7"}.ci-rocket:before{content:"\f1f8"}.ci-rotate-ccw:before{content:"\f1f9"}.ci-rotate-cw:before{content:"\f1fa"}.ci-rss-2:before{content:"\f1fb"}.ci-rss:before{content:"\f1fc"}.ci-ruler:before{content:"\f1fd"}.ci-save:before{content:"\f1fe"}.ci-scan:before{content:"\f1ff"}.ci-schedule:before{content:"\f200"}.ci-scissors:before{content:"\f201"}.ci-search:before{content:"\f202"}.ci-send:before{content:"\f203"}.ci-server:before{content:"\f204"}.ci-settings:before{content:"\f205"}.ci-share-2:before{content:"\f206"}.ci-share:before{content:"\f207"}.ci-shield-off:before{content:"\f208"}.ci-shield:before{content:"\f209"}.ci-shopping-bag:before{content:"\f20a"}.ci-shopping-cart:before{content:"\f20b"}.ci-shuffle:before{content:"\f20c"}.ci-sidebar:before{content:"\f20d"}.ci-skip-back:before{content:"\f20e"}.ci-skip-forward:before{content:"\f20f"}.ci-skype:before{content:"\f210"}.ci-slack:before{content:"\f211"}.ci-sliders:before{content:"\f212"}.ci-smartphone-2:before{content:"\f213"}.ci-smartphone:before{content:"\f214"}.ci-smile:before{content:"\f215"}.ci-snapchat:before{content:"\f216"}.ci-sort:before{content:"\f217"}.ci-soundcloud:before{content:"\f218"}.ci-speaker-2:before{content:"\f219"}.ci-speaker:before{content:"\f21a"}.ci-spotify:before{content:"\f21b"}.ci-stack-overflow:before{content:"\f21c"}.ci-star-filled:before{content:"\f21d"}.ci-star-half:before{content:"\f21e"}.ci-star:before{content:"\f21f"}.ci-steam:before{content:"\f220"}.ci-stop-circle:before{content:"\f221"}.ci-stumbleupon:before{content:"\f222"}.ci-sun:before{content:"\f223"}.ci-sunrise:before{content:"\f224"}.ci-sunset:before{content:"\f225"}.ci-table:before{content:"\f226"}.ci-tablet:before{content:"\f227"}.ci-tag:before{content:"\f228"}.ci-target:before{content:"\f229"}.ci-telegram:before{content:"\f22a"}.ci-terminal:before{content:"\f22b"}.ci-thermometer:before{content:"\f22c"}.ci-thumbs-down:before{content:"\f22d"}.ci-thumbs-up:before{content:"\f22e"}.ci-ticket:before{content:"\f22f"}.ci-tiktok:before{content:"\f230"}.ci-tinder:before{content:"\f231"}.ci-tool:before{content:"\f232"}.ci-trash-empty:before{content:"\f233"}.ci-trash:before{content:"\f234"}.ci-trello:before{content:"\f235"}.ci-trending-down:before{content:"\f236"}.ci-trending-up:before{content:"\f237"}.ci-triangle:before{content:"\f238"}.ci-truck:before{content:"\f239"}.ci-tumblr:before{content:"\f23a"}.ci-tv:before{content:"\f23b"}.ci-twitch:before{content:"\f23c"}.ci-type:before{content:"\f23d"}.ci-umbrella:before{content:"\f23e"}.ci-unlock:before{content:"\f23f"}.ci-upload-cloud:before{content:"\f240"}.ci-upload:before{content:"\f241"}.ci-user-check:before{content:"\f242"}.ci-user-plus:before{content:"\f243"}.ci-user-x:before{content:"\f244"}.ci-user:before{content:"\f245"}.ci-viber:before{content:"\f246"}.ci-video-off:before{content:"\f247"}.ci-video:before{content:"\f248"}.ci-vimeo:before{content:"\f249"}.ci-vk:before{content:"\f24a"}.ci-voicemail:before{content:"\f24b"}.ci-volume-1:before{content:"\f24c"}.ci-volume-2:before{content:"\f24d"}.ci-volume-x:before{content:"\f24e"}.ci-volume:before{content:"\f24f"}.ci-watch-2:before{content:"\f250"}.ci-watch:before{content:"\f251"}.ci-wechat:before{content:"\f252"}.ci-whatsapp:before{content:"\f253"}.ci-wifi-off:before{content:"\f254"}.ci-wifi:before{content:"\f255"}.ci-wind:before{content:"\f256"}.ci-x:before{content:"\f257"}.ci-xing:before{content:"\f258"}.ci-yelp:before{content:"\f259"}.ci-youtube:before{content:"\f25a"}.ci-zap-off:before{content:"\f25b"}.ci-zap:before{content:"\f25c"}.ci-zoom-in:before{content:"\f25d"}.ci-zoom-out:before{content:"\f25e"}
\ No newline at end of file
diff --git a/resources/js/components/product-highlights.js b/resources/js/components/product-highlights.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/js/theme.js b/resources/js/theme.js
index 3f73dfa..ba7a96b 100644
--- a/resources/js/theme.js
+++ b/resources/js/theme.js
@@ -34,4 +34,4 @@ import './components/binded-label'
 import './components/image-zoom'
 import './components/code-highlight'
 import './components/copy-text'
-import './components/chart'
+import './components/chart'
\ No newline at end of file
diff --git a/resources/views/components/home/brand-home-fashion-v1.blade.php b/resources/views/components/home/brand-home-fashion-v1.blade.php
index 2344018..ee921c6 100644
--- a/resources/views/components/home/brand-home-fashion-v1.blade.php
+++ b/resources/views/components/home/brand-home-fashion-v1.blade.php
@@ -1,6 +1,6 @@
-<section class="container pb-5 mb-1 mb-sm-3 mb-lg-4 mb-xl-5">
-            <div class="swiper my-md-3"
-                data-swiper='{
+<section class="container pb-5 mb-1 mb-sm-3 mb-lg-4 mb-xl-5" id="brand-home-section">
+    <div class="swiper my-md-3"
+        data-swiper='{
           "slidesPerView": 2,
           "pagination": {
             "el": ".swiper-pagination",
@@ -24,21 +24,80 @@
             }
           }
         }'>
-                <div class="swiper-wrapper">
+        <div class="swiper-wrapper" id="brand-container">
+            <!-- Brands will be loaded via AJAX -->
+        </div>
 
-                    
+        <!-- Pagination (Bullets) -->
+        <div class="swiper-pagination position-static mt-3"></div>
+    </div>
 
-                    <!-- Item -->
-                    @foreach($brands as $brand)
-                    <a class="swiper-slide text-body" href="#!" aria-label="{{ $brand->name }}">
-                        <img src="{{ $brand->image_url }}" alt="{{ $brand->name }}" class="object-fit-contain">
-                    </a>
-
-                    @endforeach
-
-                </div>
-
-                <!-- Pagination (Bullets) -->
-                <div class="swiper-pagination position-static mt-3"></div>
+    <!-- Loading state -->
+    <div class="text-center py-5 d-none" id="brand-loading">
+        <div class="swiper my-md-3">
+            <div class="swiper-wrapper">
+                @for ($i = 1; $i <= 6; $i++)
+                    <div class="swiper-slide text-body">
+                        <div class="shimmer-wrapper">
+                            <div class="shimmer">
+                                <div class="shimmer-content rounded">
+                                    <div class="shimmer-line shimmer-image rounded"
+                                        style="height: 60px; width: 100%; background-color: rgba(0, 0, 0, 0.1);">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endfor
             </div>
-        </section>
\ No newline at end of file
+        </div>
+    </div>
+</section>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const brandContainer = document.getElementById('brand-container');
+    const loadingSpinner = document.getElementById('brand-loading');
+    const section = document.getElementById('brand-home-section');
+
+    if (!brandContainer || !loadingSpinner) {
+        return;
+    }
+
+    // Load brands on page load
+    loadBrands();
+
+    function loadBrands() {
+        // Show loading spinner
+        loadingSpinner.classList.remove('d-none');
+
+        // Make AJAX request for brands
+        fetch('{{ route("product.ajax.brands") }}')
+            .then(response => response.json())
+            .then(data => {
+                if (data.success && data.brands) {
+                    brandContainer.innerHTML = data.brands;
+                } else {
+                    // Handle error
+                    brandContainer.innerHTML = '<div class="swiper-slide text-center py-4">Error loading brands</div>';
+                }
+            })
+            .catch(error => {
+                console.error('Error loading brands:', error);
+                brandContainer.innerHTML = '<div class="swiper-slide text-center py-4">Error loading brands</div>';
+            })
+            .finally(() => {
+                // Hide loading spinner
+                loadingSpinner.classList.add('d-none');
+                
+                // Re-initialize Swiper
+                if (window.Swiper) {
+                    const swiper = section.querySelector('.swiper');
+                    if (swiper && swiper.swiper) {
+                        swiper.swiper.update();
+                    }
+                }
+            });
+    }
+});
+</script>
diff --git a/resources/views/components/home/home-popular-products.blade.php b/resources/views/components/home/home-popular-products.blade.php
new file mode 100644
index 0000000..94e4199
--- /dev/null
+++ b/resources/views/components/home/home-popular-products.blade.php
@@ -0,0 +1,248 @@
+<section class="container py-5 my-2 my-sm-3 my-lg-4 my-xl-5" id="popular-products-section">
+    <div class="row align-items-lg-center py-xxl-3">
+
+        <!-- Products -->
+        <div class="col-md-6 col-xl-5 offset-xl-1 order-md-2 mb-4 mb-md-0">
+            <div class="ps-md-3 ps-lg-4 ps-xl-0">
+                <div class="d-flex align-items-center justify-content-between pb-4 mb-md-1 mb-lg-2 mb-xl-3">
+                    <h2 class="me-3 mb-0">Popular products</h2>
+
+                    <!-- Slider prev/next buttons -->
+                    <div class="d-flex gap-2">
+                        <button type="button"
+                            class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
+                            id="popularPrev" aria-label="Prev">
+                            <i class="ci-chevron-left fs-lg animate-target"></i>
+                        </button>
+                        <button type="button"
+                            class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
+                            id="popularNext" aria-label="Next">
+                            <i class="ci-chevron-right fs-lg animate-target"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Products master slider -->
+                <div class="swiper"
+                    data-swiper='{
+            "spaceBetween": 24,
+            "loop": true,
+            "speed": 400,
+            "controlSlider": "#sliderImages",
+            "navigation": {
+              "prevEl": "#popularPrev",
+              "nextEl": "#popularNext"
+            }
+          }'>
+                    <div class="swiper-wrapper" id="popular-products-container">
+                        <!-- Products will be loaded via AJAX -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Images -->
+        <div class="col-md-6 col-xl-5 order-md-1">
+            <div class="position-relative">
+                <div class="ratio d-none d-md-block" style="--cz-aspect-ratio: calc(720 / 636 * 100%)">
+                </div>
+                <div class="ratio ratio-4x3 d-md-none"></div>
+                <div class="swiper position-absolute top-0 start-0 w-100 h-100 user-select-none"
+                    id="sliderImages"
+                    data-swiper='{
+            "allowTouchMove": false,
+            "loop": true,
+            "effect": "fade",
+            "fadeEffect": {
+              "crossFade": true
+            }
+          }'>
+                    <div class="swiper-wrapper" id="popular-images-container">
+                        <!-- Images will be loaded via AJAX -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading state -->
+    <div class="text-center py-5 d-none" id="popular-products-loading">
+        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-md-5 pb-xxl-3">
+            @for ($i = 1; $i <= 6; $i++)
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="shimmer-wrapper">
+                        <div class="shimmer">
+                            <div class="shimmer-content rounded">
+                                <div class="shimmer-line shimmer-image rounded mb-3"
+                                    style="height: 0; padding-bottom: 100%; position: relative;">
+                                    <div
+                                        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); border-radius: 4px;">
+                                    </div>
+                                </div>
+                                <div class="shimmer-line shimmer-title rounded mb-2"
+                                    style="height: 20px; width: 80%;"></div>
+                                <div class="shimmer-line shimmer-price rounded" style="height: 16px; width: 60%;">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            @endfor
+        </div>
+    </div>
+</section>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const productsContainer = document.getElementById('popular-products-container');
+    const imagesContainer = document.getElementById('popular-images-container');
+    const loadingSpinner = document.getElementById('popular-products-loading');
+    const section = document.getElementById('popular-products-section');
+
+    if (!productsContainer || !imagesContainer || !loadingSpinner) {
+        return;
+    }
+
+    // Load popular products on page load
+    loadPopularProducts();
+
+    function loadPopularProducts() {
+        // Show loading spinner
+        if (loadingSpinner) {
+            loadingSpinner.classList.remove('d-none');
+        }
+
+        // Make AJAX request for popular products
+        fetch('{{ route("product.ajax.highlights") }}?type=best_sellers&limit=6')
+            .then(response => response.json())
+            .then(data => {
+                if (data.success && data.products) {
+                    // Parse the HTML to extract individual product cards
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = data.products;
+                    
+                    const productCards = tempDiv.querySelectorAll('.col');
+                    const productsArray = Array.from(productCards);
+                    
+                    // Split products into two slides (3 products each)
+                    const slide1 = productsArray.slice(0, 3);
+                    const slide2 = productsArray.slice(3, 6);
+                    
+                    // Create slides with product lists
+                    productsContainer.innerHTML = '';
+                    
+                    [slide1, slide2].forEach((slide, index) => {
+                        const slideDiv = document.createElement('div');
+                        slideDiv.className = 'swiper-slide';
+                        
+                        const listDiv = document.createElement('div');
+                        listDiv.className = 'd-flex flex-column gap-3 gap-lg-4';
+                        
+                        slide.forEach(product => {
+                            // Convert product card to list item format
+                            const productImg = product.querySelector('img');
+                            const productLink = product.querySelector('a');
+                            const productPrice = product.querySelector('.h6, .price');
+                            
+                            const listItem = document.createElement('div');
+                            listItem.className = 'd-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline';
+                            
+                            const img = document.createElement('img');
+                            img.src = productImg ? productImg.src : '/img/shop/fashion/thumbs/0' + (index * 3 + slide.indexOf(product) + 1) + '.png';
+                            img.width = 110;
+                            img.alt = 'Thumbnail';
+                            
+                            const navDiv = document.createElement('div');
+                            navDiv.className = 'nav flex-column gap-2 min-w-0 p-3';
+                            
+                            const link = document.createElement('a');
+                            link.className = 'nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0';
+                            link.href = productLink ? productLink.href : '#';
+                            
+                            const span = document.createElement('span');
+                            span.className = 'animate-target text-truncate';
+                            span.textContent = productLink ? productLink.textContent.trim() : 'Product Name';
+                            
+                            const price = document.createElement('div');
+                            price.className = 'h6 mb-0';
+                            price.textContent = productPrice ? productPrice.textContent : '$0.00';
+                            
+                            link.appendChild(span);
+                            navDiv.appendChild(link);
+                            navDiv.appendChild(price);
+                            listItem.appendChild(img);
+                            listItem.appendChild(navDiv);
+                            listDiv.appendChild(listItem);
+                        });
+                        
+                        slideDiv.appendChild(listDiv);
+                        productsContainer.appendChild(slideDiv);
+                    });
+                    
+                    // Load corresponding images
+                    loadPopularImages();
+                    
+                } else {
+                    // Handle error
+                    productsContainer.innerHTML = '<div class="swiper-slide"><div class="text-center py-4">Error loading products</div></div>';
+                }
+            })
+            .catch(error => {
+                console.error('Error loading popular products:', error);
+                productsContainer.innerHTML = '<div class="swiper-slide"><div class="text-center py-4">Error loading products</div></div>';
+            })
+            .finally(() => {
+                // Hide loading spinner
+                if (loadingSpinner) {
+                    loadingSpinner.classList.add('d-none');
+                }
+                
+                // Re-initialize Swiper
+                if (window.Swiper) {
+                    const swiperElements = section.querySelectorAll('.swiper');
+                    swiperElements.forEach(element => {
+                        if (element.swiper) {
+                            element.swiper.update();
+                        }
+                    });
+                }
+            });
+    }
+
+    function loadPopularImages() {
+        // Load images for the slider
+        const images = [
+            '/img/home/fashion/v1/popular/01.jpg',
+            '/img/home/fashion/v1/popular/02.jpg'
+        ];
+        
+        imagesContainer.innerHTML = '';
+        
+        images.forEach((src, index) => {
+            const slideDiv = document.createElement('div');
+            slideDiv.className = 'swiper-slide';
+            
+            const ratioDiv = document.createElement('div');
+            ratioDiv.className = index === 0 ? 'ratio d-none d-md-block' : 'ratio d-none d-md-block';
+            ratioDiv.style.setProperty('--cz-aspect-ratio', 'calc(720 / 636 * 100%)');
+            
+            const mobileRatioDiv = document.createElement('div');
+            mobileRatioDiv.className = 'ratio ratio-4x3 d-md-none';
+            
+            const img = document.createElement('img');
+            img.src = src;
+            img.className = 'position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5';
+            img.alt = 'Image';
+            
+            if (index === 1) {
+                img.style.objectPosition = 'center top';
+            }
+            
+            slideDiv.appendChild(ratioDiv);
+            slideDiv.appendChild(mobileRatioDiv);
+            slideDiv.appendChild(img);
+            imagesContainer.appendChild(slideDiv);
+        });
+    }
+});
+</script>
diff --git a/resources/views/components/home/home-slider.blade.php b/resources/views/components/home/home-slider.blade.php
new file mode 100644
index 0000000..5420346
--- /dev/null
+++ b/resources/views/components/home/home-slider.blade.php
@@ -0,0 +1,99 @@
+<section class="bg-body-tertiary">
+    <div class="container">
+        <div class="row">
+
+            <!-- Titles master slider -->
+            <div class="col-md-6 col-lg-5 d-flex flex-column">
+                <div class="py-4 mt-auto">
+                    <div class="swiper pb-1 pt-3 pt-sm-4 py-md-4 py-lg-3"
+                        data-swiper='{
+              "spaceBetween": 24,
+              "loop": true,
+              "speed": 400,
+              "controlSlider": "#heroImages",
+              "pagination": {
+                "el": "#sliderBullets",
+                "clickable": true
+              },
+              "autoplay": {
+                "delay": 5500,
+                "disableOnInteraction": false
+              }
+            }'>
+                        <div class="swiper-wrapper align-items-center">
+
+                            <!-- Item -->
+                            <div class="swiper-slide text-center text-md-start">
+                                <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">The new warm collection</p>
+                                <h2 class="display-4 text-uppercase mb-4 mb-xl-5">New fall <br
+                                        class="d-none d-md-inline">season 2024</h2>
+                                <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                    Shop now
+                                    <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                </a>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide text-center text-md-start">
+                                <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Ready for the party?</p>
+                                <h2 class="display-4 text-uppercase mb-4 mb-xl-5">Choose outfits for parties</h2>
+                                <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                    Shop now
+                                    <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                </a>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide text-center text-md-start">
+                                <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Shades of gray for your look</p>
+                                <h2 class="display-4 text-uppercase mb-4 mb-xl-5">-50% on gray Collection</h2>
+                                <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                    Shop now
+                                    <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Slider bullets (pagination) -->
+                <div
+                    class="d-flex justify-content-center justify-content-md-start pb-4 pb-xl-5 mt-n1 mt-md-auto mb-md-3 mb-lg-4">
+                    <div class="swiper-pagination position-static w-auto pb-1" id="sliderBullets"></div>
+                </div>
+            </div>
+
+            <!-- Linked images (controlled slider) -->
+            <div class="col-md-6 col-lg-7 align-self-end">
+                <div class="position-relative ms-md-n4">
+                    <div class="ratio" style="--cz-aspect-ratio: calc(662 / 770 * 100%)"></div>
+                    <div class="swiper position-absolute top-0 start-0 w-100 h-100 user-select-none"
+                        id="heroImages"
+                        data-swiper='{
+              "allowTouchMove": false,
+              "loop": true,
+              "effect": "fade",
+              "fadeEffect": {
+                "crossFade": true
+              }
+            }'>
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">
+                                <img src="/img/home/fashion/v1/hero-slider/01.png" class="rtl-flip"
+                                    alt="Image">
+                            </div>
+                            <div class="swiper-slide">
+                                <img src="/img/home/fashion/v1/hero-slider/02.png" class="rtl-flip"
+                                    alt="Image">
+                            </div>
+                            <div class="swiper-slide">
+                                <img src="/img/home/fashion/v1/hero-slider/03.png" class="rtl-flip"
+                                    alt="Image">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/resources/views/components/home/new-arrivals.blade.php b/resources/views/components/home/new-arrivals.blade.php
index 256ef6b..2f23a5c 100644
--- a/resources/views/components/home/new-arrivals.blade.php
+++ b/resources/views/components/home/new-arrivals.blade.php
@@ -76,7 +76,7 @@
                                             <span class="text-truncate">{{ $product->name }}</span>
                                         </a>
                                     </div>
-                                    <div class="h6 mb-0">{{ number_format($product->price, 0, ',', '.') }}</div>
+                                    <div class="h6 mb-0">Rp {{ number_format($product->display_price, 0, ',', '.') }}</div>
                                 </div>
                             </div>                
                         @endforeach
diff --git a/resources/views/components/home/product-highlight.blade.php b/resources/views/components/home/product-highlight.blade.php
index 7f8f31c..04a0685 100644
--- a/resources/views/components/home/product-highlight.blade.php
+++ b/resources/views/components/home/product-highlight.blade.php
@@ -1,35 +1,204 @@
-    <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
-            <h2 class="text-center pb-2 pb-sm-3">{{ __('weeks_highlights.this_weeks_highlights') }}</h2>
+<style>
+        .shimmer-wrapper-highlight {
+            overflow: hidden;
+        }
 
-            <!-- Nav pills -->
-            <div class="row g-0 overflow-x-auto pb-2 pb-sm-3 mb-3">
-                <div class="col-auto pb-1 pb-sm-0 mx-auto">
-                    <ul class="nav nav-pills flex-nowrap text-nowrap">
-                        <li class="nav-item">
-                            <a class="nav-link active" aria-current="page" href="#!">{{ __('weeks_highlights.best_sellers') }}</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#!">{{ __('weeks_highlights.new_arrivals') }}</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#!">{{ __('weeks_highlights.sale_items') }}</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#!">{{ __('weeks_highlights.top_rated') }}</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+        .shimmer-wrapper-highlight .shimmer {
+            position: relative;
+            overflow: hidden;
+        }
 
-            <!-- Products grid -->
+        .shimmer-wrapper-highlight .shimmer::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg,
+                    rgba(255, 255, 255, 0) 0%,
+                    rgba(255, 255, 255, 0.3) 50%,
+                    rgba(255, 255, 255, 0) 100%);
+            animation: shimmer-wrapper-highlight-shimmer 1.5s infinite;
+        }
+
+        @keyframes shimmer-wrapper-highlight-shimmer {
+            0% {
+                transform: translateX(-100%);
+            }
+
+            100% {
+                transform: translateX(100%);
+            }
+        }
+
+        .shimmer-wrapper-highlight .shimmer-line {
+            background-color: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+        }
+
+        .shimmer-wrapper-highlight .shimmer-content {
+            position: relative;
+            overflow: hidden;
+        }
+    </style>
+
+<section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5" id="product-highlights-section">
+    <h2 class="text-center pb-2 pb-sm-3">{{ __('weeks_highlights.this_weeks_highlights') }}</h2>
+
+    <div class="row g-0 overflow-x-auto pb-2 pb-sm-3 mb-3">
+        <div class="col-auto pb-1 pb-sm-0 mx-auto">
+            <ul class="nav nav-pills flex-nowrap text-nowrap" id="product-highlights-tabs">
+                <li class="nav-item">
+                    <a class="nav-link active" href="#" data-type="best_sellers"
+                        data-url="{{ route('product.ajax.highlights') }}">
+                        {{ __('weeks_highlights.best_sellers') }}
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#" data-type="new_arrivals"
+                        data-url="{{ route('product.ajax.highlights') }}">
+                        {{ __('weeks_highlights.new_arrivals') }}
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#" data-type="sale_items"
+                        data-url="{{ route('product.ajax.highlights') }}">
+                        {{ __('weeks_highlights.sale_items') }}
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#" data-type="top_rated"
+                        data-url="{{ route('product.ajax.highlights') }}">
+                        {{ __('weeks_highlights.top_rated') }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="position-relative">
+        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-md-5 pb-xxl-3" id="product-highlights-container">
+
+
+
+        </div>
+
+        <div class="text-center py-5 d-none" id="product-highlights-loading">
             <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-md-5 pb-xxl-3">
-
-                <!-- Item -->
-                @foreach ($products as $key => $product)
-                <div class="col mb-2 mb-sm-3 mb-md-0">
-                     <x-home.product-card :product="$product" />
-                     </div>
-                @endforeach
-
+                @for ($i = 1; $i <= 8; $i++)
+                    <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                        <div class="shimmer-wrapper-highlight">
+                            <div class="shimmer">
+                                <div class="shimmer-content rounded">
+                                    <div class="shimmer-line shimmer-image rounded mb-3"
+                                        style="height: 0; padding-bottom: 100%; position: relative;">
+                                        <div
+                                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); border-radius: 4px;">
+                                        </div>
+                                    </div>
+                                    <div class="shimmer-line shimmer-title rounded mb-2"
+                                        style="height: 20px; width: 80%;"></div>
+                                    <div class="shimmer-line shimmer-price rounded" style="height: 16px; width: 60%;">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endfor
             </div>
-        </section>
+        </div>
+    </div>
+</section>
+
+
+
+<script>
+    /*!
+     * Product Highlights AJAX functionality
+     * Handles tab switching and AJAX loading for product highlights section
+     */
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const tabsContainer = document.getElementById('product-highlights-tabs');
+        const productsContainer = document.getElementById('product-highlights-container');
+        const loadingSpinner = document.getElementById('product-highlights-loading');
+
+        if (!tabsContainer || !productsContainer || !loadingSpinner) {
+            return;
+        }
+
+        // Load first tab content on page load
+        const firstTab = tabsContainer.querySelector('.nav-link.active');
+        if (firstTab) {
+            const type = firstTab.dataset.type;
+            const url = firstTab.dataset.url;
+            if (type && url) {
+                loadProductHighlights(type, url);
+            }
+        }
+
+        // Handle tab clicks
+        tabsContainer.addEventListener('click', function(e) {
+            e.preventDefault();
+
+            const tab = e.target.closest('.nav-link');
+            if (!tab) return;
+
+            // Get the type and URL from data attributes
+            const type = tab.dataset.type;
+            const url = tab.dataset.url;
+
+            if (!type || !url) return;
+
+            // Update active tab
+            tabsContainer.querySelectorAll('.nav-link').forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+
+            // Load products via AJAX
+            loadProductHighlights(type, url);
+        });
+
+        function loadProductHighlights(type, url) {
+            // Show loading spinner
+            productsContainer.style.display = 'none';
+            loadingSpinner.classList.remove('d-none');
+
+            // Build URL with parameters
+            const requestUrl = `${url}?type=${type}`;
+
+            // Make AJAX request
+            fetch(requestUrl)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Update products container with new HTML
+                        productsContainer.innerHTML = data.products;
+                    } else {
+                        // Handle error
+                        productsContainer.innerHTML =
+                            '<div class="col-12 text-center py-4">Error loading products</div>';
+                    }
+                })
+                .catch(error => {
+                    console.error('Error loading product highlights:', error);
+                    productsContainer.innerHTML =
+                        '<div class="col-12 text-center py-4">Error loading products</div>';
+                })
+                .finally(() => {
+                    // Hide loading spinner and show products
+                    loadingSpinner.classList.add('d-none');
+                    productsContainer.style.display = 'flex';
+
+                    // Re-initialize any components that might be needed for the new products
+                    if (window.bootstrap && window.bootstrap.Tooltip) {
+                        const tooltipTriggerList = [].slice.call(productsContainer.querySelectorAll(
+                            '[data-bs-toggle="tooltip"]'));
+                        tooltipTriggerList.map(function(tooltipTriggerEl) {
+                            return new bootstrap.Tooltip(tooltipTriggerEl);
+                        });
+                    }
+                });
+        }
+    });
+</script>
diff --git a/resources/views/home/fashion-v1.blade.php b/resources/views/home/fashion-v1.blade.php
index f1a5e96..c0c307c 100644
--- a/resources/views/home/fashion-v1.blade.php
+++ b/resources/views/home/fashion-v1.blade.php
@@ -8,267 +8,11 @@
     <main class="content-wrapper">
 
         <!-- Hero slider -->
-        <section class="bg-body-tertiary">
-            <div class="container">
-                <div class="row">
-
-                    <!-- Titles master slider -->
-                    <div class="col-md-6 col-lg-5 d-flex flex-column">
-                        <div class="py-4 mt-auto">
-                            <div class="swiper pb-1 pt-3 pt-sm-4 py-md-4 py-lg-3"
-                                data-swiper='{
-                  "spaceBetween": 24,
-                  "loop": true,
-                  "speed": 400,
-                  "controlSlider": "#heroImages",
-                  "pagination": {
-                    "el": "#sliderBullets",
-                    "clickable": true
-                  },
-                  "autoplay": {
-                    "delay": 5500,
-                    "disableOnInteraction": false
-                  }
-                }'>
-                                <div class="swiper-wrapper align-items-center">
-
-                                    <!-- Item -->
-                                    <div class="swiper-slide text-center text-md-start">
-                                        <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">The new warm collection</p>
-                                        <h2 class="display-4 text-uppercase mb-4 mb-xl-5">New fall <br
-                                                class="d-none d-md-inline">season 2024</h2>
-                                        <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
-                                            Shop now
-                                            <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
-                                        </a>
-                                    </div>
-
-                                    <!-- Item -->
-                                    <div class="swiper-slide text-center text-md-start">
-                                        <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Ready for the party?</p>
-                                        <h2 class="display-4 text-uppercase mb-4 mb-xl-5">Choose outfits for parties</h2>
-                                        <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
-                                            Shop now
-                                            <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
-                                        </a>
-                                    </div>
-
-                                    <!-- Item -->
-                                    <div class="swiper-slide text-center text-md-start">
-                                        <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Shades of gray for your look</p>
-                                        <h2 class="display-4 text-uppercase mb-4 mb-xl-5">-50% on gray Collection</h2>
-                                        <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
-                                            Shop now
-                                            <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Slider bullets (pagination) -->
-                        <div
-                            class="d-flex justify-content-center justify-content-md-start pb-4 pb-xl-5 mt-n1 mt-md-auto mb-md-3 mb-lg-4">
-                            <div class="swiper-pagination position-static w-auto pb-1" id="sliderBullets"></div>
-                        </div>
-                    </div>
-
-                    <!-- Linked images (controlled slider) -->
-                    <div class="col-md-6 col-lg-7 align-self-end">
-                        <div class="position-relative ms-md-n4">
-                            <div class="ratio" style="--cz-aspect-ratio: calc(662 / 770 * 100%)"></div>
-                            <div class="swiper position-absolute top-0 start-0 w-100 h-100 user-select-none"
-                                id="heroImages"
-                                data-swiper='{
-                  "allowTouchMove": false,
-                  "loop": true,
-                  "effect": "fade",
-                  "fadeEffect": {
-                    "crossFade": true
-                  }
-                }'>
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img src="/img/home/fashion/v1/hero-slider/01.png" class="rtl-flip"
-                                            alt="Image">
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img src="/img/home/fashion/v1/hero-slider/02.png" class="rtl-flip"
-                                            alt="Image">
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img src="/img/home/fashion/v1/hero-slider/03.png" class="rtl-flip"
-                                            alt="Image">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
+        <x-home.home-slider />
 
 
         <!-- Popular products carousel -->
-        <section class="container py-5 my-2 my-sm-3 my-lg-4 my-xl-5">
-            <div class="row align-items-lg-center py-xxl-3">
-
-                <!-- Products -->
-                <div class="col-md-6 col-xl-5 offset-xl-1 order-md-2 mb-4 mb-md-0">
-                    <div class="ps-md-3 ps-lg-4 ps-xl-0">
-                        <div class="d-flex align-items-center justify-content-between pb-4 mb-md-1 mb-lg-2 mb-xl-3">
-                            <h2 class="me-3 mb-0">Popular products</h2>
-
-                            <!-- Slider prev/next buttons -->
-                            <div class="d-flex gap-2">
-                                <button type="button"
-                                    class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
-                                    id="popularPrev" aria-label="Prev">
-                                    <i class="ci-chevron-left fs-lg animate-target"></i>
-                                </button>
-                                <button type="button"
-                                    class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
-                                    id="popularNext" aria-label="Next">
-                                    <i class="ci-chevron-right fs-lg animate-target"></i>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Products master slider -->
-                        <div class="swiper"
-                            data-swiper='{
-                "spaceBetween": 24,
-                "loop": true,
-                "speed": 400,
-                "controlSlider": "#sliderImages",
-                "navigation": {
-                  "prevEl": "#popularPrev",
-                  "nextEl": "#popularNext"
-                }
-              }'>
-                            <div class="swiper-wrapper">
-
-                                <!-- Products list slide -->
-                                <div class="swiper-slide">
-                                    <div class="d-flex flex-column gap-3 gap-lg-4">
-                                        <div
-                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
-                                            <img src="/img/shop/fashion/thumbs/01.png" width="110" alt="Thumbnail">
-                                            <div class="nav flex-column gap-2 min-w-0 p-3">
-                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
-                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                                    <span class="animate-target text-truncate">Short jacket in long-pile
-                                                        faux fur</span>
-                                                </a>
-                                                <div class="h6 mb-0">$218.00</div>
-                                            </div>
-                                        </div>
-                                        <div
-                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
-                                            <img src="/img/shop/fashion/thumbs/02.png" width="110" alt="Thumbnail">
-                                            <div class="nav flex-column gap-2 min-w-0 p-3">
-                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
-                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                                    <span class="animate-target text-truncate">Women's walking shoes tennis
-                                                        sneakers</span>
-                                                </a>
-                                                <div class="h6 mb-0">$54.99</div>
-                                            </div>
-                                        </div>
-                                        <div
-                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
-                                            <img src="/img/shop/fashion/thumbs/03.png" width="110" alt="Thumbnail">
-                                            <div class="nav flex-column gap-2 min-w-0 p-3">
-                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
-                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                                    <span class="animate-target text-truncate">Classic aviator sunglasses
-                                                        for women</span>
-                                                </a>
-                                                <div class="h6 mb-0">$76.00</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <!-- Products list slide -->
-                                <div class="swiper-slide">
-                                    <div class="d-flex flex-column gap-3 gap-lg-4">
-                                        <div
-                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
-                                            <img src="/img/shop/fashion/thumbs/04.png" width="110" alt="Thumbnail">
-                                            <div class="nav flex-column gap-2 min-w-0 p-3">
-                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
-                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                                    <span class="animate-target text-truncate">Vintage oversized wool
-                                                        blazer jacket</span>
-                                                </a>
-                                                <div class="h6 mb-0">$174.00</div>
-                                            </div>
-                                        </div>
-                                        <div
-                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
-                                            <img src="/img/shop/fashion/thumbs/05.png" width="110" alt="Thumbnail">
-                                            <div class="nav flex-column gap-2 min-w-0 p-3">
-                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
-                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                                    <span class="animate-target text-truncate">Classic pilot style
-                                                        polarized sunglasses</span>
-                                                </a>
-                                                <div class="h6 mb-0">$93.00</div>
-                                            </div>
-                                        </div>
-                                        <div
-                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
-                                            <img src="/img/shop/fashion/thumbs/06.png" width="110" alt="Thumbnail">
-                                            <div class="nav flex-column gap-2 min-w-0 p-3">
-                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
-                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                                    <span class="animate-target text-truncate">Cotton dress straight-leg
-                                                        pants</span>
-                                                </a>
-                                                <div class="h6 mb-0">$65.00</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Complete look images (controlled slider) -->
-                <div class="col-md-6 order-md-1">
-                    <div class="swiper user-select-none" id="sliderImages"
-                        data-swiper='{
-              "allowTouchMove": false,
-              "loop": true,
-              "effect": "fade",
-              "fadeEffect": {
-                "crossFade": true
-              }
-            }'>
-                        <div class="swiper-wrapper">
-                            <div class="swiper-slide">
-                                <div class="ratio d-none d-md-block" style="--cz-aspect-ratio: calc(720 / 636 * 100%)">
-                                </div>
-                                <div class="ratio ratio-4x3 d-md-none"></div>
-                                <img src="/img/home/fashion/v1/popular/01.jpg"
-                                    class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5"
-                                    alt="Image">
-                            </div>
-                            <div class="swiper-slide">
-                                <div class="ratio d-none d-md-block" style="--cz-aspect-ratio: calc(720 / 636 * 100%)">
-                                </div>
-                                <div class="ratio ratio-4x3 d-md-none"></div>
-                                <img src="/img/home/fashion/v1/popular/02.jpg"
-                                    class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5"
-                                    style="object-position: center top" alt="Image">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
+        <x-home.home-popular-products />
 
 
         <!-- Featured products -->
diff --git a/routes/web.php b/routes/web.php
index 1234d8a..f9a6a76 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,6 +7,7 @@ use App\Http\Controllers\LocationController;
 use App\Http\Controllers\LocaleController;
 use App\Http\Controllers\ProductController;
 use App\Http\Controllers\SearchController;
+use App\Http\Controllers\ComponentController;
 
 Route::group(['prefix' => '/dummy'], function () {
     Route::get('', [RoutingController::class, 'index'])->name('root');
@@ -26,9 +27,14 @@ Route::get('/', [HomeController::class, 'index'])->name('home');
 
 Route::get('/products',[ProductController::class, 'index'])->name('product.index');
 Route::get('/products/ajax',[ProductController::class, 'ajax'])->name('product.ajax');
+Route::get('/products/ajax/highlights',[ProductController::class, 'highlights'])->name('product.ajax.highlights');
+Route::get('/products/ajax/brands',[ProductController::class, 'brands'])->name('product.ajax.brands');
 Route::get('/products/ajax/categories',[ProductController::class, 'categories'])->name('product.ajax.categories');
 Route::get('/products/ajax/genders',[ProductController::class, 'genders'])->name('product.ajax.genders');
 Route::get('/product/{slug}',[ProductController::class, 'detail'])->name('product.detail');
 
 // Search routes
-Route::get('/search', [SearchController::class, 'search'])->name('search.ajax');
\ No newline at end of file
+Route::get('/search', [SearchController::class, 'search'])->name('search.ajax');
+
+// Component loading routes
+Route::get('/components/{component}', [ComponentController::class, 'load'])->name('component.load');
\ No newline at end of file