@extends('frontend.layouts.app')
@section('title', 'Blog Grid')
@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 blog cm-details">
        <div class="container">
            <div class="row gutter-60">
                <div class="col-12 col-xl-8">
                    <div class="row gutter-30">
                        <div class="col-12 col-lg-6">
                            <div class="blog__single-wrapper" data-aos="fade-up" data-aos-duration="1000">
                                <div class="blog__single van-tilt">
                                    <div class="blog__single-thumb">
                                        <a href="{{ route('blog.details') }}">
                                            <img src="{{ asset('assets/images/blog/one.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">
                                            <h5><a href="{{ route('blog.details') }}">IT Service Case Studies Accelerate
                                                    Business Fly Success Tech</a>
                                            </h5>
                                        </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-circle-arrow-right"></i></a>
                                        </div>
                                    </div>
                                    <img src="{{ asset('assets/images/blog/spade.png') }}" alt="Image" class="spade-two">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="blog__single-wrapper" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="300">
                                <div class="blog__single van-tilt">
                                    <div class="blog__single-thumb">
                                        <a href="{{ route('blog.details') }}">
                                            <img src="{{ asset('assets/images/blog/two.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 (08)</p>
                                        </div>
                                        <div class="blog__single-content">
                                            <h5><a href="{{ route('blog.details') }}">IT Service Case Studies Accelerate
                                                    Business Fly Success Tech</a>
                                            </h5>
                                        </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-circle-arrow-right"></i></a>
                                        </div>
                                    </div>
                                    <img src="{{ asset('assets/images/blog/spade.png') }}" alt="Image" class="spade-two">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="blog__single-wrapper" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="600">
                                <div class="blog__single van-tilt">
                                    <div class="blog__single-thumb">
                                        <a href="{{ route('blog.details') }}">
                                            <img src="{{ asset('assets/images/blog/three.png') }}" alt="Image">
                                        </a>
                                        <div class="tag">
                                            <a href="{{ route('blog') }}"><i class="fa-solid fa-tags"></i>Food</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 (13)</p>
                                        </div>
                                        <div class="blog__single-content">
                                            <h5><a href="{{ route('blog.details') }}">IT Service Case Studies Accelerate
                                                    Business Fly Success Tech</a>
                                            </h5>
                                        </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-circle-arrow-right"></i></a>
                                        </div>
                                    </div>
                                    <img src="{{ asset('assets/images/blog/spade.png') }}" alt="Image" class="spade-two">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="blog__single-wrapper" data-aos="fade-up" data-aos-duration="1000">
                                <div class="blog__single van-tilt">
                                    <div class="blog__single-thumb">
                                        <a href="{{ route('blog.details') }}">
                                            <img src="{{ asset('assets/images/blog/one.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">
                                            <h5><a href="{{ route('blog.details') }}">IT Service Case Studies Accelerate
                                                    Business Fly Success Tech</a>
                                            </h5>
                                        </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-circle-arrow-right"></i></a>
                                        </div>
                                    </div>
                                    <img src="{{ asset('assets/images/blog/spade.png') }}" alt="Image" class="spade-two">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="blog__single-wrapper" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="300">
                                <div class="blog__single van-tilt">
                                    <div class="blog__single-thumb">
                                        <a href="{{ route('blog.details') }}">
                                            <img src="{{ asset('assets/images/blog/two.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 (08)</p>
                                        </div>
                                        <div class="blog__single-content">
                                            <h5><a href="{{ route('blog.details') }}">IT Service Case Studies Accelerate
                                                    Business Fly Success Tech</a>
                                            </h5>
                                        </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-circle-arrow-right"></i></a>
                                        </div>
                                    </div>
                                    <img src="{{ asset('assets/images/blog/spade.png') }}" alt="Image" class="spade-two">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="blog__single-wrapper" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="600">
                                <div class="blog__single van-tilt">
                                    <div class="blog__single-thumb">
                                        <a href="{{ route('blog.details') }}">
                                            <img src="{{ asset('assets/images/blog/three.png') }}" alt="Image">
                                        </a>
                                        <div class="tag">
                                            <a href="{{ route('blog') }}"><i class="fa-solid fa-tags"></i>Food</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 (13)</p>
                                        </div>
                                        <div class="blog__single-content">
                                            <h5><a href="{{ route('blog.details') }}">IT Service Case Studies Accelerate
                                                    Business Fly Success Tech</a>
                                            </h5>
                                        </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-circle-arrow-right"></i></a>
                                        </div>
                                    </div>
                                    <img src="{{ asset('assets/images/blog/spade.png') }}" alt="Image" class="spade-two">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="blog__single-wrapper" data-aos="fade-up" data-aos-duration="1000">
                                <div class="blog__single van-tilt">
                                    <div class="blog__single-thumb">
                                        <a href="{{ route('blog.details') }}">
                                            <img src="{{ asset('assets/images/blog/one.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">
                                            <h5><a href="{{ route('blog.details') }}">IT Service Case Studies Accelerate
                                                    Business Fly Success Tech</a>
                                            </h5>
                                        </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-circle-arrow-right"></i></a>
                                        </div>
                                    </div>
                                    <img src="{{ asset('assets/images/blog/spade.png') }}" alt="Image" class="spade-two">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="blog__single-wrapper" data-aos="fade-up" data-aos-duration="1000"
                                data-aos-delay="300">
                                <div class="blog__single van-tilt">
                                    <div class="blog__single-thumb">
                                        <a href="{{ route('blog.details') }}">
                                            <img src="{{ asset('assets/images/blog/two.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 (08)</p>
                                        </div>
                                        <div class="blog__single-content">
                                            <h5><a href="{{ route('blog.details') }}">IT Service Case Studies Accelerate
                                                    Business Fly Success Tech</a>
                                            </h5>
                                        </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-circle-arrow-right"></i></a>
                                        </div>
                                    </div>
                                    <img src="{{ asset('assets/images/blog/spade.png') }}" alt="Image" class="spade-two">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="pagination-wrapper" data-aos="fade-up" data-aos-duration="1000">
                                <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>
                </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