component viewed products, navbar description, delivery retur

.env.example

@@ -20,12 +20,12 @@ LOG_STACK=single
 LOG_DEPRECATIONS_CHANNEL=null
 LOG_LEVEL=debug
 
-DB_CONNECTION=sqlite
+DB_CONNECTION=pgsql
-# DB_HOST=127.0.0.1
+DB_HOST=127.0.0.1
-# DB_PORT=3306
+DB_PORT=5432
-# DB_DATABASE=laravel
+DB_DATABASE=asiagolf
-# DB_USERNAME=root
+DB_USERNAME=postgres
-# DB_PASSWORD=
+DB_PASSWORD=12345678
 
 SESSION_DRIVER=file
 SESSION_LIFETIME=120
@@ -37,7 +37,7 @@ BROADCAST_CONNECTION=log
 FILESYSTEM_DISK=local
 QUEUE_CONNECTION=database
 
-CACHE_STORE=database
+CACHE_STORE=file
 # CACHE_PREFIX=
 
 MEMCACHED_HOST=127.0.0.1

app/Http/Controllers/ProductController.php

@@ -11,11 +11,7 @@ class ProductController extends Controller
     public function detail($slug, Request $request, ProductRepository $productRepository)
     {
 
-        $product = Items::where('slug', $slug)->first();
+        $product = $productRepository->show($slug);
-
-        if ($product == null) {
-            abort(404);
-        }
 
 
         $complete_look_products_data = $productRepository->getList([
@@ -23,14 +19,13 @@ class ProductController extends Controller
             'limit' => 4,
         ]);
 
-    
-
         $complete_look_products = collect($complete_look_products_data->items())->chunk(2);
 
 
         return view('shop.product-fashion',[
             'product'   => $product,
-            'complete_look_products' => $complete_look_products
+            'complete_look_products' => $complete_look_products,
+          
         ]);
     }
 }

app/Models/ItemVariant.php

@@ -72,50 +72,7 @@ class ItemVariant extends Model
         return $this->belongsTo(Items::class, 'item_id');
     }
 
-    public function conversion_value()
-    {
-        $item = $this->item;
 
-        $convertion = 1;
-        if (($item->display_unit != $item->unit) and ($item->display_unit)){
-           $convertions =  DB::select("select to_qty / from_qty as conv
-           from item_convertions where from_unit = ? and to_unit =  ?",
-           [$item->display_unit, $item->unit] );
-           $convertion = max((float) @$convertions[0]->conv,1);
-        }
-
-        return $convertion;
-    }
-
-
-    public function getDisplayPriceAttribute()
-    {
-        try {
-            $convertion = $this->conversion_value();
-
-            $price = $this->reference->price->price ?? null;
-            $price = $price ? $price : $this->item->net_price;
-
-
-
-            return (float) $price * $convertion;
-        } catch (\Exception $e) {
-            Log::info($e);
-            return 0;
-        }
-    }
-
-      public function getDisplayDiscountPriceAttribute()
-    {
-        try {
-            $convertion = $this->conversion_value();
-
-            $discountPrice = @$this->discount->price ?? 0;
-            return (float) $discountPrice * $convertion;
-        } catch (\Exception $e) {
-            return 0;
-        }
-    }
 
 
 }

app/Repositories/Catalog/BrandRepository.php

@@ -3,20 +3,18 @@
 namespace App\Repositories\Catalog;
 
 use App\Models\Brand;
-use Illuminate\Support\Facades\DB;
-use Carbon\Carbon;
 use Illuminate\Support\Facades\Cache;
