@extends('home.layouts.app')
@section('page-title', $title)
@section('content')
    <section id="hero" class="hero section">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <h2>Work from the comfort of your home, set your hours!</h2>
                    <p class="mt-3">Earn up to $500 per task, no sales, no calling, no low paying or endless surveys, no
                        upsells. Just write your honest opinion about companies you have interacted with and get paid.
                        <br>INSTANT PAYOUTS !!!
                    </p>
                    <a href="{{ route('user.register') }}" class="mt-4 btn btn-xlg btn-orange">Register Now</a>
                </div>
                <div class="col-lg-6 d-flex justify-content-center">
                    <img src="{{ asset('themes/frontend/img/home-slide-1.svg') }}" alt="" />
                </div>
            </div>
        </div>
    </section><!-- /Hero Section -->
    <!-- Services Section -->
    <section class="services section">
        <!-- Section Title -->
        <div class="container section-title mb-0 pb-2">
            <h5 class="text-orange">Get started</h5>
            <h3>How To Start Earning</h3>
        </div><!-- End Section Title -->

        <div class="container">
            <div class="row gy-2">
                <div class="col-lg-3 mb-3">
                    <div class="service-item text-center">
                        <div class="icon flex-shrink-0 mb-3">
                            <img src="{{ asset('themes/frontend/img/icon-1.svg') }}" alt="" />
                        </div>
                        <div>
                            <h4 class="title mb-2">Create an Account</h4>
                            <p class="description">Start by creating an account (no fees required at any point)
                            </p>
                        </div>
                    </div>
                </div><!-- End Service Item -->

                <div class="col-lg-3 mb-3">
                    <div class="service-item text-center">
                        <div class="icon flex-shrink-0 mb-3">
                            <img src="{{ asset('themes/frontend/img/icon-2.svg') }}" alt="" />
                        </div>
                        <div>
                            <h4 class="title mb-2">Share Your Opinion</h4>
                            <p class="description">Share your opinion on local businesses around you.</p>
                        </div>
                    </div>
                </div><!-- End Service Item -->

                <div class="col-lg-3 mb-3">
                    <div class="service-item text-center">
                        <div class="icon flex-shrink-0 mb-3">
                            <img src="{{ asset('themes/frontend/img/icon-3.svg') }}" alt="" />
                        </div>
                        <div>
                            <h4 class="title mb-2">Perform Tasks</h4>
                            <p class="description">Share proof of work and get instant payments</p>
                        </div>
                    </div>
                </div><!-- End Service Item -->

                <div class="col-lg-3 mb-3">
                    <div class="service-item text-center">
                        <div class="icon flex-shrink-0 mb-3">
                            <img src="{{ asset('themes/frontend/img/icon-4.svg') }}" alt="" />
                        </div>
                        <div>
                            <h4 class="title mb-2">Withdraw Earnings</h4>
                            <p class="description">Payment methods available are PayPal, Cashapp, Venmo, Zelle.</p>
                        </div>
                    </div>
                </div><!-- End Service Item -->
            </div>

        </div>

    </section><!-- /Services Section -->

    <!-- Features Section -->
    <section id="features" class="features section">

        <div class="container">

            <div class="row gy-1 align-items-stretch justify-content-between features-item ">
                <div class="col-lg-6 d-flex align-items-center features-img-bg">
                    <img src="{{ asset('themes/frontend/img/earn-money.svg') }}" class="img-fluid" alt="">
                </div>
                <div class="col-lg-6 d-flex justify-content-center flex-column">
                    <h3>Help Companies Improve</h3>
                    <p>Businesses want to know what you honestly think about them through reviews.</p>
                    <ul>
                        <li><img src="{{ asset('themes/frontend/img/check-icon.svg') }}" class="me-2" alt="">
                            <span>Flexible selection process</span>
                        </li>
                        <li><img src="{{ asset('themes/frontend/img/check-icon.svg') }}" class="me-2" alt="">
                            <span>Instant withdrawals</span>
                        </li>
                        <li><img src="{{ asset('themes/frontend/img/check-icon.svg') }}" class="me-2" alt="">
                            <span>No investment or signup fee required</span>.
                        </li>
                    </ul>
                    <a href="{{ route('user.register') }}" class="text-orange">Get Started</a>
                </div>
            </div><!-- Features Item -->

            <div class="bubble-element Group baTaHaMaY bubble-r-container d-flex d-row"
                style="background-color: rgb(244, 136, 86); overflow: visible; justify-content: space-around; border-radius: 20px; opacity: 1; align-self: flex-start; min-width: 200px; order: 5; min-height: 170px; height: max-content; flex-grow: 0; flex-shrink: 0; width: calc(100% - 60px); margin: 30px 30px 0px; z-index: 6;">
                <div class="bubble-element Text baTaHaMb relative"
                    style="white-space: pre-wrap; overflow: visible; font-family: Lexend; font-size: 30px; font-weight: 700; color: rgb(255, 255, 255); line-height: 1.4; border-radius: 0px; opacity: 1; align-self: center; min-width: 200px; max-width: 480px; order: 1; min-height: 0px; width: 200px; flex-grow: 1; height: max-content; margin: 15px 30px; z-index: 2;">
                    Ready to start making side cash from home?</div>
                <div class="bubble-element Image baTaHaMe"
                    style="border-radius: 0px; opacity: 1; align-self: center; min-width: 100px; max-width: 200px; order: 2; min-height: 110px; max-height: 110px; width: 100px; flex-grow: 1; height: 110px; margin: 0px; z-index: 3;">
                    <img src="{{ asset('themes/frontend/img/pattarn.svg') }}"
                        style="top: 0px; left: 0px; display: block; width: 100%; height: 100%; position: absolute; border-radius: 0px;">
                </div>
                <div class="bubble-element Group baTaHaMh bubble-r-container d-flex column"
                    style="overflow: visible; justify-content: space-around; border-radius: 0px; opacity: 1; align-self: center; min-width: 260px; max-width: 260px; order: 3; min-height: 160px; max-height: 160px; width: 260px; flex-grow: 1; height: 160px; margin: 0px 30px; z-index: 4;">
                    <div class="bubble-element Image baTaHaMk"
                        style="border-radius: 0px; opacity: 1; align-self: center; min-width: 73px; max-width: 73px; order: 1; min-height: 25px; max-height: 25px; height: 25px; flex-grow: 1; width: 73px; margin: 0px; z-index: 2;">
                        <img src="{{ asset('themes/frontend/img/Group%2046.svg') }}"
                            style="top: 0px; left: 0px; display: block; width: 100%; height: 100%; position: absolute; border-radius: 0px;">
                    </div><button class="clickable-element bubble-element Button baTaHaMn"
                        style="box-shadow: 0px 7px 30px -10px rgba(var(--color_primary_default_rgb), 0.1); background-color: rgb(255, 255, 255); font-family: Lexend; font-size: 15px; font-weight: 600; color: rgb(244, 136, 86); text-align: center; line-height: 1; border-radius: 5px; padding: 12px 24px; opacity: 1; transition: background 200ms ease 0s; cursor: pointer; align-self: center; min-width: 260px; max-width: 260px; order: 2; min-height: 45px; height: max-content; flex-grow: 0; flex-shrink: 0; width: 260px; margin: 0px; z-index: 3;"
                        onclick="window.location='{{ route('user.register') }}'">Start Now</button>
                    <div class="bubble-element Image baTaHaMq"
                        style="border-radius: 0px; opacity: 1; align-self: center; min-width: 73px; max-width: 73px; order: 3; min-height: 25px; max-height: 25px; height: 25px; flex-grow: 1; width: 73px; margin: 0px; z-index: 4;">
                        <img src="{{ asset('themes/frontend/img/Group%2047.svg') }}"
                            style="top: 0px; left: 0px; display: block; width: 100%; height: 100%; position: absolute; border-radius: 0px;">
                    </div>
                </div>
            </div>
        </div>
    </section><!-- /Features Section -->
@endsection