SMG_DEV
/
ECOMMERCE
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

navbar menu category & gender

This commit is contained in:
Bayu Lukman Yusuf 2026-01-06 11:32:08 +07:00
parent ddcea440af
commit 64892821d9
9 changed files with 449 additions and 2513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/Models/Gender.php Normal file
View File

@ -0,0 +1,24 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Spatie\Activitylog\Traits\LogsActivity;
use Spatie\Activitylog\LogOptions;
class Gender extends Model
{
use HasFactory;
use LogsActivity;
public function getActivitylogOptions(): LogOptions
{
return LogOptions::defaults();
}
protected $table = 'genders';
protected $primaryKey = 'id';
protected $fillable = ['name', 'image'];
}

35
app/Repositories/Catalog/GenderRepository.php Normal file
View File

@ -0,0 +1,35 @@
<?php
namespace App\Repositories\Catalog;
use App\Models\Gender;
use App\Models\Brand;
use DB;
use Carbon\Carbon;
use Image;
use Storage;
class GenderRepository
{
public function getList($params){
$category_id = @$params["category_id"];
$brand_id = @$params["brand_id"];
if ($category_id && $brand_id){
$brand = Brand::find((int) $brand_id);
$ids = DB::select("select distinct gender from store_category_map a
left join item_dimension b
left join items on b.no = items.number
on a.category1 = b.category1
and (a.category2 = b.category2 or a.category2 is null)
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 brand = ?
and items.is_publish = true ",[$category_id, $brand->name]);
$ids = collect($ids)->pluck("gender");
return Gender::whereIn("name",$ids)->get();
}
return Gender::get();
}
}

26
app/View/Components/Layout/Header.php Normal file
View File

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

41
app/View/Components/Layout/NavbarCategory.php Normal file
View File

@ -0,0 +1,41 @@
<?php
namespace App\View\Components\Layout;
use App\Repositories\Catalog\CategoryRepository;
use App\Repositories\Catalog\GenderRepository;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class NavbarCategory extends Component
{
public $genders = [];
public $categories = [];
/**
* Create a new component instance.
*/
public function __construct()
{
//
$genderRepository = new GenderRepository();
$categoryRepository = new CategoryRepository();
$this->genders = $genderRepository->getList([]);
$this->categories = $categoryRepository->getList([]);
// chunk
$this->categories = collect($this->categories)->chunk(7);
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.layout.navbar-category');
}
}

145
resources/views/components/layout/header.blade.php Normal file
View File

@ -0,0 +1,145 @@
<header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0" data-sticky-navbar='{"offset": 500}'>
<div class="container py-2 py-lg-3">
<div class="d-flex align-items-center gap-3">
<!-- Mobile offcanvas menu toggler (Hamburger) -->
<button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Country selector visible on screens > 768px wide (md breakpoint) -->
<x-language-selector />
<!-- LOcation selector visible on screens > 768px wide (md breakpoint) -->
<x-location-selector />
</div>
<!-- Navbar brand (Logo) -->
<a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">
<img src="{{ asset('logo/logo-colored.png') }}" class="d-none d-lg-block" style="height:32px;"/>
<img src="{{ asset('logo/logo-app.png') }}" class="d-lg-none" style="height:42px;"/>
</a>
<!-- Button group -->
<div class="d-flex align-items-center">
<!-- Navbar stuck nav toggler -->
<button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Theme switcher (light/dark/auto) -->
<div class="dropdown">
<button type="button" class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
<span class="theme-icon-active d-flex animate-target">
<i class="ci-sun"></i>
</span>
</button>
<ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
<li>
<button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-sun"></i>
</span>
<span class="theme-label">Light</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-moon"></i>
</span>
<span class="theme-label">Dark</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-auto"></i>
</span>
<span class="theme-label">Auto</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
</ul>
</div>
<!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
<button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox" aria-label="Toggle search bar">
<i class="ci-search animate-target"></i>
</button>
<!-- Account button visible on screens > 768px wide (md breakpoint) -->
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex" href="{{ route('second', ['account', 'signin']) }}">
<i class="ci-user animate-target"></i>
<span class="visually-hidden">Account</span>
</a>
<!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex" href="#!">
<i class="ci-heart animate-target"></i>
<span class="visually-hidden">Wishlist</span>
</a>
<!-- Cart button -->
<button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale" data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart" aria-label="Shopping cart">
<span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
<i class="ci-shopping-bag animate-target me-1"></i>
</button>
</div>
</div>
<!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
<div class="collapse navbar-stuck-hide" id="stuckNav">
<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
<div class="offcanvas-header py-3">
<h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- Country and City selects visible on screens < 768px wide (md breakpoint) -->
<div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
<x-language-selector-sidebar />
<x-location-selector-sidebar />
</div>
<div class="offcanvas-body pt-1 pb-3 py-lg-0">
<div class="container pb-lg-2 px-0 px-lg-3">
<div class="position-relative d-lg-flex align-items-center justify-content-between">
<!-- Categories mega menu -->
<x-layout.navbar-category />
<!-- Navbar nav -->
<x-layout.navbar-menu />
<!-- 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">
<i class="ci-search fs-base ms-n1 me-2"></i>
<span class="text-body-tertiary fw-normal">Search</span>
</button>
</div>
</div>
</div>
<!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
<div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
<div class="nav nav-justified w-100">
<a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
<i class="ci-user fs-lg opacity-60 me-2"></i>
Account
</a>
<a class="nav-link" href="#!">
<i class="ci-heart fs-lg opacity-60 me-2"></i>
Wishlist
</a>
</div>
</div>
</nav>
</div>
</header>

93
resources/views/components/layout/navbar-category.blade.php Normal file
View File

@ -0,0 +1,93 @@
<div class="navbar-nav">
<div class="dropdown position-static pb-lg-2">
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0" data-bs-toggle="dropdown"
data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
<i class="ci-menu fs-lg me-2"></i>
<span class="animate-target">Categories</span>
</button>
<div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
<!-- Nav tabs -->
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
@foreach ($genders as $key => $gender)
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase {{ $key == 0 ? 'active' : '' }}" id="gender-{{ $gender->id }}-tab"
data-bs-toggle="tab" data-bs-target="#gender-{{ $gender->id }}-tab-pane" role="tab"
aria-controls="gender-{{ $gender->id }}-tab-pane" aria-selected="true">
{{ $gender->name }}
</button>
</li>
@endforeach
{{-- <li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase active" id="womens-tab" data-bs-toggle="tab"
data-bs-target="#womens-tab-pane" role="tab" aria-controls="womens-tab-pane"
aria-selected="true">
Women's
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab"
data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane"
aria-selected="false">
Men's
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab"
data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane"
aria-selected="false">
Kids'
</button>
</li> --}}
</ul>
<!-- Tab panes -->
<div class="tab-content pb-xl-4">
@foreach ($genders as $key => $gender)
<div class="tab-pane fade show {{ $key == 0 ? 'active' : '' }}" id="gender-{{ $gender->id }}-tab-pane" role="tabpanel"
aria-labelledby="gender-{{ $gender->id }}-tab">
<div class="row g-4">
@foreach ($categories as $chunks)
<div class="col-lg-2">
<ul class="nav flex-column gap-2 mt-0">
@foreach ($chunks as $chunk)
<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']) }}">{{ $chunk->name }}</a>
</li>
@endforeach
</ul>
</div>
@endforeach
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
<div
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
<div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
<div>
<a class="btn btn-sm btn-dark stretched-link"
href="{{ route('second', ['shop', 'catalog-fashion']) }}"
data-bs-theme="light">Shop now</a>
</div>
</div>
<img src="/img/mega-menu/fashion/01.jpg"
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
alt="Image">
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>

528
resources/views/home/fashion-v1.blade.php
View File

@ -189,533 +189,7 @@
</div>
</div>
<header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0" data-sticky-navbar='{"offset": 500}'>
<div class="container py-2 py-lg-3">
<div class="d-flex align-items-center gap-3">
<!-- Mobile offcanvas menu toggler (Hamburger) -->
<button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Country selector visible on screens > 768px wide (md breakpoint) -->
<x-language-selector />
<!-- LOcation selector visible on screens > 768px wide (md breakpoint) -->
<x-location-selector />
</div>
<!-- Navbar brand (Logo) -->
<a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">
<img src="{{ asset('logo/logo-colored.png') }}" class="d-none d-lg-block" style="height:32px;"/>
<img src="{{ asset('logo/logo-app.png') }}" class="d-lg-none" style="height:42px;"/>
</a>
<!-- Button group -->
<div class="d-flex align-items-center">
<!-- Navbar stuck nav toggler -->
<button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Theme switcher (light/dark/auto) -->
<div class="dropdown">
<button type="button" class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
<span class="theme-icon-active d-flex animate-target">
<i class="ci-sun"></i>
</span>
</button>
<ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
<li>
<button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-sun"></i>
</span>
<span class="theme-label">Light</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-moon"></i>
</span>
<span class="theme-label">Dark</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-auto"></i>
</span>
<span class="theme-label">Auto</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
</ul>
</div>
<!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
<button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox" aria-label="Toggle search bar">
<i class="ci-search animate-target"></i>
</button>
<!-- Account button visible on screens > 768px wide (md breakpoint) -->
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex" href="{{ route('second', ['account', 'signin']) }}">
<i class="ci-user animate-target"></i>
<span class="visually-hidden">Account</span>
</a>
<!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex" href="#!">
<i class="ci-heart animate-target"></i>
<span class="visually-hidden">Wishlist</span>
</a>
<!-- Cart button -->
<button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale" data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart" aria-label="Shopping cart">
<span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
<i class="ci-shopping-bag animate-target me-1"></i>
</button>
</div>
</div>
<!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
<div class="collapse navbar-stuck-hide" id="stuckNav">
<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
<div class="offcanvas-header py-3">
<h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- Country and City selects visible on screens < 768px wide (md breakpoint) -->
<div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
<x-language-selector-sidebar />
<x-location-selector-sidebar />
</div>
<div class="offcanvas-body pt-1 pb-3 py-lg-0">
<div class="container pb-lg-2 px-0 px-lg-3">
<div class="position-relative d-lg-flex align-items-center justify-content-between">
<!-- Categories mega menu -->
<div class="navbar-nav">
<div class="dropdown position-static pb-lg-2">
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
<i class="ci-menu fs-lg me-2"></i>
<span class="animate-target">Categories</span>
</button>
<div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
<!-- Nav tabs -->
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase active" id="womens-tab" data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab" aria-controls="womens-tab-pane" aria-selected="true">
Women's
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane" aria-selected="false">
Men's
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane" aria-selected="false">
Kids'
</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content pb-xl-4">
<!-- Women's tab -->
<div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel" aria-labelledby="womens-tab">
<div class="row g-4">
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Clothing</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp; Outerwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Swimwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Shoes</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Heels</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Accessories</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Handbags</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Eyewear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jewelry</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<div class="h6 mb-2">Specialty Sizes</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Plus Size</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Petite</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Wide Shoes</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Narrow Shoes</a>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
<div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
<div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
<div>
<a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion']) }}" data-bs-theme="light">Shop now</a>
</div>
</div>
<img src="/img/mega-menu/fashion/01.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
</div>
</div>
</div>
</div>
<!-- Men's tab -->
<div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
<div class="row g-4">
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Clothing</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">T-Shirts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jeans</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp; Outerwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Shoes</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Accessories</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sunglasses</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Bags</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<div class="h6 mb-2">Specialty Shops</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Active Wear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sports Clothing</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Athletic Shoes</a>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
<div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
<div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
<div>
<a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion']) }}" data-bs-theme="dark">Shop now</a>
</div>
</div>
<img src="/img/mega-menu/fashion/02.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
</div>
</div>
</div>
</div>
<!-- Kids' tab -->
<div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
<div class="row g-4">
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Boys</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp; Outerwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shorts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Girls</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hoodies</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp; Outerwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Accessories</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Gloves</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shoe Laces</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Scarves</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<div class="h6 mb-2">Shop by Age</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Infant</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Toddler</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Little Kid</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Big Kid</a>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
<div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
<div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
<div>
<a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion']) }}" data-bs-theme="light">Shop now</a>
</div>
</div>
<img src="/img/mega-menu/fashion/03.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navbar nav -->
<x-layout.navbar-menu />
<!-- 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">
<i class="ci-search fs-base ms-n1 me-2"></i>
<span class="text-body-tertiary fw-normal">Search</span>
</button>
</div>
</div>
</div>
<!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
<div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
<div class="nav nav-justified w-100">
<a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
<i class="ci-user fs-lg opacity-60 me-2"></i>
Account
</a>
<a class="nav-link" href="#!">
<i class="ci-heart fs-lg opacity-60 me-2"></i>
Wishlist
</a>
</div>
</div>
</nav>
</div>
</header>
<x-layout.header />
<main class="content-wrapper">

1401
resources/views/shop/catalog-fashion.blade.php
View File

File diff suppressed because it is too large Load Diff

669
resources/views/shop/product-fashion.blade.php
View File

@ -593,674 +593,7 @@
</div>
</div>
<header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0"
data-sticky-navbar='{"offset": 500}'>
<div class="container py-2 py-lg-3">
<div class="d-flex align-items-center gap-3">
<!-- Mobile offcanvas menu toggler (Hamburger) -->
<button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Country slect visible on screens > 768px wide (md breakpoint) -->
<x-language-selector />
<!-- City slect visible on screens > 768px wide (md breakpoint) -->
<x-location-selector />
</div>
<!-- Navbar brand (Logo) -->
<a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">
<img src="{{ asset('logo/logo-colored.png') }}" class="d-none d-lg-block" style="height:32px;"/>
<img src="{{ asset('logo/logo-app.png') }}" class="d-lg-none" style="height:42px;"/>
</a>
<!-- Button group -->
<div class="d-flex align-items-center">
<!-- Navbar stuck nav toggler -->
<button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse"
data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false"
aria-label="Toggle navigation in navbar stuck state">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Theme switcher (light/dark/auto) -->
<div class="dropdown">
<button type="button"
class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
<span class="theme-icon-active d-flex animate-target">
<i class="ci-sun"></i>
</span>
</button>
<ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
<li>
<button type="button" class="dropdown-item active" data-bs-theme-value="light"
aria-pressed="true">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-sun"></i>
</span>
<span class="theme-label">Light</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item" data-bs-theme-value="dark"
aria-pressed="false">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-moon"></i>
</span>
<span class="theme-label">Dark</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item" data-bs-theme-value="auto"
aria-pressed="false">
<span class="theme-icon d-flex fs-base me-2">
<i class="ci-auto"></i>
</span>
<span class="theme-label">Auto</span>
<i class="item-active-indicator ci-check ms-auto"></i>
</button>
</li>
</ul>
</div>
<!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
<button type="button"
class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
aria-label="Toggle search bar">
<i class="ci-search animate-target"></i>
</button>
<!-- Account button visible on screens > 768px wide (md breakpoint) -->
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
href="{{ route('second', ['account', 'signin']) }}">
<i class="ci-user animate-target"></i>
<span class="visually-hidden">Account</span>
</a>
<!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
href="#!">
<i class="ci-heart animate-target"></i>
<span class="visually-hidden">Wishlist</span>
</a>
<!-- Cart button -->
<button type="button"
class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
aria-label="Shopping cart">
<span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
<i class="ci-shopping-bag animate-target me-1"></i>
</button>
</div>
</div>
<!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
<div class="collapse navbar-stuck-hide" id="stuckNav">
<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
<div class="offcanvas-header py-3">
<h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
<div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
<x-language-selector-sidebar />
<x-location-selector-sidebar />
</div>
<div class="offcanvas-body pt-1 pb-3 py-lg-0">
<div class="container pb-lg-2 px-0 px-lg-3">
<div class="position-relative d-lg-flex align-items-center justify-content-between">
<!-- Categories mega menu -->
<div class="navbar-nav">
<div class="dropdown position-static pb-lg-2">
<button type="button"
class="nav-link animate-underline fw-semibold text-uppercase ps-0"
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
aria-expanded="false">
<i class="ci-menu fs-lg me-2"></i>
<span class="animate-target">Categories</span>
</button>
<div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
<!-- Nav tabs -->
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4"
role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase active"
id="womens-tab" data-bs-toggle="tab"
data-bs-target="#womens-tab-pane" role="tab"
aria-controls="womens-tab-pane" aria-selected="true">
Women's
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase" id="mens-tab"
data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab"
aria-controls="mens-tab-pane" aria-selected="false">
Men's
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-uppercase" id="kids-tab"
data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab"
aria-controls="kids-tab-pane" aria-selected="false">
Kids'
</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content pb-xl-4">
<!-- Women's tab -->
<div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
aria-labelledby="womens-tab">
<div class="row g-4">
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Clothing</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
Outerwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Swimwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Shoes</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Heels</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Accessories</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Handbags</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Eyewear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jewelry</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<div class="h6 mb-2">Specialty Sizes</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Plus Size</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Petite</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Wide Shoes</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Narrow Shoes</a>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
<div
class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
<div
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
<div class="h4 lh-base">Women's<br>Heels<br>Collection
</div>
<div>
<a class="btn btn-sm btn-dark stretched-link"
href="{{ route('second', ['shop', 'catalog-fashion']) }}"
data-bs-theme="light">Shop now</a>
</div>
</div>
<img src="/img/mega-menu/fashion/01.jpg"
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
alt="Image">
</div>
</div>
</div>
</div>
<!-- Men's tab -->
<div class="tab-pane fade" id="mens-tab-pane" role="tabpanel"
aria-labelledby="mens-tab">
<div class="row g-4">
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Clothing</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">T-Shirts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jeans</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
Outerwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Shoes</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Accessories</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sunglasses</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Bags</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<div class="h6 mb-2">Specialty Shops</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Active Wear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sports Clothing</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Athletic Shoes</a>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
<div
class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
<div
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
<div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
<div>
<a class="btn btn-sm btn-dark stretched-link"
href="{{ route('second', ['shop', 'catalog-fashion']) }}"
data-bs-theme="dark">Shop now</a>
</div>
</div>
<img src="/img/mega-menu/fashion/02.jpg"
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
alt="Image">
</div>
</div>
</div>
</div>
<!-- Kids' tab -->
<div class="tab-pane fade" id="kids-tab-pane" role="tabpanel"
aria-labelledby="kids-tab">
<div class="row g-4">
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Boys</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
Outerwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shorts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Girls</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hoodies</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
Outerwear</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
<span class="animate-target">Accessories</span>
</a>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Gloves</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shoe Laces</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Scarves</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
</li>
</ul>
</div>
<div class="col-lg-2">
<div class="h6 mb-2">Shop by Age</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Infant</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Toddler</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Little Kid</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Big Kid</a>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
<div
class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
<div
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
<div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
<div>
<a class="btn btn-sm btn-dark stretched-link"
href="{{ route('second', ['shop', 'catalog-fashion']) }}"
data-bs-theme="light">Shop now</a>
</div>
</div>
<img src="/img/mega-menu/fashion/03.jpg"
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
alt="Image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navbar nav -->
<x-layout.navbar-menu />
<!-- 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">
<i class="ci-search fs-base ms-n1 me-2"></i>
<span class="text-body-tertiary fw-normal">Search</span>
</button>
</div>
</div>
</div>
<!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
<div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
<div class="nav nav-justified w-100">
<a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
<i class="ci-user fs-lg opacity-60 me-2"></i>
Account
</a>
<a class="nav-link" href="#!">
<i class="ci-heart fs-lg opacity-60 me-2"></i>
Wishlist
</a>
</div>
</div>
</nav>
</div>
</header>
<x-layout.header />
<main class="content-wrapper">