1183 lines
90 KiB
PHP
1183 lines
90 KiB
PHP
@extends('layouts.landing', ['title' => 'Multipurpose E-Commerce Bootstrap HTML Template'])
|
|
|
|
@section('css')
|
|
<style>
|
|
#furniture,
|
|
#marketplace {
|
|
--cz-aspect-ratio: calc(398 / 773 * 100%);
|
|
max-width: 773px;
|
|
}
|
|
|
|
#grocery,
|
|
#single-store {
|
|
--cz-aspect-ratio: calc(398 / 627 * 100%);
|
|
max-width: 627px;
|
|
}
|
|
|
|
#fashion-1 {
|
|
--cz-aspect-ratio: calc(398 / 370 * 100%);
|
|
max-width: 370px;
|
|
}
|
|
|
|
#electronics {
|
|
--cz-aspect-ratio: calc(398 / 540 * 100%);
|
|
max-width: 540px;
|
|
}
|
|
|
|
#fashion-2 {
|
|
--cz-aspect-ratio: calc(398 / 466 * 100%);
|
|
max-width: 466px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
#furniture,
|
|
#marketplace,
|
|
#grocery,
|
|
#single-store,
|
|
#fashion-1,
|
|
#electronics,
|
|
#fashion-2 {
|
|
--cz-aspect-ratio: calc(400 / 735 * 100%);
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
|
|
#furniture,
|
|
#marketplace {
|
|
--cz-aspect-ratio: calc(398 / 627 * 100%);
|
|
}
|
|
|
|
#grocery,
|
|
#single-store {
|
|
--cz-aspect-ratio: calc(398 / 627 * 100%);
|
|
}
|
|
|
|
#fashion-1 {
|
|
--cz-aspect-ratio: calc(398 / 627 * 100%);
|
|
}
|
|
|
|
#electronics {
|
|
--cz-aspect-ratio: calc(398 / 627 * 100%);
|
|
}
|
|
|
|
#fashion-2 {
|
|
--cz-aspect-ratio: calc(398 / 627 * 100%);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 540px) {
|
|
#fashion-1 {
|
|
--cz-aspect-ratio: calc(398 / 500 * 100%);
|
|
}
|
|
|
|
#fashion-2 {
|
|
--cz-aspect-ratio: calc(398 / 500 * 100%);
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Navigation bar (Page header) -->
|
|
<header class="navbar navbar-expand-lg bg-body navbar-sticky sticky-top px-0" data-sticky-element>
|
|
<div class="container flex-nowrap">
|
|
|
|
<!-- Mobile offcanvas menu toggler (Hamburger) -->
|
|
<button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas" data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Navbar brand (Logo) -->
|
|
<a href="/" class="navbar-brand py-1 py-md-2 py-xl-1">
|
|
<span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
|
|
<path
|
|
d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
|
|
fill="currentColor" />
|
|
<g fill="#fff">
|
|
<path
|
|
d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
|
|
<use href="#czlogo" />
|
|
<use href="#czlogo" x="8.516" y="-2.172" />
|
|
</g>
|
|
<defs>
|
|
<path id="czlogo"
|
|
d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
|
|
</defs>
|
|
</svg>
|
|
</span>
|
|
Cartzilla
|
|
</a>
|
|
|
|
<!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
|
|
<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
|
|
<div class="offcanvas-header py-3">
|
|
<h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
|
|
<ul class="navbar-nav position-relative">
|
|
<li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
|
|
<a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
|
|
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
|
|
<li class="hover-effect-opacity px-2 mx-n2">
|
|
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
|
|
<span class="fw-medium">Electronics Store</span>
|
|
<span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
|
|
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
|
|
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
|
|
<img class="position-relative z-2 d-none-dark"
|
|
src="/img/mega-menu/demo-preview/electronics-light.jpg"
|
|
alt="Electronics Store">
|
|
<img class="position-relative z-2 d-none d-block-dark"
|
|
src="/img/mega-menu/demo-preview/electronics-dark.jpg"
|
|
alt="Electronics Store">
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
|
|
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
|
|
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="hover-effect-opacity px-2 mx-n2">
|
|
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
|
|
<span class="fw-medium">Fashion Store v.1</span>
|
|
<span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
|
|
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
|
|
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
|
|
<img class="position-relative z-2 d-none-dark"
|
|
src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
|
|
alt="Fashion Store v.1">
|
|
<img class="position-relative z-2 d-none d-block-dark"
|
|
src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
|
|
alt="Fashion Store v.1">
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
|
|
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
|
|
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="hover-effect-opacity px-2 mx-n2">
|
|
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
|
|
<span class="fw-medium">Fashion Store v.2</span>
|
|
<span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
|
|
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
|
|
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
|
|
<img class="position-relative z-2 d-none-dark"
|
|
src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
|
|
alt="Fashion Store v.2">
|
|
<img class="position-relative z-2 d-none d-block-dark"
|
|
src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
|
|
alt="Fashion Store v.2">
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
|
|
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
|
|
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="hover-effect-opacity px-2 mx-n2">
|
|
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
|
|
<span class="fw-medium">Furniture Store</span>
|
|
<span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
|
|
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
|
|
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
|
|
<img class="position-relative z-2 d-none-dark"
|
|
src="/img/mega-menu/demo-preview/furniture-light.jpg"
|
|
alt="Furniture Store">
|
|
<img class="position-relative z-2 d-none d-block-dark"
|
|
src="/img/mega-menu/demo-preview/furniture-dark.jpg"
|
|
alt="Furniture Store">
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
|
|
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
|
|
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="hover-effect-opacity px-2 mx-n2">
|
|
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
|
|
<span class="fw-medium">Grocery Store</span>
|
|
<span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
|
|
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
|
|
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
|
|
<img class="position-relative z-2 d-none-dark"
|
|
src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
|
|
<img class="position-relative z-2 d-none d-block-dark"
|
|
src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
|
|
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
|
|
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="hover-effect-opacity px-2 mx-n2">
|
|
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
|
|
<span class="fw-medium">Marketplace</span>
|
|
<span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
|
|
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
|
|
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
|
|
<img class="position-relative z-2 d-none-dark"
|
|
src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
|
|
<img class="position-relative z-2 d-none d-block-dark"
|
|
src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
|
|
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
|
|
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="hover-effect-opacity px-2 mx-n2">
|
|
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
|
|
<span class="fw-medium">Single Product Store</span>
|
|
<span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
|
|
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
|
|
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
|
|
<img class="position-relative z-2 d-none-dark"
|
|
src="/img/mega-menu/demo-preview/single-store-light.jpg"
|
|
alt="Single Product Store">
|
|
<img class="position-relative z-2 d-none d-block-dark"
|
|
src="/img/mega-menu/demo-preview/single-store-dark.jpg"
|
|
alt="Single Product Store">
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
|
|
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
|
|
<span
|
|
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
|
|
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown position-static py-lg-2 me-lg-n1 me-xl-0">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
|
data-bs-trigger="hover" aria-expanded="false">Shop</a>
|
|
<div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .875rem">
|
|
<div class="d-flex flex-column flex-lg-row gap-4">
|
|
<div style="min-width: 190px">
|
|
<div class="h6 mb-2">Electronics Store</div>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h6 pt-4 mb-2">Fashion Store</div>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h6 pt-4 mb-2">Furniture Store</div>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style="min-width: 190px">
|
|
<div class="h6 mb-2">Grocery Store</div>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h6 pt-4 mb-2">Marketplace</div>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style="min-width: 190px">
|
|
<div class="h6 mb-2">Checkout v.1</div>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h6 pt-4 mb-2">Checkout v.2</div>
|
|
<ul class="nav flex-column gap-2 mt-0">
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
|
|
</li>
|
|
<li class="d-flex w-100 pt-1">
|
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
|
data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
|
|
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
|
|
<li class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
|
|
Pages</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
|
|
Recovery</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
|
|
User</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover"
|
|
aria-expanded="false">Marketplace User</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item"
|
|
href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
|
|
</li>
|
|
<li><a class="dropdown-item"
|
|
href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
|
|
<li><a class="dropdown-item"
|
|
href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
|
data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
|
|
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
|
|
<li class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover"
|
|
aria-expanded="false">Contact</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
|
|
Center</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
|
|
Article v.1</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
|
|
Article v.2</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
|
|
data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
|
|
Error</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
|
|
<li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms & Conditions</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Button group -->
|
|
<div class="d-flex gap-3 gap-sm-4">
|
|
|
|
<!-- Theme switcher (light/dark/auto) -->
|
|
<div class="dropdown">
|
|
<button type="button"
|
|
class="theme-switcher btn btn-icon btn-secondary fs-lg rounded-circle animate-scale"
|
|
data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false"
|
|
aria-label="Toggle theme (light)">
|
|
<span class="theme-icon-active d-flex animate-target">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
</button>
|
|
<ul class="dropdown-menu start-50 translate-middle-x"
|
|
style="--cz-dropdown-min-width: 9rem; --cz-dropdown-spacer: .5rem">
|
|
<li>
|
|
<button type="button" class="dropdown-item active" data-bs-theme-value="light"
|
|
aria-pressed="true">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
<span class="theme-label">Light</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="dark"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-moon"></i>
|
|
</span>
|
|
<span class="theme-label">Dark</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="auto"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-auto"></i>
|
|
</span>
|
|
<span class="theme-label">Auto</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Buy button -->
|
|
<a class="btn btn-primary animate-slide-end"
|
|
href=""
|
|
target="_blank" rel="noreferrer">
|
|
<i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
|
|
Buy now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page content -->
|
|
<main class="content-wrapper">
|
|
|
|
<!-- Hero (Demos) -->
|
|
<section class="pt-4 pt-sm-5 mt-3 mt-sm-0">
|
|
|
|
<!-- Title -->
|
|
<div class="container text-center pt-lg-2 pt-xl-3 mx-auto pb-4 pb-sm-0 mb-3 mb-sm-5" style="max-width: 680px">
|
|
<h1 class="display-5 pb-md-2">Multipurpose <span class="text-nowrap">Bootstrap 5</span> <span
|
|
class="text-nowrap">E-Commerce</span> Template</h1>
|
|
<p class="fs-lg mb-0">Unlock the potential of your online business with our premium e-commerce front-end
|
|
template, carefully crafted on the latest Bootstrap framework.</p>
|
|
</div>
|
|
|
|
<!-- Grid -->
|
|
<div class="container-fluid d-flex flex-column gap-4" style="max-width: 1456px">
|
|
<div class="d-flex flex-column flex-md-row gap-4">
|
|
|
|
<!-- Furniture store -->
|
|
<div class="hover-effect-scale ratio" id="furniture" style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
|
|
<div
|
|
class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
|
|
<h2 class="h3 d-none d-lg-block pb-2 mb-1">Furniture Store</h2>
|
|
<h2 class="h4 d-lg-none mb-2">Furniture Store</h2>
|
|
<p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
|
|
Explore a curated collection of stylish and modern furniture for every room.</p>
|
|
<a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
|
|
href="{{ route('second', ['home', 'furniture']) }}">
|
|
<span class="animate-target">View demo</span>
|
|
<i class="ci-chevron-right fs-base mt-1 ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div class="hover-effect-target d-flex align-items-end h-100 overflow-hidden rounded-5">
|
|
<div class="position-relative z-1 rtl-flip">
|
|
<img src="/img/intro/demos/furniture-light.png" class="hover-effect-target d-none-dark"
|
|
width="773" alt="Furniture Store">
|
|
<img src="/img/intro/demos/furniture-dark.png"
|
|
class="hover-effect-target d-none d-block-dark" width="773" alt="Furniture Store">
|
|
</div>
|
|
<span class="bg-body-secondary position-absolute top-0 start-0 w-100 h-100 d-none-dark"></span>
|
|
<span class="bg-dark position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grocery store -->
|
|
<div class="hover-effect-scale ratio" id="grocery"
|
|
style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
|
|
<div
|
|
class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
|
|
<h2 class="h3 text-white d-none d-lg-block pb-2 mb-1">Grocery Store</h2>
|
|
<h2 class="h4 text-white d-lg-none mb-2">Grocery Store</h2>
|
|
<p class="text-white opacity-75 fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block"
|
|
style="max-width: 250px">Fresh, organic, and local groceries delivered right to your
|
|
doorstep.</p>
|
|
<a class="nav-link animate-underline stretched-link text-white py-1 px-0"
|
|
href="{{ route('second', ['home', 'grocery']) }}">
|
|
<span class="animate-target">View demo</span>
|
|
<i class="ci-chevron-right fs-base mt-1 ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
|
|
<div class="position-relative z-1 rtl-flip">
|
|
<img src="/img/intro/demos/grocery-light.png" class="hover-effect-target d-none-dark"
|
|
width="627" alt="Grocery Store">
|
|
<img src="/img/intro/demos/grocery-dark.png"
|
|
class="hover-effect-target d-none d-block-dark" width="627" alt="Grocery Store">
|
|
</div>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
|
|
style="background-color: #708b88"></span>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
|
|
style="background-color: #49595a"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column flex-md-row gap-4">
|
|
|
|
<!-- Fashion store v.1 -->
|
|
<div class="hover-effect-scale ratio" id="fashion-1"
|
|
style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
|
|
<div
|
|
class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
|
|
<h2 class="h3 text-white d-none d-lg-block pb-2 mb-1">Fashion Store v.1</h2>
|
|
<h2 class="h4 text-white d-lg-none mb-2">Fashion Store v.1</h2>
|
|
<p class="text-white opacity-75 fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block"
|
|
style="max-width: 250px">Discover the newest trends in fashion with our exclusive designer
|
|
wear.</p>
|
|
<a class="nav-link animate-underline stretched-link text-white py-1 px-0"
|
|
href="{{ route('second', ['home', 'fashion-v1']) }}">
|
|
<span class="animate-target">View demo</span>
|
|
<i class="ci-chevron-right fs-base mt-1 ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
|
|
<div class="position-relative z-1 rtl-flip">
|
|
<img src="/img/intro/demos/fashion-1-light.png" class="hover-effect-target d-none-dark"
|
|
width="370" alt="Fashion Store v.1">
|
|
<img src="/img/intro/demos/fashion-1-dark.png"
|
|
class="hover-effect-target d-none d-block-dark" width="370"
|
|
alt="Fashion Store v.1">
|
|
</div>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100"
|
|
style="background-color: #333d4c"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fashion store v.2 -->
|
|
<div class="hover-effect-scale ratio" id="fashion-2"
|
|
style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
|
|
<div
|
|
class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
|
|
<h2 class="h3 d-none d-lg-block pb-2 mb-1">Fashion Store v.2</h2>
|
|
<h2 class="h4 d-lg-none mb-2">Fashion Store v.2</h2>
|
|
<p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
|
|
Unleash your style with our versatile and affordable fashion finds.</p>
|
|
<a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
|
|
href="{{ route('second', ['home', 'fashion-v2']) }}">
|
|
<span class="animate-target">View demo</span>
|
|
<i class="ci-chevron-right fs-base mt-1 ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
|
|
<div class="position-relative z-1 rtl-flip">
|
|
<img src="/img/intro/demos/fashion-2-light.png" class="hover-effect-target d-none-dark"
|
|
width="466" alt="Fashion Store v.2">
|
|
<img src="/img/intro/demos/fashion-2-dark.png"
|
|
class="hover-effect-target d-none d-block-dark" width="466"
|
|
alt="Fashion Store v.2">
|
|
</div>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
|
|
style="background-color: #f3eef3"></span>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
|
|
style="background-color: #35313a"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Electronics store -->
|
|
<div class="hover-effect-scale ratio" id="electronics"
|
|
style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
|
|
<div
|
|
class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
|
|
<h2 class="h3 d-none d-lg-block pb-2 mb-1">Electronics Store</h2>
|
|
<h2 class="h4 d-lg-none mb-2">Electronics Store</h2>
|
|
<p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
|
|
Your one-stop shop for the latest in tech gadgets and electronics.</p>
|
|
<a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
|
|
href="{{ route('second', ['home', 'electronics']) }}">
|
|
<span class="animate-target">View demo</span>
|
|
<i class="ci-chevron-right fs-base mt-1 ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
|
|
<div class="position-relative z-1 rtl-flip">
|
|
<img src="/img/intro/demos/electronics-light.png" class="hover-effect-target d-none-dark"
|
|
width="540" alt="Electronics Store">
|
|
<img src="/img/intro/demos/electronics-dark.png"
|
|
class="hover-effect-target d-none d-block-dark" width="540"
|
|
alt="Electronics Store">
|
|
</div>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
|
|
style="background-color: #ccdff5"></span>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
|
|
style="background-color: #212c3d"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column flex-md-row gap-4">
|
|
|
|
<!-- Single Product store -->
|
|
<div class="hover-effect-scale ratio" id="single-store"
|
|
style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
|
|
<div
|
|
class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
|
|
<h2 class="h3 d-none d-lg-block pb-2 mb-1">Single Product Store</h2>
|
|
<h2 class="h4 d-lg-none mb-2">Single Product Store</h2>
|
|
<p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
|
|
Highlight your hero product with a clean, focused shopping experience.</p>
|
|
<a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
|
|
href="{{ route('second', ['home', 'single-store']) }}">
|
|
<span class="animate-target">View demo</span>
|
|
<i class="ci-chevron-right fs-base mt-1 ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
|
|
<div class="position-relative z-1 rtl-flip">
|
|
<img src="/img/intro/demos/single-store-light.png" class="hover-effect-target d-none-dark"
|
|
width="627" alt="Single Product Store">
|
|
<img src="/img/intro/demos/single-store-dark.png"
|
|
class="hover-effect-target d-none d-block-dark" width="627"
|
|
alt="Single Product Store">
|
|
</div>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
|
|
style="background: linear-gradient(90deg, rgba(249,235,200,1) 0%, rgba(252,202,197,1) 100%)"></span>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
|
|
style="background: linear-gradient(119deg, #333126 0%, #372e2f 52.24%)"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Marketplace -->
|
|
<div class="hover-effect-scale ratio" id="marketplace"
|
|
style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
|
|
<div
|
|
class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
|
|
<h2 class="h3 d-none d-lg-block pb-2 mb-1">Marketplace</h2>
|
|
<h2 class="h4 d-lg-none mb-2">Marketplace</h2>
|
|
<p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
|
|
Discover digital goods from top creators in a vibrant multi-vendor marketplace.</p>
|
|
<a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
|
|
href="{{ route('second', ['home', 'marketplace']) }}">
|
|
<span class="animate-target">View demo</span>
|
|
<i class="ci-chevron-right fs-base mt-1 ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div class="hover-effect-target d-flex align-items-end h-100 overflow-hidden rounded-5">
|
|
<div class="position-relative z-1 rtl-flip">
|
|
<img src="/img/intro/demos/marketplace-light.png" class="hover-effect-target d-none-dark"
|
|
width="773" alt="Marketplace">
|
|
<img src="/img/intro/demos/marketplace-dark.png"
|
|
class="hover-effect-target d-none d-block-dark" width="773" alt="Marketplace">
|
|
</div>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
|
|
style="background: linear-gradient(90deg, rgba(203,201,233, .6) 0%, rgba(227,232,251, .6) 50%, rgba(255,224,244, .6) 100%)"></span>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
|
|
style="background: linear-gradient(90deg, rgba(51,51,59, .6) 0%, rgba(44,48,62, .6) 50%, rgba(57,43,52, .6) 100%)"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Front-end solution -->
|
|
<section class="container py-5 mt-2 mb-3 my-sm-3 my-md-4 my-lg-5">
|
|
<h2 class="h1 text-center pt-xl-4 mt-xxl-2">Complete E-Commerce Front-end Solution</h2>
|
|
<p class="fs-lg text-center pb-4 pb-md-5 mb-0 mb-lg-2 mb-xl-4">All you need for your next e-commerce project
|
|
</p>
|
|
<div class="row align-items-center justify-content-center pb-xl-4 mb-xxl-2">
|
|
<div class="col-10 col-sm-8 col-md-6 order-md-2 pb-4 pb-md-0 mb-3 mb-md-0">
|
|
<div class="position-relative w-100 mx-auto" style="max-width: 533px">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(383 / 533 * 100%)"></div>
|
|
<div class="position-absolute ratio ratio-1x1 z-2 bg-primary rounded-5"
|
|
style="top: 41%; right: 38%; width: 20%">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" fill="none">
|
|
<path
|
|
d="M34.365 59.818a10.52 10.52 0 0 1-3.466-.602c-1.106-.394-2.098-1.034-2.977-1.92s-1.576-2.061-2.091-3.523c-.508-1.462-.761-3.258-.761-5.386.008-1.955.231-3.701.671-5.239.447-1.545 1.083-2.856 1.909-3.932.833-1.076 1.83-1.894 2.989-2.454 1.159-.568 2.458-.852 3.898-.852 1.553 0 2.924.303 4.114.909 1.189.599 2.144 1.413 2.864 2.443.727 1.03 1.167 2.186 1.318 3.466h-4.852c-.189-.811-.587-1.447-1.193-1.909s-1.356-.693-2.25-.693c-1.515 0-2.667.659-3.454 1.977-.78 1.318-1.178 3.11-1.193 5.375h.159a5.41 5.41 0 0 1 1.409-1.761 6.43 6.43 0 0 1 2.034-1.125 7.34 7.34 0 0 1 2.42-.398c1.379 0 2.606.326 3.682.977a6.93 6.93 0 0 1 2.545 2.659c.621 1.129.932 2.42.932 3.875 0 1.576-.367 2.977-1.102 4.205-.727 1.227-1.746 2.189-3.057 2.886-1.303.689-2.818 1.03-4.545 1.023zm-.023-3.864c.758 0 1.436-.182 2.034-.545s1.068-.856 1.409-1.477.511-1.318.511-2.091-.171-1.466-.511-2.079c-.333-.614-.795-1.102-1.386-1.466s-1.265-.545-2.023-.545c-.568 0-1.095.106-1.579.318-.477.212-.898.508-1.261.886a4.26 4.26 0 0 0-.841 1.318c-.204.492-.307 1.019-.307 1.58 0 .75.17 1.436.511 2.057a4.09 4.09 0 0 0 1.409 1.489c.599.371 1.277.557 2.034.557zm21.341 4.057c-1.954-.008-3.636-.489-5.045-1.443-1.401-.955-2.481-2.337-3.239-4.148-.75-1.811-1.121-3.989-1.114-6.534 0-2.538.375-4.701 1.125-6.489.758-1.788 1.837-3.148 3.239-4.08 1.409-.939 3.087-1.409 5.034-1.409s3.621.47 5.023 1.409c1.409.939 2.492 2.303 3.25 4.091.757 1.78 1.132 3.939 1.125 6.477 0 2.553-.379 4.735-1.136 6.545-.75 1.811-1.826 3.193-3.227 4.148s-3.08 1.432-5.034 1.432zm0-4.08c1.333 0 2.398-.67 3.193-2.011s1.189-3.352 1.182-6.034c0-1.765-.182-3.235-.545-4.409-.356-1.174-.864-2.057-1.523-2.648a3.32 3.32 0 0 0-2.307-.886c-1.326 0-2.386.663-3.182 1.989s-1.197 3.311-1.204 5.955c0 1.788.178 3.28.534 4.477.364 1.189.875 2.083 1.534 2.682a3.36 3.36 0 0 0 2.318.886zm19.861.023V39.864h4.068v16.091h-4.068zm-6.011-6.011v-4.068h16.091v4.068H69.533zM39.6 79.955v-9h.972v1.04h.119l.307-.435c.133-.179.324-.338.571-.477s.588-.213 1.014-.213c.551 0 1.037.138 1.457.413a2.75 2.75 0 0 1 .984 1.172c.236.506.354 1.102.354 1.79 0 .693-.118 1.294-.354 1.803a2.79 2.79 0 0 1-.98 1.176c-.418.276-.899.413-1.445.413-.42 0-.757-.07-1.01-.209s-.447-.303-.584-.482l-.315-.452h-.085v3.46H39.6zm.989-5.727c0 .494.072.93.217 1.308s.356.669.635.882.619.315 1.023.315c.42 0 .771-.111 1.053-.332s.497-.526.639-.903.217-.804.217-1.27c0-.46-.071-.875-.213-1.244s-.351-.666-.635-.882-.635-.328-1.061-.328c-.409 0-.753.104-1.031.311s-.489.492-.631.861-.213.794-.213 1.283zm8.25 3.426a2.66 2.66 0 0 1-1.129-.234 1.94 1.94 0 0 1-.805-.686c-.199-.301-.298-.665-.298-1.091 0-.375.074-.679.222-.912s.345-.42.592-.554.52-.233.818-.298l.908-.162.967-.115c.25-.028.432-.075.545-.141s.175-.179.175-.341v-.034c0-.42-.115-.747-.345-.98s-.572-.349-1.036-.349c-.48 0-.856.105-1.129.315s-.465.435-.575.673l-.955-.341c.17-.398.398-.707.682-.929s.599-.381.938-.469.676-.136 1.006-.136a3.99 3.99 0 0 1 .724.077 2.32 2.32 0 0 1 .797.303c.259.153.473.385.644.695s.256.724.256 1.244V77.5h-1.006v-.886h-.051c-.068.142-.182.294-.341.456s-.371.3-.635.413-.587.17-.967.17zm.153-.903c.398 0 .733-.078 1.006-.234s.483-.358.622-.605a1.54 1.54 0 0 0 .213-.78v-.921c-.043.051-.136.098-.281.141s-.307.075-.494.107l-.541.077-.422.051c-.261.034-.506.09-.733.166s-.406.186-.545.337-.205.349-.205.605c0 .349.129.614.388.793s.592.264.993.264zm7.324 3.341c-.486 0-.903-.062-1.253-.187s-.641-.284-.874-.486-.413-.412-.55-.639l.801-.562a6.36 6.36 0 0 0 .345.409 1.75 1.75 0 0 0 .571.405c.244.117.564.175.959.175.528 0 .965-.128 1.308-.383s.516-.656.516-1.202V76.29h-.085c-.074.119-.179.267-.315.443s-.327.328-.579.464-.588.2-1.014.2a2.73 2.73 0 0 1-1.423-.375 2.63 2.63 0 0 1-.993-1.091c-.241-.477-.362-1.057-.362-1.739 0-.671.118-1.254.354-1.751a2.73 2.73 0 0 1 .984-1.159c.421-.276.906-.413 1.457-.413.426 0 .764.071 1.014.213s.446.298.58.477l.315.435h.102v-1.04h.972v6.733c0 .563-.128 1.02-.384 1.372s-.594.615-1.023.78-.901.251-1.423.251zm-.034-3.597c.403 0 .744-.092 1.023-.277s.49-.45.635-.797.217-.761.217-1.244a3.39 3.39 0 0 0-.213-1.249c-.142-.361-.352-.644-.631-.848s-.622-.307-1.031-.307c-.426 0-.781.108-1.065.324s-.493.506-.635.869a3.36 3.36 0 0 0-.209 1.21c0 .455.071.857.213 1.206s.358.619.639.818.636.294 1.057.294zm7.449 1.142c-.631 0-1.175-.139-1.632-.418s-.805-.673-1.053-1.176-.367-1.094-.367-1.764.122-1.261.367-1.773a2.89 2.89 0 0 1 1.031-1.202c.443-.29.96-.435 1.551-.435a3.1 3.1 0 0 1 1.01.171 2.5 2.5 0 0 1 .908.554c.273.253.49.588.652 1.006s.243.932.243 1.543v.426h-5.045v-.869h4.023c0-.369-.074-.699-.222-.989a1.67 1.67 0 0 0-.622-.686c-.267-.168-.582-.251-.946-.251-.401 0-.747.1-1.04.298a1.96 1.96 0 0 0-.669.767c-.156.315-.234.653-.234 1.014v.579c0 .494.085.913.256 1.257s.413.601.72.78a2.11 2.11 0 0 0 1.07.264c.264 0 .503-.037.716-.111a1.53 1.53 0 0 0 .558-.341c.156-.153.277-.344.362-.571l.972.273c-.102.329-.274.619-.516.869s-.54.44-.895.579-.754.205-1.197.205zm8.876-5.216l-.903.256a1.68 1.68 0 0 0-.251-.439 1.22 1.22 0 0 0-.443-.358c-.187-.094-.428-.141-.72-.141-.401 0-.734.092-1.001.277s-.396.413-.396.695c0 .25.091.448.273.592s.466.266.852.362l.972.239c.585.142 1.021.359 1.308.652s.43.663.43 1.121a1.66 1.66 0 0 1-.324 1.006c-.213.296-.511.528-.895.699s-.83.256-1.338.256c-.668 0-1.22-.145-1.658-.435s-.715-.713-.831-1.27l.954-.239c.091.352.263.617.516.793s.59.264 1.001.264c.469 0 .841-.099 1.116-.298s.418-.443.418-.724a.76.76 0 0 0-.239-.571c-.159-.156-.403-.273-.733-.349l-1.091-.256c-.599-.142-1.04-.362-1.321-.66s-.418-.678-.418-1.129a1.62 1.62 0 0 1 .311-.98c.21-.284.496-.507.856-.669s.776-.243 1.236-.243c.648 0 1.156.142 1.526.426s.636.659.793 1.125z"
|
|
fill="#fff" />
|
|
</svg>
|
|
</div>
|
|
<img src="/img/intro/pages-light.jpg"
|
|
class="position-absolute top-0 start-0 w-100 h-100 d-none-dark" alt="E-Commerce Front-end">
|
|
<img src="/img/intro/pages-dark.png"
|
|
class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
|
|
alt="E-Commerce Front-end">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-9 col-md-6 col-lg-5 offset-lg-1 order-md-1">
|
|
<ul class="list-unstyled gap-3 mb-0">
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Multiple Shop Layout Options</span>
|
|
</li>
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Multiple Product Page Variations</span>
|
|
</li>
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Complete Order Workflow: Cart + Checkout</span>
|
|
</li>
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Shop Customer Account Pages</span>
|
|
</li>
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Marketplace Vendor Account Pages</span>
|
|
</li>
|
|
<!-- <li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="4.125" stroke="currentColor" stroke-width="1.75"/></svg>
|
|
<span>Dashboard (CMS) Pages</span>
|
|
</li> -->
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Electronics, Fashion, Grocery, Furniture,<br>Marketplace and Single Product Store
|
|
Demos</span>
|
|
</li>
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Blog Pages: Blog Layouts + Single Articles</span>
|
|
</li>
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Help Center / Support Pages</span>
|
|
</li>
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>Secondary Pages: About, Contacts, 404, etc.</span>
|
|
</li>
|
|
<li class="d-flex">
|
|
<svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
|
|
height="10" viewBox="0 0 10 10" fill="none">
|
|
<circle cx="5" cy="5" r="4.125" stroke="currentColor"
|
|
stroke-width="1.75" />
|
|
</svg>
|
|
<span>60+ Flexible Components (UI Kit)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Light / Dark mode (Comparison slider) -->
|
|
<section class="d-flex w-100 position-relative overflow-hidden">
|
|
<div class="position-relative flex-xxl-shrink-0 z-2 start-50 translate-middle-x my-n2"
|
|
style="max-width: 1920px;">
|
|
<div class="mx-n2 mx-sm-n5 mx-xxl-0">
|
|
<div class="mx-lg-n5 mx-xxl-0">
|
|
<img-comparison-slider class="focus-none text-primary mx-n5 mx-xxl-0"
|
|
style="--divider-width: .125rem; --divider-color: currentColor">
|
|
<img slot="first" src="/img/intro/dark-mode.jpg" alt="Dark Mode">
|
|
<img slot="second" src="/img/intro/light-mode.jpg" alt="Light Mode">
|
|
<div slot="handle" style="width: 42px;">
|
|
<svg class="text-primary rounded-circle" width="42" height="42"
|
|
viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<circle fill="currentColor" cx="21" cy="21" r="21"></circle>
|
|
</g>
|
|
<path fill="white"
|
|
d="M25.5019 19.7494H15.9147V15.9146L11.1211 20.7081L15.9147 25.5017V21.6669H25.5019V25.5017L30.2955 20.7081L25.5019 15.9146V19.7494Z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</img-comparison-slider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="position-absolute top-0 start-0 w-50 h-100" style="background-color: #131920"></div>
|
|
<div class="position-absolute top-0 end-0 w-50 h-100" style="background-color: #f5f7fa"></div>
|
|
</section>
|
|
|
|
|
|
<!-- Features -->
|
|
<section class="container py-5 mt-2 mb-sm-2 mt-sm-3 my-md-4 my-lg-5">
|
|
<h2 class="h1 text-center pb-3 pb-sm-4 pb-lg-2 pb-xl-3 pt-xl-4 mt-xxl-2 mb-lg-5">Cartzilla Feature Highlights
|
|
</h2>
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4 g-lg-5 pb-xl-2 pb-xxl-4">
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/bootstrap.png" width="56" class="d-inline-flex mb-3"
|
|
alt="Bootstrap">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">Built with Latest Bootstrap</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla is the powerful e-commerce front-end solution based on
|
|
Bootstrap 5 - the world's most popular responsive, mobile-first front-end component library.</p>
|
|
</div>
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/sass.png" width="48" class="d-inline-flex mb-3" alt="Sass">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">Easy to Customize with Sass</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla is built using Sass, allowing for effortless customization of
|
|
colors, typography, and beyond. It is the most mature, stable, and powerful CSS extension language
|
|
in the world.</p>
|
|
</div>
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/npm.png" width="56" class="d-inline-flex mb-3" alt="Npm">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">Kick-start Your Development</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">Start your development process fast and easy with included Npm scripts
|
|
setup, full tasks automation and local server hot reload. The configuration files are included in
|
|
the download package.</p>
|
|
</div>
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/js.png" width="48" class="d-inline-flex mb-3" alt="JavaScript">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">Future-proof JavaScript</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla's core scripts, along with all dependencies, are meticulously
|
|
crafted in vanilla JS (ES6 modules), ensuring optimal performance and compatibility across various
|
|
platforms.</p>
|
|
</div>
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/html5.png" width="48" class="d-inline-flex mb-3" alt="HTML5">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">W3C Valid HTML Code</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">As you likely know, ensuring 100% valid code through W3C validation for
|
|
all HTML files is crucial. Invalid HTML imposes restrictions on innovation, yet Cartzilla remains
|
|
innovative at its core.</p>
|
|
</div>
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/figma.png" width="48" class="d-inline-flex mb-3" alt="Figma">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">Premium Figma File Included</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">A well-crafted Figma design file is included in the download package.
|
|
It offers a visually stunning and thoroughly organized layout, utilizing Figma's components and
|
|
styles.</p>
|
|
</div>
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/touch.png" width="48" class="d-inline-flex mb-3" alt="Touch UI">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">Touch-enabled Sliders</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">In the era of touch screens it is important to ensure great user
|
|
experience on handheld devices, especially when it comes to such frequently used interface component
|
|
as slider.</p>
|
|
</div>
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/google-fonts.png" width="48" class="d-inline-flex mb-3"
|
|
alt="Google Fonts">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">Google Fonts</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla uses preloaded variable Google font (Inter) which is free,
|
|
fast to load and of very high quality. Currently Google fonts library includes 1600+ font families
|
|
to choose from.</p>
|
|
</div>
|
|
<div class="col text-center">
|
|
<img src="/img/intro/features/vector.png" width="48" class="d-inline-flex mb-3"
|
|
alt="Vector Icons">
|
|
<h3 class="h5 pt-sm-1 pb-2 mb-1">Vector Based HD-ready Icons</h3>
|
|
<p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla is equiped with font-based icon pack and svg icons to ensure
|
|
that infographics and interface icons look sharp on any device with any screen resolution and pixel
|
|
density.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Mobile friendly (PWA) -->
|
|
<section class="position-relative">
|
|
<div class="bg-body-tertiary position-absolute top-50 start-0 w-100 translate-middle-y overflow-hidden d-none d-xl-block"
|
|
style="height: 78%;">
|
|
<div class="bg-white opacity-75 d-none-dark"
|
|
style="width: 699px; height: 728px; border-radius: 728px; filter: blur(151px)"></div>
|
|
<div class="bg-body opacity-75 d-none d-block-dark"
|
|
style="width: 699px; height: 728px; border-radius: 728px; filter: blur(151px)"></div>
|
|
</div>
|
|
<div class="bg-body-tertiary position-absolute top-0 start-0 w-100 h-100 overflow-hidden d-xl-none">
|
|
<div class="position-absolute ps-xl-4 ms-xxl-5 mt-n2">
|
|
<div class="bg-white opacity-75 d-none-dark"
|
|
style="width: 699px; height: 728px; border-radius: 728px; filter: blur(151px)"></div>
|
|
<div class="bg-body opacity-75 d-none d-block-dark"
|
|
style="width: 699px; height: 728px; border-radius: 728px; filter: blur(151px)"></div>
|
|
</div>
|
|
</div>
|
|
<div class="container position-relative z-2 pb-5 pt-4 pt-md-5 py-xl-0">
|
|
<div class="row align-items-center justify-content-center pb-2 pb-sm-3 pb-md-0">
|
|
<div class="col-9 col-sm-7 col-md-6 mb-3 mb-sm-4 mb-md-0">
|
|
<div class="ratio rtl-flip" style="max-width: 585px; --cz-aspect-ratio: calc(821 / 585 * 100%);">
|
|
<img src="/img/intro/mobile-light.png" class="d-none-dark" alt="Mobile screens">
|
|
<img src="/img/intro/mobile-dark.png" class="d-none d-block-dark" alt="Mobile screens">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-5 offset-xl-1 text-center">
|
|
<div class="ps-4 ps-xl-0">
|
|
<h2 class="h1">Mobile Friendly Interface. PWA ready</h2>
|
|
<p class="fs-lg mb-4">Cartzilla ensures seamless interactions across all devices. With
|
|
progressive web app (PWA) compatibility, users can enjoy the app-like experiences on their
|
|
mobile browsers.</p>
|
|
<p class="fs-sm fw-medium text-body-emphasis mb-4">Scan QR code below to test on your device:
|
|
</p>
|
|
<img src="/img/intro/qr-light.png" class="d-none-dark rtl-flip" width="120"
|
|
alt="QR code">
|
|
<img src="/img/intro/qr-dark.png" class="d-none d-inline-block-dark rtl-flip" width="120"
|
|
alt="QR code">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Customizer -->
|
|
<section class="container pt-5 pb-4 pb-sm-5 my-2 mt-md-3 mt-xxl-4 mb-sm-0 mb-lg-4 mb-xl-5">
|
|
<h2 class="h1 text-center pt-lg-3 pt-xl-0 pb-md-2 pb-lg-3 pb-xl-4">Theme Customizer</h2>
|
|
|
|
<!-- Colors -->
|
|
<div class="row align-items-center justify-content-center py-4">
|
|
<div class="col-9 col-sm-7 col-md-6 order-md-2 offset-lg-1">
|
|
<div class="ratio" style="max-width: 593px; --cz-aspect-ratio: calc(542 / 593 * 100%)">
|
|
<img src="/img/intro/customizer/colors-light.jpg" class="d-none-dark" alt="Colors">
|
|
<img src="/img/intro/customizer/colors-dark.png" class="d-none d-block-dark" alt="Colors">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-3 mt-md-n5">
|
|
<span class="badge fs-sm bg-primary-subtle text-primary mb-3 mb-md-4">Colors</span>
|
|
<h2 class="h3 mb-md-4">Change theme brand colors quickly and easily</h2>
|
|
<p class="mb-0">Customize theme colors to match your brand palette using the color picker or just
|
|
type in the color hex. Supported colors: primary, warning, success, info, danger.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="d-md-none my-3 my-sm-4">
|
|
|
|
<!-- Typography -->
|
|
<div class="row align-items-center justify-content-center py-4">
|
|
<div class="col-10 col-sm-7 col-md-6 col-lg-7">
|
|
<div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(510 / 668 * 100%)">
|
|
<img src="/img/intro/customizer/typography-light.jpg" class="d-none-dark" alt="Typography">
|
|
<img src="/img/intro/customizer/typography-dark.png" class="d-none d-block-dark"
|
|
alt="Typography">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-5 text-center text-md-start mt-3 mt-md-n5">
|
|
<span class="badge fs-sm bg-info-subtle text-info mb-3 mb-md-4">Typography</span>
|
|
<h2 class="h3 mb-md-4">Set up fonts from the huge Google font collection</h2>
|
|
<p class="mb-0">Easily change the font to your liking. Choose the font from Google Fonts library of
|
|
1,600+ open source font families. Update headings and body font sizes right from customizer.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="d-md-none my-3 my-sm-4">
|
|
|
|
<!-- Borders -->
|
|
<div class="row align-items-center justify-content-center py-4">
|
|
<div class="col-10 col-sm-7 col-md-6 col-lg-7 order-md-2 d-flex justify-content-end">
|
|
<div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(428 / 668 * 100%)">
|
|
<img src="/img/intro/customizer/borders-light.jpg" class="d-none-dark" alt="Borders">
|
|
<img src="/img/intro/customizer/borders-dark.png" class="d-none d-block-dark" alt="Borders">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-4 mt-md-0">
|
|
<span class="badge fs-sm bg-success-subtle text-success mb-3 mb-md-4">Borders</span>
|
|
<h2 class="h3 mb-md-4">Rounded or square? Customize borders as you wish</h2>
|
|
<p class="mb-0">It's up to you to make your website soft and friendly with increased border radius or
|
|
add business vibes with less rounded shapes. Additionally, you can adjust the border width.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Page footer -->
|
|
<footer class="footer pt-xxl-2">
|
|
<div class="container">
|
|
<div class="position-relative py-5 px-4 p-sm-5">
|
|
<div class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
|
|
style="background: linear-gradient(102deg, #dad4ec 0%, #f3e7e9 80.43%);"></div>
|
|
<div class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
|
|
style="background: linear-gradient(102deg, #38314b 0%, #3f353a 100%);"></div>
|
|
<div class="position-relative z-1 text-center py-md-3 my-lg-3">
|
|
<p class="fs-xl pb-2 mb-1">Still not convinced?</p>
|
|
<h2 class="pb-2 pb-sm-3">Add premium support and lifetime updates to this.</h2>
|
|
<a class="btn btn-lg btn-primary animate-slide-end"
|
|
href=""
|
|
target="_blank" rel="noreferrer">
|
|
<i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
|
|
Buy now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="fs-sm text-center py-4 py-lg-5 my-sm-2 my-md-3 my-lg-0">
|
|
© All rights reserved. Made by <span class="animate-underline"><a
|
|
class="animate-target text-dark-emphasis text-decoration-none" href="https://coderthemes.com/"
|
|
target="_blank" rel="noreferrer">Coderthemes</a></span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Back to top button -->
|
|
<div class="floating-buttons position-fixed top-50 end-0 z-sticky me-3 me-xl-4 pb-4">
|
|
<a class="btn-scroll-top btn btn-sm bg-body border-0 rounded-pill shadow animate-slide-end" href="#top">
|
|
Top
|
|
<i class="ci-arrow-right fs-base ms-1 me-n1 animate-target"></i>
|
|
<span class="position-absolute top-0 start-0 w-100 h-100 border rounded-pill z-0"></span>
|
|
<svg class="position-absolute top-0 start-0 w-100 h-100 z-1" viewBox="0 0 62 32" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<rect x=".75" y=".75" width="60.5" height="30.5" rx="15.25" stroke="currentColor"
|
|
stroke-width="1.5" stroke-miterlimit="10" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@endsection |