ECOMMERCE/resources/views/contact/v1.blade.php

1842 lines
145 KiB
PHP

@extends('layouts.landing', ['title' => 'Contact v.1'])
@section('content')
<div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
style="width: 500px">
<!-- Header -->
<div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
<div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
<h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
<div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
<div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
</div>
</div>
<!-- Items -->
<div class="offcanvas-body d-flex flex-column gap-4 pt-2">
<!-- Item -->
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
<img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
alt="Thumbnail">
</a>
<div class="w-100 min-w-0 ps-3">
<h5 class="d-flex animate-underline mb-2">
<a class="d-block fs-sm fw-medium text-truncate animate-target"
href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden laces</a>
</h5>
<div class="h6 pb-1 mb-2">$74.00</div>
<div class="d-flex align-items-center justify-content-between">
<div class="count-input rounded-2">
<button type="button" class="btn btn-icon btn-sm" data-decrement
aria-label="Decrement quantity">
<i class="ci-minus"></i>
</button>
<input type="number" class="form-control form-control-sm" value="1" readonly>
<button type="button" class="btn btn-icon btn-sm" data-increment
aria-label="Increment quantity">
<i class="ci-plus"></i>
</button>
</div>
<button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
</div>
</div>
</div>
<!-- Item -->
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
<img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
alt="Thumbnail">
</a>
<div class="w-100 min-w-0 ps-3">
<h5 class="d-flex animate-underline mb-2">
<a class="d-block fs-sm fw-medium text-truncate animate-target"
href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
</h5>
<div class="h6 pb-1 mb-2">$27.00</div>
<div class="d-flex align-items-center justify-content-between">
<div class="count-input rounded-2">
<button type="button" class="btn btn-icon btn-sm" data-decrement
aria-label="Decrement quantity">
<i class="ci-minus"></i>
</button>
<input type="number" class="form-control form-control-sm" value="1" readonly>
<button type="button" class="btn btn-icon btn-sm" data-increment
aria-label="Increment quantity">
<i class="ci-plus"></i>
</button>
</div>
<button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
</div>
</div>
</div>
<!-- Item -->
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
<img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
alt="Thumbnail">
</a>
<div class="w-100 min-w-0 ps-3">
<h5 class="d-flex animate-underline mb-2">
<a class="d-block fs-sm fw-medium text-truncate animate-target"
href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
</h5>
<div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
<div class="d-flex align-items-center justify-content-between">
<div class="count-input rounded-2">
<button type="button" class="btn btn-icon btn-sm" data-decrement
aria-label="Decrement quantity">
<i class="ci-minus"></i>
</button>
<input type="number" class="form-control form-control-sm" value="1" readonly>
<button type="button" class="btn btn-icon btn-sm" data-increment
aria-label="Increment quantity">
<i class="ci-plus"></i>
</button>
</div>
<button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
aria-label="Remove from cart"></button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="offcanvas-header flex-column align-items-start">
<div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
<span class="text-light-emphasis">Subtotal:</span>
<span class="h6 mb-0">$197.00</span>
</div>
<div class="d-flex w-100 gap-3">
<a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
<a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
</div>
</div>
</div>
<div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
<div class="offcanvas-header border-bottom p-0 py-lg-1">
<form class="container d-flex align-items-center">
<input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
placeholder="Search the products" data-autofocus="offcanvas">
<button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</form>
</div>
<div class="offcanvas-body px-0">
<div class="container text-center">
<svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
viewBox="0 0 512 512" fill="currentColor">
<path
d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
</svg>
<h6 class="mb-2">Your search results will appear here</h6>
<p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
</div>
</div>
</div>
<div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
<div class="container position-relative d-flex min-w-0">
<div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
<div class="nav me-2">
<button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
<i class="ci-chevron-left"></i>
</button>
</div>
<div class="swiper fs-sm text-white"
data-swiper='{
"spaceBetween": 24,
"loop": true,
"autoplay": {
"delay": 5000,
"disableOnInteraction": false
},
"navigation": {
"prevEl": "#topbarPrev",
"nextEl": "#topbarNext"
}
}'>
<div class="swiper-wrapper min-w-0">
<div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
class="d-none d-sm-inline">Don't miss a discount!</span></div>
<div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
class="d-none d-sm-inline">We return money within 30 days.</span></div>
<div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
class="d-none d-sm-inline">We've got you covered!</span></div>
</div>
</div>
<div class="nav ms-2">
<button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
<i class="ci-chevron-right"></i>
</button>
</div>
</div>
<button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
data-bs-dismiss="alert" aria-label="Close"></button>
</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) -->
<div class="dropdown d-none d-md-block nav">
<a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
<div class="ratio ratio-1x1" style="width: 20px">
<img src="/img/flags/en-us.png" alt="USA">
</div>
</a>
<ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
<li>
<a class="dropdown-item" href="#!">
<img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
alt="United Kingdom">
United Kingdom
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
France
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
alt="Deutschland">
Deutschland
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
Italia
</a>
</li>
</ul>
</div>
<!-- City slect visible on screens > 768px wide (md breakpoint) -->
<div class="dropdown d-none d-md-block nav">
<a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="animate-target">Washington</span>
</a>
<ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
<li><a class="dropdown-item" href="#!">Chicago</a></li>
<li><a class="dropdown-item" href="#!">Los Angeles</a></li>
<li><a class="dropdown-item" href="#!">New York</a></li>
<li><a class="dropdown-item" href="#!">Philadelphia</a></li>
</ul>
</div>
</div>
<!-- Navbar brand (Logo) -->
<a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5"
href="{{ route('second', ['home', 'fashion-v1']) }}">Cartzilla</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">
<div class="dropdown nav">
<a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
<div class="ratio ratio-1x1" style="width: 20px">
<img src="/img/flags/en-us.png" alt="USA">
</div>
</a>
<ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
<li>
<a class="dropdown-item" href="#!">
<img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
alt="United Kingdom">
United Kingdom
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20"
alt="France">
France
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
alt="Deutschland">
Deutschland
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20"
alt="Italia">
Italia
</a>
</li>
</ul>
</div>
<div class="dropdown nav">
<a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="animate-target">Washington</span>
</a>
<ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
<li><a class="dropdown-item" href="#!">Chicago</a></li>
<li><a class="dropdown-item" href="#!">Los Angeles</a></li>
<li><a class="dropdown-item" href="#!">New York</a></li>
<li><a class="dropdown-item" href="#!">Philadelphia</a></li>
</ul>
</div>
</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 -->
<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 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" 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 active" aria-current="page" 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">
<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>
<!-- Page content -->
<main class="content-wrapper">
<!-- Page title -->
<section class="position-relative bg-body-tertiary py-4">
<img src="/img/contact/title-bg.png"
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Background image">
<div class="container position-relative z-2 py-4 py-md-5 my-lg-3 my-xl-4 my-xxl-5">
<div class="row pt-lg-2 pb-2 pb-sm-3 pb-lg-4">
<div class="col-9 col-md-8 col-lg-6">
<h1 class="display-4 mb-lg-4">Contact us</h1>
<p class="mb-0">Feel free to contact us and we will be happy to help you!</p>
</div>
</div>
</div>
</section>
<!-- Contact details -->
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5 mb-n3">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4 pt-lg-2 pt-xl-0">
<!-- Location -->
<div class="col">
<div class="d-flex align-items-center">
<i class="ci-map-pin fs-lg text-dark-emphasis"></i>
<h3 class="h6 ps-2 ms-1 mb-0">Store location</h3>
</div>
<hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
<ul class="list-unstyled">
<li>New York 11741, USA</li>
<li>396 Lillian Bolavandy, Holbrook</li>
</ul>
</div>
<!-- Phones -->
<div class="col">
<div class="d-flex align-items-center">
<i class="ci-phone-outgoing fs-lg text-dark-emphasis"></i>
<h3 class="h6 ps-2 ms-1 mb-0">Call us directly</h3>
</div>
<hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
<ul class="list-unstyled">
<li>Customers: 1 50 537 53 082</li>
<li>Franchise: 1 50 537 53 000</li>
</ul>
</div>
<!-- Emails -->
<div class="col">
<div class="d-flex align-items-center">
<i class="ci-mail fs-lg text-dark-emphasis"></i>
<h3 class="h6 ps-2 ms-1 mb-0">Send a message</h3>
</div>
<hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
<ul class="list-unstyled">
<li>Customers: help@cartzilla.com</li>
<li>Franchise: franchise@catzilla.com</li>
</ul>
</div>
<!-- Working hours -->
<div class="col">
<div class="d-flex align-items-center">
<i class="ci-clock fs-lg text-dark-emphasis"></i>
<h3 class="h6 ps-2 ms-1 mb-0">Working hours</h3>
</div>
<hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
<ul class="list-unstyled">
<li>Mon - Fri 8:00 - 18:00</li>
<li>Sut - Sun 10:00 - 16:00</li>
</ul>
</div>
</div>
</section>
<!-- Support / Help center -->
<section class="container py-5 my-2 my-sm-3 my-lg-4 my-xl-5">
<div class="d-sm-flex align-items-center justify-content-between py-xxl-3">
<div class="mb-4 mb-sm-0 me-sm-4">
<h2 class="h3">Looking for support?</h2>
<p class="mb-0">We might already have what you're looking for. See our FAQs or head to our dedicated
Help Center.</p>
</div>
<a class="btn btn-lg btn-outline-dark" href="#!">Help center</a>
</div>
</section>
<!-- Map -->
<section class="position-relative bg-body-tertiary">
<a class="position-absolute top-50 start-50 translate-middle z-2 mt-lg-n4"
href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30908.594922615324!2d-73.07331970206108!3d40.788157341303005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e8483b8bffed93%3A0x53467ceb834b7397!2s396%20Lillian%20Blvd%2C%20Holbrook%2C%20NY%2011741%2C%20USA!5e0!3m2!1sen!2s!4v1706086459668!5m2!1sen!2"
style="width: 50px" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover"
data-bs-content="Click to view the map" data-glightbox="width: 100vw; height: 100vh;"
data-gallery="map" aria-label="Toggle map">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.5 54.6">
<path
d="M42.5 19.2C42.5 8.1 33.2-.7 22 0 12.4.7 4.7 8.5 4.2 18c-.2 2.7.3 5.3 1.1 7.7h0s3.4 10.4 17.4 25c.4.4 1 .4 1.4 0 13.6-13.3 17.4-25 17.4-25h0c.6-2 1-4.2 1-6.5z"
fill="#ffffff" />
<g fill="#222934">
<path
d="M20.4 31.8c-4.5 0-8.1-3.6-8.1-8.1s3.6-8.1 8.1-8.1 8.1 3.6 8.1 8.1-3.7 8.1-8.1 8.1zm0-14.2a6.06 6.06 0 0 0-6.1 6.1 6.06 6.06 0 0 0 6.1 6.1c3.3 0 6.1-2.7 6.1-6.1s-2.8-6.1-6.1-6.1z" />
<circle cx="20.4" cy="23.7" r="3" />
<path
d="M20.4 54.5c-.6 0-1.1-.2-1.4-.6C5 39.3 1.5 29 1.4 28.5a21.92 21.92 0 0 1-1.2-8c.6-10.1 8.6-18.3 18.7-19C24.6 1.1 30 3 34.1 6.9c4.1 3.8 6.4 9.2 6.4 14.8 0 2.4-.4 4.7-1.2 6.9-.1.5-4 12-17.6 25.3-.3.4-.8.6-1.3.6zm-17-26.2c.8 2 4.9 11.6 17 24.2 13.2-13 17-24.5 17.1-24.6.7-2 1.1-4.1 1.1-6.3 0-5-2.1-9.9-5.8-13.3-3.7-3.5-8.6-5.2-13.7-4.8-9.1.6-16.4 8-16.9 17.1-.1 2.5.2 5 1.1 7.3l.1.4z" />
</g>
</svg>
</a>
<img src="/img/contact/map.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
alt="Map">
<div class="d-none d-xxl-block" style="height: 600px"></div>
<div class="d-none d-xl-block d-xxl-none" style="height: 500px"></div>
<div class="d-none d-lg-block d-xl-none" style="height: 420px"></div>
<div class="d-none d-md-block d-lg-none" style="height: 350px"></div>
<div class="d-md-none" style="height: 300px"></div>
<span class="position-absolute top-0 start-0 z-1 w-100 h-100 bg-body opacity-25"></span>
</section>
<!-- FAQ accordion -->
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
<h2 class="text-center pt-xxl-3 pb-lg-2 pb-xl-3">Popular questions</h2>
<div class="row justify-content-center">
<div class="col-md-10 col-lg-9 col-xl-8">
<!-- Accordion -->
<div class="accordion accordion-alt-icon" id="faq">
<!-- Question -->
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeading-1">
<button type="button" class="accordion-button hover-effect-underline collapsed"
data-bs-toggle="collapse" data-bs-target="#faqCollapse-1" aria-expanded="false"
aria-controls="faqCollapse-1">
<span class="me-2">How long will delivery take?</span>
</button>
</h3>
<div class="accordion-collapse collapse" id="faqCollapse-1" aria-labelledby="faqHeading-1"
data-bs-parent="#faq">
<div class="accordion-body">Delivery times vary based on your location and the chosen
shipping method. Generally, our standard delivery takes up to 5 days, while our Express
Delivery ensures your order reaches you within 1 day. Please note that these times may
be subject to occasional variations due to unforeseen circumstances, but we do our best
to meet these estimates.</div>
</div>
</div>
<!-- Question -->
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeading-2">
<button type="button" class="accordion-button hover-effect-underline collapsed"
data-bs-toggle="collapse" data-bs-target="#faqCollapse-2" aria-expanded="false"
aria-controls="faqCollapse-2">
<span class="me-2">What payment methods do you accept?</span>
</button>
</h3>
<div class="accordion-collapse collapse" id="faqCollapse-2" aria-labelledby="faqHeading-2"
data-bs-parent="#faq">
<div class="accordion-body">We offer a range of secure payment options to provide you with
flexibility and convenience. Accepted methods include major credit/debit cards, PayPal,
and other secure online payment gateways. You can find the complete list of accepted
payment methods during the checkout process.</div>
</div>
</div>
<!-- Question -->
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeading-3">
<button type="button" class="accordion-button hover-effect-underline collapsed"
data-bs-toggle="collapse" data-bs-target="#faqCollapse-3" aria-expanded="false"
aria-controls="faqCollapse-3">
<span class="me-2">Do you ship internationally?</span>
</button>
</h3>
<div class="accordion-collapse collapse" id="faqCollapse-3" aria-labelledby="faqHeading-3"
data-bs-parent="#faq">
<div class="accordion-body">Yes, we proudly offer international shipping to cater to our
global customer base. Shipping costs and delivery times will be automatically calculated
at the checkout based on your selected destination. Please note that any customs duties
or taxes applicable in your country are the responsibility of the customer.</div>
</div>
</div>
<!-- Question -->
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeading-4">
<button type="button" class="accordion-button hover-effect-underline collapsed"
data-bs-toggle="collapse" data-bs-target="#faqCollapse-4" aria-expanded="false"
aria-controls="faqCollapse-4">
<span class="me-2">Do I need an account to place an order?</span>
</button>
</h3>
<div class="accordion-collapse collapse" id="faqCollapse-4" aria-labelledby="faqHeading-4"
data-bs-parent="#faq">
<div class="accordion-body">While you can place an order as a guest, creating an account
comes with added benefits. By having an account, you can easily track your orders,
manage your preferences, and enjoy a quicker checkout process for future purchases. It
also allows us to provide you with personalized recommendations and exclusive offers.
</div>
</div>
</div>
<!-- Question -->
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeading-5">
<button type="button" class="accordion-button hover-effect-underline collapsed"
data-bs-toggle="collapse" data-bs-target="#faqCollapse-5" aria-expanded="false"
aria-controls="faqCollapse-5">
<span class="me-2">How can I track my order?</span>
</button>
</h3>
<div class="accordion-collapse collapse" id="faqCollapse-5" aria-labelledby="faqHeading-5"
data-bs-parent="#faq">
<div class="accordion-body">Once your order is dispatched, you will receive a confirmation
email containing a unique tracking number. You can use this tracking number on our
website to monitor the real-time status of your shipment. Additionally, logging into
your account will grant you access to a comprehensive order history, including tracking
information.</div>
</div>
</div>
<!-- Question -->
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeading-6">
<button type="button" class="accordion-button hover-effect-underline collapsed"
data-bs-toggle="collapse" data-bs-target="#faqCollapse-6" aria-expanded="false"
aria-controls="faqCollapse-6">
<span class="me-2">What are the product refund conditions?</span>
</button>
</h3>
<div class="accordion-collapse collapse" id="faqCollapse-6" aria-labelledby="faqHeading-6"
data-bs-parent="#faq">
<div class="accordion-body">Our refund policy is designed to ensure customer satisfaction.
Details can be found in our [refund policy page](insert link). In essence, we accept
returns within [insert number] days of receiving the product, provided it is in its
original condition with all tags and packaging intact. Refunds are processed promptly
once the returned item is inspected and approved.</div>
</div>
</div>
<!-- Question -->
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeading-7">
<button type="button" class="accordion-button hover-effect-underline collapsed"
data-bs-toggle="collapse" data-bs-target="#faqCollapse-7" aria-expanded="false"
aria-controls="faqCollapse-7">
<span class="me-2">Do I need to create an account to shop with you?</span>
</button>
</h3>
<div class="accordion-collapse collapse" id="faqCollapse-7" aria-labelledby="faqHeading-7"
data-bs-parent="#faq">
<div class="accordion-body">While guest checkout is available for your convenience,
creating an account enhances your overall shopping experience. With an account, you can
easily track your order status, save multiple shipping addresses, and enjoy a
streamlined checkout process. Moreover, account holders receive early access to
promotions and exclusive offers. Signing up is quick and hassle-free!</div>
</div>
</div>
<!-- Question -->
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeading-8">
<button type="button" class="accordion-button hover-effect-underline collapsed"
data-bs-toggle="collapse" data-bs-target="#faqCollapse-8" aria-expanded="false"
aria-controls="faqCollapse-8">
<span class="me-2">Is there a minimum order value for free shipping?</span>
</button>
</h3>
<div class="accordion-collapse collapse" id="faqCollapse-8" aria-labelledby="faqHeading-8"
data-bs-parent="#faq">
<div class="accordion-body">Yes, we offer free shipping on orders exceeding $250. Orders
below this threshold are subject to standard shipping fees, which will be displayed
during the checkout process.</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Instagram feed -->
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
<div class="text-center pt-xxl-3 pb-2 pb-md-3">
<h2 class="pb-2 mb-1">
<span class="animate-underline">
<a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#cartzilla</a>
</span>
</h2>
<p>Find more inspiration on our Instagram</p>
</div>
<div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
<div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
href="#!">
<span
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<i
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<div class="hover-effect-target ratio ratio-1x1">
<img src="/img/instagram/01.jpg" alt="Instagram image">
</div>
</a>
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
href="#!">
<span
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<i
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<div class="hover-effect-target ratio ratio-1x1">
<img src="/img/instagram/02.jpg" alt="Instagram image">
</div>
</a>
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
href="#!">
<span
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<i
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<div class="hover-effect-target ratio ratio-1x1">
<img src="/img/instagram/03.jpg" alt="Instagram image">
</div>
</a>
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
href="#!">
<span
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<i
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<div class="hover-effect-target ratio ratio-1x1">
<img src="/img/instagram/04.jpg" alt="Instagram image">
</div>
</a>
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
href="#!">
<span
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<i
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<div class="hover-effect-target ratio ratio-1x1">
<img src="/img/instagram/05.jpg" alt="Instagram image">
</div>
</a>
</div>
</div>
</section>
</main>
@include('layouts.partials.footer3')
@endsection
@section('scripts')
@endsection