-use Image;
+use Illuminate\Support\Facades\DB;
-use Storage;
+
 class BrandRepository
 {
+    public function getList($params)
+    {
+        return Cache::remember('catalog_brand_'.json_encode($params), 60, function () use ($params) {
 
-    public function getList($params){
+            $category_id = @$params['category_id'];
-	return Cache::remember("catalog_brand_".json_encode($params),60, function() use ($params) {
+            if ($category_id) {
-
+                $ids = DB::select('select distinct brand from store_category_map a
-        $category_id = @$params["category_id"];
-        if ($category_id){
-            $ids = DB::select("select distinct brand from store_category_map a
             left join item_dimension b
             left join items on b.no = items.number
             on a.category1 = b.category1
@@ -24,17 +22,19 @@ class BrandRepository
             and (a.category3 = b.category3 or a.category3 is null)
             and (a.category4 = b.category4 or a.category4 is null)
             where store_category_id = ?
-            and items.is_publish = true ",[$category_id]);
+            and items.is_publish = true ', [$category_id]);
-            $ids = collect($ids)->pluck("brand");
+                $ids = collect($ids)->pluck('brand');
-            return Brand::whereIn("name",$ids)->orderBy('priority', 'desc')
-                ->where("priority",">",0)
-                ->orderBy('name', 'asc')->get();
-        }
-        return Brand::orderBy('priority', 'desc')->orderBy('name', 'asc')
-            ->where("priority",">",0)
-            ->get();
 
-});
+                return Brand::whereIn('name', $ids)->orderBy('priority', 'desc')
+                    ->where('priority', '>', 0)
+                    ->orderBy('name', 'asc')->get();
+            }
+
+            return Brand::orderBy('priority', 'desc')->orderBy('name', 'asc')
+                ->where('priority', '>', 0)
+                ->get();
+
+        });
 
     }
 }

app/Repositories/Catalog/ProductRepository.php

@@ -30,29 +30,29 @@ class ProductRepository
                 ( discounts.valid_at is null or discounts.expired_at >= now())
             order by item_id, discounts.created_at desc
                 ) as d"),"d.item_id","=","items.id")
-->when(true, function($query) use ($event, $sort){
+            ->when(true, function($query) use ($event, $sort){
-if ($event){
+            if ($event){
- $query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
+                $query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
 
-$query->orderBy("percent", "desc");
+                $query->orderBy("percent", "desc");
-}else{
+            }else{
 
-/* if ($event == "special-offer"){
+            /* if ($event == "special-offer"){
-$query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
+            $query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
-} */
+            } */
 
-if ($sort == "new"){
+            if ($sort == "new"){
-\Log::info($sort);
+            \Log::info($sort);
 
-      $query->orderByRaw("case when category1 in ('CLUBS','CLUB','COMPONENT HEAD') and brand = 'PXG' then 1 else 2 end ASC");
+                $query->orderByRaw("case when category1 in ('CLUBS','CLUB','COMPONENT HEAD') and brand = 'PXG' then 1 else 2 end ASC");
-}else{
+            }else{
-      $query->orderByRaw("case when d.created_at is not null then 1 else 2 end ASC, random()");
+                $query->orderByRaw("case when d.created_at is not null then 1 else 2 end ASC, random()");
-}
+            }
 
-//      $query->orderByRaw("items.created_at desc NULLS LAST");
+            //      $query->orderByRaw("items.created_at desc NULLS LAST");
-}
+            }
 
-}) 
+            }) 
             ->where("is_publish", true)
             ->when($search, function ($query) use ($search) {
                 $query->where(function ($query) use ($search) {
@@ -94,4 +94,34 @@ if ($sort == "new"){
 
         return $builder->paginate($limit);
     }
+
+    public function show($slug)
+    {
+        $product = Items::where('slug', $slug)->first();
+
+
+
+        if ($product == null) {
+            abort(404);
+        }
+
+        $all = session()->get('viewed_products', []);
+        $all[] = $product->id;
+        session()->put('viewed_products', array_unique($all));
+
+        return $product;
+    }
+
+    public function viewed_products($except_ids = [])
+    {
+        $ids = session()->get('viewed_products', []);
+        if (empty($ids)) {
+            return collect();
+        }
+        
+        // Remove except_ids from the list
+        $ids = array_diff($ids, (array)$except_ids);
+        
+        return Items::whereIn('id', $ids)->inRandomOrder()->take(10)->get();
+    }
 }

app/View/Components/Layout/NavbarMenu.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\View\Components\Layout;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class NavbarMenu extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View
+    {
+        return view('components.layout.navbar-menu');
+    }
+}

app/View/Components/LocationSelector.php

@@ -8,7 +8,7 @@ use Illuminate\View\View;
 
 class LocationSelector extends Component
 {
-    public Location $selected;
+    public ?Location $selected;
 
     public $locations;
 

app/View/Components/LocationSelectorSidebar.php

@@ -8,7 +8,7 @@ use Illuminate\View\View;
 
 class LocationSelectorSidebar extends Component
 {
-    public Location $selected;
+    public ?Location $selected;
 
     public $locations;
 

app/View/Components/Shop/ViewedProducts.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\View\Components\Shop;
+
+use App\Repositories\Catalog\ProductRepository;
+use Illuminate\View\Component;
+use Illuminate\View\View;
+use Illuminate\Support\Collection;
+
+class ViewedProducts extends Component
+{
+    public $except_ids = [];
+
+    public Collection $viewedProducts;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct($except_ids = [])
+    {
+        $productRepository = new ProductRepository();
+
+        $this->viewedProducts = $productRepository->viewed_products($except_ids);
+
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View
+    {
+        return view('components.shop.viewed-products');
+    }
+}

config/database.php

@@ -94,7 +94,7 @@ return [
             'prefix' => '',
             'prefix_indexes' => true,
             'search_path' => 'public',
-            'sslmode' => 'prefer',
+            'sslmode' => 'disable',
         ],
 
         'sqlsrv' => [

lang/en/product_fashion.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'description'   => 'Description',
+    'delivery'  => 'Delivery',
+    'and_returns'   => 'and Returns',
+    'review'    => 'Review'
+];

lang/id/product_fashion.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'description'   => 'Deskripsi',
+    'delivery'  => 'Pengiriman',
+    'and_returns'   => 'dan Retur',
+    'review'    => 'Ulasan'
+];

resources/views/components/home/product-card.blade.php

@@ -11,7 +11,7 @@
                 aria-label="Add to Wishlist">
                 <i class="ci-heart animate-target"></i>
             </button>
-            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('product.detail', $product->slug) }}">
+            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('product.detail', $product->slug ?? '0') }}">
                 <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
                     <img src="{{ $product->image_url }}" loading="lazy" class="w-100 h-100 object-cover">
                 </div>
@@ -33,7 +33,7 @@
         </div>
         <div class="nav mb-2">
             <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
-                href="{{ route('product.detail', $product->slug) }}">
+                href="{{ route('product.detail', $product->slug ?? '0') }}">
                 <span class="text-truncate">{{ $product->name ?? '' }}</span>
             </a>
         </div>

resources/views/components/layout/navbar-menu.blade.php

@@ -0,0 +1,222 @@
+<!-- Navbar nav -->
+<ul class="navbar-nav position-relative me-xl-n5">
+    <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+        <a class="nav-link" href="{{ route('home') }}">Home</a>
+    </li>
+    {{-- <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+        <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+            <li class="hover-effect-opacity px-2 mx-n2">
+                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                    <span class="fw-medium">Electronics Store</span>
+                    <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                    </div>
+                </a>
+            </li>
+            <li class="hover-effect-opacity px-2 mx-n2">
+                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                    <span class="fw-medium">Fashion Store v.1</span>
+                    <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                    </div>
+                </a>
+            </li>
+            <li class="hover-effect-opacity px-2 mx-n2">
+                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                    <span class="fw-medium">Fashion Store v.2</span>
+                    <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                    </div>
+                </a>
+            </li>
+            <li class="hover-effect-opacity px-2 mx-n2">
+                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                    <span class="fw-medium">Furniture Store</span>
+                    <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                    </div>
+                </a>
+            </li>
+            <li class="hover-effect-opacity px-2 mx-n2">
+                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                    <span class="fw-medium">Grocery Store</span>
+                    <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                    </div>
+                </a>
+            </li>
+            <li class="hover-effect-opacity px-2 mx-n2">
+                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                    <span class="fw-medium">Marketplace</span>
+                    <span class="d-block fs-xs text-body-secondary">Product showcase + Category grid</span>
+                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </li> --}}
+    <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
+        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+        <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
+            <div class="row g-4">
+                <div class="col-lg-3">
+                    <h6 class="fs-base mb-3">Shop pages</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="nav-link px-0 py-1" href="{{ route('root') }}">Shop Grid</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'list']) }}">Shop List</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'map']) }}">Shop with Map</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'no-sidebar']) }}">Shop No Sidebar</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'wide']) }}">Shop Wide</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'single-product']) }}">Single Product</a></li>
+                    </ul>
+                </div>
+                <div class="col-lg-3">
+                    <h6 class="fs-base mb-3">Product pages</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-fashion']) }}">Product - Fashion</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-electronics']) }}">Product - Electronics</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-furniture']) }}">Product - Furniture</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-grocery']) }}">Product - Grocery</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-marketplace']) }}">Product - Marketplace</a></li>
+                    </ul>
+                </div>
+                <div class="col-lg-3">
+                    <h6 class="fs-base mb-3">Shop features</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'cart']) }}">Cart</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'checkout']) }}">Checkout</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'order-completed']) }}">Order Completed</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'wishlist']) }}">Wishlist</a></li>
+                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'compare']) }}">Compare</a></li>
+                    </ul>
+                </div>
+                <div class="col-lg-3 d-none d-lg-block">
+                    <img class="rounded-3" src="/img/mega-menu/shop.jpg" alt="Shop">
+                </div>
+            </div>
+        </div>
+    </li>
+    <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Account</a>
+        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Order History</a></li>
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'profile']) }}">Profile Settings</a></li>
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Address Book</a></li>
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+            <li><a class="dropdown-item" href="{{ route('second', ['account', 'tickets']) }}">Support Tickets</a></li>
+        </ul>
+    </li>
+    <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Pages</a>
+        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+            <li class="dropdown">
+                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'cart']) }}">Cart</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'checkout']) }}">Checkout</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'order-completed']) }}">Order Completed</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'wishlist']) }}">Wishlist</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'compare']) }}">Compare</a></li>
+                </ul>
+            </li>
+            <li class="dropdown">
+                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Account</a>
+                <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Order History</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'profile']) }}">Profile Settings</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Address Book</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'tickets']) }}">Support Tickets</a></li>
+                </ul>
+            </li>
+            <li class="dropdown">
+                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Vendor</a>
+                <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'store']) }}">Store Homepage</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'products']) }}">Store Products</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'orders']) }}">Store Orders</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'reviews']) }}">Store Reviews</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'settings']) }}">Store Settings</a></li>
+                </ul>
+            </li>
+            <li class="dropdown">
+                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid']) }}">Blog Grid</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">Blog List</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single']) }}">Single Post</a></li>
+                </ul>
+            </li>
+            <li class="dropdown">
+                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Gallery</a>
+                <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="{{ route('second', ['gallery', 'grid']) }}">Gallery Grid</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['gallery', 'masonry']) }}">Gallery Masonry</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['gallery', 'single']) }}">Single Project</a></li>
+                </ul>
+            </li>
+            <li class="dropdown">
+                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Utilities</a>
+                <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'overview']) }}">Overview</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'typography']) }}">Typography</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'colors']) }}">Colors</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'components']) }}">Components</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'forms']) }}">Forms</a></li>
+                </ul>
+            </li>
+            <li class="dropdown">
+                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help</a>
+                <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
+                </ul>
+            </li>
+            <li class="dropdown">
+                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
+                <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                </ul>
+            </li>
+            <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
+        </ul>
+    </li>
+</ul>

