772 lines
51 KiB
PHP
772 lines
51 KiB
PHP
@extends('layouts.landing', ['title' => 'Electronics Store - Product Details'])
|
|
|
|
@section('content')
|
|
@include('layouts.partials/offcanvas')
|
|
|
|
@include('layouts.partials/navbar', ['wishlist' => true])
|
|
|
|
<!-- Page content -->
|
|
<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 -->
|
|
<section class="container position-relative z-2 pb-4 pb-md-5 mb-2 mb-md-0">
|
|
<div class="border-bottom">
|
|
<ul class="nav nav-underline flex-nowrap gap-4">
|
|
<li class="nav-item me-sm-2">
|
|
<a class="nav-link" href="{{ route('second', ['shop', 'product-general-electronics'])}}">General info</a>
|
|
</li>
|
|
<li class="nav-item me-sm-2">
|
|
<a class="nav-link pe-none active" href="#!">Product details</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ route('second', ['shop', 'product-reviews-electronics'])}}">Reviews (68)</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Product details + Sticky sidebar -->
|
|
<section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
|
|
<div class="row">
|
|
|
|
<!-- Sticky product preview -->
|
|
<aside class="col-md-5 col-xl-4 offset-xl-1 order-md-2 mb-5 mb-md-0" id="scrollPastPoint"
|
|
style="margin-top: -100px">
|
|
<div class="position-sticky top-0 ps-md-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>
|
|
|
|
|
|
<!-- Sticky product preview + Add to cart CTA -->
|
|
<section class="sticky-product-banner sticky-top d-md-none start-0 ms-n4" data-sticky-element>
|
|
<div class="sticky-product-banner-inner start-0 pt-5">
|
|
<div class="vw-100 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>
|
|
|
|
|
|
<!-- Product details -->
|
|
<div class="col-md-7 order-md-1">
|
|
<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-3 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>
|
|
<h3 class="h6">Camera</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>Front camera:</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">12MP</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Main camera:</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">12MP Ultra Wide</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Zoom:</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">2x opical, 5x digital</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Video:</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">4K video recording</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="4K video, 1080p HD video, 720p HD video, Cinematic mode, Action mode"></i>
|
|
</li>
|
|
</ul>
|
|
<h3 class="h6">Power and Battery</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>Fast charging:</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">Yes</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Wireless charging:</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">Yes</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Charging power:</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">up to 15W</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Video playback:</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">Up to 26 hours</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Audio playback:</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">Up to 100 hours</span>
|
|
</li>
|
|
</ul>
|
|
<h3 class="h6">Size and Weight</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>Height:</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">160.8 mm</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Width:</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">78.1 mm</span>
|
|
</li>
|
|
<li class="d-flex align-items-center position-relative pe-4">
|
|
<span>Weight:</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">203 grams</span>
|
|
</li>
|
|
</ul>
|
|
<div class="alert d-flex alert-info mb-2 mb-sm-3" role="alert">
|
|
<i class="ci-info fs-lg pe-1 me-2" style="margin-top: .125rem"></i>
|
|
<div class="fs-sm">Product specifications and equipment are subject to change without notice.
|
|
</div>
|
|
</div>
|
|
<div class="pt-3">
|
|
<h3 class="h6">Do you have any questions?</h3>
|
|
<a class="btn btn-sm btn-primary" href="#!">Contact us</a>
|
|
</div>
|
|
</div>
|
|
</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
|