@extends('frontend.layouts.app')
@section('title', 'Blog')
@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">Latest News</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 ==== -->
    <!-- ==== blog section start ==== -->
    <section class="blog-main cm-details">
        <div class="container">
            <div class="row gutter-60">
                <div class="col-12 col-xl-8">
                    <div class="blog__single" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="blog__single-thumb">
                            <a href="{{ route('blog.details') }}">
                                <img src="{{ asset('assets/images/blog/four.png') }}" alt="Image">
                            </a>
                            <div class="tag">
                                <a href="{{ route('blog') }}"><i class="fa-solid fa-tags"></i>Health</a>
                            </div>
                        </div>
                        <div class="blog__single-inner">
                            <div class="blog__single-meta">
                                <p><i class="icon-user"></i>Robert Fox</p>
                                <p><i class="icon-message"></i>Comments (03)</p>
                            </div>
                            <div class="blog__single-content">
                                <h4><a href="{{ route('blog.details') }}">The whimsically named Egg Canvas brainch </a></h4>
                                <p>There are many variations of passages of Lorem Ipsum available, but majority have
                                    suffered
                                    teration in some form, by injected humour, or randomised words which don't look even
                                    slight
                                    believable. If you are going to use a passage of Lorem Ipsum.
                                </p>
                            </div>
                            <div class="blog__single-cta">
                                <a href="{{ route('blog.details') }}" aria-label="blog details" title="blog details">Read More<i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="blog__single cta" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="blog__single-thumb">
                            <a href="{{ route('blog.details') }}">
                                <img src="{{ asset('assets/images/blog/five.png') }}" alt="Image">
                            </a>
                            <div class="tag">
                                <a href="{{ route('blog') }}"><i class="fa-solid fa-tags"></i>Education</a>
                            </div>
                        </div>
                        <div class="blog__single-inner">
                            <div class="blog__single-meta">
                                <p><i class="icon-user"></i>Robert Fox</p>
                                <p><i class="icon-message"></i>Comments (03)</p>
                            </div>
                            <div class="blog__single-content">
                                <h4><a href="{{ route('blog.details') }}">The whimsically named Egg Canvas brainch </a></h4>
                                <p>There are many variations of passages of Lorem Ipsum available, but majority have
                                    suffered
                                    teration in some form, by injected humour, or randomised words which don't look even
                                    slight
                                    believable. If you are going to use a passage of Lorem Ipsum.
                                </p>
                            </div>
                            <div class="blog__single-cta">
                                <a href="{{ route('blog.details') }}" aria-label="blog details" title="blog details">Read More<i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="blog__single cta" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="blog__single-thumb">
                            <a href="{{ route('blog.details') }}">
                                <img src="{{ asset('assets/images/blog/six.png') }}" alt="Image">
                            </a>
                            <div class="tag">
                                <a href="{{ route('blog') }}"><i class="fa-solid fa-tags"></i>Donation</a>
                            </div>
                        </div>
                        <div class="blog__single-inner">
                            <div class="blog__single-meta">
                                <p><i class="icon-user"></i>Robert Fox</p>
                                <p><i class="icon-message"></i>Comments (03)</p>
                            </div>
                            <div class="blog__single-content">
                                <h4><a href="{{ route('blog.details') }}">The whimsically named Egg Canvas brainch </a></h4>
                                <p>There are many variations of passages of Lorem Ipsum available, but majority have
                                    suffered
                                    teration in some form, by injected humour, or randomised words which don't look even
                                    slight
                                    believable. If you are going to use a passage of Lorem Ipsum.
                                </p>
                            </div>
                            <div class="blog__single-cta">
                                <a href="{{ route('blog.details') }}" aria-label="blog details" title="blog details">Read More<i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="pagination-wrapper" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <ul class="pagination main-pagination">
                            <li>
                                <button>
                                    <i class="fa-solid fa-angles-left"></i>
                                </button>
                            </li>
                            <li>
                                <a href="{{ route('blog') }}">1</a>
                            </li>
                            <li>
                                <a href="{{ route('blog') }}" class="active">2</a>
                            </li>
                            <li>
                                <a href="{{ route('blog') }}">3</a>
                            </li>
                            <li>
                                <button>
                                    <i class="fa-solid fa-angles-right"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="blog-main__sidebar">
                        <div class="cm-details-author cm-sidebar-widget" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="100">
                            <div class="author-thumb">
                                <img src="{{ asset('assets/images/author-two.png') }}" alt="Image">
                            </div>
                            <div class="author-meta">
                                <h6>Rosalina Willaim</h6>
                                <p>Front End Developer</p>
                                <p>he whimsically named Egg Canvas is the
                                    design director and photographer
                                    in New York.
                                </p>
                            </div>
                            <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>
                        </div>
                        <div class="cm-details__sidebar">
                            <div class="cm-sidebar-widget" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="100">
                                <div class="intro">
                                    <h5>search here</h5>
                                </div>
                                <form action="#" method="post">
                                    @csrf
                                    <input type="text" name="search-product" id="searchProduct"
                                        placeholder="Search Here..." required>
                                    <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
                                </form>
                            </div>
                            <div class="cm-sidebar-widget" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="100">
                                <div class="intro">
                                    <h5>Recent Posts</h5>
                                </div>
                                <div class="cm-sidebar-post">
                                    <div class="single-item">
                                        <div class="thumb">
                                            <a href="{{ route('blog.details') }}">
                                                <img src="{{ asset('assets/images/blog/ph-one.png') }}" alt="Image">
                                            </a>
                                        </div>
                                        <div class="content">
                                            <p><i class="fa-solid fa-calendar-days"></i> <span>November 19, 2024</span>
                                            </p>
                                            <p><a href="{{ route('blog.details') }}">Where Innovation Meets Foundation</a>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="single-item">
                                        <div class="thumb">
                                            <a href="{{ route('blog.details') }}">
                                                <img src="{{ asset('assets/images/blog/ph-two.png') }}" alt="Image">
                                            </a>
                                        </div>
                                        <div class="content">
                                            <p><i class="fa-solid fa-calendar-days"></i> <span>November 19, 2024</span>
                                            </p>
                                            <p><a href="{{ route('blog.details') }}">Where Innovation Meets Foundation</a>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="single-item">
                                        <div class="thumb">
                                            <a href="{{ route('blog.details') }}">
                                                <img src="{{ asset('assets/images/blog/three.png') }}" alt="Image">
                                            </a>
                                        </div>
                                        <div class="content">
                                            <p><i class="fa-solid fa-calendar-days"></i> <span>November 22, 2024</span>
                                            </p>
                                            <p><a href="{{ route('blog.details') }}">Structures That Stand,
                                                    Dreams That Soar</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cm-sidebar-widget" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="100">
                                <div class="intro">
                                    <h5>Categories</h5>
                                </div>
                                <div class="cm-categories">
                                    <a href="{{ route('blog') }}">
                                        <span>Donation</span>
                                        <span>05</span>
                                    </a>
                                    <a href="{{ route('blog') }}">
                                        <span>Charity</span>
                                        <span>02</span>
                                    </a>
                                    <a href="{{ route('blog') }}">
                                        <span>Volunteer</span>
                                        <span>09</span>
                                    </a>
                                    <a href="{{ route('blog') }}">
                                        <span>Health</span>
                                        <span>07</span>
                                    </a>
                                    <a href="{{ route('blog') }}">
                                        <span>Education</span>
                                        <span>04</span>
                                    </a>
                                </div>
                            </div>
                            <div class="cm-sidebar-widget" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="100">
                                <div class="intro">
                                    <h5>Popular Tags</h5>
                                </div>
                                <div class="tag-wrapper">
                                    <a href="{{ route('shop') }}">t-shirt</a>
                                    <a href="{{ route('shop') }}">Banner Design</a>
                                    <a href="{{ route('shop') }}">Brochures</a>
                                    <a href="{{ route('shop') }}">Landing</a>
                                    <a href="{{ route('shop') }}">Print</a>
                                    <a href="{{ route('shop') }}">Business Card</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ==== / blog section end ==== -->

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