resources/views/components/shop/viewed-products.blade.php

@@ -0,0 +1,52 @@
+@if (count($viewedProducts) > 0)
+<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+    <div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
+        <h2 class="mb-0 me-3">Viewed 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="viewedPrev" 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="viewedNext" aria-label="Next">
+                <i class="ci-chevron-right fs-lg animate-target"></i>
+            </button>
+        </div>
+    </div>
+
+    <!-- Slider -->
+    <div class="swiper"
+        data-swiper='{
+      "slidesPerView": 2,
+      "spaceBetween": 24,
+      "loop": true,
+      "navigation": {
+        "prevEl": "#viewedPrev",
+        "nextEl": "#viewedNext"
+      },
+      "breakpoints": {
+        "768": {
+          "slidesPerView": 3
+        },
+        "992": {
+          "slidesPerView": 4
+        }
+      }
+    }'>
+        <div class="swiper-wrapper">
+
+            @foreach ($viewedProducts as $key => $product)
+                   <!-- Item -->
+            <div class="swiper-slide">
+                <x-home.product-card :product="$product"/>
+            </div>
+            @endforeach
+             
+
+        </div>
+    </div>
+</section>
+@endif

resources/views/home/fashion-v1.blade.php

@@ -203,6 +203,7 @@
 
           <!-- LOcation selector visible on screens > 768px wide (md breakpoint) -->
           <x-location-selector />
+          
         </div>
 
         <!-- Navbar brand (Logo) -->
@@ -688,289 +689,7 @@
                 </div>
 
                 <!-- Navbar nav -->
