@extends('client.raffles.layouts.app')
@section('content')
    <div class="study-destinations-banner">
        <img src="{{ asset('raffles/assets/images/backgrounds_general/franchise-banner.png') }}" alt="">
    </div>

    <div class="pt-40 why-us">
        <div class="container-fluid">
            <div class="row sm:px-20 pr-30 first-row pt-20 pb-30">
                <div class="col col-xl-6">
                    <div class="franchise-model">
                        <img src="{{ asset($page->image) }}" alt="">
                    </div>
                </div>
                <div class="col col-xl-6">
                    <div class="flex flex-col gap-10 pb-30 border-bottom">
                        <h2 class="md:text-20 text-50 text-sec">{{ $page->title }}</h2>
                        <h3 class="md:text-20 text-50 text-brand">Raffles EduCare</h3>
                        {!! $page->description !!}
                    </div>

                    <div class="flex flex-col gap-20 pt-20">
                        <h5 class="text-20 text-black">Have any questions?
                            Call/Whatsapp</h5>
                        <a class="text-26 text-black" href="tel:9801086208">+977 {{ setting('mobile') }}</a>
                    </div>

                </div>
            </div>
        </div>

        <div class="become-member">
            <div class="container">


                <div class="row sm:p-20 mt-20 p-60  ">

                    <div class="col-sm-12">
                        <div class="flex flex-col gap-20 justify-center text-center">
                            <h4 class="text-white text-20">Become one of us!</h4>
                            <h3 class="text-white md:text-24 text-40">Members Benefit</h3>

                        </div>
                    </div>
                    <div class="row py-20">
                        <div class="col col-sm-6 col-md-4">
                            <div class="flex gap-20 items-start pt-20">
                                <h4 class="md:text-30 text-80 text-white font-bold">1</h4>
                                <h3 class="md:text-20 text-28 text-white font-bold">Brand value Exposure</h3>
                            </div>

                        </div>
                        <div class="col col-sm-6 col-md-4">
                            <div class="flex gap-10 items-start pt-20">
                                <h4 class="md:text-30 text-80 text-white font-bold">2</h4>
                                <h3 class="md:text-20 text-28 text-white font-bold">Leads generation & Referral</h3>
                            </div>

                        </div>
                        <div class="col col-sm-6 col-md-4">
                            <div class="flex gap-10 items-start pt-20">
                                <h4 class="md:text-30 text-80 text-white font-bold">3</h4>
                                <h3 class="md:text-20 text-28 text-white font-bold">Business Expertise support</h3>
                            </div>

                        </div>
                        <div class="col col-sm-6 col-md-4">
                            <div class="flex gap-10 items-start pt-20">
                                <h4 class="md:text-30 text-80 text-white font-bold">4</h4>
                                <h3 class="md:text-20 text-28 text-white font-bold">Be Part of a Global Legacy</h3>
                            </div>

                        </div>
                        <div class="col col-sm-6 col-md-4">
                            <div class="flex gap-10 items-start pt-20">
                                <h4 class="md:text-30 text-80 text-white font-bold">5</h4>
                                <h3 class="md:text-20 text-28 text-white font-bold">Revenue sharing opportunities</h3>
                            </div>

                        </div>
                        <div class="col col-sm-6 col-md-4">
                            <div class="flex gap-10 items-start pt-20">
                                <h4 class="md:text-30 text-80 text-white font-bold">6</h4>
                                <h3 class="md:text-20 text-28 text-white font-bold">Dedicated partnerships Manager</h3>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="row sm:p-20 p-60 bg-sec">
            <div class="col col-12">
                <div class=" py-20 ">
                    <div class="py-10">
                        <h3 class="text-white md:text-24 text-44 text-center">Let’s discuss
                            on something <span class="text-brand">cool</span> together</h3>

                    </div>

                    <div class="franchise-form bg-white">

                        <form action="">
                            <label class="text-16 pb-5" for="">Your Name <span
                                    class="text-brand">(Required)</span></label>
                            <div class="flex gap-10 ">
                                <div class="w-full">
                                    <label class="text-14 pb-5" for="">First</label>
                                    <input class="w-full mb-30 rounded-6 py-10 text-14 px-10" type="text" name=""
                                        id="">
                                </div>
                                <div class="w-full">
                                    <label class="text-14 pb-5" for="">Last</label>
                                    <input class="w-full mb-30 rounded-6 py-10 text-14 px-10" type="text" name=""
                                        id="">
                                </div>




                            </div>

                            <label class="text-16 pb-5" for="">Your Email Address <span
                                    class="text-brand">(Required)</span></label>
                            <input class="w-full mb-20 rounded-6 py-10 text-14 px-10" type="email" name=""
                                id="">



                            <label class="text-16 pb-5" for="">Your Phone <span
                                    class="text-brand">(Required)</span></label>
                            <input class="w-full mb-20 rounded-6 py-10 text-14 px-10" type="text" name=""
                                id="">


                            <label class="text-16 pb-5" for="">Your Address <span
                                    class="text-brand">(Required)</span></label>

                            <input class="w-full mb-20 rounded-6 py-10 text-14 px-10" type="text" name=""
                                id="">

                            <div class="flex gap-10 ">
                                <div class="w-full">
                                    <label class="text-14 pb-5" for="">City</label>
                                    <input class="w-full mb-30 rounded-6 py-10 text-14 px-10" type="text"
                                        name="" id="">
                                </div>
                                <div class="w-full">
                                    <label class="text-14 pb-5" for="">State/Region/Province</label>
                                    <input class="w-full mb-30 rounded-6 py-10 text-14 px-10" type="text"
                                        name="" id="">
                                </div>




                            </div>


                            <div class="sm:block flex gap-10 ">
                                <div class="w-full">
                                    <label class="text-14 pb-5" for="">Level to Invest</label>
                                    <select class="w-full py-5" name="" id="">
                                        <option value="">Less than $20,000</option>
                                        <option value="">Less than $30,000</option>
                                        <option value="">Less than $40,000</option>
                                        <option value="">Less than $50,000</option>
                                    </select>

                                    <!-- <select name="" id="franchise-invest">
                                                                                                                                <option value="" selected hidden> Less than $10,000</option>
                                                                                                                                <option value=""></option>
                                                                                                                            </select> -->


                                </div>
                                <div class="w-full">
                                    <label class="text-14 pb-5" for="">Do you currently own a business?
                                        (Yes/No)</label>
                                    <input class="w-full mb-30 rounded-6 py-10 text-14 px-10" type="text"
                                        name="" id="">
                                </div>




                            </div>


                            <label class="text-14 pb-5" for=""> If yes, please describe your current
                                business</label>


                            <textarea class="w-full mb-20 rounded-6 py-10 text-14 px-10" name="" id=""></textarea>


                            <div class="sm:block flex gap-10 ">
                                <div class="w-full">
                                    <label class="text-14 pb-5" for="">Preferred Franchise Location</label>
                                    <input class="w-full mb-30 rounded-6 py-10 text-14 px-10" type="text"
                                        name="" id="">
                                </div>
                                <div class="w-full">
                                    <label class="text-14 pb-5" for="">Timeframe to Start</label>
                                    <select class="w-full py-5" name="" id="">
                                        <option value="">within 1 year</option>
                                        <option value="">After 1 year</option>

                                    </select>
                                    <!-- <select name="" id="franchise-timeframe">
                                                                                                                                <option value="" selected hidden> within 6 months</option>
                                                                                                                                <option value=""></option>
                                                                                                                            </select> -->
                                </div>





                            </div>
                            <div class="sm:w-full w-50percent">
                                <label class="text-14 pb-5" for="">Do u already have an office setup ?</label>
                                <input class="w-full mb-30 rounded-6 py-10 text-14 px-10" type="text" name=""
                                    id="">
                            </div>

                            <label class="text-14 pb-5" for=""> Please add your bussiness portfolio website ,and
                                let us know
                                if you have any questions?</label>
                            <textarea class="w-full mb-20 rounded-6 py-10 text-14 px-10" name="" id=""></textarea>


                            <button class="button-hover px-20 py-10 bg-sec text-white  text-16 border-0">Send
                                Message</button>
                        </form>
                    </div>





                    <div class="flex justify-center gap-30 pt-30 flex-wrap">
                        <a class="flex  items-center gap-10 border px-10 py-20" href="mailto:info@raffleseducare.com">
                            <i class="fa-solid fa-envelope text-brand text-18"></i>
                            <p class="text-white text-18 m-0 p-0">{{ setting('email') }}</p>
                        </a>
                        <a class="flex items-center gap-10 border px-10 py-20" href="tel:info@+977-1234567890">
                            <i class="fa-solid fa-phone  text-brand text-18"></i>
                            <p class="text-white text-18 m-0 p-0">+977-{{ setting('mobile') }}</p>
                        </a>
                        <div class="flex items-center gap-10 border px-10 py-20">
                            <i class="fa-solid fa-location-dot  text-brand text-18"></i>
                            <p class="text-white text-18 m-0 p-0">{{ setting('location') }}</p>
                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>
@endsection