@extends('frontend.layouts.app')
@section('title', 'Team Details')
@section('content')
    <!-- ============================ header area ============================ -->
    @include('frontend.includes.headers.headerOne')
    <!-- ============================ header area end ============================ -->

    <!-- ==== banner section start ==== -->
      <section class="common-banner">
         <div class="container">
            <div class="row">
               <div class="common-banner__content text-center">
                  <span class="sub-title"><i class="icon-donation"></i>Start donating poor people</span>
                  <h2 class="title-animation">Team Details</h2>
               </div>
            </div>
         </div>
         <div class="banner-bg">
            <img src="{{ asset('assets/images/banner/banner-bg.png') }}" alt="Image">
         </div>
         <div class="shape">
            <img src="{{ asset('assets/images/shape.png') }}" alt="Image">
         </div>
         <div class="sprade" data-aos="zoom-in" data-aos-duration="1000">
            <img src="{{ asset('assets/images/sprade-base.png') }}" alt="Image" class="base-img">
         </div>
      </section>
      <!-- ==== / banner section end ==== -->
      <!-- ==== team details section start ==== -->
      <section class="team-details">
         <div class="container">
            <div class="row gutter-40 align-items-center">
               <div class="col-12 col-lg-6 col-xl-5">
                  <div class="team-details__thumb" data-aos="zoom-in" data-aos-duration="1000">
                     <img src="{{ asset('assets/images/team/thumb.png') }}" alt="Image">
                  </div>
               </div>
               <div class="col-12 col-lg-6 col-xl-7">
                  <div class="team-details__content" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                     <div class="team-details__meta">
                        <h4 class="title-animation">George Clooney</h4>
                        <p class="designation">Volunteer</p>
                        <div class="social">
                           <a href="https://www.facebook.com/" target="_blank" aria-label="share us on facebook"
                              title="facebook">
                              <i class="fa-brands fa-facebook-f"></i>
                           </a>
                           <a href="https://vimeo.com/" target="_blank" aria-label="share us on vimeo" title="vimeo">
                              <i class="fa-brands fa-vimeo-v"></i>
                           </a>
                           <a href="https://x.com/" target="_blank" aria-label="share us on twitter" title="twitter">
                              <i class="fa-brands fa-twitter"></i>
                           </a>
                           <a href="https://www.linkedin.com/" target="_blank" aria-label="share us on linkedin"
                              title="linkedin">
                              <i class="fa-brands fa-linkedin-in"></i>
                           </a>
                        </div>
                        <p>Lorem ipsum dolor sit amet, con adipiscing elit tiam convallis elit id impedie. Quisq commodo
                           simply free ornare tortor. If you are going to use a passage.</p>
                     </div>
                     <div class="my-word">
                        <h5>I Help my Clients Stand out And They Help me Grow.</h5>
                     </div>
                     <div class="progress-wrapper">
                        <div class="cause__progress progress-bar-single">
                           <div class="cause-progress__bar">
                              <p>Donation Collect</p>
                              <div class="progress-bar-wrapper" data-percent="70%">
                                 <div class="progress-bar">
                                    <div class="progress-bar-percent"><span class="percent-value"></span>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="cause__progress progress-bar-single">
                           <div class="cause-progress__bar">
                              <p>Successful Events</p>
                              <div class="progress-bar-wrapper" data-percent="85%">
                                 <div class="progress-bar">
                                    <div class="progress-bar-percent"><span class="percent-value"></span>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="team-details__list">
                        <ul>
                           <li><i class="icon-circle-check"></i>Best Quality Services</li>
                           <li><i class="icon-circle-check"></i>Time Saving</li>
                           <li><i class="icon-circle-check"></i>Meet the Deadlines</li>
                           <li><i class="icon-circle-check"></i>24/7 Customer Support</li>
                        </ul>
                     </div>
                     <div class="team-details__cta cta">
                        <a href="{{ route('donate.us') }}" aria-label="make a donation" title="make a donation"
                           class="btn--primary"> Donate With Me <i class="fa-solid fa-arrow-right"></i>
                        </a>
                     </div>
                  </div>
               </div>
               <div class="col-12">
                  <div class="about-me" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                     <h4 class="title-animation">About Me</h4>
                     <p>This category focuses on the design construction of buildings and the This a category focuses on
                        the design and construction of buildings This category a focuses on the design construction of
                        buildings and the This a category of thfocuses on the design This category focuses on the design
                        construction of buildings and the This a category focuses on the design and construction of
                        buildings This category a focuses on the design construction of buildings and the This a
                        category of thfocuses on the design</p>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!-- ==== team details section end ==== -->

    <!-- ========================== footer area ============================ -->
    @include('frontend.includes.footers.footerOne')
    <!-- ========================== footer area end ============================ -->
@endsection
