@extends('frontend.layouts.app')
@section('title', 'FAQS')
@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">Frequently Asked
                        Questions
                    </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 ==== -->
    <!-- ==== faq section start ==== -->
    <section class="faq">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-8 col-xl-6">
                    <div class="faq__content">
                        <div class="section__content" data-aos="fade-up" data-aos-duration="1000">
                            <span class="sub-title"><i class="icon-donation"></i>Start donating poor
                                people</span>
                            <h2 class="title-animation">Frequently <span>Asked</span>
                                Questions
                            </h2>
                        </div>
                        <div class="faq__content-inner cta" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="100">
                            <div class="accordion" id="accordion">
                                <div class="accordion-item">
                                    <h6 class="accordion-header" id="headingOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            What kind of recipes can I find on your website?
                                        </button>
                                    </h6>
                                    <div id="collapseOne" class="accordion-collapse collapse show"
                                        aria-labelledby="headingOne" data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>
                                                It is a long established fact that a reader will be distracted by
                                                the readable the a content of a page when looking at its layout.
                                                Many desktop publishing packages and web page editors.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h6 class="accordion-header" id="headingTwo">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            Are the recipes suitable for beginners?
                                        </button>
                                    </h6>
                                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                                        data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>
                                                It is a long established fact that a reader will be distracted by
                                                the readable the a content of a page when looking at its layout.
                                                Many desktop publishing packages and web page editors.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h6 class="accordion-header" id="headingThree">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseThree" aria-expanded="false"
                                            aria-controls="collapseThree">
                                            Do you offer cooking tips and techniques?
                                        </button>
                                    </h6>
                                    <div id="collapseThree" class="accordion-collapse collapse"
                                        aria-labelledby="headingThree" data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>
                                                It is a long established fact that a reader will be distracted by
                                                the readable the a content of a page when looking at its layout.
                                                Many desktop publishing packages and web page editors.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h6 class="accordion-header" id="headingFour">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseFour" aria-expanded="false"
                                            aria-controls="collapseFour">
                                            How frequently do you update your recipe collection?
                                        </button>
                                    </h6>
                                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                                        data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>
                                                It is a long established fact that a reader will be distracted by
                                                the readable the a content of a page when looking at its layout.
                                                Many desktop publishing packages and web page editors.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4 col-xl-5 offset-xl-1">
                    <div class="faq__thumb d-none d-lg-block">
                        <div class="faq__thumb-inner">
                            <div class="thumb-lg" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                                <img src="{{ asset('assets/images/faq/thumb-lg.png') }}" alt="Image">
                            </div>
                            <div class="thumb-sm" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="300">
                                <img src="{{ asset('assets/images/faq/thumb-sm.png') }}" alt="Image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shape d-none d-lg-block">
            <img src="{{ asset('assets/images/faq/shape.png') }}" alt="Image">
        </div>
    </section>
    <!-- ==== / faq section end ==== -->
    <!-- ==== cta section start ==== -->
    <section class="cta-section">
        <div class="container-fluid">
            <div class="row gutter-40">
                <div class="col-12 col-xxl-4">
                    <div class="cta-section__first cta-section__single">
                        <div class="cta-section__group" data-aos="fade-up" data-aos-duration="1000">
                            <div class="thumb">
                                <i class="icon-spread-love"></i>
                            </div>
                            <div class="content">
                                <span>We give child a gift of a education</span>
                                <h3 class="title-animation">Become a volunteer?</h3>
                            </div>
                            <div class="cta-s">
                                <a href="{{ route('become.volunteer') }}" aria-label="become a volunteer"
                                    title="become a volunteer" class="btn--tertiary">Contact Now</a>
                            </div>
                        </div>
                        <div class="cta-img">
                            <img src="{{ asset('assets/images/cta/one.png') }}" alt="Image">
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xxl-4">
                    <div class="cta-section__center cta-section__single">
                        <div class="video-btn-wrapper">
                            <a href="https://www.youtube.com/watch?v=RvreULjnzFo" target="_blank" title="video Player"
                                class="open-video-popup">
                                <i class="icon-play"></i>
                            </a>
                        </div>
                        <div class="cta-img">
                            <img src="{{ asset('assets/images/cta/two.png') }}" alt="Image" class="parallax-image">
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xxl-4">
                    <div class="cta-section__last cta-section__single">
                        <div class="cta-section__group" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="300">
                            <div class="thumb">
                                <i class="icon-spread-love"></i>
                            </div>
                            <div class="content">
                                <span>We give child a gift of a education</span>
                                <h3 class="title-animation">Make donation to us?</h3>
                            </div>
                            <div class="cta-s">
                                <a href="{{ route('donate.us') }}" aria-label="make a donation" title="make a donation"
                                    class="btn--primary">Donate Now</a>
                            </div>
                        </div>
                        <div class="cta-img">
                            <img src="{{ asset('assets/images/cta/three.png') }}" alt="Image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ==== / cta section end ==== -->
    <!-- ==== team section start ==== -->
    <section class="team">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10 col-xl-6">
                    <div class="section__header text-center" data-aos="fade-up" data-aos-duration="1000">
                        <span class="sub-title"><i class="icon-donation"></i>Start donating poor
                            people</span>
                        <h2 class="title-animation">Meet Our Volunteer
                            <span>Team</span> members
                        </h2>
                    </div>
                </div>
            </div>
            <div class="row gutter-40">
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="team__single-wrapper" data-aos="fade-up" data-aos-duration="1000">
                        <div class="team__single van-tilt">
                            <div class="team__single-thumb">
                                <a href="{{ route('team.details') }}">
                                    <img src="{{ asset('assets/images/team/one.png') }}" alt="Image">
                                </a>
                                <div class="team__icons">
                                    <div class="team__single-content__icon">
                                        <i class="fa-solid fa-plus"></i>
                                    </div>
                                    <div class="team__single__thumb-social">
                                        <ul>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-instagram"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-behance"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="team__single-content">
                                <h6><a href="{{ route('team.details') }}">Michel Fokluz</a></h6>
                                <p>Volunteer</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="team__single-wrapper" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                        <div class="team__single van-tilt">
                            <div class="team__single-thumb">
                                <a href="{{ route('team.details') }}">
                                    <img src="{{ asset('assets/images/team/two.png') }}" alt="Image">
                                </a>
                                <div class="team__icons">
                                    <div class="team__single-content__icon">
                                        <i class="fa-solid fa-plus"></i>
                                    </div>
                                    <div class="team__single__thumb-social">
                                        <ul>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-instagram"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-behance"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="team__single-content">
                                <h6><a href="{{ route('team.details') }}">Arian Drobloas</a></h6>
                                <p>Volunteer</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="team__single-wrapper" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
                        <div class="team__single van-tilt">
                            <div class="team__single-thumb">
                                <a href="{{ route('team.details') }}">
                                    <img src="{{ asset('assets/images/team/three.png') }}" alt="Image">
                                </a>
                                <div class="team__icons">
                                    <div class="team__single-content__icon">
                                        <i class="fa-solid fa-plus"></i>
                                    </div>
                                    <div class="team__single__thumb-social">
                                        <ul>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-instagram"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-behance"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="team__single-content">
                                <h6><a href="{{ route('team.details') }}">Jara Klintof</a></h6>
                                <p>Volunteer</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="team__single-wrapper" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="900">
                        <div class="team__single van-tilt">
                            <div class="team__single-thumb">
                                <a href="{{ route('team.details') }}">
                                    <img src="{{ asset('assets/images/team/four.png') }}" alt="Image">
                                </a>
                                <div class="team__icons">
                                    <div class="team__single-content__icon">
                                        <i class="fa-solid fa-plus"></i>
                                    </div>
                                    <div class="team__single__thumb-social">
                                        <ul>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-instagram"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('home') }}">
                                                    <i class="fa-brands fa-behance"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="team__single-content">
                                <h6><a href="{{ route('team.details') }}">Aiden Markram</a></h6>
                                <p>Volunteer</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="section__cta cta text-center">
                        <a href="{{ route('our.team') }}" aria-label="our team" title="our team" class="btn--primary">View All
                            <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="spade">
            <img src="{{ asset('assets/images/sprade-green.png') }}" alt="Image">
        </div>
    </section>
    <!-- ==== / team section end ==== -->

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