-                <ul class="navbar-nav position-relative me-xl-n5">
+                <x-layout.navbar-menu />
-                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
-                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
-                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
-                      <li class="hover-effect-opacity px-2 mx-n2">
-                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
-                          <span class="fw-medium">Electronics Store</span>
-                          <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
-                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
-                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                          </div>
-                        </a>
-                      </li>
-                      <li class="hover-effect-opacity px-2 mx-n2">
-                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
-                          <span class="fw-medium">Fashion Store v.1</span>
-                          <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
-                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
-                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                          </div>
-                        </a>
-                      </li>
-                      <li class="hover-effect-opacity px-2 mx-n2">
-                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
-                          <span class="fw-medium">Fashion Store v.2</span>
-                          <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
-                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
-                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                          </div>
-                        </a>
-                      </li>
-                      <li class="hover-effect-opacity px-2 mx-n2">
-                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
-                          <span class="fw-medium">Furniture Store</span>
-                          <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
-                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
-                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                          </div>
-                        </a>
-                      </li>
-                      <li class="hover-effect-opacity px-2 mx-n2">
-                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
-                          <span class="fw-medium">Grocery Store</span>
-                          <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
-                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
-                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                          </div>
-                        </a>
-                      </li>
-                      <li class="hover-effect-opacity px-2 mx-n2">
-                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
-                          <span class="fw-medium">Marketplace</span>
-                          <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
-                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
-                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                          </div>
-                        </a>
-                      </li>
-                      <li class="hover-effect-opacity px-2 mx-n2">
-                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
-                          <span class="fw-medium">Single Product Store</span>
-                          <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
-                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/single-store-light.jpg" alt="Single Product Store">
-                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/single-store-dark.jpg" alt="Single Product Store">
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                          </div>
-                        </a>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
-                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
-                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
-                      <div class="d-flex flex-column flex-lg-row gap-4">
-                        <div style="min-width: 190px">
-                          <div class="h6 mb-2">Electronics Store</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="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</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="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</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="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</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="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
-                            </li>
-                          </ul>
-                          <div class="h6 pt-4 mb-2">Fashion Store</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="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
-                            </li>
-                          </ul>
-                          <div class="h6 pt-4 mb-2">Furniture Store</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="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</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="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
-                            </li>
-                          </ul>
-                        </div>
-                        <div style="min-width: 190px">
-                          <div class="h6 mb-2">Grocery Store</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="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
-                            </li>
-                          </ul>
-                          <div class="h6 pt-4 mb-2">Marketplace</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="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</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="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</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="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
-                            </li>
-                          </ul>
-                        </div>
-                        <div style="min-width: 190px">
-                          <div class="h6 mb-2">Checkout v.1</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="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</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="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</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="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</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="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</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="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</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="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
-                            </li>
-                          </ul>
-                          <div class="h6 pt-4 mb-2">Checkout v.2</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="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</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="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</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="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</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="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
-                            </li>
-                          </ul>
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
-                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
-                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
-                      <li class="dropend">
-                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth Pages</a>
-                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
-                        </ul>
-                      </li>
-                      <li class="dropend">
-                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop User</a>
-                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
-                        </ul>
-                      </li>
-                      <li class="dropend">
-                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Marketplace User</a>
-                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
-                        </ul>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
-                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
-                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
-                      <li class="dropend">
-                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
-                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
-                        </ul>
-                      </li>
-                      <li class="dropend">
-                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
-                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
-                        </ul>
-                      </li>
-                      <li class="dropend">
-                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Contact</a>
-                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
-                        </ul>
-                      </li>
-                      <li class="dropend">
-                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help Center</a>
-                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
-                        </ul>
-                      </li>
-                      <li class="dropend">
-                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
-                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
-                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
-                        </ul>
-                      </li>
-                      <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
-                    </ul>
-                  </li>                  
-                </ul>
 
                 <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
                 <button type="button" class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex" style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox">

resources/views/shop/product-fashion.blade.php

@@ -1231,439 +1231,7 @@
                             </div>
 
                             <!-- Navbar nav -->
