@extends('frontend_layouts.main')
@section('main-container')

        <section class="hero-section">
            <div class="top-heahtext text-center">
                <h1 class="banner-heading">Ease of Logistics at a Click</h1>
                <h6 class="banner-heading">Powered with more than two decades of industry experience</h6>
                <a type="button" href="{{url('/sign-in-spoc')}}" class="btn order-btn mt-sm-3 mt-3">SIGN UP FOR FREE</a>
            </div>
        </section>

        <section>
            <div class="container">
                <div class="shipping-needsbox py-sm-5 py-3">

                    <div class="row justify-content-center">
                        <div class="col-md-10">
                            <h1>Our USP that makes us different</h1>

                            <div class="row mt-sm-5 mt-3 noflexwrap">
                                <div class="col-md-4 col-12">
                                    <div class="customers-box">
                                        <div class="row align-items-center">
                                            <div class="col-md-3 col-3 pr-0">
                                                <img src="{{asset('assets/frontend/images/business-owner.png')}}" class="stat-img" alt="">
                                            </div>
                                            <div class="col-md-9 col-9">
                                                <h2></h2>
                                                <p>Be a business owner <p>
                                                <p>with minimal funding</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="customers-box">
                                        <div class="row align-items-center">
                                            <div class="col-md-3 col-3 pr-0">
                                                <img src="{{asset('assets/frontend/images/ship.png')}}" class="stat-img" alt="">
                                            </div>
                                            <div class="col-md-9 col-9">
                                                <h2></h2>
                                                <p>Add on margins </p>
                                                <p>with EOLAC shipping</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="customers-box">
                                        <div class="row align-items-center">
                                            <div class="col-md-3 col-3 pr-0">
                                                <img src="{{asset('assets/frontend/images/tech.png')}}" class="stat-img" alt="">
                                            </div>
                                            <div class="col-md-9 col-9">
                                                <h2></h2>
                                                <p>Be ship smart</p> 
                                                <p>with EOLAC tech</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                <div class="row mt-sm-5 mt-3">
                    <div class="col-md-12">
                        <div class="section-head text-center pt-sm-3">
                            <h2>Why choose EOLAC?</h2>
                            <h6>Get seamless and efficient logistics for your e-commerce business</h6>
                        </div>
                    </div>
                </div>

                <div class="row justify-content-center mt-sm-5 mt-3">
                    <div class="col-md-10">
                        <div class="row justify-content-center">
                            <div class="col-md-3 col-6 mb-3 mb-0">
                                <div class="support-box text-center">
                                    <div class="support-img">
                                        <img src="{{asset('assets/frontend/images/Why1.png')}}"  alt="">
                                    </div>
                                   
                                    <h6>Support for Multiple Shipping Modes</h6>
                                </div>
                            </div>

                            <div class="col-md-3 col-6 mb-3 mb-0">
                                <div class="support-box text-center">
                                    <div class="support-img">
                                        <img src="{{asset('assets/frontend/images/Why2.png')}}"  alt="">
                                    </div>
                                    <h6>Book Anytime Anywhere</h6>
                                </div>
                            </div>

                            <div class="col-md-3 col-6">
                                <div class="support-box text-center">
                                    <div class="support-img">
                                        <img src="{{asset('assets/frontend/images/Why3.png')}}" alt="">
                                    </div>
                                    <h6>Automated Shipping to Reduce Efforts</h6>
                                </div>
                            </div>

                            <div class="col-md-3 col-6">
                                <div class="support-box text-center">
                                    <div class="support-img"> 
                                       <img src="{{asset('assets/frontend/images/Why4.png')}}" alt="">
                                    </div>

                                    <h6>Superior Experience at Affordable Prices</h6>
                                </div>
                            </div>

                            <div class="col-md-3 mt-3 col-6">
                                <div class="support-box text-center">
                                    <div class="support-img"> 
                                       <img src="{{asset('assets/frontend/images/Why5.png')}}" alt="">
                                    </div>

                                    <h6>Fast & Reliable</h6>
                                </div>
                            </div>

                            <div class="col-md-3 mt-3 col-6">
                                <div class="support-box text-center">
                                    <div class="support-img"> 
                                       <img src="{{asset('assets/frontend/images/Why6.png')}}" alt="">
                                    </div>

                                    <h6>Auto Logistics Management</h6>
                                </div>
                            </div>

                            <div class="col-md-3 mt-3 col-6">
                                <div class="support-box text-center">
                                    <div class="support-img"> 
                                       <img src="{{asset('assets/frontend/images/Why7.png')}}" alt="">
                                    </div>

                                    <h6>API Integration</h6>
                                </div>
                            </div>

                            <div class="col-md-3 mt-3 col-6">
                                <div class="support-box text-center">
                                    <div class="support-img"> 
                                       <img src="{{asset('assets/frontend/images/Why8.png')}}" alt="">
                                    </div>

                                    <h6>Auto Generated Reports</h6>
                                </div>
                            </div>

                            <div class="col-md-3 mt-3 col-6">
                                <div class="support-box text-center h-100">
                                    <div class="support-img"> 
                                       <img src="{{asset('assets/frontend/images/Why9.png')}}" alt="">
                                    </div>

                                    <h6>Real Time Visibility of Consignment Lifecycle</h6>
                                </div>
                            </div>

                            <div class="col-md-3 mt-3 col-6">
                                <div class="support-box text-center">
                                    <div class="support-img"> 
                                       <img src="{{asset('assets/frontend/images/Why10.png')}}" alt="">
                                    </div>

                                    <h6>Effortless Reconciliation & Provisioning of Freight/COD</h6>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-sm-5 py-4">
            <div class="container">
                <div class="how-doesworkbox mt-sm-3 mt-2 position-relative">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="section-head section-headwhite">
                                <h2>How does it work?</h2>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-sm-4 mt-5">
                        <div class="col-md-12">
                            <div class="oneCollection owl-carousel work-slider">
                                <div class="item">
                                    <div class="work-box">
                                        <div class="row align-items-center">
                                           <div class="col-md-5 text-sm-left text-center mb-3 mb-sm-0">
                                               <img src="{{asset('assets/frontend/images/HowStep1.png')}}" class="work-img" alt="">
                                           </div>
                                           <div class="col-md-7">
                                               <h2>STEP 1</h2>
                                               <h3>Register and complete KYC</h3>
                                               <h6>Register with us and complete KYC to verify your identity</h6>
                                           </div>
                                        </div>
                                   </div>
                                </div>
                                <div class="item">
                                    <div class="work-box">
                                        <div class="row align-items-center">
                                           <div class="col-md-5 text-sm-left text-center mb-3 mb-sm-0">
                                               <img src="{{asset('assets/frontend/images/HowStep3.png')}}" class="work-img" alt="">
                                           </div>
                                           <div class="col-md-7">
                                               <h2>STEP 2</h2>
                                               <h3>Book your order</h3>
                                               <h6>Add your shipment details and select preferred service provider. You can also choose additional services, such as Insurance, Gift wrap etc
                                                </h6>
                                           </div>
                                        </div>
                                   </div>
                                </div>
                                <div class="item">
                                    <div class="work-box">
                                        <div class="row align-items-center">
                                           <div class="col-md-5 text-sm-left text-center mb-3 mb-sm-0">
                                               <img src="{{asset('assets/frontend/images/HowStep4.png')}}" class="work-img" alt="">
                                           </div>
                                           <div class="col-md-7">
                                               <h2>STEP 3</h2>
                                               <h3>Track your deliveries</h3>
                                               <h6>Track your shipment. See where it is and when it will arrive</h6>
                                           </div>
                                        </div>
                                   </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

        <section class="py-sm-5 py-0">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-head text-center">
                            <h2>Integrations with EOLAC</h2>
                            <h6>Simplify your shipping needs under one roof</h6>
                        </div>
                    </div>
                </div>

                <div class="row justify-content-center mt-sm-5 mt-3">
                    <div class="col-md-9 col-12">
                        <ul class="nav nav-tabs integration-tab justify-content-sm-center" id="myTab" role="tablist">
                            <li class="nav-item">
                              <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                               aria-selected="true">DELIVERY PARTNERS</a>
                            </li>
            
                            <!-- <li class="nav-item">
                              <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
                               aria-selected="false">PARTNER INTEGRATION</a>
                            </li> -->
                          </ul>
                          <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <div class="row mt-sm-5 mt-1 text-center justify-content-center">
                                        <div class="col-md-10"  >
                                        <div class="row align-items-center">
                                                <div class="col-md-4">
                                                    <div class="mpcl-logo">
                                                        <img src="{{asset('assets/frontend/images/mpcl_logo.jpg')}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mpcl-logo">
                                                        <img src="{{asset('assets/frontend/images/Dehlivery.png')}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mpcl-logo">
                                                        <img src="{{asset('assets/frontend/images/JHT_Logo.png')}}" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            
                                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">

                                    <div class="row mt-sm-5 mt-1 text-center justify-content-center">
                                        <div class="col-md-10">

                                            <div class="row align-items-center">
                                                <div class="col-md-4">
                                                    <div class="mpcl-logo">
                                                        <img src="{{asset('assets/frontend/images/mpcl_logo.jpg')}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mpcl-logo">
                                                        <img src="{{asset('assets/frontend/images/Dehlivery.png')}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mpcl-logo">
                                                        <img src="{{asset('assets/frontend/images/JHT_Logo.png')}}" alt="">
                                                    </div>
                                                </div>
                                            </div>

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

            </div>
        </section>

        <section class="py-sm-5 py-4" id="weight-calculator">
            <div class="container">
                <div class="volumetric-calculatorbox">
                    <div class="row mt-sm-5 mt-3">
                        <div class="col-md-7 mb-3 mb-sm-0">
                            <div class="section-head section-headwhite">
                                <h2>Volumetric Weight Calculator</h2>
                                <h6>Enter your package dimensions and calculate the volumetric weight of your shipment</h6>
                            </div>

                            <div class="row mt-sm-5 mt-3">
                                <div class="col-md-3 col-6">
                                    <select class="form-control length-input fw-medium" style="pointer-events: none;appearance:none">
                                        <option>cm</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mt-sm-4 mt-3">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <input type="text" name="length" class="form-control length-input" placeholder="Enter length" id="length">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <input type="text" name="width" class="form-control length-input" placeholder="Enter width" id="width">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <input type="text" name="height" class="form-control length-input" placeholder="Enter height" id="height">
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-sm-3 mt-2 align-items-center">
                                <div class="col-md-3">
                                    <button type="button" class="btn features-btn" id="calculateVolume" onclick="volumetricWeightCalculator()">CALCULATE</button>
                                </div>
                                <div class="col-md-3">
                                    <h6 style="margin-bottom: 0px;" id="">Total Kg: <span id="cft">0</span></h6>
                                </div>
                                <div class="col-md-12 mt-2">
                                    <p style="color: #fff; margin-top:0;margin-bottom:0;">The chargeable weight calculated on the basis of (L*B*H)/4500</p>
                                </div>
                            </div>

                           <!--  <div class="mt-2">
                                <button type="button" class="btn features-btn" id="calculateVolume" onclick="volumetricWeightCalculator()">CALCULATE</button>
                            </div>

                            <div class="col-md-12 mb-4">
                                <div class="cft-calculator">
                                    <div class="row">
                                        <div class="col-md-6 col-7">
                                            <h6 class="float-right" id="">Total Kg: <span id="cft">0</span></h6>
                                        </div>
                                    </div>
                                </div>
                            </div> -->

                        </div>
                        <div class="col-md-5">
                            <img src="{{asset('assets/frontend/images/CalculatorGraphic.png')}}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-sm-5 pb-4">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-head text-center">
                            <h2>Our Clients take pride in talking about us</h2>
                        </div>
                    </div>
                </div>

                <div class="row justify-content-center mt-sm-5 mt-3">
                    <div class="col-md-10">

                        <div class="threeCollection owl-carousel">
                            <div class="item">
                                <div class="clients-aboutbox">
                                    <div class="row">
                                        <div class="col-md-2 mb-2 mb-sm-0" style="padding: 1px;">
                                           <div class="clients-userpic">
                                                <img src="{{asset('assets/frontend/images/website_user_avtar.png')}}" alt="">
                                            </div>
                                        </div>
                                        <div class="col-md-10 pl-sm-0">
                                            <p>“EOLAC logistics went above and beyond, consistently delivering on time and impressing me with their exceptional customer support. Their commitment to excellence has made them a reliable and preferred choice for my logistical needs".</p>
                                            <h6>Sanjeev Sharma</h6>
                                            <h5>Indirapuram, Ghaziabad</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="clients-aboutbox">
                                    <div class="row">
                                        <div class="col-md-2 mb-2 mb-sm-0" style="padding: 1px;">
                                           <div class="clients-userpic">
                                                <img src="{{asset('assets/frontend/images/website_user_avtar.png')}}" alt="">
                                            </div>
                                        </div>
                                        <div class="col-md-10 pl-sm-0">
                                            <p>“EOLAC's remarkable responsiveness and attention to my shipping needs, coupled with careful handling, ensured timely and pristine cargo delivery. Their professionalism, reliability, and excellence make them my trusted choice for future services.” </p>
                                            <h6>Ramesh Srivastava</h6>
                                            <h5>Varanasi, UP.</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="clients-aboutbox">
                                    <div class="row">
                                        <div class="col-md-2 mb-2 mb-sm-0" style="padding: 1px;">
                                            <div class="clients-userpic">
                                                <img src="{{asset('assets/frontend/images/website_user_avtar.png')}}" alt="">
                                            </div>
                                        </div>
                                        <div class="col-md-10 pl-sm-0">

                                            <p>EOLAC impressively met my shipping needs, demonstrating exceptional responsiveness and attention. Their careful handling ensured timely, pristine cargo delivery. Professionalism, reliability, and excellence make them my trusted choice for future services.</p>

                                            <h6>Manmohan Chabra</h6>
                                            <h5>Chandigarh</h5>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="clients-aboutbox">
                                    <div class="row">
                                        <div class="col-md-2 mb-2 mb-sm-0" style="padding: 1px;">
                                           <div class="clients-userpic">
                                                <img src="{{asset('assets/frontend/images/website_user_avtar.png')}}" alt="">
                                            </div>
                                        </div>
                                        <div class="col-md-10 pl-sm-0">
                                            <p>"The logistics service provider left a lasting impression with their swift pickup and lightning-fast delivery. Their efficiency not only met but exceeded my expectations, showcasing their commitment to timely and reliable service."</p>
                                            <h6>Priya Sreekumar</h6>
                                            <h5>Bangalore</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


            </div>
        </section>

        <div class="chat-bot">
            <a href="https://web.whatsapp.com/send?phone=7042004334" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
            <!-- <img src="{{asset('assets/frontend/images/what-new.png')}}" alt=""> -->
        </div>


    <style>

        .banner-heading{
            color: black!important;
            font-weight: 700!important;
        }
        .top-heahtext{
            background: #ffffffab;
            width: 50%;
            margin: 0 auto;
            border-radius: 10px;
            padding: 20px;
        }

        .support-box { min-height: 268px; }
        
    </style>
        <script type="text/javascript">

            function volumetricWeightCalculator() {

                let length = document.getElementById('length').value;
                let width = document.getElementById('width').value;
                let height = document.getElementById('height').value;
                let totalVolumetricWeight = 0;

                totalVolumetricWeight = (height != 0) && (width != 0) &&  (length != 0) ? ((height * width * length)/4500) : 0;

                let cftElement = document.getElementById('cft');
                cftElement.innerHTML = totalVolumetricWeight.toFixed(2);

            }           

        </script>

@endsection