@extends('site.layout.master')

@section('content')
    <div class="loader">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="pre-box-one">
                    <div class="pre-box-two"></div>
                </div>
            </div>
        </div>
    </div>

    @include('site.navigation.header')

    <div class="banner-area" style="background-image: url('site-assets/img/states.jpg')">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="banner-content mt-0">
                                <span>Let’s contribute to make the world a better place</span>
                                <h1>Be the change you want to see</h1>
                                <p>
                                    Raise money for various causes, from personal needs to social impact projects.
                                    We empower anyone to make a difference, with easy-to-use tools ans a
                                    supportive community.
                                </p>
                                <div class="banner-btn-area">
                                    <a class="common-btn banner-btn" href="{{ route('accounts') }}">Get Started</a>
                                    <a class="common-btn" href="#">Donate Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="about-area pt-100 pb-70">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="about-img">
                        <img src="site-assets/img/about/about-main1.jpg" alt="About">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content">
                        <div class="section-title">
                            <span class="sub-title">About us</span>
                            <h2>We're for social causes</h2>
                        </div>
                        <span class="about-span">
                            Empowering the collective power of the people, one donation at a time.
                            We believe that grassroots movements and marginalized communities
                            deserve a platform to amplify their voice.
                        </span>
                        <p>
                            We're committed to creating a world where everyone has an equal opportunity to create change. Our platform is dedicated to democratizing access to funding, amplifying underrepresented voices, and empowering the next generation of leaders to build a more just and equitable society.
                        </p>
                        <div class="about-btn-area">
                            <a class="common-btn about-btn" href="{{ route('accounts') }}">Get Started</a>
                            <a class="common-btn" href="#">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="donations-area pt-100 pb-70">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">Causes to care</span>
                <h2>Be the reason why someone smiles</h2>
                <p>
                    We exist for non-profits, social enterprises, community groups, activists,
                    politicians and individual citizens.
                </p>
            </div>
            <div class="row">
                <div class="col-sm-6 col-lg-4">
                    <div class="donation-item">
                        <div class="img">
                            <img src="site-assets/img/donation/donation1.jpg" alt="Donation">
                            <a class="common-btn" href="donation-details.html">Donate Now</a>
                        </div>
                        <div class="inner">
                            <div class="top">
                                <a class="tags" href="#">#Medical</a>
                                <h3>
                                    <a href="donation-details.html">Need help for treatment</a>
                                </h3>
                                <p>We exist for non-profits, social enterprises, activists. Lorem politicians and individual citizens.</p>
                            </div>
                            <div class="bottom">
                                <div class="skill">
                                    <div class="skill-bar skill1 wow fadeInLeftBig">
                                        <span class="skill-count1">85%</span>
                                    </div>
                                </div>
                                <ul>
                                    <li>Raised: $5,500.00</li>
                                    <li>Goal: $7,000.00</li>
                                </ul>
                                <h4>Donated by <span>60 people</span></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="work-area pt-100 pb-70">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="work-content">
                        <div class="section-title">
                            <span class="sub-title">How we work</span>
                            <h2>We exist for non-profits, social enterprises, community groups</h2>
                        </div>
                        <ul>
                            <li>
                                <h3><span>01</span>Raise money from different sources</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, pariatur esse animi temporibus iusto at dolorum</p>
                            </li>
                            <li>
                                <h3><span>02</span>Giving relief in rural area all over the world</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, pariatur esse animi temporibus iusto at dolorum</p>
                            </li>
                            <li>
                                <h3><span>03</span>Gather all the money and giving relief in need</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, pariatur esse animi temporibus iusto at dolorum</p>
                            </li>
                            <li>
                                <h3><span>04</span>Go to the country that really needs help</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, pariatur esse animi temporibus iusto at dolorum</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="work-img">
                        <img src="site-assets/img/work/work1.jpg" alt="Work">
                        <img src="site-assets/img/work/work2.jpg" alt="Work">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="benefit-area pt-100 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-lg-3">
                    <div class="benefit-item">
                        <i class="flaticon-house"></i>
                        <h3>Build home</h3>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique illum excepturi ab quam magnam earum</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="benefit-item two">
                        <i class="flaticon-hospital"></i>
                        <h3>Medical facilities</h3>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique illum excepturi ab quam magnam earum</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="benefit-item three">
                        <i class="flaticon-fast-food"></i>
                        <h3>Food & water</h3>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique illum excepturi ab quam magnam earum</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="benefit-item four">
                        <i class="flaticon-graduation-cap"></i>
                        <h3>Education facilities</h3>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique illum excepturi ab quam magnam earum</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="event-area pt-100 pb-70">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">Our events</span>
                <h2>Upcoming events near you</h2>
            </div>
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="event-item">
                        <img src="site-assets/img/event/event1.jpg" alt="Event">
                        <div class="inner">
                            <h4>04 <span>Jan</span></h4>
                            <h3>
                                <a href="event-details.html">Fundraising for MQ</a>
                            </h3>
                            <ul>
                                <li>
                                    <i class="icofont-stopwatch"></i>
                                    <span>2.00pm - 5.00pm</span>
                                </li>
                                <li>
                                    <i class="icofont-location-pin"></i>
                                    <span>Australia</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="event-item">
                        <img src="site-assets/img/event/event2.jpg" alt="Event">
                        <div class="inner">
                            <h4>05 <span>Jan</span></h4>
                            <h3>
                                <a href="event-details.html">Shout about it with us</a>
                            </h3>
                            <ul>
                                <li>
                                    <i class="icofont-stopwatch"></i>
                                    <span>1.00pm - 2.00pm</span>
                                </li>
                                <li>
                                    <i class="icofont-location-pin"></i>
                                    <span>Canada</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="event-item">
                        <img src="site-assets/img/event/event3.jpg" alt="Event">
                        <div class="inner">
                            <h4>10 <span>Jan</span></h4>
                            <h3>
                                <a href="event-details.html">Relief giving - Providing relief</a>
                            </h3>
                            <ul>
                                <li>
                                    <i class="icofont-stopwatch"></i>
                                    <span>3.00pm - 4.00pm</span>
                                </li>
                                <li>
                                    <i class="icofont-location-pin"></i>
                                    <span>USA</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="event-item-right">
                        <h4>06 <span>Jan</span></h4>
                        <h3>
                            <a href="event-details.html">Challenge is right for you</a>
                        </h3>
                        <ul>
                            <li>
                                <i class="icofont-stopwatch"></i>
                                <span>10.00am - 11.00am</span>
                            </li>
                            <li>
                                <i class="icofont-location-pin"></i>
                                <span>UK</span>
                            </li>
                        </ul>
                    </div>
                    <div class="event-item-right">
                        <h4>07 <span>Jan</span></h4>
                        <h3>
                            <a href="event-details.html">Fundraising is going</a>
                        </h3>
                        <ul>
                            <li>
                                <i class="icofont-stopwatch"></i>
                                <span>11.00am - 12.00pm</span>
                            </li>
                            <li>
                                <i class="icofont-location-pin"></i>
                                <span>France</span>
                            </li>
                        </ul>
                    </div>
                    <div class="event-item-right">
                        <h4>08 <span>Jan</span></h4>
                        <h3>
                            <a href="event-details.html">Bowling for a cause</a>
                        </h3>
                        <ul>
                            <li>
                                <i class="icofont-stopwatch"></i>
                                <span>1.00pm - 1.30pm</span>
                            </li>
                            <li>
                                <i class="icofont-location-pin"></i>
                                <span>Spain</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="gallery-area pt-100 pb-70">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">Our gallery</span>
                <h2>Discover the best things we do</h2>
                <p>We exist for non-profits, social enterprises, community groups, activists,lorem politicians and individual citizens that are making.</p>
            </div>
            <div class="row">
                <div class="col-sm-6 col-lg-4">
                    <div class="gallery-item">
                        <a href="site-assets/img/gallery/gallery1.jpg" data-lightbox="roadtrip">
                            <img src="site-assets/img/gallery/gallery1.jpg" alt="Gallery">
                            <i class="icofont-eye"></i>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="gallery-item">
                        <a href="site-assets/img/gallery/gallery2.jpg" data-lightbox="roadtrip">
                            <img src="site-assets/img/gallery/gallery2.jpg" alt="Gallery">
                            <i class="icofont-eye"></i>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="gallery-item">
                        <a href="site-assets/img/gallery/gallery3.jpg" data-lightbox="roadtrip">
                            <img src="site-assets/img/gallery/gallery3.jpg" alt="Gallery">
                            <i class="icofont-eye"></i>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="gallery-item">
                        <a href="site-assets/img/gallery/gallery4.jpg" data-lightbox="roadtrip">
                            <img src="site-assets/img/gallery/gallery4.jpg" alt="Gallery">
                            <i class="icofont-eye"></i>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="gallery-item">
                        <a href="site-assets/img/gallery/gallery5.jpg" data-lightbox="roadtrip">
                            <img src="site-assets/img/gallery/gallery5.jpg" alt="Gallery">
                            <i class="icofont-eye"></i>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="gallery-item">
                        <a href="site-assets/img/gallery/gallery6.jpg" data-lightbox="roadtrip">
                            <img src="site-assets/img/gallery/gallery6.jpg" alt="Gallery">
                            <i class="icofont-eye"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="blog-area pt-100 pb-70">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">Latest news & blog</span>
                <h2>Latest charity blog</h2>
                <p>We exist for non-profits, social enterprises, community groups, activists,lorem politicians and individual citizens that are making.</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-sm-6 col-lg-4">
                    <div class="blog-item">
                        <div class="top">
                            <a href="blog-details.html">
                                <img src="site-assets/img/blog/blog1.jpg" alt="Blog">
                            </a>
                        </div>
                        <div class="bottom">
                            <ul>
                                <li>
                                    <i class="icofont-calendar"></i>
                                    <span>21 Jan, 2024</span>
                                </li>
                                <li>
                                    <i class="icofont-user-alt-3"></i>
                                    <span>By:</span>
                                    <a href="#">Admin</a>
                                </li>
                            </ul>
                            <h3>
                                <a href="blog-details.html">Donate for nutration less poor people</a>
                            </h3>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet cupiditate sit ducimus dolor laudantium distinction</p>
                            <a class="blog-btn" href="blog-details.html">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="blog-item">
                        <div class="top">
                            <a href="blog-details.html">
                                <img src="site-assets/img/blog/blog2.jpg" alt="Blog">
                            </a>
                        </div>
                        <div class="bottom">
                            <ul>
                                <li>
                                    <i class="icofont-calendar"></i>
                                    <span>22 Jan, 2024</span>
                                </li>
                                <li>
                                    <i class="icofont-user-alt-3"></i>
                                    <span>By:</span>
                                    <a href="#">Admin</a>
                                </li>
                            </ul>
                            <h3>
                                <a href="blog-details.html">Charity meetup in Berline next year</a>
                            </h3>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet cupiditate sit ducimus dolor laudantium distinction</p>
                            <a class="blog-btn" href="blog-details.html">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="blog-item">
                        <div class="top">
                            <a href="blog-details.html">
                                <img src="site-assets/img/blog/blog3.jpg" alt="Blog">
                            </a>
                        </div>
                        <div class="bottom">
                            <ul>
                                <li>
                                    <i class="icofont-calendar"></i>
                                    <span>23 Jan, 2024</span>
                                </li>
                                <li>
                                    <i class="icofont-user-alt-3"></i>
                                    <span>By:</span>
                                    <a href="#">Admin</a>
                                </li>
                            </ul>
                            <h3>
                                <a href="blog-details.html">Donate for the poor people to help them</a>
                            </h3>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet cupiditate sit ducimus dolor laudantium distinction</p>
                            <a class="blog-btn" href="blog-details.html">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('site.navigation.footer')
@endsection