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

        <section class="pricing-section">
            <div class="container">
                <div class="row justify-content-center pt-5">
                    <div class="col-md-11">
                        <div class="top-heahtext text-center mt-sm-5">
                            <h1>Features of each tier should be mentioned in brief</h1>
                            <h6> Get hassle free and efficient logistics for your online business </h6>
                        </div>
                       
                        <div class="text-center">
                            <button type="button" class="btn sign-upbtn mt-sm-5 mt-4">COMPARE PRICES</button>
                        </div>

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

        <section class="plan-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 mt-4 mt-sm-0">
                        <div class="basic-card">
                            <div class="card-header">
                                <div class="d-flex align-items-center justify-content-between py-1">
                                    <h2>Basic</h2>
                                    <div class="black-star">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="card-body">
                                <p>A free and simplified plan. Best for social, small and medium e-commerce sellers.</p>

                                <ul>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                </ul>

                                <div class="mt-4">
                                    <button type="button" class="btn features-btn btn-block">SELECT THIS PLAN</button>
                                </div>

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

                    <div class="col-md-3 mt-3 mt-sm-0">
                        <div class="basic-card silver-card">
                            <div class="card-header">
                                <div class="d-flex align-items-center justify-content-between py-1">
                                    <h2>Silver</h2>
                                    <div class="black-star silver-star">
                                        <i class="fa fa-star"  aria-hidden="true"></i>
                                        <i class="fa fa-star"  aria-hidden="true"></i>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="card-body">
                                <p>Dynamic Plans for sellers who sell on multiple marketplaces and websites.</p>

                                <ul>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                </ul>

                                <div class="mt-4">
                                    <button type="button" class="btn features-btn btn-block">SELECT THIS PLAN</button>
                                </div>

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

                    <div class="col-md-3 mt-3 mt-sm-0">
                        <div class="basic-card gold-card">
                            <div class="card-header">
                                <div class="d-flex align-items-center justify-content-between py-1">
                                    <h2>Gold</h2>
                                    <div class="black-star gold-star">
                                        <i class="fa fa-star"  aria-hidden="true"></i>
                                        <i class="fa fa-star"  aria-hidden="true"></i>
                                        <i class="fa fa-star"  aria-hidden="true"></i>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="card-body">
                                <p>Customised shipping solutions. Get an exclusive plan tailored to meet your business needs.</p>

                                <ul>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                </ul>

                                <div class="mt-4">
                                    <button type="button" class="btn features-btn btn-block">SELECT THIS PLAN</button>
                                </div>

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

                    <div class="col-md-3 mt-3 mt-sm-0">
                        <div class="basic-card platinum-card">
                            <div class="card-header">
                                <div class="d-flex align-items-center justify-content-between py-1">
                                    <h2>Platinum</h2>
                                    <div class="black-star platinum-star">
                                        <i class="fa fa-star"  aria-hidden="true"></i>
                                        <i class="fa fa-star"  aria-hidden="true"></i>
                                        <i class="fa fa-star"  aria-hidden="true"></i>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="card-body">
                                <p>Simplified plan to save costs and improve delivery experience with smart courier allocation.</p>

                                <ul>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                    <li><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</span></li>
                                </ul>

                                <div class="mt-4">
                                    <button type="button" class="btn sign-upbtn btn-block">SELECT THIS PLAN</button>
                                </div>

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

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

        <section class="py-sm-5 py-4">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-md-11">
                        <div class="features-plansbox">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="section-head section-headwhite text-center">
                                        <h2>Features of Our Plans</h2>
                                        <h6>Automate your Shipping Methods</h6>
                                    </div>
                                </div>
                            </div>

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

                                        <div class="col-md-3 col-6">
                                            <div class="plan-box text-center">
                                                <div class="plan-boximg">
                                                    <img src="{{asset('assets/frontend/images/pricing1.png')}}" alt="">
                                                </div>
                                                <h4>Automated Shipment Tracking</h4>
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-6">
                                            <div class="plan-box text-center">
                                                <div class="plan-boximg">
                                                    <img src="{{asset('assets/frontend/images/pricing2.png')}}" alt="">
                                                </div>
                                                <h4>Live Rate Calculator</h4>
                                            </div>
                                        </div>

                                        
                                        <div class="col-md-3 col-6 mt-3 mt-sm-0">
                                            <div class="plan-box text-center">
                                                <div class="plan-boximg">
                                                    <img src="{{asset('assets/frontend/images/pricing3.png')}}" alt="">
                                                </div>
                                                <h4>Live Email & SMS Notifications</h4>
                                            </div>
                                        </div>

                                        
                                        <div class="col-md-3 col-6 mt-3 mt-sm-0">
                                            <div class="plan-box text-center">
                                                <div class="plan-boximg">
                                                    <img src="{{asset('assets/frontend/images/pricing4.png')}}" alt="">
                                                </div>
                                                <h4>Multi Pickup Location</h4>
                                            </div>
                                        </div>

                                        
                                        <div class="col-md-3 col-6 mt-3">
                                            <div class="plan-box text-center">
                                                <div class="plan-boximg">
                                                    <img src="{{asset('assets/frontend/images/pricing5.png')}}" alt="">
                                                </div>
                                                <h4>COD Reconciliation, Reporting & Settlement</h4>
                                            </div>
                                        </div>

                                        
                                        <div class="col-md-3 col-6 mt-3">
                                            <div class="plan-box text-center">
                                                <div class="plan-boximg">
                                                    <img src="{{asset('assets/frontend/images/pricing6.png')}}" alt="">
                                                </div>
                                                <h4>Sales Channel Sync</h4>
                                            </div>
                                        </div>

                                        
                                        <div class="col-md-3 col-6 mt-3">
                                            <div class="plan-box text-center">
                                                <div class="plan-boximg">
                                                    <img src="{{asset('assets/frontend/images/pricing7.png')}}" alt="">
                                                </div>
                                                <h4>Basic Reporting & Passbook</h4>
                                            </div>
                                        </div>

                                        
                                        <div class="col-md-3 col-6 mt-3">
                                            <div class="plan-box text-center">
                                                <div class="plan-boximg">
                                                    <img src="{{asset('assets/frontend/images/pricing8.png')}}" alt="">
                                                </div>
                                                <h4>Chat, Call & Email Support</h4>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="text-center mt-sm-5 mt-4">
                                        <button type="button" class="btn features-btn">COMPARE PRICES</button> 
                                    </div>
                                </div>
                            </div>

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

            </div>
        </section>

        <section class="pb-sm-5 pb-4">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <div class="row mt-sm-3">
                            <div class="col-md-12">
                                <div class="section-head">
                                    <h2>FAQs about Pricing</h2>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-sm-4 mt-2">
                            <div class="col-md-12">
                                <div id="accordion" class="faq-pricing">
                                    <div class="card">
                                      <div class="card-header" id="headingOne">
                                        <h5 class="mb-0">
                                          <button class="btn " data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            Is the shipping price different for every plan?
                                            <i class="fa fa-plus float-right" aria-hidden="true"></i>
                                            <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                          </button>
                                        </h5>
                                      </div>
                                  
                                      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                                        <div class="card-body pt-0">
                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                                                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
                                                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                                                elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                            </p>
                                            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
                                                Lorem ipsum dolor sit amet</p>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="card">
                                      <div class="card-header" id="headingTwo">
                                        <h5 class="mb-0">
                                          <button class="btn  collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            What all plans are included in the professional plan ? 
                                            <i class="fa fa-plus float-right" aria-hidden="true"></i>
                                            <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                          </button>
                                        </h5>
                                      </div>
                                      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                                        <div class="card-body pt-0">
                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                                                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
                                                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                                                elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                            </p>
                                            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
                                                Lorem ipsum dolor sit amet</p>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="card">
                                      <div class="card-header" id="headingThree">
                                        <h5 class="mb-0">
                                          <button class="btn  collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                            None of the plans match my need. How can I use SPOC?
                                            <i class="fa fa-plus float-right" aria-hidden="true"></i>
                                            <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                          </button>
                                        </h5>
                                      </div>
                                      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                                        <div class="card-body pt-0">
                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                                                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
                                                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                                                elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                            </p>
                                            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
                                                Lorem ipsum dolor sit amet</p>
                                        </div>
                                      </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header" id="headingfour">
                                          <h5 class="mb-0">
                                            <button class="btn  collapsed" data-toggle="collapse" data-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour">
                                                What are the basic features included with the SPOC plans?
                                              <i class="fa fa-plus float-right" aria-hidden="true"></i>
                                              <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                            </button>
                                          </h5>
                                        </div>
                                        <div id="collapsefour" class="collapse" aria-labelledby="headingfour" data-parent="#accordion">
                                          <div class="card-body pt-0">
                                              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                                                  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
                                                  gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                                                  elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                                              </p>
                                              <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
                                                  Lorem ipsum dolor sit amet</p>
                                          </div>
                                        </div>
                                      </div>
                                  </div>
                            </div>
                        </div>

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

         <div id="'bot-container">
        <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> <img src="{{asset('assets/frontend/images/what-new.png')}}" alt="">
        </div>
@endsection