3038 lines
218 KiB
PHP
3038 lines
218 KiB
PHP
@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) -->
|
|
<x-language-selector />
|
|
|
|
<!-- City slect visible on screens > 768px wide (md breakpoint) -->
|
|
<x-location-selector />
|
|
</div>
|
|
|
|
<!-- Navbar brand (Logo) -->
|
|
<a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">
|
|
|
|
<img src="{{ asset('logo/logo-colored.png') }}" class="d-none d-lg-block" style="height:32px;"/>
|
|
<img src="{{ asset('logo/logo-app.png') }}" class="d-lg-none" style="height:42px;"/>
|
|
</a>
|
|
|
|
|
|
<!-- Button group -->
|
|
<div class="d-flex align-items-center">
|
|
|
|
<!-- Navbar stuck nav toggler -->
|
|
<button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse"
|
|
data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false"
|
|
aria-label="Toggle navigation in navbar stuck state">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Theme switcher (light/dark/auto) -->
|
|
<div class="dropdown">
|
|
<button type="button"
|
|
class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
|
|
<span class="theme-icon-active d-flex animate-target">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
</button>
|
|
<ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
|
|
<li>
|
|
<button type="button" class="dropdown-item active" data-bs-theme-value="light"
|
|
aria-pressed="true">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
<span class="theme-label">Light</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="dark"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-moon"></i>
|
|
</span>
|
|
<span class="theme-label">Dark</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="auto"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-auto"></i>
|
|
</span>
|
|
<span class="theme-label">Auto</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
|
|
<button type="button"
|
|
class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
|
|
data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
|
|
aria-label="Toggle search bar">
|
|
<i class="ci-search animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Account button visible on screens > 768px wide (md breakpoint) -->
|
|
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
|
|
href="{{ route('second', ['account', 'signin']) }}">
|
|
<i class="ci-user animate-target"></i>
|
|
<span class="visually-hidden">Account</span>
|
|
</a>
|
|
|
|
<!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
|
|
<a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
|
|
href="#!">
|
|
<i class="ci-heart animate-target"></i>
|
|
<span class="visually-hidden">Wishlist</span>
|
|
</a>
|
|
|
|
<!-- Cart button -->
|
|
<button type="button"
|
|
class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
|
|
data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
|
|
aria-label="Shopping cart">
|
|
<span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
|
|
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
|
|
<i class="ci-shopping-bag animate-target me-1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
|
|
<div class="collapse navbar-stuck-hide" id="stuckNav">
|
|
<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
|
|
<div class="offcanvas-header py-3">
|
|
<h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
|
|
<div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
|
|
<x-language-selector-sidebar />
|
|
<x-location-selector-sidebar />
|
|
</div>
|
|
<div class="offcanvas-body pt-1 pb-3 py-lg-0">
|
|
<div class="container pb-lg-2 px-0 px-lg-3">
|
|
|
|
<div class="position-relative d-lg-flex align-items-center justify-content-between">
|
|
|
|
<!-- Categories mega menu -->
|
|
<div class="navbar-nav">
|
|
<div class="dropdown position-static pb-lg-2">
|
|
<button type="button"
|
|
class="nav-link animate-underline fw-semibold text-uppercase ps-0"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
|
|
aria-expanded="false">
|
|
<i class="ci-menu fs-lg me-2"></i>
|
|
<span class="animate-target">Categories</span>
|
|
</button>
|
|
<div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4"
|
|
role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button type="button" class="nav-link text-uppercase active"
|
|
id="womens-tab" data-bs-toggle="tab"
|
|
data-bs-target="#womens-tab-pane" role="tab"
|
|
aria-controls="womens-tab-pane" aria-selected="true">
|
|
Women's
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button type="button" class="nav-link text-uppercase" id="mens-tab"
|
|
data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab"
|
|
aria-controls="mens-tab-pane" aria-selected="false">
|
|
Men's
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button type="button" class="nav-link text-uppercase" id="kids-tab"
|
|
data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab"
|
|
aria-controls="kids-tab-pane" aria-selected="false">
|
|
Kids'
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content pb-xl-4">
|
|
|
|
<!-- Women's tab -->
|
|
<div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
|
|
aria-labelledby="womens-tab">
|
|
<div class="row g-4">
|
|
<div class="col-lg-2">
|
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
|
href="{{ route('second', ['shop', 'catalog-fashion']) }}">
|
|
<span class="animate-target">Clothing</span>
|
|
</a>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts & 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 &
|
|
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 &
|
|
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 &
|
|
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 & 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 &
|
|
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 &
|
|
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('home') }}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('home') }}">Product</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Detail</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">
|
|
|
|
@if ($product->display_discount_price > 0)
|
|
<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>
|
|
@endif
|
|
<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>
|
|
|
|
<del class="display_discount_price fs-sm fw-normal text-body-tertiary ms-2" style="display: {{ $product->discount_display_price ? 'inline' : 'none' }};">{{ $product->discount_display_price ? ' Rp ' . number_format($product->discount_display_price, 0, ',', '.') : '' }}</del>
|
|
</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-discount-price="{{ $variant->discount_display_price ? 'Rp ' . number_format($variant->discount_display_price, 0, ',', '.') : '' }}"
|
|
data-image="{{ $variant->image_url ?? $product->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 & 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"> 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"> 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"> (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">
|
|
{!! nl2br($product->description) !!}
|
|
</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">
|
|
|
|
@foreach ($complete_look_products as $key => $value)
|
|
<div class="swiper-slide">
|
|
<div class="row row-cols-2">
|
|
|
|
@foreach ($value as $key2 => $value2)
|
|
<div class="col">
|
|
<x-home.product-card :product="$value2" />
|
|
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product image -->
|
|
<div class="col-md-6 order-md-1">
|
|
<img src="{{ $product->image_url ?? '' }}" 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 & 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 & 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 & 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 & 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">
|
|
© 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 discountPrice = label.getAttribute('data-discount-price');
|
|
const image = label.getAttribute('data-image');
|
|
const labelText = label.getAttribute('data-label');
|
|
|
|
|
|
document.querySelector('.display_price').textContent = price;
|
|
const discountSpan = document.querySelector('.display_discount_price');
|
|
if (discountPrice) {
|
|
discountSpan.textContent = ' ' + discountPrice;
|
|
discountSpan.style.display = 'inline';
|
|
} else {
|
|
discountSpan.style.display = 'none';
|
|
}
|
|
document.querySelector('.product-main-image').src = image;
|
|
document.querySelector('#colorOption').textContent = labelText;
|
|
});
|
|
});
|
|
// Trigger change for the initially checked radio
|
|
const checkedRadio = document.querySelector('input[name="colors"]:checked');
|
|
if (checkedRadio) {
|
|
checkedRadio.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|