@extends('frontend.layouts.main')
@push('title')
    <title>The Soul Anahat</title>
@endpush

@section('main-section')
    <section class="home-banner">
        <div class="banner-content">
            <span class="banner-tagline">Serving with soul and heart relentlessly</span>
            <h1>The Soul Anahat</h1>
            <p>
                Since 22.12.23, we have been dedicated to intellectual upliftment and
                positive social change. From education to health camps, we protect
                the rights of the underprivileged with commitment and focus.
            </p>

            <div class="btn-group-custom">
                <a href="{{ url('/mission-vision') }}" class="banner-btn btn-filled">Our Mission</a>
                <a href="{{ url('volunteer-with-us') }}" class="banner-btn btn-ghost">Join The Journey</a>
            </div>
        </div>
    </section>

    <section class="founder-section ptb">
        <div class="container">
            <div class="founder-wrapper p-4 p-md-5">
                <div class="row align-items-center">
                    <div class="col-md-4 text-center mb-4 mb-md-0">
                        <div class="img-frame">
                            <img src="{{ asset('frontend/image/founder.jpeg') }}" alt="Mr. Anup Kumar"
                                class="img-fluid rounded-circle shadow founder-img">
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="founder-content ps-md-4">
                            <h6 class="text-uppercase fw-bold text-primary mb-2">Our Leadership</h6>
                            <h2 class="fw-bold mb-3">Mr. Anoop Kumar</h2>
                            <p class="text-muted fw-semibold mb-4">President & Retired Civil Servant</p>

                            <div class="message-box">
                                <p class="lead fst-italic text-secondary">
                                    "Mr. Anoop Kumar is leaving an indelible mark on the community. A retired civil servant
                                    with an impeccable track record of honesty, he's now channeling his expertise towards
                                    uplifting the marginalized and empowering the underprivileged. His selfless dedication
                                    to public service is a beacon of hope, showcasing the impact one individual can have in
                                    driving meaningful change."
                                </p>
                            </div>

                            <hr class="w-25 border-primary border-2 opacity-100 mt-4">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- start-home-about-section --}}
    {{-- 
    <section class="home-section plr">
        <div class="container-fluid ptb">
            <div class="row">
                <div class="col-md-12">
                    <div class="row row-cols-1 row-cols-lg-3 row-cols-md-3 g-4">
                        {{-- card-layouts --}}
    {{-- <div class="col">
                            <div class="card home-about-card">
                                <img src="{{ asset('frontend/image/homeimage/mission.jpg') }}" alt="our mission"
                                    class="img-fluid">
                                <hr class="my-1">
                                <div class="card-body">
                                    <h5 class="card-title"><strong>Our Mission</strong></h5>
                                    <p class="card-text">
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatum quaerat
                                        corporis ullam, cum ducimus itaque reiciendis quasi nihil dolorem non error fugit
                                        blanditiis quisquam, repellat odit libero dicta ea aliquam aperiam quis suscipit
                                    </p>
                                    <button class="custom-bttn">
                                        <a href="{{ url('/mission-vision') }}" target="_blank">
                                            Our Mission
                                            <span class="ps-2"><i
                                                    class="fa-solid fa-arrow-up-right-from-square"></i></span>
                                        </a>
                                    </button>
                                </div>
                            </div>
                        </div>
                        end card-layouts --}}
    {{-- card-layouts --}}
    {{-- <div class="col">
                            <div class="card home-about-card">
                                <img src="{{ asset('frontend/image/homeimage/vision.jpg') }}" alt="our vision"
                                    class="img-fluid">
                                <hr class="my-1">
                                <div class="card-body">
                                    <h5 class="card-title"><strong>Our Vision</strong></h5>
                                    <p class="card-text">
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatum quaerat
                                        corporis ullam, cum ducimus itaque reiciendis quasi nihil dolorem non error fugit
                                        blanditiis quisquam, repellat odit libero dicta ea aliquam aperiam quis suscipit
                                    </p>
                                    <button class="custom-bttn">
                                        <a href="{{ url('/mission-vision') }}" target="_blank">
                                            Our Vision
                                            <span class="ps-2"><i
                                                    class="fa-solid fa-arrow-up-right-from-square"></i></span>
                                        </a>
                                    </button>
                                </div>
                            </div>
                        </div> --}}
    {{-- end card-layouts --}}
    {{-- card-layouts --}}
    {{-- <div class="col">
                            <div class="card home-about-card founder-card">
                                <img src="{{ asset('frontend/image/volunteer.jpg') }}" alt="founder"
                                    class="img-fluid founder-image">
                                <p class="text-center mt-1 mb-0 text-danger"><strong>Mr. Patil Singh</strong></p>
                                <small class="text-center">CEO & Founder of Foundation</small>
                                <div class="card-body mt-3">
                                    <p class="card-text text-center">
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatum quaerat
                                        corporis ullam, cum ducimus itaque reiciendis quasi nihil dolorem non error fugit
                                        blanditiis quisquam, repellat odit libero dicta ea aliquam aperiam quis suscipit
                                    </p>
                                    <button class="custom-bttn">
                                        <a href="{{ url('/mission-vision') }}" target="_blank">
                                            Read More
                                            <span class="ps-2"><i
                                                    class="fa-solid fa-arrow-up-right-from-square"></i></span>
                                        </a>
                                    </button>
                                </div>
                            </div>
                        </div> --}}
    {{-- end card-layouts --}}
    {{-- </div>
                </div>
            </div>
        </div>
    </section> --}}

    {{-- end-home-about-section --}}

    {{-- start-volunteer section --}}
    <section class="home-section">
        <div class="container ptb">
            <div class="row">
                <div class="col-md-12">
                    <div class="home-custom-title">
                        <h3>Meet Our <span>Volunteers</span></h3>
                        <div class="sep-line"></div>
                    </div>
                    <div class="row volunteer-section">
                        <p class="text-muted text-center">
                            Our dedicated volunteers will be showcased here soon.
                            Stay tuned for updates.
                        </p>
                        {{-- <div class="col-lg-7 mb-5 mb-lg-0">
                            <h4><strong>Become a Volunteers ?</strong></h4>
                            <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum adipisci nostrum sunt
                                    quas. Totam, enim!</strong></p>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis vel earum cupiditate
                                voluptatem totam doloremque quod laboriosam minima excepturi doloribus iure modi rerum,
                                explicabo fugit sit corporis culpa, autem sunt.</p>
                            <div class="mt-3">
                                <button class="custom-bttn">
                                    <a href="{{ url('volunteer-with-us') }}" target="_blank">
                                        Become a Volunteer
                                        <span class="ps-2"><i class="fa-solid fa-arrow-up-right-from-square"></i></span>
                                    </a>
                                </button>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="row row-cols-1 row-cols-lg-2 row-cols-sm-2 g-4">
                                <div class="col">
                                    <div class="card vol-card">
                                        <div class="card-body">
                                            <img src="{{ asset('frontend/image/volunteer.jpg') }}" alt="">
                                        </div>
                                        <div class="card-overlay d-flex align-items-center justify-content-end flex-column">
                                            <p><strong>Mr.John Cena</strong></p>
                                            <p>Wrestler</p>
                                        </div>
                                    </div>
                                </div>                         
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- end-volunteer section --}}

    {{-- start counting section --}}
    <section class="image-background counter-section">
        <div class="container ptb">
            <div class="row g-4">
                <div class="col-lg-3 col-sm-6">
                    <div class="card counter-card">
                        <span class="text-center"><i class="fa-solid fa-indian-rupee-sign"></i></span>
                        <div class="card-body">
                            <h1 class="card-title counterup">
                                0000
                            </h1>
                            <p class="card-text">Money Donated</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="card counter-card">
                        <span class="text-center"><i class="fa-solid fa-face-smile"></i></span>
                        <div class="card-body">
                            <h1 class="card-title counterup">
                                0000
                            </h1>
                            <p class="card-text">Total Volunteer</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="card counter-card">
                        <span class="text-center"><i class="fa-solid fa-person"></i></span>
                        <div class="card-body">
                            <h1 class="card-title counterup">
                                0000
                            </h1>
                            <p class="card-text">People Impacted</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="card counter-card">
                        <span class="text-center"><i class="fa-solid fa-comments"></i></span>
                        <div class="card-body">
                            <h1 class="card-title counterup">
                                0000
                            </h1>
                            <p class="card-text">Positive Feedback</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- end counting section --}}

    {{-- start client testimonial --}}
    <div class="home-section ptb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="home-custom-title">
                        <h3>Client <span>Testimonial</span></h3>
                        <div class="sep-line"></div>
                    </div>
                    <div class="">
                    {{-- <div class="owl-carousel testimonial owl-theme"> --}}
                        {{-- <div class="item testimonial-item">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci enim rem earum nostrum
                                repudiandae minus pariatur in quam officia dolore nisi voluptate facere doloremque fugit
                                distinctio sint asperiores, voluptas quod quia quos tempora perspiciatis tenetur
                                reprehenderit nulla. Quasi veritatis asperiores assumenda illo vitae quibusdam, similique
                                corrupti molestias quisquam. Iusto, quae?</p>
                            <div class="d-flex align-items-center testi-client">
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('frontend/image/aboutus/health.jpg') }}" alt="...">
                                </div>
                                <div class="flex-grow-1 ms-3 testi-text">
                                    <b>Mr. Roman Empire</b>
                                    <br>
                                    <small class="text-danger">Wrestler</small>
                                </div>
                            </div>
                            <span class="testi-quotes"><i class="fa-solid fa-quote-right"></i></span>
                        </div> --}}
                         <p class="text-muted text-center">
        Success stories and feedback from our beneficiaries
        will be published soon.
    </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end client testimonial --}}

    {{-- back to top --}}
    <a href="#" class="back-top" id="backtop"><i class="fa-solid fa-arrow-up"></i></a>
    {{-- end back to top --}}
@endsection