@extends('layouts.main-layout')

<!-- MAIN -->
@section('main')
    <!-- SECTION Banner -->
    <section class="section section-layout-banner appear-anim" id="home-banner-section" data-scroll>
        <div class="container">
            <!-- Banner layout -->
            <div class="banner-layout">
                <!-- Left column -->
                <div class="left-col banner-content">
                    <!-- Gold decor -->
                    <figure class="img-holder decor decor-1 mb-hide">
                        <img src="{{asset('assets/images/decor/gold-decor-4.png')}}" alt="decor image">
                    </figure>

                    <!-- Gold decor -->
                    <figure class="img-holder decor decor-2 mb-hide">
                        <picture>
                            <img src="{{asset('assets/images/decor/gold-decor-5.png')}}" alt="decor image">
                        </picture>
                    </figure>

                    <!-- Round decor -->
                    <figure class="img-holder decor decor-3">
                        <img src="{{asset('assets/images/decor/round-decor.png')}}" alt="decor image">
                    </figure>

                    <!-- Round decor -->
                    <figure class="img-holder decor decor-4">
                        <img src="{{asset('assets/images/decor/round-decor.png')}}" alt="decor image">
                    </figure>

                    <!-- Round decor -->
                    <figure class="img-holder decor decor-6 mb-show">
                        <img src="{{asset('assets/images/decor/round-decor.png')}}" alt="decor image">
                    </figure>

                    <!-- BG decor -->
                    <figure class="img-holder decor decor-5 mb-hide">
                        <img src="{{asset('assets/images/decor/bg-decor.png')}}" alt="decor image">
                    </figure>

                    <div class="content-block anim-target">
                        <h1 class="hidden">
                            Thanh toán ngay vui hè may mắn
                        </h1>

                        <!-- Banner label -->
                        <p class="banner-label">
                            Chương trình hè rực rỡ
                        </p>

                        <!-- Banner title -->
                        <div class="banner-title">
                            <p data-content="THANH TOÁN NGAY" class="ele-1">THANH TOÁN NGAY</p>
                            <p data-content="VUI HÈ MAY MẮN" class="ele-2">VUI HÈ MAY MẮN</p>
                        </div>

                        <!-- Promotion date -->
                        <p class="promotion-date">
                            15/04/2024 đến 14/07/2024
                        </p>

                        <!-- CTA -->
                        <button type="button" class="btn coming-soon-btn open-modal mb-hide">
                            Tham gia ngay
                        </button>
                    </div>

                </div>

                <!-- Right column -->
                <div class="right-col">
                    <div class="talent-layout">
                        <!-- Main item -->
                        <!-- Wheel -->
                        <figure class="img-holder banner-wheel">
                            <picture>
                                <source media="(max-width: 1024px)" srcset="{{asset('assets/images/banner-wheel-mb.png')}}">
                                <img src="{{asset('assets/images/banner-wheel.png')}}" alt="banner wheel">
                            </picture>
                        </figure>

                        <!-- Talent -->
                        <figure class="img-holder talent-img">
                            <picture>
                                <source media="(max-width: 1024px)" srcset="{{asset('assets/images/talent-mb.png')}}">
                                <img src="{{asset('assets/images/talent.png')}}" alt="talent">
                            </picture>
                        </figure>

                        <!-- Gold Element -->
                        <figure class="img-holder gold-item">
                            <img src="{{asset('assets/images/gold-item.png')}}" alt="gold element">
                        </figure>

                        <!-- Decor -->
                        <figure class="img-holder gold-decor-1">
                            <picture>
                                <source media="(max-width: 1024px)"
                                    srcset="{{asset('assets/images/decor/gold-decor-1-mb.png')}}">
                                <img src="{{asset('assets/images/decor/gold-decor-1.png')}}" alt="decor image">
                            </picture>
                        </figure>

                        <!-- Decor -->
                        <figure class="img-holder gold-decor-2">
                            <picture>
                                <source media="(max-width: 1024px)"
                                    srcset="{{asset('assets/images/decor/gold-decor-2-mb.png')}}">
                                <img src="{{asset('assets/images/decor/gold-decor-2.png')}}" alt="decor image">
                            </picture>
                        </figure>

                        <!-- Decor -->
                        <figure class="img-holder gold-decor-3">
                            <picture>
                                <source media="(max-width: 1024px)"
                                    srcset="{{asset('assets/images/decor/gold-decor-3-mb.png')}}">
                                <img src="{{asset('assets/images/decor/gold-decor-3.png')}}" alt="decor image">
                            </picture>
                        </figure>

                        <!-- Decor -->
                        <figure class="img-holder gold-decor-4 mb-show">
                            <img src="{{asset('assets/images/decor/gold-decor-4-mb.png')}}" alt="decor image">
                        </figure>

                        <!-- Decor -->
                        <figure class="img-holder gold-decor-5 mb-show">
                            <img src="{{asset('assets/images/decor/gold-decor-5-mb.png')}}" alt="decor image">
                        </figure>

                        <!-- Decor -->
                        <figure class="img-holder light-decor light-decor-1">
                            <img src="{{asset('assets/images/decor/light-decor.png')}}" alt="decor image">
                        </figure>

                        <!-- Decor -->
                        <figure class="img-holder light-decor light-decor-2">
                            <img src="{{asset('assets/images/decor/light-decor.png')}}" alt="decor image">
                        </figure>
                    </div>



                    <!-- CTA -->
                    <button type="button" class="btn coming-soon-btn open-modal mb-show">
                        Tham gia ngay
                    </button>
                </div>
            </div>
        </div>
    </section>
    <!-- SECTION Banner - END -->

    <!-- SECTION Modal layout -->
    @include('modals.modal-teasing')
    <!-- SECTION Modal layout - END -->
@endsection
<!-- MAIN - END -->

<!-- SCRIPT REF -->
@section('script')
    <script src="{{asset(mix('assets/js/jquery-3.3.1.min.js'))}}"></script>
    <script src="{{asset(mix('js/scripts.js'))}}"></script>
    </script>
@endsection
<!-- SCRIPT REF - END -->