1959 lines
126 KiB
PHP
1959 lines
126 KiB
PHP
@extends('layouts.landing', ['title' => 'Electronics Store - Product General Info'])
|
|
|
|
@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='{
|
|
"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 class="mb-3">
|
|
<label class="form-label">Pros</label>
|
|
<input type="text" class="form-select"
|
|
data-select='{"placeholderValue": "Type and hit \"Enter\""}'>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Cons</label>
|
|
<input type="text" class="form-select"
|
|
data-select='{"placeholderValue": "Type and hit \"Enter\""}'>
|
|
</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-primary w-100 m-0">Submit review</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@include('layouts.partials/offcanvas')
|
|
|
|
@include('layouts.partials/navbar', ['wishlist' => true])
|
|
|
|
<main class="content-wrapper">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics'])}}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-electronics'])}}">Shop</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Product page</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
|
|
<!-- Page title -->
|
|
<h1 class="h3 container mb-4">Apple iPhone 14 Plus 128GB Blue</h1>
|
|
|
|
|
|
<!-- Nav links + Reviews -->
|
|
<section class="container pb-2 pb-lg-4">
|
|
<div class="d-flex align-items-center border-bottom">
|
|
<ul class="nav nav-underline flex-nowrap gap-4">
|
|
<li class="nav-item me-sm-2">
|
|
<a class="nav-link pe-none active" href="#!">General info</a>
|
|
</li>
|
|
<li class="nav-item me-sm-2">
|
|
<a class="nav-link" href="{{ route('second', ['shop', 'product-details-electronics'])}}">Product details</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ route('second', ['shop', 'product-reviews-electronics'])}}">Reviews (68)</a>
|
|
</li>
|
|
</ul>
|
|
<a class="d-none d-md-flex align-items-center gap-2 text-decoration-none ms-auto mb-1" 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-half text-warning"></i>
|
|
</div>
|
|
<span class="text-body-tertiary fs-xs">68 reviews</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Gallery + Product options -->
|
|
<section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
|
|
<div class="row">
|
|
|
|
<!-- Product gallery -->
|
|
<div class="col-md-6">
|
|
|
|
<!-- Preview (Large image) -->
|
|
<div class="swiper"
|
|
data-swiper='{
|
|
"loop": true,
|
|
"navigation": {
|
|
"prevEl": ".btn-prev",
|
|
"nextEl": ".btn-next"
|
|
},
|
|
"thumbs": {
|
|
"swiper": "#thumbs"
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="ratio ratio-1x1">
|
|
<img src="/img/shop/electronics/product/gallery/01.png"
|
|
data-zoom="/img/shop/electronics/product/gallery/01.png"
|
|
data-zoom-options='{
|
|
"paneSelector": "#zoomPane",
|
|
"inlinePane": 768,
|
|
"hoverDelay": 500,
|
|
"touchDisable": true
|
|
}'
|
|
alt="Preview">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="ratio ratio-1x1">
|
|
<img src="/img/shop/electronics/product/gallery/02.png"
|
|
data-zoom="/img/shop/electronics/product/gallery/02.png"
|
|
data-zoom-options='{
|
|
"paneSelector": "#zoomPane",
|
|
"inlinePane": 768,
|
|
"hoverDelay": 500,
|
|
"touchDisable": true
|
|
}'
|
|
alt="Preview">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="ratio ratio-1x1">
|
|
<img src="/img/shop/electronics/product/gallery/03.png"
|
|
data-zoom="/img/shop/electronics/product/gallery/03.png"
|
|
data-zoom-options='{
|
|
"paneSelector": "#zoomPane",
|
|
"inlinePane": 768,
|
|
"hoverDelay": 500,
|
|
"touchDisable": true
|
|
}'
|
|
alt="Preview">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="ratio ratio-1x1">
|
|
<img src="/img/shop/electronics/product/gallery/04.png"
|
|
data-zoom="/img/shop/electronics/product/gallery/04.png"
|
|
data-zoom-options='{
|
|
"paneSelector": "#zoomPane",
|
|
"inlinePane": 768,
|
|
"hoverDelay": 500,
|
|
"touchDisable": true
|
|
}'
|
|
alt="Preview">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="ratio ratio-1x1">
|
|
<img src="/img/shop/electronics/product/gallery/05.png"
|
|
data-zoom="/img/shop/electronics/product/gallery/05.png"
|
|
data-zoom-options='{
|
|
"paneSelector": "#zoomPane",
|
|
"inlinePane": 768,
|
|
"hoverDelay": 500,
|
|
"touchDisable": true
|
|
}'
|
|
alt="Preview">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="ratio ratio-1x1">
|
|
<img src="/img/shop/electronics/product/gallery/06.png"
|
|
data-zoom="/img/shop/electronics/product/gallery/06.png"
|
|
data-zoom-options='{
|
|
"paneSelector": "#zoomPane",
|
|
"inlinePane": 768,
|
|
"hoverDelay": 500,
|
|
"touchDisable": true
|
|
}'
|
|
alt="Preview">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="ratio ratio-1x1">
|
|
<img src="/img/shop/electronics/product/gallery/07.png"
|
|
data-zoom="/img/shop/electronics/product/gallery/07.png"
|
|
data-zoom-options='{
|
|
"paneSelector": "#zoomPane",
|
|
"inlinePane": 768,
|
|
"hoverDelay": 500,
|
|
"touchDisable": true
|
|
}'
|
|
alt="Preview">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prev button -->
|
|
<div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-sm-2 ms-lg-3">
|
|
<button type="button"
|
|
class="btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start"
|
|
aria-label="Prev">
|
|
<i class="ci-chevron-left fs-lg animate-target"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Next button -->
|
|
<div class="position-absolute top-50 end-0 z-2 translate-middle-y me-sm-2 me-lg-3">
|
|
<button type="button"
|
|
class="btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
|
|
aria-label="Next">
|
|
<i class="ci-chevron-right fs-lg animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thumbnails -->
|
|
<div class="swiper swiper-load swiper-thumbs pt-2 mt-1" id="thumbs"
|
|
data-swiper='{
|
|
"loop": true,
|
|
"spaceBetween": 12,
|
|
"slidesPerView": 3,
|
|
"watchSlidesProgress": true,
|
|
"breakpoints": {
|
|
"340": {
|
|
"slidesPerView": 4
|
|
},
|
|
"500": {
|
|
"slidesPerView": 5
|
|
},
|
|
"600": {
|
|
"slidesPerView": 6
|
|
},
|
|
"768": {
|
|
"slidesPerView": 4
|
|
},
|
|
"992": {
|
|
"slidesPerView": 5
|
|
},
|
|
"1200": {
|
|
"slidesPerView": 6
|
|
}
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide swiper-thumb">
|
|
<div class="ratio ratio-1x1" style="max-width: 94px">
|
|
<img src="/img/shop/electronics/product/gallery/th01.png" class="swiper-thumb-img"
|
|
alt="Thumbnail">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide swiper-thumb">
|
|
<div class="ratio ratio-1x1" style="max-width: 94px">
|
|
<img src="/img/shop/electronics/product/gallery/th02.png" class="swiper-thumb-img"
|
|
alt="Thumbnail">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide swiper-thumb">
|
|
<div class="ratio ratio-1x1" style="max-width: 94px">
|
|
<img src="/img/shop/electronics/product/gallery/th03.png" class="swiper-thumb-img"
|
|
alt="Thumbnail">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide swiper-thumb">
|
|
<div class="ratio ratio-1x1" style="max-width: 94px">
|
|
<img src="/img/shop/electronics/product/gallery/th04.png" class="swiper-thumb-img"
|
|
alt="Thumbnail">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide swiper-thumb">
|
|
<div class="ratio ratio-1x1" style="max-width: 94px">
|
|
<img src="/img/shop/electronics/product/gallery/th05.png" class="swiper-thumb-img"
|
|
alt="Thumbnail">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide swiper-thumb">
|
|
<div class="ratio ratio-1x1" style="max-width: 94px">
|
|
<img src="/img/shop/electronics/product/gallery/th06.png" class="swiper-thumb-img"
|
|
alt="Thumbnail">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide swiper-thumb">
|
|
<div class="ratio ratio-1x1" style="max-width: 94px">
|
|
<img src="/img/shop/electronics/product/gallery/th07.png" class="swiper-thumb-img"
|
|
alt="Thumbnail">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Product options -->
|
|
<div class="col-md-6 col-xl-5 offset-xl-1 pt-4">
|
|
<div class="ps-md-4 ps-xl-0">
|
|
<div class="position-relative" id="zoomPane">
|
|
|
|
<!-- Model -->
|
|
<div class="pb-3 mb-2 mb-lg-3">
|
|
<label class="form-label fw-semibold pb-1 mb-2">Model</label>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<input type="radio" class="btn-check" name="model-options" id="gb-64">
|
|
<label for="gb-64" class="btn btn-sm btn-outline-secondary">64 GB</label>
|
|
<input type="radio" class="btn-check" name="model-options" id="gb-128" checked>
|
|
<label for="gb-128" class="btn btn-sm btn-outline-secondary">128 GB</label>
|
|
<input type="radio" class="btn-check" name="model-options" id="gb-256">
|
|
<label for="gb-256" class="btn btn-sm btn-outline-secondary">256 GB</label>
|
|
<input type="radio" class="btn-check" name="model-options" id="gb-512">
|
|
<label for="gb-512" class="btn btn-sm btn-outline-secondary">512 GB</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color -->
|
|
<div class="pb-3 mb-2 mb-lg-3">
|
|
<label class="form-label fw-semibold pb-1 mb-2">Color: <span class="text-body fw-normal"
|
|
id="colorOption">Gray blue</span></label>
|
|
<div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
|
|
<input type="radio" class="btn-check" name="color-options" id="color-1" checked>
|
|
<label for="color-1" class="btn btn-color fs-xl" data-label="Gray blue"
|
|
style="color: #5a7aa1">
|
|
<span class="visually-hidden">Gray blue</span>
|
|
</label>
|
|
<input type="radio" class="btn-check" name="color-options" id="color-2">
|
|
<label for="color-2" class="btn btn-color fs-xl" data-label="Pink"
|
|
style="color: #ee7976">
|
|
<span class="visually-hidden">Pink</span>
|
|
</label>
|
|
<input type="radio" class="btn-check" name="color-options" id="color-3">
|
|
<label for="color-3" class="btn btn-color fs-xl" data-label="Light blue"
|
|
style="color: #9acbf1">
|
|
<span class="visually-hidden">Light blue</span>
|
|
</label>
|
|
<input type="radio" class="btn-check" name="color-options" id="color-4">
|
|
<label for="color-4" class="btn btn-color fs-xl" data-label="Green"
|
|
style="color: #8cd1ab">
|
|
<span class="visually-hidden">Green</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price -->
|
|
<div class="d-flex flex-wrap align-items-center mb-3">
|
|
<div class="h4 mb-0 me-3">$940.00</div>
|
|
<div class="d-flex align-items-center text-success fs-sm ms-auto">
|
|
<i class="ci-check-circle fs-base me-2"></i>
|
|
Available to order
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Count + Buttons -->
|
|
<div
|
|
class="d-flex flex-wrap flex-sm-nowrap flex-md-wrap flex-lg-nowrap gap-3 gap-lg-2 gap-xl-3 mb-4">
|
|
<div class="count-input flex-shrink-0 order-sm-1">
|
|
<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" value="1"
|
|
min="1" max="5" 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-icon btn-lg btn-secondary animate-pulse order-sm-3 order-md-2 order-lg-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 fs-lg animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-lg btn-secondary animate-rotate order-sm-4 order-md-3 order-lg-4"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
|
|
data-bs-title="Compare" aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-lg animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-lg btn-primary w-100 animate-slide-end order-sm-2 order-md-4 order-lg-2">
|
|
<i class="ci-shopping-cart fs-lg animate-target ms-n1 me-2"></i>
|
|
Add to cart
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<div class="d-flex flex-wrap gap-3 gap-xl-4 pb-4 pb-lg-5 mb-2 mb-lg-0 mb-xl-2">
|
|
<div class="d-flex align-items-center fs-sm">
|
|
<svg class="text-warning me-2" xmlns="http://www.w3.org/2000/svg" width="16"
|
|
height="16" fill="currentColor">
|
|
<path
|
|
d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
|
|
<path
|
|
d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
|
|
<path
|
|
d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
|
|
</svg>
|
|
<div class="text-body-emphasis text-nowrap"><span class="fw-semibold">+32</span>
|
|
bonuses</div>
|
|
</div>
|
|
<div class="d-flex align-items-center fs-sm">
|
|
<svg class="text-primary me-2" xmlns="http://www.w3.org/2000/svg" width="16"
|
|
height="16" fill="none">
|
|
<path
|
|
d="M15.264 8.001l.702-1.831a.5.5 0 0 0-.152-.568l-1.522-1.234-.308-1.937a.5.5 0 0 0-.416-.415l-1.937-.308L10.399.185a.5.5 0 0 0-.567-.152L8 .736 6.169.034a.5.5 0 0 0-.567.152L4.368 1.709l-1.937.308a.5.5 0 0 0-.415.415l-.308 1.937L.185 5.603a.5.5 0 0 0-.152.567l.702 1.831-.702 1.831a.5.5 0 0 0 .152.567l1.523 1.233.308 1.937a.5.5 0 0 0 .415.416l1.937.308 1.234 1.522c.137.17.366.23.568.152L8 15.265l1.831.702a.5.5 0 0 0 .568-.153l1.233-1.522 1.937-.308a.5.5 0 0 0 .416-.416l.308-1.937 1.522-1.233a.5.5 0 0 0 .152-.567l-.702-1.831z"
|
|
fill="currentColor" />
|
|
<path
|
|
d="M6.5 7.001a1.5 1.5 0 1 1 0-3 1.5 1.5 0 1 1 0 3zm0-2a.5.5 0 1 0 0 1 .5.5 0 1 0 0-1zM9.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 1 1 0 3zm0-2a.5.5 0 1 0 0 1 .5.5 0 1 0 0-1zm-4 2c-.101 0-.202-.03-.29-.093a.5.5 0 0 1-.116-.698l5-7a.5.5 0 1 1 .814.581l-5 7A.5.5 0 0 1 5.5 12z"
|
|
fill="white" />
|
|
</svg>
|
|
<div class="text-body-emphasis text-nowrap">Interest-free loan</div>
|
|
</div>
|
|
<div class="d-flex align-items-center fs-sm">
|
|
<svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16"
|
|
height="16">
|
|
<path class="text-success"
|
|
d="M7.42169 1.15662C3.3228 1.15662 0 4.47941 0 8.5783C0 12.6772 3.3228 16 7.42169 16C11.5206 16 14.8434 12.6772 14.8434 8.5783H7.42169V1.15662Z"
|
|
fill="currentColor" />
|
|
<path class="text-info"
|
|
d="M8.57812 0V7.42169H15.9998C15.9998 3.3228 12.677 0 8.57812 0Z"
|
|
fill="currentColor" />
|
|
<defs>
|
|
<rect width="16" height="16" fill="white" />
|
|
</defs>
|
|
</svg>
|
|
<div class="text-body-emphasis text-nowrap">Pay by installments</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shipping options -->
|
|
<div class="d-flex align-items-center pb-2">
|
|
<h3 class="h6 mb-0">Shipping options</h3>
|
|
<a class="btn btn-sm btn-secondary ms-auto" href="#!">
|
|
<i class="ci-map-pin fs-sm ms-n1 me-1"></i>
|
|
Find local store
|
|
</a>
|
|
</div>
|
|
<table class="table table-borderless fs-sm mb-2">
|
|
<tbody>
|
|
<tr>
|
|
<td class="py-2 ps-0">Pickup from the store</td>
|
|
<td class="py-2">Today</td>
|
|
<td class="text-body-emphasis fw-semibold text-end py-2 pe-0">Free</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2 ps-0">Pickup from postal offices</td>
|
|
<td class="py-2">Tomorrow</td>
|
|
<td class="text-body-emphasis fw-semibold text-end py-2 pe-0">$25.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2 ps-0">Delivery by courier</td>
|
|
<td class="py-2">2-3 days</td>
|
|
<td class="text-body-emphasis fw-semibold text-end py-2 pe-0">$35.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Warranty + Payment info accordion -->
|
|
<div class="accordion" id="infoAccordion">
|
|
<div class="accordion-item border-top">
|
|
<h3 class="accordion-header" id="headingWarranty">
|
|
<button type="button" class="accordion-button animate-underline collapsed"
|
|
data-bs-toggle="collapse" data-bs-target="#warranty" aria-expanded="false"
|
|
aria-controls="warranty">
|
|
<span class="animate-target me-2">Warranty information</span>
|
|
</button>
|
|
</h3>
|
|
<div class="accordion-collapse collapse" id="warranty" aria-labelledby="headingWarranty"
|
|
data-bs-parent="#infoAccordion">
|
|
<div class="accordion-body">
|
|
<div class="alert d-flex alert-info mb-3" role="alert">
|
|
<i class="ci-check-shield fs-xl mt-1 me-2"></i>
|
|
<div class="fs-sm"><span class="fw-semibold">Warranty:</span> 12 months of
|
|
official manufacturer's warranty. Exchange/return of the product within 14
|
|
days.</div>
|
|
</div>
|
|
<p class="mb-0">Explore the details of our <a class="fw-medium"
|
|
href="#!">product warranties here</a>, including duration, coverage,
|
|
and any additional protection plans available. We prioritize your satisfaction,
|
|
and our warranty information is designed to keep you informed and confident in
|
|
your purchase.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h3 class="accordion-header" id="headingPayment">
|
|
<button type="button" class="accordion-button animate-underline collapsed"
|
|
data-bs-toggle="collapse" data-bs-target="#payment" aria-expanded="false"
|
|
aria-controls="payment">
|
|
<span class="animate-target me-2">Payment and credit</span>
|
|
</button>
|
|
</h3>
|
|
<div class="accordion-collapse collapse" id="payment" aria-labelledby="headingPayment"
|
|
data-bs-parent="#infoAccordion">
|
|
<div class="accordion-body">Experience hassle-free transactions with our <a
|
|
class="fw-medium" href="#!">flexible payment options</a> and credit
|
|
facilities. Learn more about the various payment methods accepted, installment
|
|
plans, and any exclusive credit offers available to make your shopping experience
|
|
seamless.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Sticky product preview + Add to cart CTA -->
|
|
<section class="sticky-product-banner sticky-top d-md-none" data-sticky-element>
|
|
<div class="sticky-product-banner-inner pt-5">
|
|
<div class="bg-body border-bottom border-light border-opacity-10 shadow pt-4 pb-2">
|
|
<div class="container d-flex align-items-center">
|
|
<div class="d-flex align-items-center min-w-0 ms-n2 me-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
|
|
<img src="/img/shop/electronics/thumbs/10.png" alt="iPhone 14">
|
|
</div>
|
|
<div class="w-100 min-w-0 ps-2">
|
|
<h4 class="fs-sm fw-medium text-truncate mb-1">Apple iPhone 14 Plus 128GB Blue</h4>
|
|
<div class="h6 mb-0">$940.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2 ms-auto">
|
|
<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-primary animate-slide-end d-none d-sm-inline-flex">
|
|
<i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
|
|
Add to cart
|
|
</button>
|
|
<button type="button" class="btn btn-icon btn-primary animate-slide-end d-sm-none"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-lg animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Bundle discount (Cheaper together) -->
|
|
<section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
|
|
<div class="bg-body-tertiary rounded-5 pt-5">
|
|
<h2 class="h3 text-center pb-2 py-lg-3">Cheaper together</h2>
|
|
<div class="row justify-content-center px-4 px-md-0">
|
|
<div class="col-md-10">
|
|
<div class="overflow-auto" data-simplebar data-simplebar-auto-hide="false">
|
|
<div class="d-flex align-items-center justify-content-between pb-4 mb-2"
|
|
style="min-width: 840px">
|
|
|
|
<!-- Item -->
|
|
<div class="w-100" style="max-width: 306px">
|
|
<div class="form-check position-relative p-0 m-0 mb-3">
|
|
<input type="checkbox"
|
|
class="form-check-input position-absolute top-0 end-0 mt-3 me-3"
|
|
id="iphone" checked disabled>
|
|
<label for="iphone" class="d-flex justify-content-center bg-body rounded p-3">
|
|
<span class="ratio d-block"
|
|
style="max-width: 258px; --cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/14.png" alt="iPhone 14">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h3 class="mb-2">
|
|
<a class="d-block fs-sm fw-medium animate-underline text-truncate" href="#!">
|
|
<span class="animate-target">Apple iPhone 14 128GB White</span>
|
|
</a>
|
|
</h3>
|
|
<div class="h6 mb-0">$940.00</div>
|
|
</div>
|
|
|
|
<div class="ci-plus fs-4 mt-n5 mx-3 mx-lg-4"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="w-100" style="max-width: 306px">
|
|
<div class="form-check position-relative p-0 m-0 mb-3">
|
|
<input type="checkbox"
|
|
class="form-check-input position-absolute top-0 end-0 mt-3 me-3"
|
|
id="airpods" checked>
|
|
<label for="airpods" class="d-flex justify-content-center bg-body rounded p-3">
|
|
<span class="ratio d-block"
|
|
style="max-width: 258px; --cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/06.png" alt="AirPods 2 Pro">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h3 class="mb-2">
|
|
<a class="d-block fs-sm fw-medium animate-underline text-truncate" href="#!">
|
|
<span class="animate-target">Headphones Apple AirPods 2 Pro</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="badge bg-danger">-32%</span>
|
|
<span class="h6 mb-0">$224.00</span>
|
|
<del class="text-body-tertiary fs-xs">$330.00</del>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ci-plus fs-4 mt-n5 mx-3 mx-lg-4"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="w-100" style="max-width: 306px">
|
|
<div class="form-check position-relative p-0 m-0 mb-3">
|
|
<input type="checkbox"
|
|
class="form-check-input position-absolute top-0 end-0 mt-3 me-3"
|
|
id="charger">
|
|
<label for="charger" class="d-flex justify-content-center bg-body rounded p-3">
|
|
<span class="ratio d-block"
|
|
style="max-width: 258px; --cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/15.png" alt="Wireless charger">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<h3 class="mb-2">
|
|
<a class="d-block fs-sm fw-medium animate-underline text-truncate" href="#!">
|
|
<span class="animate-target">Wireless charger for iPhone</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="badge bg-danger">-48%</span>
|
|
<span class="h6 mb-0">$26.00</span>
|
|
<del class="text-body-tertiary fs-xs">$50.00</del>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="mb-0">
|
|
<div class="row justify-content-center p-4 px-md-0">
|
|
<div class="col-md-10 d-md-flex align-items-center py-md-3">
|
|
<div class="fs-sm me-3 mb-3 mb-md-0">Total for selected products</div>
|
|
<div class="d-flex align-items-center ms-auto">
|
|
<span class="h5 mb-0 me-4">$1,164.00</span>
|
|
<button type="button" class="btn btn-primary ms-auto">Purchase together</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Trending products (Carousel) -->
|
|
<section class="container pb-4 pb-md-5 mb-2 mb-sm-0 mb-lg-2 mb-xl-4">
|
|
<h2 class="h3 border-bottom pb-4 mb-0">Trending products</h2>
|
|
|
|
<!-- Product carousel -->
|
|
<div class="position-relative mx-md-1">
|
|
|
|
<!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
|
|
<button type="button"
|
|
class="trending-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex"
|
|
aria-label="Prev">
|
|
<i class="ci-chevron-left fs-lg animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="trending-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex"
|
|
aria-label="Next">
|
|
<i class="ci-chevron-right fs-lg animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Slider -->
|
|
<div class="swiper py-4 px-sm-3"
|
|
data-swiper='{
|
|
"slidesPerView": 2,
|
|
"spaceBetween": 24,
|
|
"loop": true,
|
|
"navigation": {
|
|
"prevEl": ".trending-prev",
|
|
"nextEl": ".trending-next"
|
|
},
|
|
"breakpoints": {
|
|
"768": {
|
|
"slidesPerView": 3
|
|
},
|
|
"992": {
|
|
"slidesPerView": 4
|
|
}
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="position-relative">
|
|
<div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<span
|
|
class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/01.png" alt="VR Glasses">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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-xs">(123)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">VRB01 Virtual Reality Glasses</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$340.99 <del
|
|
class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="position-relative">
|
|
<div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/02.png" alt="iPhone 14">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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-half text-warning"></i>
|
|
</div>
|
|
<span class="text-body-tertiary fs-xs">(142)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">Apple iPhone 14 128GB White</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$899.00</div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="position-relative">
|
|
<div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/03.png" alt="Smart Watch">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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>
|
|
<span class="text-body-tertiary fs-xs">(67)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">Smart Watch Series 7, White</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between pb-2 mb-1">
|
|
<div class="h5 lh-1 mb-0">$429.00</div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="position-relative">
|
|
<div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<span
|
|
class="badge bg-info position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">New</span>
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/04.png" alt="MacBook">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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-half text-warning"></i>
|
|
</div>
|
|
<span class="text-body-tertiary fs-xs">(51)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$1,200.00</div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="posittion-relative">
|
|
<div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/08.png" alt="Bluetooth Headphones">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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-half text-warning"></i>
|
|
<i class="ci-star text-body-tertiary opacity-75"></i>
|
|
</div>
|
|
<span class="text-body-tertiary fs-xs">(136)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">Wireless Bluetooth Headphones Sony</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$299.00</div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
|
|
<div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
|
|
<button type="button"
|
|
class="trending-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
|
|
aria-label="Prev">
|
|
<i class="ci-chevron-left fs-lg animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="trending-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
|
|
aria-label="Next">
|
|
<i class="ci-chevron-right fs-lg animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Product details and Reviews shared container -->
|
|
<section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
|
|
<div class="row">
|
|
<div class="col-md-7">
|
|
|
|
<!-- Product details -->
|
|
<h2 class="h3 pb-2 pb-md-3">Product details</h2>
|
|
<h3 class="h6">General specs</h3>
|
|
<ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-3 m-0 mb-2 mb-sm-3">
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Model:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">iPhone 14 Plus</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Manufacturer:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">Apple Inc.</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Finish:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">Ceramic, Glass, Aluminium</span>
|
|
<i class="ci-info fs-base text-body-tertiary position-absolute top-50 end-0 translate-middle-y"
|
|
data-bs-toggle="popover" data-bs-trigger="hover" data-bs-custom-class="popover-sm"
|
|
data-bs-content="Ceramic shield front, Glass back and Aluminium design"></i>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Capacity:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">128GB</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Chip:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">A15 Bionic chip</span>
|
|
</li>
|
|
</ul>
|
|
<h3 class="h6">Display</h3>
|
|
<ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-1 m-0 mb-2 mb-sm-3">
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Diagonal:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">6.1"</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Screen type:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">Super Retina XDR</span>
|
|
<i class="ci-info fs-base text-body-tertiary position-absolute top-50 end-0 translate-middle-y"
|
|
data-bs-toggle="popover" data-bs-trigger="hover" data-bs-custom-class="popover-sm"
|
|
data-bs-content="HDR display, True Tone, Wide color (P3), Haptic Touch, 800 nits brightness"></i>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Resolution:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">2778x1284px at 458ppi</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Refresh rate:</span>
|
|
<span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
|
|
<span class="text-dark-emphasis fw-medium text-end">120 Hz</span>
|
|
</li>
|
|
</ul>
|
|
<div class="nav">
|
|
<a class="nav-link text-primary animate-underline px-0"
|
|
href="{{ route('second', ['shop', 'product-details-electronics'])}}">
|
|
<span class="animate-target">See all product details</span>
|
|
<i class="ci-chevron-right fs-base ms-1"></i>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<!-- Reviews -->
|
|
<div class="d-flex align-items-center pt-5 mb-4 mt-2 mt-md-3 mt-lg-4" id="reviews"
|
|
style="scroll-margin-top: 80px">
|
|
<h2 class="h3 mb-0">Reviews</h2>
|
|
<button type="button" class="btn btn-secondary ms-auto" data-bs-toggle="modal"
|
|
data-bs-target="#reviewForm">
|
|
<i class="ci-edit-3 fs-base ms-n1 me-2"></i>
|
|
Leave a review
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Reviews stats -->
|
|
<div class="row g-4 pb-3">
|
|
<div class="col-sm-4">
|
|
|
|
<!-- Overall rating card -->
|
|
<div
|
|
class="d-flex flex-column align-items-center justify-content-center h-100 bg-body-tertiary rounded p-4">
|
|
<div class="h1 pb-2 mb-1">4.1</div>
|
|
<div class="hstack justify-content-center gap-1 fs-sm mb-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-60"></i>
|
|
</div>
|
|
<div class="fs-sm">68 reviews</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
|
|
<!-- Rating breakdown by quantity -->
|
|
<div class="vstack gap-3">
|
|
|
|
<!-- 5 stars -->
|
|
<div class="hstack gap-2">
|
|
<div class="hstack fs-sm gap-1">
|
|
5<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<div class="progress w-100" role="progressbar" aria-label="Five stars"
|
|
aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
|
|
<div class="progress-bar bg-warning rounded-pill" style="width: 54%"></div>
|
|
</div>
|
|
<div class="fs-sm text-nowrap text-end" style="width: 40px;">37</div>
|
|
</div>
|
|
|
|
<!-- 4 stars -->
|
|
<div class="hstack gap-2">
|
|
<div class="hstack fs-sm gap-1">
|
|
4<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<div class="progress w-100" role="progressbar" aria-label="Four stars"
|
|
aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
|
|
<div class="progress-bar bg-warning rounded-pill" style="width: 23.5%"></div>
|
|
</div>
|
|
<div class="fs-sm text-nowrap text-end" style="width: 40px;">16</div>
|
|
</div>
|
|
|
|
<!-- 3 stars -->
|
|
<div class="hstack gap-2">
|
|
<div class="hstack fs-sm gap-1">
|
|
3<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<div class="progress w-100" role="progressbar" aria-label="Three stars"
|
|
aria-valuenow="13" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
|
|
<div class="progress-bar bg-warning rounded-pill" style="width: 13%"></div>
|
|
</div>
|
|
<div class="fs-sm text-nowrap text-end" style="width: 40px;">9</div>
|
|
</div>
|
|
|
|
<!-- 2 stars -->
|
|
<div class="hstack gap-2">
|
|
<div class="hstack fs-sm gap-1">
|
|
2<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<div class="progress w-100" role="progressbar" aria-label="Two stars"
|
|
aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
|
|
<div class="progress-bar bg-warning rounded-pill" style="width: 6%"></div>
|
|
</div>
|
|
<div class="fs-sm text-nowrap text-end" style="width: 40px;">4</div>
|
|
</div>
|
|
|
|
<!-- 1 star -->
|
|
<div class="hstack gap-2">
|
|
<div class="hstack fs-sm gap-1">
|
|
1<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<div class="progress w-100" role="progressbar" aria-label="One star"
|
|
aria-valuenow="3.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
|
|
<div class="progress-bar bg-warning rounded-pill" style="width: 3.5%"></div>
|
|
</div>
|
|
<div class="fs-sm text-nowrap text-end" style="width: 40px;">3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="border-bottom py-3 mb-3">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="text-nowrap me-3">
|
|
<span class="h6 mb-0">Rafael Marquez</span>
|
|
<i class="ci-check-circle text-success align-middle ms-1" data-bs-toggle="tooltip"
|
|
data-bs-placement="top" data-bs-custom-class="tooltip-sm"
|
|
data-bs-title="Verified customer"></i>
|
|
</div>
|
|
<span class="text-body-secondary fs-sm ms-auto">June 28, 2024</span>
|
|
</div>
|
|
<div class="d-flex gap-1 fs-sm pb-2 mb-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>
|
|
</div>
|
|
<ul class="list-inline gap-2 pb-2 mb-1">
|
|
<li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Blue</li>
|
|
<li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
|
|
</ul>
|
|
<p class="fs-sm">The phone has a new A15 Bionic chip, which makes it lightning-fast and
|
|
responsive. The camera system has also been upgraded, and it now includes a 12-megapixel
|
|
ultra-wide lens and a 12-megapixel wide lens.</p>
|
|
<ul class="list-unstyled fs-sm pb-2 mb-1">
|
|
<li><span class="text-dark-emphasis fw-medium">Pros:</span> Powerful A15 Bionic chip, improved
|
|
camera</li>
|
|
<li><span class="text-dark-emphasis fw-medium">Cons:</span> High price tag</li>
|
|
</ul>
|
|
<div class="nav align-items-center">
|
|
<button type="button" class="nav-link animate-underline px-0">
|
|
<i class="ci-corner-down-right fs-base ms-1 me-1"></i>
|
|
<span class="animate-target">Reply</span>
|
|
</button>
|
|
<button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
|
|
<i class="ci-thumbs-up fs-base animate-target me-1"></i>
|
|
0
|
|
</button>
|
|
<hr class="vr my-2 mx-3">
|
|
<button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
|
|
<i class="ci-thumbs-down fs-base animate-target me-1"></i>
|
|
0
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="border-bottom py-3 mb-3">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="text-nowrap me-3">
|
|
<span class="h6 mb-0">Daniel Adams</span>
|
|
</div>
|
|
<span class="text-body-secondary fs-sm ms-auto">May 15, 2024</span>
|
|
</div>
|
|
<div class="d-flex gap-1 fs-sm pb-2 mb-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 text-body-tertiary opacity-75"></i>
|
|
</div>
|
|
<ul class="list-inline gap-2 pb-2 mb-1">
|
|
<li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Blue</li>
|
|
<li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
|
|
</ul>
|
|
<p class="fs-sm">The phone has a new A15 Bionic chip, which makes it lightning-fast and
|
|
responsive. The camera system has also been upgraded, and it now includes a 12-megapixel
|
|
ultra-wide lens and a 12-megapixel wide lens.</p>
|
|
<ul class="list-unstyled fs-sm pb-2 mb-1">
|
|
<li><span class="text-dark-emphasis fw-medium">Pros:</span> Powerful A15 Bionic chip, improved
|
|
camera</li>
|
|
<li><span class="text-dark-emphasis fw-medium">Cons:</span> High price tag</li>
|
|
</ul>
|
|
<div class="nav align-items-center">
|
|
<button type="button" class="nav-link animate-underline px-0">
|
|
<i class="ci-corner-down-right fs-base ms-1 me-1"></i>
|
|
<span class="animate-target">Reply</span>
|
|
</button>
|
|
<button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
|
|
<i class="ci-thumbs-up text-success fs-base animate-target me-1"></i>
|
|
18
|
|
</button>
|
|
<hr class="vr my-2 mx-3">
|
|
<button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
|
|
<i class="ci-thumbs-down text-danger fs-base animate-target me-1"></i>
|
|
2
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<a class="nav-link text-primary animate-underline px-0"
|
|
href="{{ route('second', ['shop', 'product-reviews-electronics'])}}">
|
|
<span class="animate-target">See all reviews</span>
|
|
<i class="ci-chevron-right fs-base ms-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Sticky product preview visible on screens > 991px wide (lg breakpoint) -->
|
|
<aside class="col-md-5 col-xl-4 offset-xl-1 d-none d-md-block" style="margin-top: -100px">
|
|
<div class="position-sticky top-0 ps-3 ps-lg-4 ps-xl-0" style="padding-top: 100px">
|
|
<div class="border rounded p-3 p-lg-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
|
|
<img src="/img/shop/electronics/thumbs/10.png" width="110" alt="iPhone 14">
|
|
</div>
|
|
<div class="w-100 min-w-0 ps-2 ps-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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-xs">68</span>
|
|
</div>
|
|
<h4 class="fs-sm fw-medium mb-2">Apple iPhone 14 Plus 128GB Blue</h4>
|
|
<div class="h5 mb-0">$940.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2 gap-lg-3">
|
|
<button type="button" class="btn btn-primary w-100 animate-slide-end">
|
|
<i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
|
|
Add to cart
|
|
</button>
|
|
<button type="button" class="btn btn-icon btn-secondary animate-pulse"
|
|
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 fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-icon btn-secondary animate-rotate"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
|
|
data-bs-title="Compare" aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Viewed products (Carousel) -->
|
|
<section class="container pb-4 pb-md-5 mb-2 mb-sm-0 mb-lg-2 mb-xl-4">
|
|
<h2 class="h3 border-bottom pb-4 mb-0">Viewed products</h2>
|
|
|
|
<!-- Product carousel -->
|
|
<div class="position-relative mx-md-1">
|
|
|
|
<!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
|
|
<button type="button"
|
|
class="viewed-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex"
|
|
aria-label="Prev">
|
|
<i class="ci-chevron-left fs-lg animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="viewed-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex"
|
|
aria-label="Next">
|
|
<i class="ci-chevron-right fs-lg animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Slider -->
|
|
<div class="swiper py-4 px-sm-3"
|
|
data-swiper='{
|
|
"slidesPerView": 2,
|
|
"spaceBetween": 24,
|
|
"loop": true,
|
|
"navigation": {
|
|
"prevEl": ".viewed-prev",
|
|
"nextEl": ".viewed-next"
|
|
},
|
|
"breakpoints": {
|
|
"768": {
|
|
"slidesPerView": 3
|
|
},
|
|
"992": {
|
|
"slidesPerView": 4
|
|
}
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="position-relative">
|
|
<div
|
|
class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/13.png" alt="Dualsense Edge">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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>
|
|
<span class="text-body-tertiary fs-xs">(187)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">Sony Dualsense Edge Controller</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$200.00</div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="position-relative">
|
|
<div
|
|
class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<span
|
|
class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-17%</span>
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/11.png" alt="Nikon Camera">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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>
|
|
<span class="text-body-tertiary fs-xs">(14)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">VRB01 Camera Nikon Max</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$652.00 <del
|
|
class="text-body-tertiary fs-sm fw-normal">$785.00</del></div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="position-relative">
|
|
<div
|
|
class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/10.png" alt="iPhone 14">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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-half text-warning"></i>
|
|
</div>
|
|
<span class="text-body-tertiary fs-xs">(335)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">Apple iPhone 14 128GB Blue</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$899.00</div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="posittion-relative">
|
|
<div
|
|
class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/07.png" alt="iPad Pro">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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-half text-warning"></i>
|
|
</div>
|
|
<span class="text-body-tertiary fs-xs">(49)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">Tablet Apple iPad Pro M1</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$739.00</div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide">
|
|
<div class="product-card animate-underline hover-effect-opacity bg-body rounded">
|
|
<div class="position-relative">
|
|
<div
|
|
class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
|
|
aria-label="Compare">
|
|
<i class="ci-refresh-cw fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
|
|
<i class="ci-more-vertical fs-lg"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-heart fs-sm ms-n1 me-2"></i>
|
|
Add to Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#!">
|
|
<i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
|
|
Compare
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
|
|
<img src="/img/shop/electronics/06.png" alt="AirPods 2">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<div class="d-flex gap-1 fs-xs">
|
|
<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-xs">(78)</span>
|
|
</div>
|
|
<h3 class="pb-1 mb-2">
|
|
<a class="d-block fs-sm fw-medium text-truncate" href="#!">
|
|
<span class="animate-target">Headphones Apple AirPods 2 Pro</span>
|
|
</a>
|
|
</h3>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="h5 lh-1 mb-0">$224.00</div>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
|
|
<div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
|
|
<button type="button"
|
|
class="viewed-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
|
|
aria-label="Prev">
|
|
<i class="ci-chevron-left fs-lg animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="viewed-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
|
|
aria-label="Next">
|
|
<i class="ci-chevron-right fs-lg animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Subscription form + Vlog -->
|
|
<section class="bg-body-tertiary py-5">
|
|
<div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
|
|
<div class="row">
|
|
<div class="col-md-6 col-lg-5 mb-5 mb-md-0">
|
|
<h2 class="h4 mb-2">Sign up to our newsletter</h2>
|
|
<p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products & promotions
|
|
</p>
|
|
<form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
|
|
<div class="position-relative w-100 me-2">
|
|
<input type="email" class="form-control form-control-lg" placeholder="Your email"
|
|
required>
|
|
</div>
|
|
<button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
|
|
</form>
|
|
<div class="d-flex gap-3">
|
|
<a class="btn btn-icon btn-secondary rounded-circle" href="#!"
|
|
aria-label="Instagram">
|
|
<i class="ci-instagram fs-base"></i>
|
|
</a>
|
|
<a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
|
|
<i class="ci-facebook fs-base"></i>
|
|
</a>
|
|
<a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
|
|
<i class="ci-youtube fs-base"></i>
|
|
</a>
|
|
<a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
|
|
<i class="ci-telegram fs-base"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
|
|
<ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
|
|
<li class="nav flex-nowrap align-items-center position-relative">
|
|
<img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140"
|
|
alt="Video cover">
|
|
<div class="ps-3">
|
|
<div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
|
|
<a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
|
|
New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav flex-nowrap align-items-center position-relative">
|
|
<img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140"
|
|
alt="Video cover">
|
|
<div class="ps-3">
|
|
<div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
|
|
<a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
|
|
Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav flex-nowrap align-items-center position-relative">
|
|
<img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140"
|
|
alt="Video cover">
|
|
<div class="ps-3">
|
|
<div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
|
|
<a class="nav-link fs-sm hover-effect-underline stretched-link p-0"
|
|
href="#!">Top 5 New Amazing Gadgets on Cartzilla You Must See</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="nav ps-md-4 ps-lg-0">
|
|
<a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
|
|
<span class="animate-target">View all</span>
|
|
<i class="ci-chevron-right fs-base ms-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
@include('layouts.partials/footer')
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@endsection
|