@extends('layouts.landing')
    @section('content')
        <!-- Hero Section -->
        <div class="position-relative border-bottom">
        <!-- Hero Carousel Main -->
        <div id="heroNav" class="js-slick-carousel slick slick-equal-height"
            data-hs-slick-carousel-options='{
                "prevArrow": "<span class=\"fas fa-arrow-left d-none d-md-inline-block slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
                "nextArrow": "<span class=\"fas fa-arrow-right d-none d-md-inline-block slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
                "infinite": true,
                "autoplay": true,
                "autoplaySpeed": 10000,
                "adaptiveHeight": true,
                "counterSelector": "#slickCounter",
                "counterDivider": "/",
                "counterClassMap": {
                "current": "slick-counter-current",
                "total": "slick-counter-total",
                "divider": "slick-counter-divider"
                },
                "dots": true,
                "dotsClass": "slick-pagination slick-pagination-white d-md-none container position-absolute bottom-0 right-0 left-0 justify-content-start mb-6 pl-3 mx-auto",
                "asNavFor": "#heroNavThumb"
            }'>
            <div class="js-slide gradient-y-overlay-sm-gray-900 bg-img-hero" style="background-image: url({{ asset("new-images/bitcoin-3089728_1280.jpg") }});">
            <!-- Slide #1 -->
            <div class="container d-md-flex align-items-md-center vh-md-70 space-top-4 space-bottom-3 space-md-0">
                <div class="w-80 w-lg-50">
                <span class="d-block h3 text-white mb-2"
                        data-hs-slick-carousel-animation="fadeInUp">
                    Discover a place you'll
                </span>
                <h1 class="text-white display-4 mb-0"
                    data-hs-slick-carousel-animation="fadeInUp"
                    data-hs-slick-carousel-animation-delay="200">
                   love to live
                </h1>
                </div>
            </div>
            <!-- End Slide #1 -->
            </div>

            <div class="js-slide gradient-y-overlay-sm-gray-900 bg-img-hero" style="background-image: url({{ asset("new-images/bitcoin-6230530_1280.jpg") }});">
            <!-- Slide #2 -->
            <div class="container d-md-flex align-items-md-center vh-md-70 space-top-4 space-bottom-3 space-md-0">
                <div class="w-80 w-lg-50">
                <span class="d-block h3 text-white mb-2"
                        data-hs-slick-carousel-animation="fadeInUp">
                    Discover a place you'll
                </span>
                <h2 class="text-white display-4 mb-0"
                    data-hs-slick-carousel-animation="fadeInUp"
                    data-hs-slick-carousel-animation-delay="200">
                    enjoy living
                </h2>
                </div>
            </div>
            <!-- End Slide #2 -->
            </div>
        </div>
        <!-- End Hero Carousel Main -->

        <!-- Slick Paging -->
        <div class="container position-relative">
            <div id="slickCounter" class="slick-counter"></div>
        </div>
        <!-- End Slick Paging -->

        <!-- Hero Carousel Secondary -->
        <div id="heroNavThumb" class="js-slick-carousel slick"
            data-hs-slick-carousel-options='{
                "infinite": true,
                "autoplay": true,
                "autoplaySpeed": 10000,
                "isThumbs": true,
                "asNavFor": "#heroNav"
            }'>
            <div class="js-slide">
            <!-- Slide #1 -->
            <div class="d-flex align-items-center bg-white position-relative vh-md-30">
                <div class="container space-2">
                <div class="row">
                    <div class="col-md-4">
                    <h3 class="text-muted">
                        <span class="d-block font-weight-bold">01.</span>
                        <span class="d-block text-dark">Find homes for sale</span>
                    </h3>
                    <p class="mb-0">Bevytrade helps you make better property decisions</p>
                    </div>
                </div>
                </div>

                <div class="col-md-5 d-none d-md-inline-block bg-dark position-absolute top-0 right-0 bottom-0">
                <div class="content-centered-y p-7">
                    <h3 class="text-white">
                    <span class="text-white">Next:</span> Find rental properties
                    </h3>
                    <p class="text-white-70 mb-0">Find a home or apartment with Bevytrade, we provide the best options.</p>
                </div>
                </div>
            </div>
            <!-- End Slide #1 -->
            </div>

            <div class="js-slide">
            <!-- Slide #2 -->
            <div class="d-flex align-items-center bg-white position-relative vh-md-30">
                <div class="container space-2">
                <div class="row">
                    <div class="col-md-4">
                    <h3 class="text-muted">
                        <span class="d-block font-weight-bold">02.</span>
                        <span class="d-block text-dark">Find rental properties</span>
                    </h3>
                    <p class="mb-0">Find a home or apartment with Bevytrade, we provide the best options.</p>
                    </div>
                </div>
                </div>

                <div class="col-md-5 d-none d-md-inline-block bg-dark position-absolute top-0 right-0 bottom-0">
                <div class="content-centered-y p-7">
                    <h3 class="text-white">
                    <span class="text-white">Prev:</span> Find homes for sale
                    </h3>
                    <p class="text-white-70 mb-0">Bevytrade helps you make better property decisions</p>
                </div>
                </div>
            </div>
            <!-- End Slide #2 -->
            </div>
        </div>
        <!-- End Hero Carousel Secondary -->
        </div>
        <!-- End Hero Section -->
        @include('inc.properties')
        @include('inc.footer')
    @endsection