-                            <ul class="navbar-nav position-relative me-xl-n5">
+                            <x-layout.navbar-menu />
-                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
-                                    <a class="nav-link dropdown-toggle" href="#" role="button"
-                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
-                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
-                                        <li class="hover-effect-opacity px-2 mx-n2">
-                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
-                                                <span class="fw-medium">Electronics Store</span>
-                                                <span class="d-block fs-xs text-body-secondary">Megamenu + Hero
-                                                    slider</span>
-                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
-                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                                                    <img class="position-relative z-2 d-none-dark"
-                                                        src="/img/mega-menu/demo-preview/electronics-light.jpg"
-                                                        alt="Electronics Store">
-                                                    <img class="position-relative z-2 d-none d-block-dark"
-                                                        src="/img/mega-menu/demo-preview/electronics-dark.jpg"
-                                                        alt="Electronics Store">
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
-                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
-                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                                                </div>
-                                            </a>
-                                        </li>
-                                        <li class="hover-effect-opacity px-2 mx-n2">
-                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
-                                                <span class="fw-medium">Fashion Store v.1</span>
-                                                <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
-                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
-                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                                                    <img class="position-relative z-2 d-none-dark"
-                                                        src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
-                                                        alt="Fashion Store v.1">
-                                                    <img class="position-relative z-2 d-none d-block-dark"
-                                                        src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
-                                                        alt="Fashion Store v.1">
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
-                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
-                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                                                </div>
-                                            </a>
-                                        </li>
-                                        <li class="hover-effect-opacity px-2 mx-n2">
-                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
-                                                <span class="fw-medium">Fashion Store v.2</span>
-                                                <span class="d-block fs-xs text-body-secondary">Hero banner with
-                                                    hotspots</span>
-                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
-                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                                                    <img class="position-relative z-2 d-none-dark"
-                                                        src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
-                                                        alt="Fashion Store v.2">
-                                                    <img class="position-relative z-2 d-none d-block-dark"
-                                                        src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
-                                                        alt="Fashion Store v.2">
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
-                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
-                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                                                </div>
-                                            </a>
-                                        </li>
-                                        <li class="hover-effect-opacity px-2 mx-n2">
-                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
-                                                <span class="fw-medium">Furniture Store</span>
-                                                <span class="d-block fs-xs text-body-secondary">Fancy product
-                                                    carousel</span>
-                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
-                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                                                    <img class="position-relative z-2 d-none-dark"
-                                                        src="/img/mega-menu/demo-preview/furniture-light.jpg"
-                                                        alt="Furniture Store">
-                                                    <img class="position-relative z-2 d-none d-block-dark"
-                                                        src="/img/mega-menu/demo-preview/furniture-dark.jpg"
-                                                        alt="Furniture Store">
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
-                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
-                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                                                </div>
-                                            </a>
-                                        </li>
-                                        <li class="hover-effect-opacity px-2 mx-n2">
-                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
-                                                <span class="fw-medium">Grocery Store</span>
-                                                <span class="d-block fs-xs text-body-secondary">Hero slider + Category
-                                                    cards</span>
-                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
-                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                                                    <img class="position-relative z-2 d-none-dark"
-                                                        src="/img/mega-menu/demo-preview/grocery-light.jpg"
-                                                        alt="Grocery Store">
-                                                    <img class="position-relative z-2 d-none d-block-dark"
-                                                        src="/img/mega-menu/demo-preview/grocery-dark.jpg"
-                                                        alt="Grocery Store">
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
-                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
-                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                                                </div>
-                                            </a>
-                                        </li>
-                                        <li class="hover-effect-opacity px-2 mx-n2">
-                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
-                                                <span class="fw-medium">Marketplace</span>
-                                                <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital
-                                                    goods</span>
-                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
-                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                                                    <img class="position-relative z-2 d-none-dark"
-                                                        src="/img/mega-menu/demo-preview/marketplace-light.jpg"
-                                                        alt="Marketplace">
-                                                    <img class="position-relative z-2 d-none d-block-dark"
-                                                        src="/img/mega-menu/demo-preview/marketplace-dark.jpg"
-                                                        alt="Marketplace">
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
-                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
-                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                                                </div>
-                                            </a>
-                                        </li>
-                                        <li class="hover-effect-opacity px-2 mx-n2">
-                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
-                                                <span class="fw-medium">Single Product Store</span>
-                                                <span class="d-block fs-xs text-body-secondary">Single product / mono
-                                                    brand</span>
-                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
-                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
-                                                    <img class="position-relative z-2 d-none-dark"
-                                                        src="/img/mega-menu/demo-preview/single-store-light.jpg"
-                                                        alt="Single Product Store">
-                                                    <img class="position-relative z-2 d-none d-block-dark"
-                                                        src="/img/mega-menu/demo-preview/single-store-dark.jpg"
-                                                        alt="Single Product Store">
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
-                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
-                                                    <span
-                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
-                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
-                                                </div>
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </li>
-                                <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
-                                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#"
-                                        role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                        aria-expanded="false">Shop</a>
-                                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
-                                        <div class="d-flex flex-column flex-lg-row gap-4">
-                                            <div style="min-width: 190px">
-                                                <div class="h6 mb-2">Electronics Store</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="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</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="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side
-                                                            Filters</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="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General
-                                                            Info</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="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
-                                                            Details</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="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
-                                                            Reviews</a>
-                                                    </li>
-                                                </ul>
-                                                <div class="h6 pt-4 mb-2">Fashion Store</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="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
-                                                    </li>
-                                                </ul>
-                                                <div class="h6 pt-4 mb-2">Furniture Store</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="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top
-                                                            Filters</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="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                            <div style="min-width: 190px">
-                                                <div class="h6 mb-2">Grocery Store</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="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
-                                                    </li>
-                                                </ul>
-                                                <div class="h6 pt-4 mb-2">Marketplace</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="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top
-                                                            Filters</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="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</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="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                            <div style="min-width: 190px">
-                                                <div class="h6 mb-2">Checkout v.1</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="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</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="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</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="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</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="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</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="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</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="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
-                                                    </li>
-                                                </ul>
-                                                <div class="h6 pt-4 mb-2">Checkout v.2</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="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</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="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</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="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</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="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
-                                    <a class="nav-link dropdown-toggle" href="#" role="button"
-                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
-                                        aria-expanded="false">Account</a>
-                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
-                                        <li class="dropend">
-                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
-                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                                aria-expanded="false">Auth Pages</a>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
-                                            </ul>
-                                        </li>
-                                        <li class="dropend">
-                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
-                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                                aria-expanded="false">Shop User</a>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders
-                                                        History</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a>
-                                                </li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment
-                                                        Methods</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a>
-                                                </li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a>
-                                                </li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a>
-                                                </li>
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
-                                            </ul>
-                                        </li>
-                                        <li class="dropend">
-                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
-                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                                aria-expanded="false">Marketplace User</a>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
-                                                <li><a class="dropdown-item"
-                                                        href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
-                                            </ul>
-                                        </li>
-                                    </ul>
-                                </li>
-                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
-                                    <a class="nav-link dropdown-toggle" href="#" role="button"
-                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
-                                        aria-expanded="false">Pages</a>
-                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
-                                        <li class="dropend">
-                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
-                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                                aria-expanded="false">About</a>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
-                                            </ul>
-                                        </li>
-                                        <li class="dropend">
-                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
-                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                                aria-expanded="false">Blog</a>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a>
-                                                </li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a>
-                                                </li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post
-                                                        v.1</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post
-                                                        v.2</a></li>
-                                            </ul>
-                                        </li>
-                                        <li class="dropend">
-                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
-                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                                aria-expanded="false">Contact</a>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
-                                            </ul>
-                                        </li>
-                                        <li class="dropend">
-                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
-                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                                aria-expanded="false">Help Center</a>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics
-                                                        v.1</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics
-                                                        v.2</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help
-                                                        Single Article v.1</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help
-                                                        Single Article v.2</a></li>
-                                            </ul>
-                                        </li>
-                                        <li class="dropend">
-                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
-                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
-                                                aria-expanded="false">404 Error</a>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404
-                                                        Electronics</a></li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
-                                                </li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a>
-                                                </li>
-                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
-                                                </li>
-                                            </ul>
-                                        </li>
-                                        <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp;
-                                                Conditions</a></li>
-                                    </ul>
-                                </li>                                
-                            </ul>
 
                             <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
                             <button type="button"
@@ -1809,21 +1377,23 @@
                         @endif
                         <div class="h4 d-flex align-items-center my-4">
                             <span class="display_price">Rp {{ number_format($product->display_price, 0, ',', '.') }}</span>
+                            
+                            
 
-                            <del class="display_discount_price fs-sm fw-normal text-body-tertiary ms-2" style="display: {{ $product->discount_display_price ? 'inline' : 'none' }};">{{ $product->discount_display_price ? '  Rp ' . number_format($product->discount_display_price, 0, ',', '.') : '' }}</del>
+                            <del class="display_discount_price fs-sm fw-normal text-body-tertiary ms-2" style="display: {{ $product->display_discount_price ? 'inline' : 'none' }};">{{ $product->display_discount_price ? '  Rp ' . number_format($product->display_discount_price, 0, ',', '.') : '' }}</del>
                         </div>
 
                         <!-- Color options -->
                         <div class="mb-4">
                             <label class="form-label fw-semibold pb-1 mb-2">Varian: <span class="text-body fw-normal"
-                                    id="colorOption">{{ $product->variants->first()->description ?? '' }}</span></label>
+                                    id="variantOption">{{ $product->variants->first()->description ?? '' }}</span></label>
-                            <div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
+                            <div class="d-flex flex-wrap gap-2" data-binded-label="#variantOption">
 
                                 @foreach ($product->variants as $key => $variant)
                                      <input type="radio" class="btn-check" name="colors" id="variant-id-{{ $variant->id }}" {{ $key == 0 ? 'checked' : '' }}>
                                     <label for="variant-id-{{ $variant->id }}" class="btn btn-image p-0" data-label="{{ $variant->description }}"
