@extends('frontend.layout.layout')
@section('title', 'About us')
@section('content')

    @foreach ($about_us as $aboutus)
        <section class="bkground">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="pageheading">
                            <h3>{{$aboutus->title}}</h3>
                            <h1> We Are UpSolution </h1>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- <section class="redbackground">
                <div class="container">
                  <div class="row">
                      <div class="col-md-2">
                      </div>
                      <div class="col-md-2 col-6">
                            <h5 class="redheading"> Introduction </h5>
                      </div>
                      <div class="col-md-2 col-6">
                           <h5 class="redheading"> Our Histor </h5>
                      </div>
                      <div class="col-md-2 col-6">
                           <h5 class="redheading"> Our Team    </h5>
                      </div>
                      <div class="col-md-2 col-6">
                           <h5 class="redheading"> Our Clients </h5>
                      </div>
                      <div class="col-md-2">
                      </div>
                  </div>
                </div>
              </section> -->
        <section class="aboutwhitebk">
            <div class="container">
                <div class="row">
                    <div class="grayheading">
                        <h3 class="aboutheading">Think Like A Customer</h3>
                        <p>{{$aboutus->description}}</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="bkblue">
            <div class="container">
                <div class="row">
                    <div class="88 text-center counter">
                        <div class="row">
                            <div class="col-md-4">
                                <div><span class="number">91 </span>% </div>
                                <div class="">Positive Feedback</div>
                            </div>
                            <div class="col-md-4">
                                <div><span class="number">92 </span>% </div>
                                <div class="">Average Price</div>
                            </div>
                            <div class="col-md-4">
                                <div><span class="number">92 </span>% </div>
                                <div class="">Average Price</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- <section class="whitebk">
            <div id="OurHistor">
                <div class="lineOfcircle"></div>
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    @foreach ($about as $abouts)
                        <li class="nav-item " role="presentation">
                            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                                type="button" role="tab" aria-controls="home"
                                aria-selected="false">{{ $abouts->category_name }}</button>
                        </li>
                    @endforeach
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="home-tab2" data-bs-toggle="tab" data-bs-target="#home2" type="button"
                            role="tab" aria-controls="home" aria-selected="false">Mission</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="home-tab3" data-bs-toggle="tab" data-bs-target="#home3" type="button"
                            role="tab" aria-controls="home" aria-selected="false">VISION</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade mt-5 show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-7">
                                    <h2>Empower in a Real Time Tracking</h2>
                                    <p>
                                        Engineered to encourage real-time updates, India's largest telematics & iOT provider
                                        Acute Communication allows you to go above andbeyond simply mapping out dots on a
                                        map. With its ahead-of-times GPS tracking hardware and fleet GPS tracking Software
                                        solutions, it issuccessfully curating custom-tailored solutions including exact GPS
                                        co-ordinates, instant generation of alerts related to possible theft andany remote
                                        case of any unauthorised usage. In addition to this, you can map and manage your
                                        company's growth while improvingfunctional efficiency and reducing operating costs
                                        with our feature-rich suite of tools.
                                    </p>
                                </div>
                                <div class="col-md-5">
                                    <img class="w-100" src="{{ asset('frontend/images/tr.jpg') }}" alt="alt">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade mt-5" id="home2" role="tabpanel" aria-labelledby="home-tab2">
                        <div class="container">
                            <div class="row ">
                                <div class="col-md-7">
                                    <h2>Mission</h2>
                                    <p> Discover our cutting-edge AIS 140 compliant products, designed to <br>elevate your
                                        transportation system's efficiency and safety.
                                    </p>
                                </div>
                                <div class="col-md-5">
                                    <img class="w-100" src="{{ asset('frontend/images/cartarget.png') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade mt-5" id="home3" role="tabpanel" aria-labelledby="home-tab3">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-7">
                                    <h2>Vision</h2>
                                    <p>Discover our cutting-edge AIS 140 compliant products, designed to elevate <br>your
                                        transportation system's efficiency and safety.</p>
                                </div>
                                <div class="col-md-5">
                                    <img class="w-100" src="{{ asset('frontend/images/abcar.png') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}
        <section class="whitebk">
            <div id="OurHistor">
                <div class="lineOfcircle"></div>
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    @foreach ($about as $index => $abouts)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link @if($index === 0) active @endif" id="tab-{{ $index }}" data-bs-toggle="tab" data-bs-target="#content-{{ $index }}"
                                type="button" role="tab" aria-controls="content-{{ $index }}"
                                aria-selected="{{ $index === 0 ? 'true' : 'false' }}">{{ $abouts->category_name }}</button>
                        </li>
                    @endforeach
                </ul>
                <div class="tab-content" id="myTabContent">
                    @foreach ($about as $index => $abouts)
                        <div class="tab-pane fade mt-5 @if($index === 0) show active @endif" id="content-{{ $index }}" role="tabpanel" aria-labelledby="tab-{{ $index }}">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-7">
                                        <h2>{{ $abouts->category_heading }}</h2>
                                        <p>{{ $abouts->category_description }}</p>
                                    </div>
                                    <div class="col-md-5">
                                        <img class="w-100" src="{{ asset('admin/img/' . $abouts->category_image) }}" alt="alt">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
        

        <!--    <div class="outeam">
                          <h2 class="mb-4 text-center text-uppercase"> Our Team</h2>
                          <div class="container">
                              <div class="row">
                                  <div class="col-md-3 mb-4">
                                      <div class="teamCard teamimg">
                                          <img src="https://ninzza.skylabsapp.com/public/assets/img/images/icons/team1.png" alt="">
                                          <div class="hd">
                                              <h2>Michael Doe</h2>
                                              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam.</p>
                                           </div>
                                      </div>
                                  </div>
                                  <div class="col-md-3 mb-4">
                                      <div class="teamCard teamimg">
                                          <img src="https://ninzza.skylabsapp.com/public/assets/img/images/icons/team2.png" alt="">
                                           <div class=" hd">
                                            <h2>Michael Doe</h2>
                                             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam.</p>
                                           </div>
                                      </div>
                                  </div>
                                  <div class="col-md-3 mb-4">
                                      <div class="teamCard teamimg">
                                          <img src="https://ninzza.skylabsapp.com/public/assets/img/images/icons/team2.png" alt="">
                                         <div class="hd">
                                          <h2>Michael Doe</h2>
                                          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam.</p>
                                           </div>
                                      </div>
                                  </div>
                                  <div class="col-md-3 mb-4">
                                      <div class="teamCard  teamimg">
                                          <img src="https://ninzza.skylabsapp.com/public/assets/img/images/icons/team2.png" alt="">
                                          <div class="hd">
                                          <h2>Michael Doe</h2>
                                          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam.</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>  -->
    @endforeach
@endsection