SMG_DEV
/
ECOMMERCE
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ECOMMERCE/resources/views/shop/product-fashion.blade.php

3320 lines
240 KiB
PHP
Raw Blame History

@extends('layouts.landing', ['title' => 'Fashion Store - Product Page'])
@section('content')
<div class="modal fade" id="reviewForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="reviewFormLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<form class="modal-content needs-validation" novalidate>
<div class="modal-header border-0">
<h5 class="modal-title" id="reviewFormLabel">Leave a review</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body pb-3 pt-0">
<div class="mb-3">
<label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="review-name" required>
<div class="invalid-feedback">Please enter your name!</div>
<small class="form-text">Will be displayed on the comment.</small>
</div>
<div class="mb-3">
<label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="review-email" required>
<div class="invalid-feedback">Please provide a valid email address!</div>
<small class="form-text">Authentication only - we won't spam you.</small>
</div>
<div class="mb-3">
<label class="form-label">Rating <span class="text-danger">*</span></label>
<select class="form-select"
data-select='{
"classNames": {
"containerInner": "form-select"
},
"placeholderValue": "Choose rating",
"choices": [
{
"value": "",
"label": "Choose rating",
"placeholder": true
},
{
"value": "1",
"label": "<span class=\"visually-hidden\">1 star</span>",
"customProperties": {
"icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
"selected": "1 star"
}
},
{
"value": "2",
"label": "<span class=\"visually-hidden\">2 stars</span>",
"customProperties": {
"icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
"selected": "2 stars"
}
},
{
"value": "3",
"label": "<span class=\"visually-hidden\">3 stars</span>",
"customProperties": {
"icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
"selected": "3 stars"
}
},
{
"value": "4",
"label": "<span class=\"visually-hidden\">4 stars</span>",
"customProperties": {
"icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
"selected": "4 stars"
}
},
{
"value": "5",
"label": "<span class=\"visually-hidden\">5 stars</span>",
"customProperties": {
"icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
"selected": "5 stars"
}
}
]
}'
data-select-template="true" required></select>
<div class="invalid-feedback">Please choose your rating!</div>
</div>
<div class="mb-3">
<label class="form-label" for="review-text">Review <span class="text-danger">*</span></label>
<textarea class="form-control" rows="4" id="review-text" required></textarea>
<div class="invalid-feedback">Please write a review!</div>
<small class="form-text">Your review must be at least 50 characters.</small>
</div>
<div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="yes" name="recommend" checked>
<label for="yes" class="form-check-label">Yes, I recommend</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="no" name="recommend">
<label for="no" class="form-check-label">No, I don't recommend</label>
</div>
</div>
</div>
<div class="modal-footer flex-nowrap gap-3 border-0 px-4">
<button type="reset" class="btn btn-secondary w-100 m-0" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-dark w-100 m-0">Submit review</button>
</div>
</form>
</div>
</div>
<div class="modal fade" id="sizeGuide" tabindex="-1" aria-labelledby="reviewFormLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-body-tertiary border-0 py-2 ps-2 pe-4">
<ul class="nav nav-tabs flex-nowrap text-nowrap py-2" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" href="#womens" id="womens-sizes" data-bs-toggle="tab" role="tab"
aria-controls="mens" aria-selected="true">Women's sizes</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#mens" id="mens-sizes" data-bs-toggle="tab" role="tab"
aria-controls="womens" aria-selected="false" tabindex="-1">Men's sizes</a>
</li>
</ul>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="tab-content">
<div class="tab-pane fade show active" id="womens" role="tabpanel"
aria-labelledby="womens-sizes">
<div class="table-responsive">
<table class="table fs-sm text-center mb-0">
<thead>
<tr>
<th scope="col" class="align-middle">US<br>Sizes</th>
<th scope="col" class="align-middle">Euro<br>Sizes</th>
<th scope="col" class="align-middle">UK<br>Sizes</th>
<th scope="col" class="align-middle">Inches</th>
<th scope="col" class="align-middle">CM</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fw-medium">4</td>
<td>35</td>
<td>2</td>
<td>8.1875"</td>
<td>20.8</td>
</tr>
<tr>
<td class="fw-medium">4.5</td>
<td>35</td>
<td>2.5</td>
<td>8.375"</td>
<td>21.3</td>
</tr>
<tr>
<td class="fw-medium">5</td>
<td>35-36</td>
<td>3</td>
<td>8.5"</td>
<td>21.6</td>
</tr>
<tr>
<td class="fw-medium">5.5</td>
<td>36</td>
<td>3.5</td>
<td>8.75"</td>
<td>22.2</td>
</tr>
<tr>
<td class="fw-medium">6</td>
<td>36-37</td>
<td>4</td>
<td>8.875"</td>
<td>22.5</td>
</tr>
<tr>
<td class="fw-medium">6.5</td>
<td>37</td>
<td>4.5</td>
<td>9.0625"</td>
<td>23</td>
</tr>
<tr>
<td class="fw-medium">7</td>
<td>37-38</td>
<td>5</td>
<td>9.25"</td>
<td>23.5</td>
</tr>
<tr>
<td class="fw-medium">7.5</td>
<td>38</td>
<td>5.5</td>
<td>9.375"</td>
<td>23.8</td>
</tr>
<tr>
<td class="fw-medium">8</td>
<td>38-39</td>
<td>6</td>
<td>9.5"</td>
<td>24.1</td>
</tr>
<tr>
<td class="fw-medium">8.5</td>
<td>39</td>
<td>6.5</td>
<td>9.6875"</td>
<td>24.6</td>
</tr>
<tr>
<td class="fw-medium">9</td>
<td>39-40</td>
<td>7</td>
<td>9.875"</td>
<td>25.1</td>
</tr>
<tr>
<td class="fw-medium">9.5</td>
<td>40</td>
<td>7.5</td>
<td>10"</td>
<td>25.4</td>
</tr>
<tr>
<td class="fw-medium">10</td>
<td>40-41</td>
<td>8</td>
<td>10.1875"</td>
<td>25.9</td>
</tr>
<tr>
<td class="fw-medium">10.5</td>
<td>41</td>
<td>8.5</td>
<td>10.3125"</td>
<td>26.2</td>
</tr>
<tr>
<td class="fw-medium">11</td>
<td>41-42</td>
<td>9</td>
<td>10.5"</td>
<td>26.7</td>
</tr>
<tr>
<td class="fw-medium">11.5</td>
<td>42</td>
<td>9.5</td>
<td>10.6875"</td>
<td>27.1</td>
</tr>
<tr>
<td class="fw-medium">12</td>
<td>42-43</td>
<td>10</td>
<td>10.875"</td>
<td>27.6</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="mens" role="tabpanel" aria-labelledby="mens-sizes">
<div class="table-responsive">
<table class="table fs-sm text-center mb-0">
<thead>
<tr>
<th scope="col" class="align-middle">US<br>Sizes</th>
<th scope="col" class="align-middle">Euro<br>Sizes</th>
<th scope="col" class="align-middle">UK<br>Sizes</th>
<th scope="col" class="align-middle">Inches</th>
<th scope="col" class="align-middle">CM</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fw-medium">6</td>
<td>39</td>
<td>5.5</td>
<td>9.25"</td>
<td>23.5</td>
</tr>
<tr>
<td class="fw-medium">6.5</td>
<td>39</td>
<td>6</td>
<td>9.5"</td>
<td>24.1</td>
</tr>
<tr>
<td class="fw-medium">7</td>
<td>40</td>
<td>6.5</td>
<td>9.625"</td>
<td>24.4</td>
</tr>
<tr>
<td class="fw-medium">7.5</td>
<td>40-41</td>
<td>7</td>
<td>9.75"</td>
<td>24.8</td>
</tr>
<tr>
<td class="fw-medium">8</td>
<td>41</td>
<td>7.5</td>
<td>9.9375"</td>
<td>25.4</td>
</tr>
<tr>
<td class="fw-medium">8.5</td>
<td>41-42</td>
<td>8</td>
<td>10.125"</td>
<td>25.7</td>
</tr>
<tr>
<td class="fw-medium">9</td>
<td>42</td>
<td>8.5</td>
<td>10.25"</td>
<td>26</td>
</tr>
<tr>
<td class="fw-medium">9.5</td>
<td>42-43</td>
<td>9</td>
<td>10.4375"</td>
<td>26.7</td>
</tr>
<tr>
<td class="fw-medium">10</td>
<td>43</td>
<td>9.5</td>
<td>10.5625"</td>
<td>27</td>
</tr>
<tr>
<td class="fw-medium">10.5</td>
<td>43-44</td>
<td>10</td>
<td>10.75"</td>
<td>27.3</td>
</tr>
<tr>
<td class="fw-medium">11</td>
<td>44</td>
<td>10.5</td>
<td>10.9375"</td>
<td>27.9</td>
</tr>
<tr>
<td class="fw-medium">11.5</td>
<td>44-45</td>
<td>11</td>
<td>11.125"</td>
<td>28.3</td>
</tr>
<tr>
<td class="fw-medium">12</td>
<td>45</td>
<td>11.5</td>
<td>11.25"</td>
<td>28.6</td>
</tr>
<tr>
<td class="fw-medium">13</td>
<td>46</td>
<td>12.5</td>
<td>11.5625"</td>
<td>29.4</td>
</tr>
<tr>
<td class="fw-medium">14</td>
<td>47</td>
<td>13.5</td>
<td>11.875"</td>
<td>30.2</td>
</tr>
<tr>
<td class="fw-medium">15</td>
<td>48</td>
<td>14.5</td>
<td>12.1875"</td>
<td>31</td>
</tr>
<tr>
<td class="fw-medium">16</td>
<td>49</td>
<td>15.5</td>
<td>12.5"</td>
<td>31.8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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="#!">
<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="#!">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="#!">
<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="#!">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="#!">
<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="#!">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 active" aria-current="page" href="#"
role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Shop</a>
<div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
<div class="d-flex flex-column flex-lg-row gap-4">
<div style="min-width: 190px">
<div class="h6 mb-2">Electronics Store</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side
Filters</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General
Info</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
Details</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
Reviews</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Fashion Store</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Furniture Store</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top
Filters</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
</li>
</ul>
</div>
<div style="min-width: 190px">
<div class="h6 mb-2">Grocery Store</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Marketplace</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top
Filters</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
</li>
</ul>
</div>
<div style="min-width: 190px">
<div class="h6 mb-2">Checkout v.1</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Checkout v.2</div>
<ul class="nav flex-column gap-2 mt-0">
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
aria-expanded="false">Account</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Auth Pages</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Shop User</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders
History</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment
Methods</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a>
</li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Marketplace User</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post
v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post
v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Contact</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics
v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics
v.2</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help
Single Article v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help
Single Article v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">404 Error</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404
Electronics</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp;
Conditions</a></li>
</ul>
</li>
</ul>
<!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
<button type="button"
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>
<main class="content-wrapper">
<!-- Breadcrumb -->
<nav class="container pt-2 pt-xxl-3 my-3 my-md-4" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('second', ['home', 'fashion-v1']) }}">Home</a></li>
<li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shop</a></li>
<li class="breadcrumb-item active" aria-current="page">Product page</li>
</ol>
</nav>
<!-- Product gallery and details -->
<section class="container">
<div class="row">
<!-- Gallery -->
<div class="col-md-6 pb-4 pb-md-0 mb-2 mb-sm-3 mb-md-0">
<div class="position-relative">
<span
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-3 mt-sm-4 ms-3 ms-sm-4">Sale</span>
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-lg bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-2 mt-sm-3 me-2 me-sm-3"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
data-bs-title="Add to Wishlist" aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden mb-3 mb-sm-4 mb-md-3 mb-lg-4"
href="{{ $product->image_url ?? '' }}" data-glightbox data-gallery="product-gallery">
<i
class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<div class="ratio hover-effect-target bg-body-tertiary rounded"
style="--cz-aspect-ratio: calc(706 / 636 * 100%)">
<img src="{{ $product->image_url ?? '' }}" class="product-main-image" alt="Image">
</div>
</a>
</div>
<div class="collapse d-md-block" id="morePictures">
<div class="row row-cols-2 g-3 g-sm-4 g-md-3 g-lg-4 pb-3 pb-sm-4 pb-md-0">
@foreach ($product->image_urls as $key => $url)
@if ($key == 0)
@continue
@endif
<div class="col">
<a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden"
href="{{ $url }}" data-glightbox
data-gallery="product-gallery">
<i
class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<div class="ratio hover-effect-target bg-body-tertiary rounded"
style="--cz-aspect-ratio: calc(342 / 306 * 100%)">
<img src="{{ $url }}" alt="Image">
</div>
</a>
</div>
@endforeach
</div>
</div>
<button type="button" class="btn btn-lg btn-outline-secondary w-100 collapsed d-md-none"
data-bs-toggle="collapse" data-bs-target="#morePictures"
data-label-collapsed="Show more pictures" data-label-expanded="Show less pictures"
aria-expanded="false" aria-controls="morePictures" aria-label="Show / hide pictures">
<i class="collapse-toggle-icon ci-chevron-down fs-lg ms-2 me-n2"></i>
</button>
</div>
<!-- Product details and options -->
<div class="col-md-6">
<div class="ps-md-4 ps-xl-5">
<!-- Reviews -->
{{-- <a class="d-none d-md-flex align-items-center gap-2 text-decoration-none mb-3" href="#reviews">
<div class="d-flex gap-1 fs-sm">
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star text-body-tertiary opacity-75"></i>
</div>
<span class="text-body-tertiary fs-sm">23 reviews</span>
</a> --}}
<!-- Title -->
<h1 class="h3">{{ $product->name }}</h1>
<!-- Description -->
<p class="fs-sm mb-0">{!! nl2br(Str::limit($product->description, 500)) !!}</p>
<div class="collapse" id="moreDescription">
<div class="fs-sm pt-3">
@if(strlen($product->description) > 500)
<p>{!! nl2br(substr($product->description, 500)) !!}</p>
@endif
</div>
</div>
<!-- Price -->
@if(strlen($product->description) > 500)
<a class="d-inline-block fs-sm fw-medium text-dark-emphasis collapsed mt-1"
href="#moreDescription" data-bs-toggle="collapse" aria-expanded="false"
aria-controls="moreDescription" data-label-collapsed="Read more"
data-label-expanded="Show less" aria-label="Show / hide description"></a>
@endif
<div class="h4 d-flex align-items-center my-4">
<span class="display_price">Rp {{ number_format($product->display_price, 0, ',', '.') }}</span>
@if ($product->discount_display_price)
<del class="display_discount_price fs-sm fw-normal text-body-tertiary ms-2"> Rp {{ number_format($product->discount_display_price, 0, ',', '.') }}</del>
@endif
</div>
<!-- Color options -->
<div class="mb-4">
<label class="form-label fw-semibold pb-1 mb-2">Varian: <span class="text-body fw-normal"
id="colorOption">{{ $product->variants->first()->description ?? '' }}</span></label>
<div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
@foreach ($product->variants as $key => $variant)
<input type="radio" class="btn-check" name="colors" id="variant-id-{{ $variant->id }}" {{ $key == 0 ? 'checked' : '' }}>
<label for="variant-id-{{ $variant->id }}" class="btn btn-image p-0" data-label="{{ $variant->description }}"
data-price="Rp {{ number_format($variant->display_price, 0, ",",".") }}"
data-image="{{ $variant->image_url }}"
>
<img src="{{ $variant->image_url ?? $product->image_url }}" width="56"
alt="{{ $variant->name }}">
<span class="visually-hidden">{{ $variant->name }}</span>
</label>
@endforeach
</div>
</div>
<!-- Size select -->
{{-- <div class="mb-3">
<div class="d-flex align-items-center justify-content-between mb-1">
<label class="form-label fw-semibold mb-0">Size</label>
<div class="nav">
<a class="nav-link animate-underline fw-normal px-0" href="#sizeGuide"
data-bs-toggle="modal">
<i class="ci-ruler fs-lg me-2"></i>
<span class="animate-target">Size guide</span>
</a>
</div>
</div>
<select class="form-select form-select-lg"
data-select='{
"classNames": {
"containerInner": ["form-select", "form-select-lg"]
}
}'
aria-label="Material select">
<option value="">Choose a size</option>
<option value="xs">6-8 (XS)</option>
<option value="s">8-10 (S)</option>
<option value="m">10-12 (M)</option>
<option value="l">12-14 (L)</option>
<option value="xl">14-16 (XL)</option>
</select>
</div> --}}
<!-- Count input + Add to cart button -->
<div class="d-flex gap-3 pb-3 pb-lg-4 mb-3">
<div class="count-input flex-shrink-0">
<button type="button" class="btn btn-icon btn-lg" data-decrement
aria-label="Decrement quantity">
<i class="ci-minus"></i>
</button>
<input type="number" class="form-control form-control-lg" min="1"
value="1" readonly>
<button type="button" class="btn btn-icon btn-lg" data-increment
aria-label="Increment quantity">
<i class="ci-plus"></i>
</button>
</div>
<button type="button" class="btn btn-lg btn-dark w-100">Add to cart</button>
</div>
<!-- Info list -->
<ul class="list-unstyled gap-3 pb-3 pb-lg-4 mb-3">
<li class="d-flex flex-wrap fs-sm">
<span class="d-flex align-items-center fw-medium text-dark-emphasis me-2">
<i class="ci-clock fs-base me-2"></i>
Estimated delivery:
</span>
15 - 27 Mar, 2024
</li>
<li class="d-flex flex-wrap fs-sm">
<span class="d-flex align-items-center fw-medium text-dark-emphasis me-2">
<i class="ci-delivery fs-base me-2"></i>
Free shipping &amp; returns:
</span>
On all orders over $100.00
</li>
</ul>
<!-- Stock status -->
<div class="d-flex flex-wrap justify-content-between fs-sm mb-3">
<span class="fw-medium text-dark-emphasis me-2">🔥 Hurry up! The sale is coming to an
end</span>
<span><span class="fw-medium text-dark-emphasis">6</span> items in stock!</span>
</div>
<div class="progress" role="progressbar" aria-label="Left in stock" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar rounded-pill" style="width: 25%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Sticky product preview + Add to cart CTA -->
<section class="sticky-product-banner sticky-top" data-sticky-element>
<div class="sticky-product-banner-inner pt-5">
<div class="navbar container flex-nowrap align-items-center bg-body pt-4 pt-lg-5 mt-lg-n2">
<div class="d-flex align-items-center min-w-0 ms-lg-2 me-3">
<div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
<img src="/img/shop/fashion/product/thumb.png" alt="Image">
</div>
<h4 class="h6 fw-medium d-none d-lg-block ps-3 mb-0">Denim midi skirt with pockets</h4>
<div class="w-100 min-w-0 d-lg-none ps-2">
<h4 class="fs-sm fw-medium text-truncate mb-1">Denim midi skirt with pockets</h4>
<div class="h6 mb-0">$126.50 <del class="fs-xs fw-normal text-body-tertiary">$156.00</del>
</div>
</div>
</div>
<div class="h4 d-none d-lg-block mb-0 ms-auto me-4">$126.50 <del
class="fs-sm fw-normal text-body-tertiary">$156.00</del></div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-icon btn-secondary animate-pulse"
aria-label="Add to Wishlist">
<i class="ci-heart fs-base animate-target"></i>
</button>
<button type="button" class="btn btn-dark ms-auto d-none d-md-inline-flex px-4">Add to
cart</button>
<button type="button" class="btn btn-icon btn-dark animate-slide-end ms-auto d-md-none"
aria-label="Add to Cart">
<i class="ci-shopping-cart fs-base animate-target"></i>
</button>
</div>
</div>
</div>
</section>
<!-- Product details tabs -->
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
<!-- Nav tabs -->
<ul class="nav nav-underline flex-nowrap border-bottom" role="tablist">
<li class="nav-item me-md-1" role="presentation">
<button type="button" class="nav-link active" id="description-tab" data-bs-toggle="tab"
data-bs-target="#description-tab-pane" role="tab" aria-controls="description-tab-pane"
aria-selected="true">
Description
</button>
</li>
<li class="nav-item me-md-1" role="presentation">
<button type="button" class="nav-link" id="washing-tab" data-bs-toggle="tab"
data-bs-target="#washing-tab-pane" role="tab" aria-controls="washing-tab-pane"
aria-selected="false">
Washing<span class="d-none d-md-inline">&nbsp;instructions</span>
</button>
</li>
<li class="nav-item me-md-1" role="presentation">
<button type="button" class="nav-link" id="delivery-tab" data-bs-toggle="tab"
data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
aria-selected="false">
Delivery<span class="d-none d-md-inline">&nbsp;and returns</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link" id="reviews-tab" data-bs-toggle="tab"
data-bs-target="#reviews-tab-pane" role="tab" aria-controls="reviews-tab-pane"
aria-selected="false">
Reviews<span class="d-none d-md-inline">&nbsp;(23)</span>
</button>
</li>
</ul>
<div class="tab-content pt-4 mt-sm-1 mt-md-3">
<!-- Description tab -->
<div class="tab-pane fade show active" id="description-tab-pane" role="tabpanel"
aria-labelledby="description-tab">
<div class="row">
<div class="col-lg-6 fs-sm">
<ul class="list-unstyled">
<li>Model's height: <span class="text-dark-emphasis fw-semibold">176 cm</span></li>
<li>The model is wearing size: <span class="text-dark-emphasis fw-semibold">S/36</span>
</li>
</ul>
<p>This skirt is designed to fall just below the knee, offering a flattering length that is
suitable for various occasions. It is made from a soft and lightweight fabric that drapes
beautifully, ensuring comfort and ease of movement. The blue color adds a vibrant touch,
making it a standout piece in your wardrobe.</p>
<ul>
<li>fitted waistband</li>
<li>fastened with a hidden zipper</li>
<li>midi length</li>
</ul>
<p class="mb-0">The blue color of the skirt allows for easy pairing with a variety of tops.
You can opt for a crisp white blouse for a classic and polished outfit, or choose a
patterned or contrasting-colored top for a more vibrant and fashion-forward look.</p>
</div>
<div class="col-lg-6 col-xl-5 offset-xl-1">
<div class="row row-cols-2 g-4 my-0 my-lg-n2">
<div class="col">
<div class="py-md-1 py-lg-2 pe-sm-2">
<i class="ci-feather fs-3 text-body-emphasis mb-2 mb-md-3"></i>
<h6 class="fs-sm mb-2">Lightweight</h6>
<p class="fs-sm mb-0">Designed with lightweight European fabrics, perfect for life
on the go.</p>
</div>
</div>
<div class="col">
<div class="py-md-1 py-lg-2 ps-sm-2">
<i class="ci-hanger fs-3 text-body-emphasis mb-2 mb-md-3"></i>
<h6 class="fs-sm mb-2">Perfect fit</h6>
<p class="fs-sm mb-0">Our clothing is designed to fit any body type, find your
perfect look!</p>
</div>
</div>
<div class="col">
<div class="py-md-1 py-lg-2 pe-sm-2">
<i class="ci-delivery-2 fs-3 text-body-emphasis mb-2 mb-md-3"></i>
<h6 class="fs-sm mb-2">Free delivery</h6>
<p class="fs-sm mb-0">Get free door-to-door delivery for all orders over $250.</p>
</div>
</div>
<div class="col">
<div class="py-md-1 py-lg-2 ps-sm-2">
<i class="ci-leaf fs-3 text-body-emphasis mb-2 mb-md-3"></i>
<h6 class="fs-sm mb-2">Sustainability</h6>
<p class="fs-sm mb-0">We are proud to offer a Lifetime Guarantee on all products.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Washing instructions tab -->
<div class="tab-pane fade fs-sm" id="washing-tab-pane" role="tabpanel"
aria-labelledby="washing-tab">
<p>Following below washing instructions can help prolong the life of your denim skirt and keep it
looking its best for longer.</p>
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-3 mb-md-0">
<dl class="pe-lg-2 pe-xl-3 mb-0">
<dt>Machine wash cold</dt>
<dd>Turn the denim midi skirt inside out before placing it in the washing machine. Use cold
water to help preserve the color and fabric integrity.</dd>
<dt>Gentle cycle</dt>
<dd>Select the gentle or delicate cycle on your washing machine to prevent excessive
agitation, which can cause unnecessary wear and tear on the denim.</dd>
<dt>Mild detergent</dt>
<dd>Use a mild detergent specifically formulated for denim or delicate fabrics. Avoid using
bleach or harsh chemicals, as they can damage the denim fibers.</dd>
<dt>Avoid overloading</dt>
<dd class="mb-0">Do not overcrowd the washing machine with too many garments. This can
lead to inadequate cleaning and may cause friction that damages the denim skirt.</dd>
</dl>
</div>
<div class="col">
<dl class="ps-lg-2 ps-xl-3 mb-0">
<dt>Wash separately</dt>
<dd>Wash the denim midi skirt separately from items with zippers, buttons, or other sharp
accessories that could snag or damage the fabric.</dd>
<dt>Skip fabric softener</dt>
<dd>Avoid using fabric softener, as it can leave a residue on the denim and reduce its
natural stiffness, which is characteristic of denim garments.</dd>
<dt>Air dry or tumble dry low</dt>
<dd>After washing, reshape the skirt and either lay it flat to air dry or tumble dry on a
low heat setting. Avoid high heat, as it can shrink or distort the denim.</dd>
<dt>Ironing</dt>
<dd class="mb-0">If necessary, iron the denim midi skirt inside out using a low to
medium heat setting. Avoid ironing directly on any embellishments or pockets to prevent
damage.</dd>
</dl>
</div>
</div>
</div>
<!-- Delivery and returns tab -->
<div class="tab-pane fade fs-sm" id="delivery-tab-pane" role="tabpanel"
aria-labelledby="delivery-tab">
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-3 mb-md-0">
<div class="pe-lg-2 pe-xl-3">
<h6>Delivery</h6>
<p>We strive to deliver your denim midi skirt with pockets to you as quickly as possible.
Our estimated delivery times are as follows:</p>
<ul class="list-unstyled">
<li>Standard delivery: <span class="text-dark-emphasis fw-semibold">Within 3-7
business days</span></li>
<li>Express delivery: <span class="text-dark-emphasis fw-semibold">Within 1-3 business
days</span></li>
</ul>
<p>Please note that delivery times may vary depending on your location and any ongoing
promotions or holidays. You can track your order using the provided tracking number once
your package has been dispatched.</p>
</div>
</div>
<div class="col">
<div class="ps-lg-2 ps-xl-3">
<h6>Returns</h6>
<p>We want you to be completely satisfied with your denim midi skirt with pockets. If for
any reason you are not happy with your purchase, you can return it within 30 days of
receiving your order for a full refund or exchange.</p>
<p>To be eligible for a return, the skirt must be unused, unwashed, and in its original
condition with tags attached. Please ensure that all packaging is intact when returning
the item.</p>
<p class="mb-0">To initiate a return, please contact our customer service team with your
order number and reason for the return. We will provide you with a return shipping label
and instructions on how to proceed. Please note that shipping fees are non-refundable.
</p>
</div>
</div>
</div>
</div>
<!-- Reviews tab -->
<div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab">
<!-- Heading + Add review button -->
<div class="d-sm-flex align-items-center justify-content-between border-bottom pb-2 pb-sm-3">
<div class="mb-3 me-sm-3">
<h2 class="h5 pb-2 mb-1">Customer reviews</h2>
<div class="d-flex align-items-center text-body-secondary fs-sm">
<div class="d-flex gap-1 me-2">
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star text-body-tertiary opacity-75"></i>
</div>
Based on 23 reviews
</div>
</div>
<button type="button" class="btn btn-outline-dark mb-3" data-bs-toggle="modal"
data-bs-target="#reviewForm">Leave a review</button>
</div>
<!-- Review -->
<div class="border-bottom py-4">
<div class="row py-sm-2">
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
<div class="d-flex h6 mb-2">
Rafael Marquez
<i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
</div>
<div class="fs-sm mb-2 mb-md-3">June 25, 2024</div>
<div class="d-flex gap-1 fs-sm">
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
</div>
</div>
<div class="col-md-8 col-lg-9">
<p class="mb-md-4">Absolutely love this chair! It's exactly what I was looking for to
complete my Scandinavian-themed living room. The wooden legs add a touch of warmth and
the design is timeless. Comfortable and sturdy, couldn't be happier with my purchase!
</p>
<div class="d-sm-flex justify-content-between">
<div
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
<i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
Yes, I recommend this product
</div>
<div class="d-flex align-items-center gap-2">
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
0
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Review -->
<div class="border-bottom py-4">
<div class="row py-sm-2">
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
<div class="d-flex h6 mb-2">
Bessie Cooper
<i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
</div>
<div class="fs-sm mb-2 mb-md-3">April 8, 2024</div>
<div class="d-flex gap-1 fs-sm">
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star text-body-tertiary opacity-75"></i>
<i class="ci-star text-body-tertiary opacity-75"></i>
</div>
</div>
<div class="col-md-8 col-lg-9">
<p class="mb-md-4">While the design of the chair is nice and it does add a touch of retro
vibe to my space, I found the quality to be lacking. After just a few weeks of use, one
of the legs started to wobble, and the seat isn't as comfortable as I had hoped.
Disappointed with the durability. Additionally, the assembly process was a bit
frustrating as some of the screws didn't align properly with the holes, requiring extra
effort to secure them in place. Overall, while it looks good, I expected better quality
for the price.</p>
<div class="d-sm-flex justify-content-between">
<div
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
<i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
No, I don't recommend this product
</div>
<div class="d-flex align-items-center gap-2">
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
3
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Review -->
<div class="border-bottom py-4">
<div class="row py-sm-2">
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
<div class="d-flex h6 mb-2">Savannah Nguyen</div>
<div class="fs-sm mb-2 mb-md-3">March 30, 2024</div>
<div class="d-flex gap-1 fs-sm">
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star text-body-tertiary opacity-75"></i>
</div>
</div>
<div class="col-md-8 col-lg-9">
<p class="mb-md-4">Great addition to our dining room! The chair looks fantastic and is
quite comfortable for short sits. Assembly was a breeze, and the quality seems decent
for the price. Overall, satisfied with the purchase.</p>
<div class="d-sm-flex justify-content-between">
<div
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
<i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
Yes, I recommend this product
</div>
<div class="d-flex align-items-center gap-2">
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
7
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Review -->
<div class="border-bottom py-4">
<div class="row py-sm-2">
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
<div class="d-flex h6 mb-2">Daniel Adams</div>
<div class="fs-sm mb-2 mb-md-3">March 16, 2024</div>
<div class="d-flex gap-1 fs-sm">
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
</div>
</div>
<div class="col-md-8 col-lg-9">
<p class="mb-md-4">Couldn't be happier with this chair! It's not only stylish but also
incredibly comfortable. The size is perfect for our space, and the wooden legs feel
sturdy. Definitely recommend it to anyone looking for a chic and functional seating
option.</p>
<div class="d-sm-flex justify-content-between">
<div
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
<i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
Yes, I recommend this product
</div>
<div class="d-flex align-items-center gap-2">
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
14
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Review -->
<div class="border-bottom py-4">
<div class="row py-sm-2">
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
<div class="d-flex h6 mb-2">Kristin Watson</div>
<div class="fs-sm mb-2 mb-md-3">February 7, 2024</div>
<div class="d-flex gap-1 fs-sm">
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star text-body-tertiary opacity-75"></i>
</div>
</div>
<div class="col-md-8 col-lg-9">
<p class="mb-md-4">The chair is nice, but it's not the most comfortable for extended
periods of sitting. The wooden legs give it a nice aesthetic, but they seem a bit
fragile. It's a decent chair for occasional use, but I wouldn't recommend it for daily
use or long sitting sessions.</p>
<div class="d-sm-flex justify-content-between">
<div
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
<i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
Yes, I recommend this product
</div>
<div class="d-flex align-items-center gap-2">
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
<button type="button" class="btn btn-sm btn-secondary">
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
9
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<nav class="mt-3 pt-2 pt-md-3" aria-label="Reviews pagination">
<ul class="pagination">
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#!">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#!">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#!">4</a>
</li>
<li class="page-item">
<span class="page-link pe-none">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#!">6</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Complete look (carousel) -->
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
<div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
<h2 class="mb-0 me-3">Complete your look</h2>
<!-- Slider prev/next buttons -->
<div class="d-flex gap-2">
<button type="button"
class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
id="lookPrev" aria-label="Prev">
<i class="ci-chevron-left fs-lg animate-target"></i>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
id="lookNext" aria-label="Next">
<i class="ci-chevron-right fs-lg animate-target"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-md-6 order-md-2 mb-4 mb-md-0">
<!-- Slider -->
<div class="swiper"
data-swiper='{
"slidesPerView": 1,
"spaceBetween": 40,
"loop": true,
"navigation": {
"prevEl": "#lookPrev",
"nextEl": "#lookNext"
}
}'>
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="row row-cols-2">
<!-- Item -->
{{-- <div class="col">
<x-home.product-card :product="$product" />
</div> --}}
<!-- Item -->
<div class="col">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3" href="#!">
<div class="ratio"
style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/07.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="#!">+4</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="#!">
<span class="text-truncate">Black massive women's boots</span>
</a>
</div>
<div class="h6 mb-2">$160.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1
color</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-7"
id="color-7-1" checked>
<label for="color-7-1" class="btn btn-color fs-base"
style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
<input type="radio" class="btn-check" name="colors-7"
id="color-7-2">
<label for="color-7-2" class="btn btn-color fs-base"
style="color: #e0e5eb">
<span class="visually-hidden">White</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="swiper-slide">
<div class="row row-cols-2">
<!-- Item -->
<div class="col">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3" href="#!">
<div class="ratio"
style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/09.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="#!">+3</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="#!">
<span class="text-truncate">White cotton blouse with necklace</span>
</a>
</div>
<div class="h6 mb-2">$38.50</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1
color</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-9"
id="color-9-1" checked>
<label for="color-9-1" class="btn btn-color fs-base"
style="color: #e0e5eb">
<span class="visually-hidden">White</span>
</label>
<input type="radio" class="btn-check" name="colors-9"
id="color-9-2">
<label for="color-9-2" class="btn btn-color fs-base"
style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="col">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3" href="#!">
<div class="ratio"
style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/08.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
<span
class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">8</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="#!">+3</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="#!">
<span class="text-truncate">Leather sneakers with golden laces</span>
</a>
</div>
<div class="h6 mb-2">$74.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2
colors</div>
<div
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-8"
id="color-8-1" checked>
<label for="color-8-1" class="btn btn-color fs-base"
style="color: #b1aa9b">
<span class="visually-hidden">Cream</span>
</label>
<input type="radio" class="btn-check" name="colors-8"
id="color-8-2">
<label for="color-8-2" class="btn btn-color fs-base"
style="color: #496c33">
<span class="visually-hidden">Dark green</span>
</label>
<input type="radio" class="btn-check" name="colors-8"
id="color-8-3">
<label for="color-8-3" class="btn btn-color fs-base"
style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product image -->
<div class="col-md-6 order-md-1">
<img src="/img/shop/fashion/product/01.png" class="d-block bg-body-tertiary rounded"
alt="Image">
</div>
</div>
</section>
<!-- Viewed products (carousel) -->
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
<div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
<h2 class="mb-0 me-3">Viewed products</h2>
<!-- Slider prev/next buttons -->
<div class="d-flex gap-2">
<button type="button"
class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
id="viewedPrev" aria-label="Prev">
<i class="ci-chevron-left fs-lg animate-target"></i>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
id="viewedNext" aria-label="Next">
<i class="ci-chevron-right fs-lg animate-target"></i>
</button>
</div>
</div>
<!-- Slider -->
<div class="swiper"
data-swiper='{
"slidesPerView": 2,
"spaceBetween": 24,
"loop": true,
"navigation": {
"prevEl": "#viewedPrev",
"nextEl": "#viewedNext"
},
"breakpoints": {
"768": {
"slidesPerView": 3
},
"992": {
"slidesPerView": 4
}
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3" href="#!">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/11.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2" href="#!">+1</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0" href="#!">
<span class="text-truncate">Warm sweatshirts without a hoodie</span>
</a>
</div>
<div class="h6 mb-2">$32.99</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
<div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-11" id="color-11-1"
checked>
<label for="color-11-1" class="btn btn-color fs-base" style="color: #42675f">
<span class="visually-hidden">Green</span>
</label>
<input type="radio" class="btn-check" name="colors-11" id="color-11-2">
<label for="color-11-2" class="btn btn-color fs-base" style="color: #476585">
<span class="visually-hidden">Blue</span>
</label>
<input type="radio" class="btn-check" name="colors-11" id="color-11-3">
<label for="color-11-3" class="btn btn-color fs-base" style="color: #724c74">
<span class="visually-hidden">Purple</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/03.png" alt="Image">
</div>
</a>
<div
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
<div
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
<div class="nav">
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
</div>
</div>
</div>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Sneakers with a massive sole</span>
</a>
</div>
<div class="h6 mb-2">$86.50</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
<div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-3" id="color-3-1" checked>
<label for="color-3-1" class="btn btn-color fs-base" style="color: #e0e5eb">
<span class="visually-hidden">White</span>
</label>
<input type="radio" class="btn-check" name="colors-3" id="color-3-2">
<label for="color-3-2" class="btn btn-color fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/04.png" alt="Image">
</div>
</a>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Knitted bag with a wooden handle</span>
</a>
</div>
<div class="h6 mb-2">$105.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
<div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
<label for="color-4-1" class="btn btn-color fs-base" style="color: #e7ddb4">
<span class="visually-hidden">Beige</span>
</label>
<input type="radio" class="btn-check" name="colors-4" id="color-4-2">
<label for="color-4-2" class="btn btn-color fs-base" style="color: #8b9bc4">
<span class="visually-hidden">Blue</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<span
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-17%</span>
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/05.png" alt="Image">
</div>
</a>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Polarized sunglasses for men</span>
</a>
</div>
<div class="h6 mb-2">$96.00 <del class="fs-sm fw-normal text-body-tertiary">$112.00</del>
</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
<div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
<label for="color-5-1" class="btn btn-color fs-base" style="color: #8cc4ac">
<span class="visually-hidden">Green</span>
</label>
<input type="radio" class="btn-check" name="colors-5" id="color-5-2">
<label for="color-5-2" class="btn btn-color fs-base" style="color: #8cb7c4">
<span class="visually-hidden">Blue</span>
</label>
<input type="radio" class="btn-check" name="colors-5" id="color-5-3">
<label for="color-5-3" class="btn btn-color fs-base" style="color: #ccb782">
<span class="visually-hidden">Brown</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<button type="button"
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
aria-label="Add to Wishlist">
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/10.png" alt="Image">
</div>
</a>
</div>
<div class="nav mb-2">
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
href="{{ route('second', ['shop', 'product-fashion']) }}">
<span class="text-truncate">Leather handbag for women</span>
</a>
</div>
<div class="h6 mb-2">$140.00</div>
<div class="position-relative">
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
<div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
<input type="radio" class="btn-check" name="colors-10" id="color-10-1"
checked>
<label for="color-10-1" class="btn btn-color fs-base" style="color: #869286">
<span class="visually-hidden">Olive</span>
</label>
<input type="radio" class="btn-check" name="colors-10" id="color-10-2">
<label for="color-10-2" class="btn btn-color fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
<input type="radio" class="btn-check" name="colors-10" id="color-10-3">
<label for="color-10-3" class="btn btn-color fs-base" style="color: #526f99">
<span class="visually-hidden">Blue</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Instagram feed -->
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
<div class="text-center pt-1 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>
<footer class="footer pt-5 pb-4">
<div class="container pt-sm-2 pt-md-3 pt-lg-4">
<div class="row pb-5 mb-lg-3">
<!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
<div class="col-md-8 col-xl-7 pb-2 pb-md-0 mb-4 mb-md-0 mt-n3 mt-sm-0">
<div class="accordion" id="footerLinks">
<div class="row row-cols-1 row-cols-sm-3">
<div class="accordion-item col border-0">
<h6 class="accordion-header" id="categoriesHeading">
<span class="text-dark-emphasis d-none d-sm-block">Categories</span>
<button type="button" class="accordion-button collapsed py-3 d-sm-none"
data-bs-toggle="collapse" data-bs-target="#categoriesLinks"
aria-expanded="false" aria-controls="categoriesLinks">Categories</button>
</h6>
<div class="accordion-collapse collapse d-sm-block" id="categoriesLinks"
aria-labelledby="categoriesHeading" data-bs-parent="#footerLinks">
<ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-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="#!">For women</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">For men</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Home clothes</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Accessories</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Sale</a>
</li>
</ul>
</div>
<hr class="d-sm-none my-0">
</div>
<div class="accordion-item col border-0">
<h6 class="accordion-header" id="accountHeading">
<span class="text-dark-emphasis d-none d-sm-block">Account</span>
<button type="button" class="accordion-button collapsed py-3 d-sm-none"
data-bs-toggle="collapse" data-bs-target="#accountLinks" aria-expanded="false"
aria-controls="accountLinks">Account</button>
</h6>
<div class="accordion-collapse collapse d-sm-block" id="accountLinks"
aria-labelledby="accountHeading" data-bs-parent="#footerLinks">
<ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-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="#!">Your account</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Shipping &amp; policies</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Refunds &amp; replacements</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Order tracking</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">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="#!">Taxes &amp; fees</a>
</li>
</ul>
</div>
<hr class="d-sm-none my-0">
</div>
<div class="accordion-item col border-0">
<h6 class="accordion-header" id="customerHeading">
<span class="text-dark-emphasis d-none d-sm-block">Customer service</span>
<button type="button" class="accordion-button collapsed py-3 d-sm-none"
data-bs-toggle="collapse" data-bs-target="#customerLinks"
aria-expanded="false" aria-controls="customerLinks">Customer service</button>
</h6>
<div class="accordion-collapse collapse d-sm-block" id="customerLinks"
aria-labelledby="customerHeading" data-bs-parent="#footerLinks">
<ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-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="#!">Payment methods</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Money back guarantee</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Refunds &amp; replacements</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Product returns</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Support center</a>
</li>
<li class="d-flex w-100 pt-1">
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
href="#!">Shipping</a>
</li>
</ul>
</div>
<hr class="d-sm-none my-0">
</div>
</div>
</div>
</div>
<!-- Subscription -->
<div class="col-md-4 offset-xl-1">
<h6 class="mb-4">Join us and stay up to date</h6>
<form class="needs-validation" novalidate>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="check-woman" checked>
<label for="check-woman" class="form-check-label">Woman</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="check-man">
<label for="check-man" class="form-check-label">Man</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="check-sale">
<label for="check-sale" class="form-check-label">Sale</label>
</div>
<div class="position-relative mt-3">
<input type="email" class="form-control form-control-lg bg-image-none text-start"
placeholder="Enter email" aria-label="Your email address" required>
<div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
<button type="submit"
class="btn btn-icon btn-ghost fs-xl btn-secondary border-0 position-absolute top-0 end-0 mt-1 me-1"
aria-label="Submit your email address">
<i class="ci-arrow-up-right"></i>
</button>
</div>
</form>
</div>
</div>
<!-- Social account links -->
<div class="d-flex justify-content-center justify-content-lg-start gap-2 mt-n2 mt-md-0">
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
title="YouTube" aria-label="Follow us on YouTube">
<i class="ci-youtube"></i>
</a>
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
title="Facebook" aria-label="Follow us on Facebook">
<i class="ci-facebook"></i>
</a>
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
title="Instagram" aria-label="Follow us on Instagram">
<i class="ci-instagram"></i>
</a>
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
title="Telegram" aria-label="Follow us on Telegram">
<i class="ci-telegram"></i>
</a>
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
title="Pinterest" aria-label="Follow us on Pinterest">
<i class="ci-pinterest"></i>
</a>
</div>
<!-- Copyright + Payment methods -->
<div class="d-lg-flex align-items-center border-top pt-4 mt-3">
<div class="d-flex gap-2 gap-sm-3 justify-content-center ms-lg-auto mb-3 mb-md-4 mb-lg-0 order-lg-2">
<div>
<img src="/img/payment-methods/visa-light-mode.svg" class="d-none-dark" alt="Visa">
<img src="/img/payment-methods/visa-dark-mode.svg" class="d-none d-block-dark" alt="Visa">
</div>
<div>
<img src="/img/payment-methods/paypal-light-mode.svg" class="d-none-dark" alt="PayPal">
<img src="/img/payment-methods/paypal-dark-mode.svg" class="d-none d-block-dark"
alt="PayPal">
</div>
<div>
<img src="/img/payment-methods/mastercard.svg" alt="Mastercard">
</div>
<div>
<img src="/img/payment-methods/google-pay-light-mode.svg" class="d-none-dark"
alt="Google Pay">
<img src="/img/payment-methods/google-pay-dark-mode.svg" class="d-none d-block-dark"
alt="Google Pay">
</div>
<div>
<img src="/img/payment-methods/apple-pay-light-mode.svg" class="d-none-dark" alt="Apple Pay">
<img src="/img/payment-methods/apple-pay-dark-mode.svg" class="d-none d-block-dark"
alt="Apple Pay">
</div>
</div>
<div class="d-md-flex justify-content-center order-lg-1">
<ul class="nav justify-content-center gap-4 order-md-3 mb-4 mb-md-0">
<li class="animate-underline">
<a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Privacy</a>
</li>
<li class="animate-underline">
<a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Affiliates</a>
</li>
<li class="animate-underline">
<a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Terms of use</a>
</li>
</ul>
<div class="vr text-body-secondary opacity-25 mx-4 d-none d-md-inline-block order-md-2"></div>
<p class="fs-xs text-center text-lg-start mb-0 order-md-1">
&copy; All rights reserved. Made by <span class="animate-underline"><a
class="animate-target text-dark-emphasis text-decoration-none"
href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes
Studio</a></span>
</p>
</div>
</div>
</div>
</footer>
@endsection
@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const radios = document.querySelectorAll('input[name="colors"]');
radios.forEach(radio => {
radio.addEventListener('change', function() {
const label = document.querySelector(`label[for="${this.id}"]`);
const price = label.getAttribute('data-price');
const image = label.getAttribute('data-image');
const labelText = label.getAttribute('data-label');
document.querySelector('.display_price').textContent = price;
document.querySelector('.product-main-image').src = image;
document.querySelector('#colorOption').textContent = labelText;
});
});
});
</script>
@endsection
Reference in New Issue View Git Blame Copy Permalink