@extends('frontend.layouts.master')
@section('title','E-SHOP || HOME PAGE')
@section('main-content')

    <!-- start home -->
    <section class="home bg-image" id="home">
        <!-- start container -->
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="home-content home-heading">
                        <h1 class="fw-bold display-5">Discover The Largest <span class="text-primary"> <br> NFT</span>
                            Marketplace.</h1>
                        <p class="text-muted my-4">A New Place To Collect And Connect NFT Across The World. It’s come
                            with a creative design, home page options, different explore and digital asset pages and
                            items.</p>
                        <button class="btn btn-dark">Explore</button>
                    </div>

                    <div class="row mt-5">
                        <div class="col-lg-4 col-6">
                            <div class="counter-box">
                                <div class="d-flex align-items-center justify-content-start">
                                    <h2 class="counter_value fw-bold" data-bs-target="32">0</h2><span
                                        class="h2 fw-bold">K</span><span class="h2">+</span>
                                </div>
                                <p class="counter-caption">Smartwork</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="counter-box">
                                <div class="d-flex align-items-center justify-content-start">
                                    <h2 class="counter_value fw-bold" data-bs-target="20">0</h2><span
                                        class="h2 fw-bold">K</span><span class="h2">+</span>
                                </div>
                                <p class="counter-caption">Action</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="counter-box">
                                <div class="d-flex align-items-center justify-content-start">
                                    <h2 class="counter_value fw-bold" data-bs-target="10">0</h2><span
                                        class="h2 fw-bold">K</span><span class="h2">+</span>
                                </div>
                                <p class="counter-caption">Market</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="client-slider" id="clients-slider">
                        <div class="item">
                            <div class="card position-relative overflow-hidden m-2 m-lg-0">
                                <img src="images/slider/img-1.png')}}" alt="logo-img" class="img-fluid">
                                <div class="card-body slider-content position-relative">
                                    <p class="mb-2">Analysis</p>
                                    <h5 class="fw-bold">3.4 ETH</h5>

                                    <div class="d-flex">
                                        <div class=" slider-content-image d-flex mt-3">
                                            <div class="avatar-sm">
                                                <img src="images/slider/user/img-1.jpg" alt="" class="img-fluid">
                                            </div>

                                            <div class="avatar-sm top-child">
                                                <img src="images/slider/user/img-4.jpg" alt="" class="img-fluid">
                                            </div>

                                            <div class="avatar-sm top-child position-relative">
                                                <img src="images/slider/user/img-8.jpg" alt="" class="img-fluid">

                                                <span class="content-image-check">
                                                    <span class="visually-visible"><i
                                                            class="mdi mdi-check f-12"></i></span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="slider-content-button">
                                            <button class="btn btn-dark pe-5">Bid</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- slider item -->

                        <div class="item">
                            <div class="card position-relative overflow-hidden m-2 m-lg-0">
                                <img src="images/slider/img-2.png')}}" alt="logo-img" class="img-fluid">
                                <div class="card-body slider-content position-relative">
                                    <p class="mb-2">Burn & Melting</p>
                                    <h5 class="fw-bold">3.4 ETH</h5>

                                    <div class="d-flex">
                                        <div class="slider-content-image d-flex mt-3">
                                            <div class="avatar-sm">
                                                <img src="images/slider/user/img-7.jpg" alt="" class="img-fluid">
                                            </div>

                                            <div class="avatar-sm top-child">
                                                <img src="images/slider/user/img-3.jpg" alt="" class="img-fluid">
                                            </div>

                                            <div class="avatar-sm top-child position-relative">
                                                <img src="images/slider/user/img-2.jpg" alt="" class="img-fluid">

                                                <span class="content-image-check">
                                                    <span class="visually-visible"><i
                                                            class="mdi mdi-check f-12"></i></span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="slider-content-button">
                                            <button class="btn btn-dark pe-5">Bid</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- slider item -->

                        <div class="item">
                            <div class="card position-relative overflow-hidden m-2 m-lg-0">
                                <img src="images/slider/img-3.png')}}" alt="logo-img" class="img-fluid">
                                <div class="card-body slider-content position-relative">
                                    <p class="mb-2">Digital</p>
                                    <h5 class="fw-bold ">3.4 ETH</h5>

                                    <div class="d-flex">
                                        <div class=" slider-content-image d-flex mt-3">
                                            <div class="avatar-sm">
                                                <img src="images/slider/user/img-4.jpg" alt="" class="img-fluid">
                                            </div>

                                            <div class="avatar-sm top-child">
                                                <img src="images/slider/user/img-6.jpg" alt="" class="img-fluid">
                                            </div>

                                            <div class="avatar-sm top-child position-relative">
                                                <img src="images/slider/user/img-8.jpg" alt="" class="img-fluid">

                                                <span class="content-image-check">
                                                    <span class="visually-visible"><i
                                                            class="mdi mdi-check f-12"></i></span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="slider-content-button">
                                            <button class="btn btn-dark pe-5">Bid</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- slider item -->

                        <div class="item">
                            <div class="card position-relative overflow-hidden m-2 m-lg-0">
                                <img src="images/slider/img-4.png')}}" alt="logo-img" class="img-fluid">
                                <div class="card-body slider-content position-relative">
                                    <p class="mb-2">Biggest Collection</p>
                                    <h5 class="fw-bold">3.4 ETH</h5>

                                    <div class="d-flex">
                                        <div class=" slider-content-image d-flex mt-3">
                                            <div class="avatar-sm">
                                                <img src="images/slider/user/img-3.jpg" alt="" class="img-fluid">
                                            </div>

                                            <div class="avatar-sm top-child">
                                                <img src="images/slider/user/img-7.jpg" alt="" class="img-fluid">
                                            </div>

                                            <div class="avatar-sm top-child position-relative">
                                                <img src="images/slider/user/img-4.jpg" alt="" class="img-fluid">

                                                <span class="content-image-check">
                                                    <span class="visually-visible"><i
                                                            class="mdi mdi-check f-12"></i></span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="slider-content-button">
                                            <button class="btn btn-dark pe-5">Bid</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- slider item -->
                    </div>
                    <!-- End slider -->
                </div>

            </div>
        </div>
        <!-- end container -->
    </section>
    <!-- end home -->

     <!-- start section -->
     <section class="profile section bg-light">
        <!-- start container -->
        <div class="container">


            <div class="row align-items-center justify-content-center">
                <div class="col-lg-8">
                    <div class="inner-heading text-center">
                        <div class="mt-4">
                            <h1 class="fw-bold">Best Collections</h1>
                            <P class="text-muted">Unit of data stored on a digital ledger, called a blockchain, that
                                certifies adigital asset <br> to be unique and therefore not interchangeable.</P>
                        </div>
                    </div>

                    <div class="heading-bottom-icon d-flex justify-content-center text-center">
                        <i class="mdi mdi-image-filter-vintage"></i>
                        <i class="mdi mdi-image-filter-vintage mx-2"></i>
                        <i class="mdi mdi-image-filter-vintage"></i>
                    </div>
                </div>
            </div>


            <!-- start row -->
            <div class="row mt-4">
                <div class="col-lg-12 mt-5">
                    <div class="blog">
                        <div class="row">
                        @if($product_lists)
                                @foreach($product_lists as $key=>$product)
                            <div class="col-lg-4">
                                <div class="collection-items mt-4">
                                    <div class="blog-box">
                                        <div class="collection-image">
                                            <div class="blog-image">
                                                @php
                                                $photo=explode(',',$product->photo);
                                                    // dd($photo);
                                                @endphp
                                                <img src="{{$photo[0]}}" alt="{{$photo[0]}}"
                                                class="img-fluid w-100">
                                            </div>
                                        </div>
                                        <div class="collection-content mt-3">
                                            <div class="d-flex align-items-center">
                                                <div class="collection-title">
                                                    <a href="" class="fw-bold h5">Digital Art Gallery</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @endif
                        
                        </div>

                    </div>
                </div>
            </div>
            <!-- end row -->

        </div>
        <!-- end container -->
    </section>




@endsection