-                                        data-price="Rp {{ number_format($variant->display_price, 0, ",",".") }}"
+                                        data-price="Rp {{ number_format($product->display_price, 0, ",",".") }}"
-                                        data-discount-price="{{ $variant->discount_display_price ? 'Rp ' . number_format($variant->discount_display_price, 0, ',', '.') : '' }}"
+                                        data-discount-price="{{ $product->display_discount_price ? 'Rp ' . number_format($product->display_discount_price, 0, ',', '.') : '' }}"
                                         data-image="{{ $variant->image_url ?? $product->image_url }}"
                                         >
                                         <img src="{{ $variant->image_url ?? $product->image_url }}" width="56"
@@ -1921,17 +1491,17 @@
                 <div class="navbar container flex-nowrap align-items-center bg-body pt-4 pt-lg-5 mt-lg-n2">
                     <div class="d-flex align-items-center min-w-0 ms-lg-2 me-3">
                         <div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
-                            <img src="/img/shop/fashion/product/thumb.png" alt="Image">
+                            <img src="{{ $product->image_url ?? '' }}" class="product-main-image"  alt="Image">
                         </div>
-                        <h4 class="h6 fw-medium d-none d-lg-block ps-3 mb-0">Denim midi skirt with pockets</h4>
+                        <h4 class="h6 fw-medium d-none d-lg-block ps-3 mb-0 variantOption">{{ $product->name }}</h4>
                         <div class="w-100 min-w-0 d-lg-none ps-2">
-                            <h4 class="fs-sm fw-medium text-truncate mb-1">Denim midi skirt with pockets</h4>
+                            <h4 class="fs-sm fw-medium text-truncate mb-1 variantOption">{{ $product->name }}</h4>
                             <div class="h6 mb-0">$126.50 <del class="fs-xs fw-normal text-body-tertiary">$156.00</del>
                             </div>
                         </div>
                     </div>
-                    <div class="h4 d-none d-lg-block mb-0 ms-auto me-4">$126.50 <del
+                    <div class="h4 d-none d-lg-block mb-0 ms-auto me-4 display_price">Rp {{ number_format($product->display_price,0,",",".") }} <del
-                            class="fs-sm fw-normal text-body-tertiary">$156.00</del></div>
+                            class="fs-sm fw-normal text-body-tertiary display_discount_price" style="display: {{ $product->display_discount_price ? 'inline' : 'none' }};">Rp {{ number_format($product->display_discount_price,0,",",".") }}</del></div>
                     <div class="d-flex gap-2">
                         <button type="button" class="btn btn-icon btn-secondary animate-pulse"
                             aria-label="Add to Wishlist">
@@ -1958,28 +1528,28 @@
                     <button type="button" class="nav-link active" id="description-tab" data-bs-toggle="tab"
                         data-bs-target="#description-tab-pane" role="tab" aria-controls="description-tab-pane"
                         aria-selected="true">
-                        Description
+                        {{ __('product_fashion.description') }}
                     </button>
                 </li>
-                <li class="nav-item me-md-1" role="presentation">
+                {{-- <li class="nav-item me-md-1" role="presentation">
                     <button type="button" class="nav-link" id="washing-tab" data-bs-toggle="tab"
                         data-bs-target="#washing-tab-pane" role="tab" aria-controls="washing-tab-pane"
                         aria-selected="false">
                         Washing<span class="d-none d-md-inline">&nbsp;instructions</span>
                     </button>
-                </li>
+                </li> --}}
                 <li class="nav-item me-md-1" role="presentation">
                     <button type="button" class="nav-link" id="delivery-tab" data-bs-toggle="tab"
                         data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
                         aria-selected="false">
-                        Delivery<span class="d-none d-md-inline">&nbsp;and returns</span>
+                        {{ __('product_fashion.delivery') }}<span class="d-none d-md-inline">&nbsp;{{ __('product_fashion.and_returns') }}</span>
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
                     <button type="button" class="nav-link" id="reviews-tab" data-bs-toggle="tab"
                         data-bs-target="#reviews-tab-pane" role="tab" aria-controls="reviews-tab-pane"
                         aria-selected="false">
-                        Reviews<span class="d-none d-md-inline">&nbsp;(23)</span>
+                        {{ __('product_fashion.review') }}<span class="d-none d-md-inline">&nbsp;(23)</span>
                     </button>
                 </li>
             </ul>
@@ -1991,9 +1561,22 @@
                     aria-labelledby="description-tab">
                     <div class="row">
                         <div class="col-lg-6 fs-sm">
-                            {!! nl2br($product->description) !!}
+                            Pastikan apakah stock tersedia dengan terlebih dahulu KIRIM PESAN - TANYA kepada kami,
+                            <br>
+                            <br>
+                            Segera lakukan pembayaran saat melakukan checkout produk agar system order bisa langusung terima dan proses kemas,
+                            <br>
+                            <br>
+- Layanan Pengiriman "Instant" tersedia (Prioritas) kami upayakan proses langsung,
+<br>
+- Layanan Pengiriman "Sameday" Maksimal order masuk pukul 15.00 Wib karna maksimal Request pick up yang di tentukan oleh tokopedia pukul 16.00 Wib,.
+<br>
+- Layanan pengiriman "Regullar - Yes - Cargo" Kami pastikan produk terkirim status berubah terkirim pada Sore menjelang petan karna kami hanya tersedia 1x pengiriman ke jasa pengiriman dalam 1 hari
+<br>
+<br>
+Pesanan masuk pukul 18.00 Wib ke atas kemungkinan akan kami proses kirim dan ikut pengiriman ke jasa pengiriman ke esokan harinya,.
                         </div>
-                        <div class="col-lg-6 col-xl-5 offset-xl-1">
+                        {{-- <div class="col-lg-6 col-xl-5 offset-xl-1">
                             <div class="row row-cols-2 g-4 my-0 my-lg-n2">
                                 <div class="col">
                                     <div class="py-md-1 py-lg-2 pe-sm-2">
@@ -2027,7 +1610,7 @@
                                     </div>
                                 </div>
                             </div>
-                        </div>
+                        </div> --}}
                     </div>
                 </div>
 
