@extends('layouts.default')
@section('content')
            <div class="page-title">
                    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li><h1>Product Grid</h1></li>
            <li class="breadcrumb-item">
                <a href="{{ url('index') }}">
                    <svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Home
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Product Grid</li>
        </ol>
    </nav>
            </div>
            <div class="container-fluid mh-auto">
                
                <div class="row">   
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/1.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Bonorum et Malorum</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa-solid fa-star-half-stroke text-orange"></i>
                                        <i class="fa-solid fa-star-half-stroke text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$71.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/2.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Striped Dress</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$159.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/3.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">BBow polka-dot</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$357.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/4.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Z Product 360</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$654.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/5.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Chair Grey</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$369.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/6.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">fox sake withe</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$245.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/7.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Back Bag</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$364.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/1.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Flare Dress</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa-solid fa-star-half-stroke text-orange"></i>
                                        <i class="fa-solid fa-star-half-stroke text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$548.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/6.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">fox sake withe</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$245.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/5.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Chair Grey</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$369.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/4.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Z Product 360</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa-solid fa-star-half-stroke text-orange"></i>
                                        <i class="fa-solid fa-star-half-stroke text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$654.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-sm-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="mb-2">
                                    <img class="img-fluid rounded" src="{{ asset('images/product/1.jpg') }}" alt="">
                                </div>
                                <div class="text-center py-2">
                                    <h3 class="mb-1 fs-5 fw-semibold">
                                        <a href="ecom-product-detail">Bonorum et Malorum</a>
                                    </h3>
                                    <div class="mb-3 d-flex gap-1 justify-content-center">
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa fa-star text-orange"></i>
                                        <i class="fa-solid fa-star-half-stroke text-orange"></i>
                                        <i class="fa-solid fa-star-half-stroke text-orange"></i>
                                    </div>
                                    <span class="fs-5 text-primary fw-semibold">$71.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
@endsection
