@extends('frontend/layouts_frontend/master_frontend')

@section('title')
    Home - Relocate Uganda
@endsection


@section('extra_styles')
@endsection

{{-- CONTENT SECTION --}}
@section('content')
    <!--=====================================-->
    <!--=   Main Banner     Start           =-->
    <!--=====================================-->

    <section class="main-banner-wrap1 main-banner-wrap5" data-bg-image="assets/frontend_assets/img/slider/slider4.jpg">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="main-banner-box1 main-banner-box5">
                        <h1 class="item-title wow fadeInUp" data-wow-delay=".4s" style="font-family: 'Raleway', sans-serif;">Book your next accomodation today !</h1>
                        {{-- search --}}

                        <div class="row">
                            <div class="col-md-1"></div>
                            <div class="col-md-10">
                                <div class="rld-main-search">
                                    <div class="row">
                                            {{-- search form  --}}
                                            <form action="{{ route('apartments.search') }}" method="GET">
                                                <div class="box">
                                                    <div class="box-top">
                                                        <div class="rld-single-input item">
                                                            <input type="text" name="query"
                                                                placeholder="Search any accomodation by price in USD ie 2000" required>
                                                        </div>
        
                                                        <div class="item rt-filter-btn">
        
        
                                                            {{-- <a class="filter-btn"><button type="submit">
                                                            <span>Search</span><i class="fas fa-search"></i></button></a> --}}
                                                            <div class="filter-button-area">
                                                            <button type="submit" class="btn btn-success"
                                                                style="background-color:#8c325f;"><i
                                                                class="fas fa-search"></i> Search</button>
                                                            </div>
        
        
        
        
                                                                {{-- <div class="filter-button-area">
                                                                    <a class="filter-btn" href="with-sidebar.html"><span>Search</span><i
                                                                            class="fas fa-search"></i></a>
                                                                </div> --}}
                                                                
                                                        </div>
                                                    </div>
        
                                                </div>
                                            </form>
                                            {{-- end search form --}}
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="col-md-1"></div>
                        </div>
                       
                        <p class="item-para wow fadeInUp" data-wow-delay=".4s" style="margin-top:-15px;">We have the
                            properties <span class="banner-p"> you have been looking for !</span>
                        </p>
{{--                         
                        <div class="banner-search-wrap">
                            <div class="rld-main-search">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="box">
                                            <div class="box-top">
                                                <div class="rld-single-input item">
                                                    <input type="text" placeholder="Enter Kewword here...">
                                                </div>
                                                
                                             
                                                
                                                   
                                                    <div class="filter-button-area">
                                                        <a class="filter-btn" href="with-sidebar.html"><span>Search</span><i
                                                                class="fas fa-search"></i></a>
                                                    </div>
                                              
                                            </div>
                                            <div class="explore__form-checkbox-list full-filter">
                                                <div class="row">
                                                    <div class="col-lg-4 col-md-6 py-1 pr-30 pl-0">
                                                        <div class="form-group bed">
                                                            <label class="item-bedrooms">Bedrooms</label>
                                                            <div class="nice-select form-control wide" tabindex="0">
                                                                <span class="current">Any</span>
                                                                <ul class="list">
                                                                    <li data-value="1" class="option selected ">For
                                                                        Sale</li>
                                                                    <li data-value="2" class="option">For Rent</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4 col-md-6 py-1 pr-30 pl-0 ">
                                                        <div class="form-group bath">
                                                            <label class="item-bath">Bathrooms</label>
                                                            <div class="nice-select form-control wide" tabindex="0">
                                                                <span class="current">Any</span>
                                                                <ul class="list">
                                                                    <li data-value="1" class="option selected">1
                                                                    </li>
                                                                    <li data-value="2" class="option">2</li>
                                                                    <li data-value="3" class="option">3</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4 col-md-6 py-1 pl-0 pr-0">
                                                        <div class="form-group garage">
                                                            <label class="item-garage">Garage</label>
                                                            <div class="nice-select form-control wide" tabindex="0">
                                                                <span class="current">Any</span>
                                                                <ul class="list">
                                                                    <li data-value="1" class="option selected">1
                                                                    </li>
                                                                    <li data-value="2" class="option">2</li>
                                                                    <li data-value="3" class="option">3</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="main-search-field-2 col-12">
                                                        <div class="row">
                                                            <div class="col-md-6 pl-0">
                                                                <div class="price-range-wrapper">
                                                                    <div class="range-box">
                                                                        <div class="price-label">Flat Size:</div>
                                                                        <div id="price-range-filter-3"
                                                                            class="price-range-filter"></div>
                                                                        <div
                                                                            class="price-filter-wrap d-flex align-items-center">
                                                                            <div class="price-range-select">
                                                                                <div class="price-range"
                                                                                    id="price-range-min-3"></div>
                                                                                <div class="price-range">-</div>
                                                                                <div class="price-range"
                                                                                    id="price-range-max-3"></div>
                                                                                <div class="price-range range-title">
                                                                                    sft</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 pl-0">
                                                                <div class="price-range-wrapper">
                                                                    <div class="range-box">
                                                                        <div class="price-label">Distance:</div>
                                                                        <div id="price-range-filter-2"
                                                                            class="price-range-filter"></div>
                                                                        <div
                                                                            class="price-filter-wrap d-flex align-items-center">
                                                                            <div class="price-range-select">
                                                                                <div class="price-range"
                                                                                    id="price-range-min-2"></div>
                                                                                <div class="price-range">-</div>
                                                                                <div class="price-range"
                                                                                    id="price-range-max-2"></div>
                                                                                <div class="price-range range-title">
                                                                                    km</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">

                                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                                            <h4 class="text-dark">Amenities</h4>
                                                            <ul class="no-ul-list third-row">
                                                                <li>
                                                                    <input id="a-1" class="checkbox-custom"
                                                                        name="a-1" type="checkbox">
                                                                    <label for="a-1"
                                                                        class="checkbox-custom-label">Air
                                                                        Condition</label>
                                                                </li>
                                                                <li>
                                                                    <input id="a-2" class="checkbox-custom"
                                                                        name="a-2" type="checkbox">
                                                                    <label for="a-2"
                                                                        class="checkbox-custom-label">Bedding</label>
                                                                </li>
                                                                <li>
                                                                    <input id="a-3" class="checkbox-custom"
                                                                        name="a-3" type="checkbox">
                                                                    <label for="a-3"
                                                                        class="checkbox-custom-label">Heating</label>
                                                                </li>
                                                                <li>
                                                                    <input id="a-4" class="checkbox-custom"
                                                                        name="a-4" type="checkbox">
                                                                    <label for="a-4"
                                                                        class="checkbox-custom-label">Internet</label>
                                                                </li>
                                                                <li>
                                                                    <input id="a-5" class="checkbox-custom"
                                                                        name="a-5" type="checkbox">
                                                                    <label for="a-5"
                                                                        class="checkbox-custom-label">Microwave</label>
                                                                </li>
                                                                <li>
                                                                    <input id="a-6" class="checkbox-custom"
                                                                        name="a-6" type="checkbox">
                                                                    <label for="a-6"
                                                                        class="checkbox-custom-label">Smoking
                                                                        Allow</label>
                                                                </li>
                                                                <li>
                                                                    <input id="a-7" class="checkbox-custom"
                                                                        name="a-7" type="checkbox">
                                                                    <label for="a-7"
                                                                        class="checkbox-custom-label">Terrace</label>
                                                                </li>
                                                                <li>
                                                                    <input id="a-8" class="checkbox-custom"
                                                                        name="a-8" type="checkbox">
                                                                    <label for="a-8"
                                                                        class="checkbox-custom-label">Balcony</label>
                                                                </li>
                                                                <li>
                                                                    <input id="a-9" class="checkbox-custom"
                                                                        name="a-9" type="checkbox">
                                                                    <label for="a-9"
                                                                        class="checkbox-custom-label">Balcony</label>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>
                                                    <div class="filter-button">
                                                        <a href="index3.html" class="filter-btn1">Apply Filter</a>
                                                        <a href="index3.html" class="filter-btn1 reset-btn">Reset Filter<i
                                                                class="fas fa-redo-alt"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            
                            
                            <p class="item-para wow fadeInUp" data-wow-delay=".4s" style="margin-top:-15px;">We have the
                                properties <span class="banner-p"> you have been looking for !</span>
                            </p>
                        </div> --}}
                        {{-- end of search --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=====================================-->
    <!--=   Choose     Start                =-->
    <!--=====================================-->

    <section class="why-choose-wrap1">
        <div class="container">
            <div class="item-heading-center mb-20">
                <span class="section-subtitle">Check Out</span>
                <h2 class="section-title"> What We Do</h2>
                <div class="bg-title-wrap" style="display: block;">
                    <span class="background-title solid">Speciality</span>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6">
                    <div class="choose-box1 choose-box2 wow fadeInUp" data-wow-delay=".2s">
                        <div class="choose-shape1">
                            <a href="javascript::void(0)">
                                {{-- <img src="assets/frontend_assets/img/figure/shape3.svg"
                                    alt="shape" width="59" height="63"> --}}
                                    <i class="fas fa-search fa-2x" style="color:#8c325f;" ></i>
                                </a>
                        </div>
                        <h3 class="item-title"><a href="javascript::void(0)">Convinience</a></h3>
                        <p>Our apartments are in in vibrant neighborhoods, providing easy access to 
                            essential amenities, transportation, and cultural.</p>
                        {{-- <div class="choose-button">
                            <a href="single-listing1.html" class="item-btn">Check Property<i
                                    class="fas fa-chevron-circle-right"></i></a>
                        </div> --}}
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="choose-box1  choose-box2 wow fadeInUp" data-wow-delay=".4s">
                        <div class="choose-shape1">
                            <a href="javascript::void(0)">
                                {{-- <img src="assets/frontend_assets/img/figure/shape4.svg"
                                    alt="shape" width="59" height="63"> --}}
                                    <i class="fas fa-shield-alt fa-2x" style="color:#8c325f;"></i>
                                </a>
                        </div>
                        <h3 class="item-title"><a href="javascript::void(0)" >Safety</a></h3>
                        <p>Our partments at relocate uganda , offer you a guaranteed safety and security through out your stay.</p>
                        {{-- <div class="choose-button">
                            <a href="single-listing1.html" class="item-btn">Check Property<i
                                    class="fas fa-chevron-circle-right"></i></a>
                        </div> --}}
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="choose-box1  choose-box2 wow fadeInUp" data-wow-delay=".6s">
                        <div class="choose-shape1 choose-shape2">
                            <a href="javascript::void(0)">
                                {{-- <img src="assets/frontend_assets/img/figure/shape3.svg"
                                    alt="shape" width="59" height="63"> --}}
                                    <i class="fas fa-crown fa-2x" style="color:#8c325f;" ></i>
                                </a>
                        </div>
                        <h3 class="item-title"><a href="javascript::void(0)">Luxurious</a></h3>
                        <p>At relocate uganda, we give you the luxury finishing and environment , which allows you to have a confortable stay while here.</p>
                        {{-- <div class="choose-button">
                            <a href="single-listing1.html" class="item-btn">Check Property<i
                                    class="fas fa-chevron-circle-right"></i></a>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </section> <!--=====================================-->
    <!--=   About     Start                 =-->
    <!--=====================================-->

    <section class="about-wrap2">
        <div class="container">
            <div class="row flex-row-reverse flex-lg-row">
                <div class="col-xl-6 col-lg-6">
                    <div class="about-layout3">
                        <div class="item-img">
                            <img src="assets/frontend_assets/img/apartments/3.jpeg" alt="about" width="809"
                                height="587" style="border-radius:30px;">

                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6">
                    <div class="about-box3 wow fadeInUp" data-wow-delay=".2s">
                        <span class="item-subtitle">Welcome to Relocate Ug</span>
                        <h2 class="item-title">Your personlised gateway to seamless Living!.</h2>
                        <p>
                            At Relocate Uganda, we understand that moving to a new place can be both thrilling and
                            challenging. That's why we've dedicated ourselves to ensuring that your relocation experience
                            is nothing short of exceptional. As your trusted partner in finding the perfect living space,
                            we take pride in offering a wide range of meticulously curated apartments for our valued
                            clients.
                            <br><br>
                            Whether you're moving for business, education, or a change of scenery, we're here to make your
                            transition as smooth as possible.Our dedicated team takes the time to understand your unique
                            preferences and
                            needs, ensuring that we match you with the perfect apartment that feels like home.
                        </p>


                    </div>
                </div>

            </div>

        </div>
    </section>


    <!--=====================================-->
    <!--=   Progress     Start              =-->
    <!--=====================================-->

    <section class="progress-bar-wrap1 counter-appear">
        <div class="shape-img1 wow fadeInLeft" data-wow-delay=".4s">
            <img src="assets/frontend_assets/img/figure/counter-bg-2.png" alt="progress">
        </div>
        <div class="container">
            <div class="item-heading-bar">
                <h2 class="item-title">Our Operational Statistics</h2>
                {{-- <p>In 2022 things look like this percentage</p> --}}
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="progress-box1 wow zoomIn" data-wow-delay=".2s">
                        <div class="progress-layout">
                            <div class="process-circle"></div>
                            <div class="process-circle"></div>
                            <div class="process-circle"></div>
                            <div class="progress-content">
                                <div class="item-parcent"><span class="counterUp" data-counter="10">10</span>+</div>
                                <label>Properties</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="progress-box1 wow zoomIn" data-wow-delay=".3s">
                        <div class="progress-layout">
                            <div class="process-circle"></div>
                            <div class="process-circle"></div>
                            <div class="process-circle"></div>
                            <div class="progress-content">
                                <div class="item-parcent"><span class="counterUp" data-counter="30">30</span>+</div>
                                <label>Amenities</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="progress-box1 wow zoomIn" data-wow-delay=".4s">
                        <div class="progress-layout">
                            <div class="process-circle"></div>
                            <div class="process-circle"></div>
                            <div class="process-circle"></div>
                            <div class="progress-content">
                                <div class="item-parcent"><span class="counterUp" data-counter="95">95</span>%</div>
                                <label>Satisfied Customers</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="progress-box1 wow zoomIn" data-wow-delay=".2s">
                        <div class="progress-layout">
                            <div class="process-circle"></div>
                            <div class="process-circle"></div>
                            <div class="process-circle"></div>
                            <div class="progress-content">
                                <div class="item-parcent"><span class="counterUp" data-counter="99">99</span>%</div>
                                <label>Reliability</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

{{-- END OF MAIN CONTENT SECTION --}}

@section('extra_scripts')
@endsection