@extends('frontend.layouts.app')
@section('title', 'Become Volunteer')
@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">Become A Volunteer</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 ==== -->
      <!-- ==== volunteer section start ==== -->
      <section class="volunteer">
         <div class="container">
            <div class="row gutter-40">
               <div class="col-12 col-xl-6">
                  <div class="volunteer__content">
                     <div class="section__content">
                        <span class="sub-title"><i class="icon-donation"></i> Become A Volunteer</span>
                        <h2 class="title-animation">Volunteer Requirements</h2>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                           doloremque laudantium, totam rem aperiam, eaque inventore
                        </p>
                     </div>
                     <div class="warning">
                        <div class="line"><i class="fa-solid fa-triangle-exclamation"></i></div>
                        <p><strong>Notice:</strong> Test mode is enabled. While in test mode no
                           live
                           donations are processed.
                        </p>
                     </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>
               </div>
               <div class="col-12 col-xl-6">
                  <div class="volunteer__form checkout__form" data-aos="fade-up" data-aos-duration="1000"
                     data-aos-delay="100">
                     <div class="volunteer__form-content">
                        <h4 class="title-animation">Fill Up The Form</h4>
                        <p>Your email address will not be published. Required fields are marked *</p>
                     </div>
                     <form action="#" method="post" class="cta">
                        @csrf
                        <div class="input-group">
                           <div class="input-single">
                              <input type="text" name="c-name" id="cName" placeholder="First Name" required>
                              <i class="fa-solid fa-user"></i>
                           </div>
                           <div class="input-single">
                              <input type="text" name="c-lastname" id="clastName" placeholder="Last Name" required>
                              <i class="fa-solid fa-user"></i>
                           </div>
                        </div>
                        <div class="input-single">
                           <input type="email" name="c-email" id="cEmail" placeholder="Enter Email" required>
                           <i class="fa-solid fa-envelope"></i>
                        </div>
                        <div class="input-group">
                           <div class="input-single">
                              <input type="text" name="phone-number" id="phoneNumber" placeholder="Phone Number"
                                 required>
                              <i class="fa-solid fa-phone"></i>
                           </div>
                           <div class="input-single">
                              <input type="text" name="profession" id="profession" placeholder="Occupation" required>
                              <i class="fa-solid fa-user-tie"></i>
                           </div>
                        </div>
                        <div class="input-single alter-input">
                           <textarea name="contact-message" id="contactMessage"
                              placeholder="your message..."></textarea>
                           <i class="fa-solid fa-comments"></i>
                        </div>
                        <div class="form-cta">
                           <button type="submit" aria-label="submit message" title="submit message"
                              class="btn--primary">Submit Now <i class="fa-solid fa-arrow-right"></i></button>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!-- ==== / volunteer section end ==== -->

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