2262 lines
157 KiB
PHP
2262 lines
157 KiB
PHP
@extends('layouts.landing', ['title' => 'Grocery Store - Catalog'])
|
|
|
|
@section('content')
|
|
@include('layouts.partials/offcanvas2')
|
|
|
|
<div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
|
|
aria-labelledby="deliveryOptionsLabel" style="width: 500px">
|
|
|
|
<!-- Header with nav tabs -->
|
|
<div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
|
|
<div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
|
|
<h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<ul class="nav nav-pills nav-justified w-100" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
|
|
data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
|
|
aria-selected="true">
|
|
<i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
|
|
Delivery
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
|
|
data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
|
|
aria-selected="false">
|
|
<i class="ci-box fs-base ms-n1 me-2"></i>
|
|
Pickup
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="offcanvas-body tab-content py-2 py-sm-3">
|
|
|
|
<!-- Delivery tab -->
|
|
<div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel"
|
|
aria-labelledby="delivery-tab">
|
|
|
|
<!-- Address options collapse -->
|
|
<div class="collapse delivery-address show" id="deliveryAddressOptions">
|
|
<div class="mt-n3">
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="address-1" name="delivery-address"
|
|
checked>
|
|
<label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
|
|
Apt B12 Sacramento, 95829</label>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="address-2" name="delivery-address">
|
|
<div class="d-flex w-100">
|
|
<label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge
|
|
Cir. Shiloh, Hawaii, 81063</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove"></button>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="address-3" name="delivery-address">
|
|
<div class="d-flex w-100">
|
|
<label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
|
|
Utica, Pennsylvania, 57867</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add new address collapse -->
|
|
<div class="collapse delivery-address" id="deliveryAddressAdd">
|
|
<div class="nav mb-4">
|
|
<a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
|
|
aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
|
|
<i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
|
|
<span class="animate-target">Back to my addresses</span>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
|
|
<h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
|
|
<a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
|
|
<i class="ci-map-pin fs-base ms-n1 me-1"></i>
|
|
Find on map
|
|
</a>
|
|
</div>
|
|
<div class="mb-3 mb-lg-4">
|
|
<label class="form-label">State *</label>
|
|
<select class="form-select form-select-lg rounded-pill"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
|
|
}
|
|
}'
|
|
aria-label="Large pill select">
|
|
<option value="">Select state</option>
|
|
<option value="Arizona">Arizona</option>
|
|
<option value="California">California</option>
|
|
<option value="Montana">Montana</option>
|
|
<option value="Nevada">Nevada</option>
|
|
<option value="New Mexico">New Mexico</option>
|
|
<option value="Texas">Texas</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3 mb-lg-4">
|
|
<label for="my-postcode" class="form-label">Postcode *</label>
|
|
<input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
|
|
</div>
|
|
<div class="mb-3 mb-lg-4">
|
|
<label class="form-label">City *</label>
|
|
<select class="form-select form-select-lg rounded-pill"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
|
|
}
|
|
}'
|
|
aria-label="Large pill select">
|
|
<option value="">Select city</option>
|
|
<option value="Austin">Austin</option>
|
|
<option value="Helena">Helena</option>
|
|
<option value="Sacramento">Sacramento</option>
|
|
<option value="Santa Fe">Santa Fe</option>
|
|
<option value="Las Vegas">Las Vegas</option>
|
|
<option value="Phoenix">Phoenix</option>
|
|
</select>
|
|
</div>
|
|
<label for="my-address" class="form-label">Street address *</label>
|
|
<input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
|
|
</div>
|
|
|
|
<!-- Add address collapse toggle -->
|
|
<div class="nav">
|
|
<a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
|
|
href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
|
|
aria-controls="deliveryAddressOptions deliveryAddressAdd">
|
|
<span class="animate-target">Add delivery address</span>
|
|
<i class="ci-plus fs-base ms-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pickup tab -->
|
|
<div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
|
|
|
|
<!-- Pickup store options collapse -->
|
|
<div class="collapse pickup-options show" id="pickupStoreOptions">
|
|
<div class="mt-n3">
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
|
|
<div>
|
|
<div class="d-flex w-100 pb-2 mb-1">
|
|
<label for="store-1"
|
|
class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
|
|
Supercenter</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove"></button>
|
|
</div>
|
|
<div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-2" name="pickup-store">
|
|
<div>
|
|
<div class="d-flex w-100 pb-2 mb-1">
|
|
<label for="store-2"
|
|
class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
|
|
Supercenter</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove"></button>
|
|
</div>
|
|
<div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-3" name="pickup-store">
|
|
<div>
|
|
<div class="d-flex w-100 pb-2 mb-1">
|
|
<label for="store-3"
|
|
class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
|
|
Supercenter</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove"></button>
|
|
</div>
|
|
<div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add new pickup store collapse -->
|
|
<div class="collapse pickup-options" id="pickupStoreAdd">
|
|
<div class="nav mb-4">
|
|
<a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
|
|
aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
|
|
<i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
|
|
<span class="animate-target">Back to my stores</span>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
|
|
<h5 class="h6 mb-0 me-3">Select a suitable store</h5>
|
|
<a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
|
|
<i class="ci-map-pin fs-base ms-n1 me-1"></i>
|
|
Find on map
|
|
</a>
|
|
</div>
|
|
<div class="mb-3 mb-lg-4">
|
|
<label class="form-label">State *</label>
|
|
<select class="form-select form-select-lg rounded-pill"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
|
|
}
|
|
}'
|
|
aria-label="Large pill select">
|
|
<option value="">Select state</option>
|
|
<option value="Arizona">Arizona</option>
|
|
<option value="California" selected>California</option>
|
|
<option value="Montana">Montana</option>
|
|
<option value="Nevada">Nevada</option>
|
|
<option value="New Mexico">New Mexico</option>
|
|
<option value="Texas">Texas</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="form-label">City *</label>
|
|
<select class="form-select form-select-lg rounded-pill"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
|
|
}
|
|
}'
|
|
aria-label="Large pill select">
|
|
<option value="">Select city</option>
|
|
<option value="Austin">Austin</option>
|
|
<option value="Helena">Helena</option>
|
|
<option value="Sacramento" selected>Sacramento</option>
|
|
<option value="Santa Fe">Santa Fe</option>
|
|
<option value="Las Vegas">Las Vegas</option>
|
|
<option value="Phoenix">Phoenix</option>
|
|
</select>
|
|
</div>
|
|
<div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-4" name="found-store">
|
|
<div>
|
|
<label for="store-4"
|
|
class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
|
|
Supercenter</label>
|
|
<div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-5" name="found-store">
|
|
<div>
|
|
<label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
|
|
Sacramento Supercenter</label>
|
|
<div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-6" name="found-store">
|
|
<div>
|
|
<label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
|
|
Cordova Supercenter</label>
|
|
<div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add address collapse toggle -->
|
|
<div class="nav">
|
|
<a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
|
|
href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
|
|
aria-controls="pickupStoreOptions pickupStoreAdd">
|
|
<span class="animate-target">Add store address</span>
|
|
<i class="ci-plus fs-base ms-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="offcanvas-header">
|
|
<button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
|
|
</div>
|
|
</div>
|
|
|
|
@include('layouts.partials/menu-offcanvas')
|
|
|
|
<header class="navbar navbar-expand navbar-sticky sticky-top d-block bg-body z-fixed py-1 py-lg-0 py-xl-1 px-0"
|
|
data-sticky-element>
|
|
<div class="container justify-content-start py-2 py-lg-3">
|
|
|
|
<!-- Offcanvas menu toggler (Hamburger) -->
|
|
<button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" 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 class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5"
|
|
href="{{ route('second', ['home', 'grocery']) }}">Cartzilla</a>
|
|
|
|
<!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
|
|
<div class="dropdown d-none d-lg-block w-100 me-4" style="max-width: 200px">
|
|
<button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill"
|
|
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="ci-grid fs-lg me-2 ms-n1"></i>
|
|
Categories
|
|
<i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
|
|
</button>
|
|
<div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
|
|
<div class="d-flex gap-4">
|
|
<div style="min-width: 170px">
|
|
<div class="h6">Bakery & bread</div>
|
|
<ul class="nav flex-column gap-2 mt-n2">
|
|
<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="#!">Shop all</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="#!">Bread</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="#!">Pastries</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="#!">Bakery cookies</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="#!">Cupcakes</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="#!">Buns & rolls</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h6 pt-4">Meat products</div>
|
|
<ul class="nav flex-column gap-2 mt-n2">
|
|
<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="#!">Shop all</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="#!">Fresh meat</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="#!">Processed meat</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="#!">Seafood</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="#!">Poultry products</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="#!">Prepared meat</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style="min-width: 170px">
|
|
<div class="h6">Vegetables</div>
|
|
<ul class="nav flex-column gap-2 mt-n2">
|
|
<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="#!">Shop all</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="#!">Leafy greens</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="#!">Root vegetables</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="#!">Allium vegetables</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="#!">Peppers and tomatoes</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="#!">Cruciferous</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="#!">Seasonal squashes</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="#!">Beans, peas & lentils</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h6 pt-4">Sauces and ketchup</div>
|
|
<ul class="nav flex-column gap-2 mt-n2">
|
|
<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="#!">Shop all</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="#!">Tomato-based sauces</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="#!">Salad dressing</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="#!">Hot sauces</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style="min-width: 170px">
|
|
<div class="h6">Fresh fruits</div>
|
|
<ul class="nav flex-column gap-2 mt-n2">
|
|
<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="#!">Shop all</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="#!">Citrus fruits</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="#!">Berries</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="#!">Tropical fruits</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="#!">Stone fruits</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="#!">Exotic fruits</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="#!">Melons</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h6 pt-4">Italian dinner</div>
|
|
<ul class="nav flex-column gap-2 mt-n2">
|
|
<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="#!">Shop all</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="#!">Pasta & sauces</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="#!">Italian cheese</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="#!">Italian meats</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="#!">Desserts & beverages</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style="min-width: 170px">
|
|
<div class="h6">Beverages</div>
|
|
<ul class="nav flex-column gap-2 mt-n2">
|
|
<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="#!">Shop all</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="#!">Soft drinks</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="#!">Juices</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="#!">Sports & energy drinks</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="#!">Tea and coffee</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="#!">Alcoholic beverages</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h6 pt-4">Dairy & eggs</div>
|
|
<ul class="nav flex-column gap-2 mt-n2">
|
|
<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="#!">Shop all</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="#!">Chees</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="#!">Milk & yogurt</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="#!">Sour cream</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="#!">Eggs</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="#!">Butter & margarine</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search bar visible on screens > 768px wide (md breakpoint) -->
|
|
<div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
|
|
<input type="search" class="form-control form-control-lg rounded-pill"
|
|
placeholder="Search for products" aria-label="Search">
|
|
<button type="button"
|
|
class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
|
|
aria-label="Search button">
|
|
<i class="ci-search"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
|
|
<div class="nav me-4 me-xxl-5 d-none d-xl-block">
|
|
<a class="nav-link flex-column align-items-start animate-underline p-0" href="#deliveryOptions"
|
|
data-bs-toggle="offcanvas" aria-controls="deliveryOptions">
|
|
<div class="h6 fs-sm mb-0">Delivery</div>
|
|
<div class="d-flex align-items-center fs-sm fw-normal text-body">
|
|
<span class="animate-target text-nowrap">Set your address</span>
|
|
<i class="ci-chevron-down fs-base ms-1"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Button group -->
|
|
<div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">
|
|
|
|
<!-- Theme switcher (light/dark/auto) -->
|
|
<div class="dropdown">
|
|
<button type="button"
|
|
class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
|
|
data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
|
|
<span class="theme-icon-active d-flex animate-target">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
</button>
|
|
<ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
|
|
<li>
|
|
<button type="button" class="dropdown-item active" data-bs-theme-value="light"
|
|
aria-pressed="true">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-sun"></i>
|
|
</span>
|
|
<span class="theme-label">Light</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="dark"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-moon"></i>
|
|
</span>
|
|
<span class="theme-label">Dark</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" data-bs-theme-value="auto"
|
|
aria-pressed="false">
|
|
<span class="theme-icon d-flex fs-base me-2">
|
|
<i class="ci-auto"></i>
|
|
</span>
|
|
<span class="theme-label">Auto</span>
|
|
<i class="item-active-indicator ci-check ms-auto"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
|
|
<button type="button"
|
|
class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none"
|
|
data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
|
|
aria-label="Toggle search bar">
|
|
<i class="ci-search animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Delivery options button visible on screens < 1200px wide (xl breakpoint) -->
|
|
<button type="button"
|
|
class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale d-xl-none"
|
|
data-bs-toggle="offcanvas" data-bs-target="#deliveryOptions" aria-controls="deliveryOptions"
|
|
aria-label="Toggle delivery options offcanvas">
|
|
<i class="ci-map-pin animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Account button visible on screens > 768px wide (md breakpoint) -->
|
|
<a class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
|
|
href="{{ route('second', ['account', 'signin']) }}">
|
|
<i class="ci-user animate-target"></i>
|
|
<span class="visually-hidden">Account</span>
|
|
</a>
|
|
|
|
<!-- Cart button -->
|
|
<button type="button"
|
|
class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
|
|
data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
|
|
aria-label="Shopping cart">
|
|
<span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
|
|
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">8</span>
|
|
<i class="ci-shopping-cart animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search collapse available on screens < 768px wide (md breakpoint) -->
|
|
<div class="collapse d-md-none" id="searchBar">
|
|
<div class="container pt-2 pb-3">
|
|
<div class="position-relative">
|
|
<i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
|
|
<input type="search" class="form-control form-icon-start rounded-pill"
|
|
placeholder="Search for products" data-autofocus="collapse">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="border-top">
|
|
<div class="container py-lg-1">
|
|
<div class="overflow-auto" data-simplebar>
|
|
<div class="nav flex-nowrap justify-content-between gap-4 py-2">
|
|
<a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
|
|
<span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
|
|
style="width: 40px; height: 40px">
|
|
<i class="ci-percent text-primary fs-xl"></i>
|
|
</span>
|
|
<span class="d-block animate-target fw-semibold text-nowrap ms-1">Weekly sale</span>
|
|
</a>
|
|
<a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
|
|
<span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
|
|
style="width: 40px; height: 40px">
|
|
<img src="/img/mega-menu/grocery/th01.png" width="30" alt="Image">
|
|
</span>
|
|
<span class="d-block animate-target fw-semibold text-nowrap ms-1">Vegetables</span>
|
|
</a>
|
|
<a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
|
|
<span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
|
|
style="width: 40px; height: 40px">
|
|
<img src="/img/mega-menu/grocery/th02.png" width="30" alt="Image">
|
|
</span>
|
|
<span class="d-block animate-target fw-semibold text-nowrap ms-1">Easter is coming</span>
|
|
</a>
|
|
<a class="nav-link align-items-center animate-underline gap-2 m-0" href="#!">
|
|
<span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
|
|
style="width: 40px; height: 40px">
|
|
<img src="/img/mega-menu/grocery/th03.png" width="30" alt="Image">
|
|
</span>
|
|
<span class="d-block animate-target fw-semibold text-nowrap ms-1">Poultry meat</span>
|
|
</a>
|
|
<a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
|
|
<span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
|
|
style="width: 40px; height: 40px">
|
|
<img src="/img/mega-menu/grocery/th04.png" width="30" alt="Image">
|
|
</span>
|
|
<span class="d-block animate-target fw-semibold text-nowrap ms-1">Fresh fruits</span>
|
|
</a>
|
|
<a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
|
|
<span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
|
|
style="width: 40px; height: 40px">
|
|
<img src="/img/mega-menu/grocery/th05.png" width="30" alt="Image">
|
|
</span>
|
|
<span class="d-block animate-target fw-semibold text-nowrap ms-1">St. Patrick's day</span>
|
|
</a>
|
|
<a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
|
|
<span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
|
|
style="width: 40px; height: 40px">
|
|
<img src="/img/mega-menu/grocery/th06.png" width="30" alt="Image">
|
|
</span>
|
|
<span class="d-block animate-target fw-semibold text-nowrap ms-1">Exotic fruits</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<main class="content-wrapper">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="container pt-lg-2 my-3 my-lg-4" aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('second', ['home', 'grocery']) }}">Home</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Catalog with sidebar filters</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
|
|
<!-- Page title -->
|
|
<h1 class="h3 container pb-2 pb-md-3 pb-lg-4">Shop catalog</h1>
|
|
|
|
|
|
<!-- Products grid + Sidebar with filters -->
|
|
<section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
|
|
<div class="row">
|
|
|
|
<!-- Filter sidebar that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
|
|
<aside class="col-lg-3">
|
|
<div class="offcanvas-lg offcanvas-start pe-lg-4" id="filterSidebar">
|
|
<div class="offcanvas-header py-3">
|
|
<h5 class="offcanvas-title">Filter products</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
|
|
data-bs-target="#filterSidebar" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body flex-column pt-2 py-lg-0">
|
|
|
|
<!-- Categories -->
|
|
<div class="accordion pb-2" id="categories">
|
|
|
|
<!-- Category -->
|
|
<div class="accordion-item border-0 mb-3">
|
|
<h4 class="accordion-header" id="headingBakery">
|
|
<button type="button" class="accordion-button collapsed p-0"
|
|
data-bs-toggle="collapse" data-bs-target="#bakery" aria-expanded="false"
|
|
aria-controls="bakery">
|
|
<span
|
|
class="d-flex align-items-center justify-content-center bg-body-secondary rounded-circle me-3"
|
|
style="width: 56px; height: 56px">
|
|
<img src="/img/shop/grocery/categories/01.png" width="40"
|
|
alt="Image">
|
|
</span>
|
|
<span class="fs-sm">Bakery & bread</span>
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="bakery"
|
|
aria-labelledby="headingBakery" data-bs-parent="#categories">
|
|
<div class="accordion-body ps-4 pb-0">
|
|
<ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Shop all</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Bread</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Pastries</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Bakery cookies</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Cupcakes</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Buns</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Rolls</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="accordion-item border-0 mb-3">
|
|
<h4 class="accordion-header" id="headingVegetables">
|
|
<button type="button" class="accordion-button collapsed p-0"
|
|
data-bs-toggle="collapse" data-bs-target="#vegetables"
|
|
aria-expanded="false" aria-controls="vegetables">
|
|
<span
|
|
class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
|
|
style="width: 56px; height: 56px">
|
|
<img src="/img/shop/grocery/categories/02.png" width="40"
|
|
alt="Image">
|
|
</span>
|
|
<span class="fs-sm">Vegetables</span>
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="vegetables"
|
|
aria-labelledby="headingVegetables" data-bs-parent="#categories">
|
|
<div class="accordion-body ps-4 pb-0">
|
|
<ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Shop all</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Leafy greens</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Root vegetables</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Allium vegetables</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Peppers and tomatoes</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Cruciferous</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Seasonal squashes</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="accordion-item border-0 mb-3">
|
|
<h4 class="accordion-header" id="headingFruits">
|
|
<button type="button" class="accordion-button collapsed p-0"
|
|
data-bs-toggle="collapse" data-bs-target="#fruits" aria-expanded="false"
|
|
aria-controls="fruits">
|
|
<span
|
|
class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
|
|
style="width: 56px; height: 56px">
|
|
<img src="/img/shop/grocery/categories/03.png" width="40"
|
|
alt="Image">
|
|
</span>
|
|
<span class="fs-sm">Fresh fruits</span>
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="fruits"
|
|
aria-labelledby="headingFruits" data-bs-parent="#categories">
|
|
<div class="accordion-body ps-4 pb-0">
|
|
<ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Shop all</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Citrus fruits</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Berries</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Tropical fruits</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Stone fruits</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Exotic fruits</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Melons</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="accordion-item border-0 mb-3">
|
|
<h4 class="accordion-header" id="headingItalian">
|
|
<button type="button" class="accordion-button collapsed p-0"
|
|
data-bs-toggle="collapse" data-bs-target="#italian" aria-expanded="false"
|
|
aria-controls="italian">
|
|
<span
|
|
class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
|
|
style="width: 56px; height: 56px">
|
|
<img src="/img/shop/grocery/categories/04.png" width="40"
|
|
alt="Image">
|
|
</span>
|
|
<span class="fs-sm">Meet Italian dinner</span>
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="italian"
|
|
aria-labelledby="headingItalian" data-bs-parent="#categories">
|
|
<div class="accordion-body ps-4 pb-0">
|
|
<ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Shop all</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Pasta & sauces</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Italian cheeses</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Italian meats</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Antipasti & appetizers</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Fresh produce</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Desserts & beverages</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="accordion-item border-0 mb-3">
|
|
<h4 class="accordion-header" id="headingBeverages">
|
|
<button type="button" class="accordion-button collapsed p-0"
|
|
data-bs-toggle="collapse" data-bs-target="#beverages"
|
|
aria-expanded="false" aria-controls="beverages">
|
|
<span
|
|
class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
|
|
style="width: 56px; height: 56px">
|
|
<img src="/img/shop/grocery/categories/05.png" width="40"
|
|
alt="Image">
|
|
</span>
|
|
<span class="fs-sm">Beverages</span>
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="beverages"
|
|
aria-labelledby="headingBeverages" data-bs-parent="#categories">
|
|
<div class="accordion-body ps-4 pb-0">
|
|
<ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Shop all</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Soft drinks</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Juices</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Sports & energy drinks</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Tea and coffee</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Water</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Alcoholic beverages</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="accordion-item border-0 mb-3">
|
|
<h4 class="accordion-header" id="headingMeat">
|
|
<button type="button" class="accordion-button collapsed p-0"
|
|
data-bs-toggle="collapse" data-bs-target="#meat" aria-expanded="false"
|
|
aria-controls="meat">
|
|
<span
|
|
class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
|
|
style="width: 56px; height: 56px">
|
|
<img src="/img/shop/grocery/categories/06.png" width="40"
|
|
alt="Image">
|
|
</span>
|
|
<span class="fs-sm">Meat products</span>
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="meat"
|
|
aria-labelledby="headingMeat" data-bs-parent="#categories">
|
|
<div class="accordion-body ps-4 pb-0">
|
|
<ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Shop all</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Fresh meat</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Processed meat</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Seafood</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Poultry products</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Exotic meats</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Prepared meat</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="accordion-item border-0 mb-3">
|
|
<h4 class="accordion-header" id="headingSauces">
|
|
<button type="button" class="accordion-button collapsed p-0"
|
|
data-bs-toggle="collapse" data-bs-target="#sauces" aria-expanded="false"
|
|
aria-controls="sauces">
|
|
<span
|
|
class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
|
|
style="width: 56px; height: 56px">
|
|
<img src="/img/shop/grocery/categories/07.png" width="40"
|
|
alt="Image">
|
|
</span>
|
|
<span class="fs-sm">Sauces and ketchup</span>
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="sauces"
|
|
aria-labelledby="headingSauces" data-bs-parent="#categories">
|
|
<div class="accordion-body ps-4 pb-0">
|
|
<ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Shop all</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Tomato-based sauces</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">International sauces</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Condiments</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Salad dressings</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Hot sauces</a>
|
|
</li>
|
|
<li class="nav-item pb-1 ps-3 ms-1">
|
|
<a class="nav-link hover-effect-underline fw-normal p-0"
|
|
href="#!">Specialty sauces</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Filters -->
|
|
<div class="accordion border-top mb-4">
|
|
|
|
<!-- Price -->
|
|
<div class="accordion-item">
|
|
<h4 class="accordion-header" id="headingPrice">
|
|
<button type="button" class="accordion-button collapsed"
|
|
data-bs-toggle="collapse" data-bs-target="#price" aria-expanded="false"
|
|
aria-controls="price">
|
|
Price
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="price"
|
|
aria-labelledby="headingPrice">
|
|
<div class="accordion-body">
|
|
<div class="range-slider ps-1"
|
|
data-range-slider='{"startMin": 1, "startMax": 30, "min": 0, "max": 100, "step": 1, "tooltipPrefix": "$"}'
|
|
aria-labelledby="headingPrice">
|
|
<div class="range-slider-ui"></div>
|
|
<div class="d-flex align-items-center">
|
|
<div class="position-relative w-50">
|
|
<i
|
|
class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
|
|
<input type="number" class="form-control form-icon-start"
|
|
min="0" data-range-slider-min>
|
|
</div>
|
|
<i class="ci-minus text-body-emphasis mx-2"></i>
|
|
<div class="position-relative w-50">
|
|
<i
|
|
class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
|
|
<input type="number" class="form-control form-icon-start"
|
|
min="0" data-range-slider-max>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Brand -->
|
|
<div class="accordion-item">
|
|
<h4 class="accordion-header" id="headingBrand">
|
|
<button type="button" class="accordion-button collapsed"
|
|
data-bs-toggle="collapse" data-bs-target="#brand" aria-expanded="false"
|
|
aria-controls="brand">
|
|
Brand
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="brand"
|
|
aria-labelledby="headingBrand">
|
|
<div class="accordion-body"
|
|
data-filter-list='{"searchClass": "brands-search", "listClass": "brands-list", "valueNames": ["form-check-label"]}'>
|
|
<div class="position-relative mb-3">
|
|
<i
|
|
class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
|
|
<input type="search" class="brands-search form-control form-icon-start"
|
|
placeholder="Search">
|
|
</div>
|
|
<div style="height: 210px" data-simplebar data-simplebar-auto-hide="false">
|
|
<div class="brands-list d-flex flex-column gap-2">
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="coca-cola">
|
|
<label for="coca-cola"
|
|
class="form-check-label text-body-emphasis">Coca-Cola</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="pepsi">
|
|
<label for="pepsi"
|
|
class="form-check-label text-body-emphasis">Pepsi</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input" id="nestle"
|
|
checked>
|
|
<label for="nestle"
|
|
class="form-check-label text-body-emphasis">Nestlé</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="hersheys">
|
|
<label for="hersheys"
|
|
class="form-check-label text-body-emphasis">Hershey's</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="bilabong">
|
|
<label for="bilabong"
|
|
class="form-check-label text-body-emphasis">General
|
|
Mills</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="barilla">
|
|
<label for="barilla"
|
|
class="form-check-label text-body-emphasis">Barilla</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="kraft">
|
|
<label for="kraft"
|
|
class="form-check-label text-body-emphasis">Kraft
|
|
Heinz</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="unilever">
|
|
<label for="unilever"
|
|
class="form-check-label text-body-emphasis">Unilever</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="danone">
|
|
<label for="danone"
|
|
class="form-check-label text-body-emphasis">Danone</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="Campbell">
|
|
<label for="Campbell"
|
|
class="form-check-label text-body-emphasis">Campbell</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="basso">
|
|
<label for="basso"
|
|
class="form-check-label text-body-emphasis">Basso</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="kelloggs">
|
|
<label for="kelloggs"
|
|
class="form-check-label text-body-emphasis">Kellogg's</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="mondelez">
|
|
<label for="mondelez"
|
|
class="form-check-label text-body-emphasis">Mondelez</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="pepper">
|
|
<label for="pepper"
|
|
class="form-check-label text-body-emphasis">Dr Pepper
|
|
Snapple</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="heineken">
|
|
<label for="heineken"
|
|
class="form-check-label text-body-emphasis">Heineken</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="mars">
|
|
<label for="mars"
|
|
class="form-check-label text-body-emphasis">Mars</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="pernod">
|
|
<label for="pernod"
|
|
class="form-check-label text-body-emphasis">Pernod
|
|
Ricard</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="ferrero">
|
|
<label for="ferrero"
|
|
class="form-check-label text-body-emphasis">Ferrero</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="red-bull">
|
|
<label for="red-bull"
|
|
class="form-check-label text-body-emphasis">Red Bull</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="suntory">
|
|
<label for="suntory"
|
|
class="form-check-label text-body-emphasis">Suntory</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input"
|
|
id="diageo">
|
|
<label for="diageo"
|
|
class="form-check-label text-body-emphasis">Diageo</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Special diet -->
|
|
<div class="accordion-item">
|
|
<h4 class="accordion-header" id="headingDiet">
|
|
<button type="button" class="accordion-button collapsed"
|
|
data-bs-toggle="collapse" data-bs-target="#diet" aria-expanded="false"
|
|
aria-controls="diet">
|
|
Special diet needs
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="diet"
|
|
aria-labelledby="headingDiet">
|
|
<div class="accordion-body">
|
|
<div class="d-flex flex-column gap-2">
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input" id="gluten-free"
|
|
checked>
|
|
<label for="gluten-free"
|
|
class="form-check-label text-body-emphasis">Gluten-free</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input" id="plant-based">
|
|
<label for="plant-based"
|
|
class="form-check-label text-body-emphasis">Plant based</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input" id="vegan">
|
|
<label for="vegan"
|
|
class="form-check-label text-body-emphasis">Vegan</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input" id="keto">
|
|
<label for="keto"
|
|
class="form-check-label text-body-emphasis">Keto diet</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="accordion-item">
|
|
<h4 class="accordion-header" id="headingStatus">
|
|
<button type="button" class="accordion-button collapsed"
|
|
data-bs-toggle="collapse" data-bs-target="#status" aria-expanded="false"
|
|
aria-controls="status">
|
|
Status
|
|
</button>
|
|
</h4>
|
|
<div class="accordion-collapse collapse" id="status"
|
|
aria-labelledby="headingStatus">
|
|
<div class="accordion-body">
|
|
<div class="d-flex flex-column gap-2">
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input" id="instock">
|
|
<label for="instock" class="form-check-label text-body-emphasis">In
|
|
stock</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input" id="sale"
|
|
checked>
|
|
<label for="sale" class="form-check-label text-body-emphasis">%
|
|
Sale</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input type="checkbox" class="form-check-input" id="delivery">
|
|
<label for="delivery"
|
|
class="form-check-label text-body-emphasis">Free delivery</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Banner -->
|
|
<div class="rounded-4 overflow-hidden" style="background-color: #a6cddc"
|
|
data-bs-theme="light">
|
|
<div class="pt-3 px-3 mt-3 mx-3">
|
|
<h4 class="mb-2 mb-xl-3">Make breakfast healthy and easy</h4>
|
|
<div class="nav">
|
|
<a class="nav-link animate-underline stretched-link px-0" href="#!">
|
|
<span class="animate-target">Shop now</span>
|
|
<i class="ci-chevron-right fs-base mt-1 ms-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ratio mt-n2" style="--cz-aspect-ratio: calc(240 / 282 * 100%)">
|
|
<img src="/img/shop/grocery/banner.jpg" alt="Banner">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
<!-- Product grid -->
|
|
<div class="col-lg-9">
|
|
|
|
<!-- Sorting -->
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
|
<div class="fs-sm text-body-emphasis text-nowrap mb-2 mb-sm-0">Found <span
|
|
class="fw-semibold">256</span> items</div>
|
|
<div class="d-flex align-items-center text-nowrap">
|
|
<label class="form-label fw-semibold mb-0 me-2">Sort by:</label>
|
|
<div style="width: 200px">
|
|
<select class="form-select rounded-pill"
|
|
data-select='{
|
|
"removeItemButton": false,
|
|
"classNames": {
|
|
"containerInner": ["form-select", "rounded-pill"]
|
|
}
|
|
}'>
|
|
<option value="Relevance">Relevance</option>
|
|
<option value="Popularity">Popularity</option>
|
|
<option value="Price: Low to High">Price: Low to High</option>
|
|
<option value="Price: High to Low">Price: High to Low</option>
|
|
<option value="Newest Arrivals">Newest Arrivals</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected filters -->
|
|
<div class="d-flex flex-wrap gap-2 mb-4">
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
|
Sale
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
|
Gluten-free
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
|
Nestlé
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
|
$1 - $30
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline px-0 ms-2">
|
|
Clear all
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Grid -->
|
|
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-4 g-4">
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/01.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$2.15</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Muesli Fitness Energy, gluten free</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<span
|
|
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-1 mt-sm-2 ms-1 ms-sm-2">-30%</span>
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/02.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$3.12 <del
|
|
class="fs-sm fw-normal text-body-tertiary ms-1">$4.05</del></div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh orange Klementina, Spain</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/03.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$0.80</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Pepsi soda classic, can</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">330ml</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/04.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$2.99</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Mozzarella mini cheese Granaloro</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">250g</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/05.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$1.24</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Coconut, Indonesia</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 coconut</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/06.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$3.95</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto sauce Barilla with parmesan and
|
|
basil</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">200g</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/07.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$1.99</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh mango, Spain</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 mango</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/08.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$2.40</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh green asparagus, bunch</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">300g</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/09.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$18.60</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Pure virgin olive oil Basso</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1000ml</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/10.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$9.15</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh pork butt steaks with rosemary</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/11.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$3.40</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh red grapefruit</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/12.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$2.59</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Soft creme cheese with greens Exquisa</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">150g</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/13.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$27.00</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Steak salmon fillet with rosmary</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/14.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$1.75</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh red seedless grapes</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/15.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$3.10</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh lemons, pack</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="col">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/16.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary"
|
|
data-decrement aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$2.65</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Reggia penne rigate No.34 pasta, pack</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav class="border-top mt-4 pt-3" aria-label="Catalog pagination">
|
|
<ul class="pagination pagination-lg pt-2 pt-md-3">
|
|
<li class="page-item disabled me-auto">
|
|
<a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#!"
|
|
aria-label="Previous page">
|
|
<i class="ci-chevron-left mx-1"></i>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active" aria-current="page">
|
|
<span class="page-link">
|
|
1
|
|
<span class="visually-hidden">(current)</span>
|
|
</span>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#!">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#!">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<span class="page-link pe-none">...</span>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#!">16</a>
|
|
</li>
|
|
<li class="page-item ms-auto">
|
|
<a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#!"
|
|
aria-label="Next page">
|
|
<i class="ci-chevron-right mx-1"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
@include('layouts.partials/footer2')
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@endsection
|