@extends('front.layout.app')
@section('content')

<main>

    <!-- Inner Banner Html Start -->
    <div class="inner-ban">
        <img src="{{ asset('front/images/Inner-Bann.png') }}" class="img-fluid" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Shop</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Inner Banner Html Start -->

    <!--  Shop-Sec  Html Start -->
    <section class="shop-main shop-page">
        <div class="container">
            <div class="servc-heading">
                <h2 class="subHeading">Our Shop</h2>
                <h6 class="heading">SHOP NOW Skincare Products</h6>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/shop1.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Aesthetic Treatments</h3>
                                    <h6>Facials</h6>
                                </div>
                                <a href="#" class="themeBtn">View Details</a>
                            </div>
                        </figure>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/shop2.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Aesthetic Treatments</h3>
                                    <h6>Facials</h6>
                                </div>
                                <a href="#" class="themeBtn">View Details</a>
                            </div>
                        </figure>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/shop3.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Aesthetic Treatments</h3>
                                    <h6>Facials</h6>
                                </div>
                                <a href="#" class="themeBtn">View Details</a>
                            </div>
                        </figure>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/shop4.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Aesthetic Treatments</h3>
                                    <h6>Facials</h6>
                                </div>
                                <a href="#" class="themeBtn">View Details</a>
                            </div>
                        </figure>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/shop5.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Aesthetic Treatments</h3>
                                    <h6>Facials</h6>
                                </div>
                                <a href="#" class="themeBtn">View Details</a>
                            </div>
                        </figure>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/shop3.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Aesthetic Treatments</h3>
                                    <h6>Facials</h6>
                                </div>
                                <a href="#" class="themeBtn">View Details</a>
                            </div>
                        </figure>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- Shop-Sec html End -->

    <!-- Product-Sec Html Start -->
    <section class="products shop-page-product">
        <div class="container">
            <h2 class="heading text-center mb-5" >OUR PRODUCTS</h2>
            <div class="row">
                <div class="col-md-3">
                    <div class="products-card">
                        <figure>
                            <img src="{{ asset('front/images/product1.png') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="products-card__content">
                            <h4 class="title">CREAM</h4>
                            <h5 class="price">$199.00</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="products-card">
                        <figure>
                            <img src="{{ asset('front/images/product2.png') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="products-card__content">
                            <h4 class="title">CREAM</h4>
                            <h5 class="price">$199.00</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="products-card">
                        <figure>
                            <img src="{{ asset('front/images/product3.png') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="products-card__content">
                            <h4 class="title">CREAM</h4>
                            <h5 class="price">$199.00</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="products-card">
                        <figure>
                            <img src="{{ asset('front/images/product4.png') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="products-card__content">
                            <h4 class="title">CREAM</h4>
                            <h5 class="price">$199.00</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="products-card">
                        <figure>
                            <img src="{{ asset('front/images/product1.png') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="products-card__content">
                            <h4 class="title">CREAM</h4>
                            <h5 class="price">$199.00</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="products-card">
                        <figure>
                            <img src="{{ asset('front/images/product2.png') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="products-card__content">
                            <h4 class="title">CREAM</h4>
                            <h5 class="price">$199.00</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="products-card">
                        <figure>
                            <img src="{{ asset('front/images/product3.png') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="products-card__content">
                            <h4 class="title">CREAM</h4>
                            <h5 class="price">$199.00</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="products-card">
                        <figure>
                            <img src="{{ asset('front/images/product4.png') }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="products-card__content">
                            <h4 class="title">CREAM</h4>
                            <h5 class="price">$199.00</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Product-Sec Html End-->

    <!-- Wellness-sec Html Start -->
    <section class="shop-page-wellness">
        <div class="container">
            <h6 class="heading wellnes-heading">Wellness Products</h6>
            <div class="row">
                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/product1.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Facial Masks</h3>
                                    <h6>11 SKIN MASK</h6>
                                </div>
                                <a href="#" class="themeBtn">ADD TO MY CART</a>
                            </div>
                        </figure>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/product2.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Essential Oils</h3>
                                    <h6>Lavender Oil</h6>
                                </div>
                                <a href="#" class="themeBtn">ADD TO MY CART</a>
                            </div>
                        </figure>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/product5.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Targeted Treatments</h3>
                                    <h6>Anti Ace</h6>
                                </div>
                                <a href="#" class="themeBtn">ADD TO MY CART</a>
                            </div>
                        </figure>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/product3.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay  product-box ">
                                <a href="#" class="themeBtn">ADD TO MY CART</a>
                            </div>
                        </figure>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/product3.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay product-box ">
                                <a href="#" class="themeBtn">ADD TO MY CART</a>
                            </div>
                        </figure>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="shop-card">
                        <figure>
                            <img src="{{ asset('front/images/product4.jpg') }}" class="img-fluid" alt="img">
                            <div class="servc-overlay">
                                <div>
                                    <h3>Targeted Treatments</h3>
                                    <h6>Anti Ace</h6>
                                </div>
                                <a href="#" class="themeBtn">ADD TO MY CART</a>
                            </div>
                        </figure>
                    </div>
                </div>


            </div>
        </div>

    </section>
    <!-- Wellness-sec Html End -->

</main>

@endsection