@@ -2079,33 +1662,41 @@
                     <div class="row row-cols-1 row-cols-md-2">
                         <div class="col mb-3 mb-md-0">
                             <div class="pe-lg-2 pe-xl-3">
-                                <h6>Delivery</h6>
+                                <h6>Pengiriman</h6>
-                                <p>We strive to deliver your denim midi skirt with pockets to you as quickly as possible.
+                                <p>Kami bekerja sama dengan berbagai penyedia jasa pengiriman terpercaya untuk memastikan proses pengiriman pesanan berjalan dengan aman dan efisien. 
-                                    Our estimated delivery times are as follows:</p>
+                                    <br>
-                                <ul class="list-unstyled">
+                                    <br>
-                                    <li>Standard delivery: <span class="text-dark-emphasis fw-semibold">Within 3-7
+                                    Pelanggan diberikan kebebasan untuk memilih layanan pengiriman yang paling sesuai dengan kebutuhan, baik dari segi kecepatan maupun biaya. 
-                                            business days</span></li>
+                                    <br>
-                                    <li>Express delivery: <span class="text-dark-emphasis fw-semibold">Within 1-3 business
+                                    <br>
-                                            days</span></li>
+                                    Estimasi waktu pengiriman dapat berbeda-beda tergantung pada jenis layanan yang dipilih, lokasi tujuan, serta kebijakan dan kondisi operasional dari masing-masing penyedia jasa pengiriman. 
-                                </ul>
+                                    <br>
-                                <p>Please note that delivery times may vary depending on your location and any ongoing
+                                    <br>
-                                    promotions or holidays. You can track your order using the provided tracking number once
+                                    Perlu diperhatikan bahwa keterlambatan yang disebabkan oleh faktor di luar kendali kami merupakan tanggung jawab penyedia jasa terkait. 
-                                    your package has been dispatched.</p>
+                                    <br>
+                                    <br>
+                                    Meskipun demikian, kami akan senantiasa membantu memantau status pengiriman guna memastikan pesanan sampai ke tangan pelanggan dengan baik.</p>
                             </div>
                         </div>
                         <div class="col">
                             <div class="ps-lg-2 ps-xl-3">
-                                <h6>Returns</h6>
+                                <h6>Return Barang</h6>
-                                <p>We want you to be completely satisfied with your denim midi skirt with pockets. If for
+                                <p>Kami memberikan kesempatan kepada pelanggan untuk mengajukan permohonan retur atas produk yang diterima apabila terdapat ketidaksesuaian atau kendala tertentu. Proses pengajuan retur dapat dilakukan dengan menghubungi customer service resmi kami melalui WhatsApp. 
-                                    any reason you are not happy with your purchase, you can return it within 30 days of
+                                    <br>
-                                    receiving your order for a full refund or exchange.</p>
+                                    <br>
-                                <p>To be eligible for a return, the skirt must be unused, unwashed, and in its original
+                                    Untuk keperluan verifikasi, pelanggan diwajibkan mengirimkan informasi detail transaksi pembelian, foto produk yang diterima, serta bukti video unboxing yang jelas dan tidak terputus. 
-                                    condition with tags attached. Please ensure that all packaging is intact when returning
+                                    <br>
-                                    the item.</p>
+                                    <br>
-                                <p class="mb-0">To initiate a return, please contact our customer service team with your
+                                    Permohonan retur akan ditinjau sesuai dengan ketentuan dan kebijakan yang berlaku. 
-                                    order number and reason for the return. We will provide you with a return shipping label
+                                    <br>
-                                    and instructions on how to proceed. Please note that shipping fees are non-refundable.
+                                    <br>
-                                </p>
+                                    Setelah proses verifikasi selesai dan disetujui, kami akan memberikan informasi lebih lanjut terkait tahapan pengembalian barang maupun solusi yang dapat diberikan kepada pelanggan.
+                                    <br>
+                                    <br>
+                                    Kami berkomitmen untuk menyelesaikan setiap permohonan retur dengan cepat dan profesional sesuai dengan standar pelayanan kami.
+                                    <br>
+                                    <br>
+                                    Untuk informasi lebih lanjut, pelanggan dapat menghubungi customer service kami melalui WhatsApp.</p>
                             </div>
                         </div>
                     </div>
@@ -2424,281 +2015,7 @@
         </section>
 
 
-        <!-- Viewed products (carousel) -->
+        <x-shop.viewed-products :except_ids="[$product->id]" />
-        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
-            <div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
-                <h2 class="mb-0 me-3">Viewed 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="viewedPrev" 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="viewedNext" aria-label="Next">
-                        <i class="ci-chevron-right fs-lg animate-target"></i>
-                    </button>
-                </div>
-            </div>
-
-            <!-- Slider -->
-            <div class="swiper"
-                data-swiper='{
-          "slidesPerView": 2,
-          "spaceBetween": 24,
-          "loop": true,
-          "navigation": {
-            "prevEl": "#viewedPrev",
-            "nextEl": "#viewedNext"
-          },
-          "breakpoints": {
-            "768": {
-              "slidesPerView": 3
-            },
-            "992": {
-              "slidesPerView": 4
-            }
-          }
-        }'>
-                <div class="swiper-wrapper">
-
-                    <!-- Item -->
-                    <div class="swiper-slide">
-                        <div class="animate-underline hover-effect-opacity">
-                            <div class="position-relative mb-3">
-                                <button type="button"
-                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
-                                    aria-label="Add to Wishlist">
-                                    <i class="ci-heart animate-target"></i>
-                                </button>
-                                <a class="d-flex bg-body-tertiary rounded p-3" href="#!">
-                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
-                                        <img src="/img/shop/fashion/11.png" alt="Image">
-                                    </div>
-                                </a>
-                                <div
-                                    class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
-                                    <div
-                                        class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
-                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
-                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
-                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
-                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
-                                        <div class="nav">
-                                            <a class="nav-link fs-xs text-body-tertiary py-1 px-2" href="#!">+1</a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="nav mb-2">
-                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0" href="#!">
-                                    <span class="text-truncate">Warm sweatshirts without a hoodie</span>
-                                </a>
-                            </div>
-                            <div class="h6 mb-2">$32.99</div>
-                            <div class="position-relative">
-                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
-                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
-                                    <input type="radio" class="btn-check" name="colors-11" id="color-11-1"
-                                        checked>
-                                    <label for="color-11-1" class="btn btn-color fs-base" style="color: #42675f">
-                                        <span class="visually-hidden">Green</span>
-                                    </label>
-                                    <input type="radio" class="btn-check" name="colors-11" id="color-11-2">
-                                    <label for="color-11-2" class="btn btn-color fs-base" style="color: #476585">
-                                        <span class="visually-hidden">Blue</span>
-                                    </label>
-                                    <input type="radio" class="btn-check" name="colors-11" id="color-11-3">
-                                    <label for="color-11-3" class="btn btn-color fs-base" style="color: #724c74">
-                                        <span class="visually-hidden">Purple</span>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Item -->
-                    <div class="swiper-slide">
-                        <div class="animate-underline hover-effect-opacity">
-                            <div class="position-relative mb-3">
-                                <button type="button"
-                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
-                                    aria-label="Add to Wishlist">
-                                    <i class="ci-heart animate-target"></i>
-                                </button>
-                                <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
-                                        <img src="/img/shop/fashion/03.png" alt="Image">
-                                    </div>
-                                </a>
-                                <div
-                                    class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
-                                    <div
-                                        class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
-                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
-                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
-                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
-                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
-                                        <div class="nav">
-                                            <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
-                                                href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="nav mb-2">
-                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
-                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                    <span class="text-truncate">Sneakers with a massive sole</span>
-                                </a>
-                            </div>
-                            <div class="h6 mb-2">$86.50</div>
-                            <div class="position-relative">
-                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
-                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
-                                    <input type="radio" class="btn-check" name="colors-3" id="color-3-1" checked>
-                                    <label for="color-3-1" class="btn btn-color fs-base" style="color: #e0e5eb">
-                                        <span class="visually-hidden">White</span>
-                                    </label>
-                                    <input type="radio" class="btn-check" name="colors-3" id="color-3-2">
-                                    <label for="color-3-2" class="btn btn-color fs-base" style="color: #364254">
-                                        <span class="visually-hidden">Black</span>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Item -->
-                    <div class="swiper-slide">
-                        <div class="animate-underline hover-effect-opacity">
-                            <div class="position-relative mb-3">
-                                <button type="button"
-                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
-                                    aria-label="Add to Wishlist">
-                                    <i class="ci-heart animate-target"></i>
-                                </button>
-                                <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
-                                        <img src="/img/shop/fashion/04.png" alt="Image">
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="nav mb-2">
-                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
-                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                    <span class="text-truncate">Knitted bag with a wooden handle</span>
-                                </a>
-                            </div>
-                            <div class="h6 mb-2">$105.00</div>
-                            <div class="position-relative">
-                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
-                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
-                                    <input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
-                                    <label for="color-4-1" class="btn btn-color fs-base" style="color: #e7ddb4">
-                                        <span class="visually-hidden">Beige</span>
-                                    </label>
-                                    <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
-                                    <label for="color-4-2" class="btn btn-color fs-base" style="color: #8b9bc4">
-                                        <span class="visually-hidden">Blue</span>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Item -->
-                    <div class="swiper-slide">
-                        <div class="animate-underline hover-effect-opacity">
-                            <div class="position-relative mb-3">
-                                <span
-                                    class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-17%</span>
-                                <button type="button"
-                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
-                                    aria-label="Add to Wishlist">
-                                    <i class="ci-heart animate-target"></i>
-                                </button>
-                                <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
-                                        <img src="/img/shop/fashion/05.png" alt="Image">
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="nav mb-2">
-                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
-                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                    <span class="text-truncate">Polarized sunglasses for men</span>
-                                </a>
-                            </div>
-                            <div class="h6 mb-2">$96.00 <del class="fs-sm fw-normal text-body-tertiary">$112.00</del>
-                            </div>
-                            <div class="position-relative">
-                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
-                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
-                                    <input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
-                                    <label for="color-5-1" class="btn btn-color fs-base" style="color: #8cc4ac">
-                                        <span class="visually-hidden">Green</span>
-                                    </label>
-                                    <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
-                                    <label for="color-5-2" class="btn btn-color fs-base" style="color: #8cb7c4">
-                                        <span class="visually-hidden">Blue</span>
-                                    </label>
-                                    <input type="radio" class="btn-check" name="colors-5" id="color-5-3">
-                                    <label for="color-5-3" class="btn btn-color fs-base" style="color: #ccb782">
-                                        <span class="visually-hidden">Brown</span>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Item -->
-                    <div class="swiper-slide">
-                        <div class="animate-underline hover-effect-opacity">
-                            <div class="position-relative mb-3">
-                                <button type="button"
-                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
-                                    aria-label="Add to Wishlist">
-                                    <i class="ci-heart animate-target"></i>
-                                </button>
-                                <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
-                                        <img src="/img/shop/fashion/10.png" alt="Image">
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="nav mb-2">
-                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
-                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
-                                    <span class="text-truncate">Leather handbag for women</span>
-                                </a>
-                            </div>
-                            <div class="h6 mb-2">$140.00</div>
-                            <div class="position-relative">
-                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
-                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
-                                    <input type="radio" class="btn-check" name="colors-10" id="color-10-1"
-                                        checked>
-                                    <label for="color-10-1" class="btn btn-color fs-base" style="color: #869286">
-                                        <span class="visually-hidden">Olive</span>
-                                    </label>
-                                    <input type="radio" class="btn-check" name="colors-10" id="color-10-2">
-                                    <label for="color-10-2" class="btn btn-color fs-base" style="color: #364254">
-                                        <span class="visually-hidden">Black</span>
-                                    </label>
-                                    <input type="radio" class="btn-check" name="colors-10" id="color-10-3">
-                                    <label for="color-10-3" class="btn btn-color fs-base" style="color: #526f99">
-                                        <span class="visually-hidden">Blue</span>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
 
 
         <!-- Instagram feed -->
@@ -3024,7 +2341,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 discountSpan.style.display = 'none';
             }
             document.querySelector('.product-main-image').src = image;
-            document.querySelector('#colorOption').textContent = labelText;
+            document.querySelector('.variantOption').textContent = labelText;
         });
     });
     // Trigger change for the initially checked radio