@extends('layouts.layout5')
@php
    $title = 'blog grid';
    $subtitle = 'Our blog';
@endphp
@section('title', 'Blog Grid || Transwide || Professional Transportation & Logistics Laravel Template')
@section('content')

<section class="blog-page section-space">
    <div class="container">
        <div class="row gutter-y-30">
            <div class="col-md-6 col-lg-4">
                <div class="blog-card wow fadeInUp" data-wow-duration="1500ms" data-wow-delay="00ms">
                    <div class="blog-card__image">
                        <div class="blog-card__image__inner blog-card__image__inner--1">
                            <img src="{{ asset('assets/images/blog/blog-1-1.jpg') }}" alt="10 Simple Practices that Will Help You Get 1%">
                        </div>
                        <div class="blog-card__image__inner blog-card__image__inner--2">
                            <img src="{{ asset('assets/images/blog/blog-1-1.jpg') }}" alt="10 Simple Practices that Will Help You Get 1%">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__image__link"><span class="sr-only">10 Simple Practices that Will Help You Get 1%</span></a>
                        </div>
                        <div class="blog-card__date">
                            <span class="blog-card__date__day">26</span>
                            <span class="blog-card__date__month">August</span>
                        </div>
                    </div>
                    <div class="blog-card__content">
                        <div class="blog-card__inner">
                            <ul class="blog-card__meta list-unstyled">
                                <li>
                                    <a href="#">
                                        <span class="blog-card__meta__icon"><i class="icon-bubble-chat"></i></span>
                                        2 Comment
                                    </a>
                                </li>
                            </ul>
                            <h3 class="blog-card__title"><a href="{{ url('blog-details-right') }}">10 Simple Practices that Will Help You Get 1%</a></h3>
                        </div>
                        <div class="blog-card__bottom">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__btn">
                                <i class="icon-right-arrow-up"></i>
                            </a>
                            <div class="blog-card__admin">
                                <img src="{{ asset('assets/images/blog/blog-admin-1-1.png') }}" alt="Jerome Bell" class="blog-card__admin__image">
                                <div class="blog-card__admin__content">
                                    <h3 class="blog-card__admin__name"><a href="{{ url('blog-details-right') }}">Jerome Bell</a></h3>
                                    <p class="blog-card__admin__designation">Admin</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="blog-card wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='100ms'>
                    <div class="blog-card__image">
                        <div class="blog-card__image__inner blog-card__image__inner--1">
                            <img src="{{ asset('assets/images/blog/blog-1-2.jpg') }}" alt="Today Health insurance Blog off Deductible">
                        </div>
                        <div class="blog-card__image__inner blog-card__image__inner--2">
                            <img src="{{ asset('assets/images/blog/blog-1-2.jpg') }}" alt="Today Health insurance Blog off Deductible">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__image__link">
                                <span class="sr-only">Today Health insurance Blog off Deductible</span>
                            </a>
                        </div>
                        <div class="blog-card__date">
                            <span class="blog-card__date__day">10</span>
                            <span class="blog-card__date__month">July</span>
                        </div>
                    </div>
                    <div class="blog-card__content">
                        <div class="blog-card__inner">
                            <ul class="blog-card__meta list-unstyled">
                                <li>
                                    <a href="#">
                                        <span class="blog-card__meta__icon"><i class="icon-bubble-chat"></i></span>
                                        2 Comment
                                    </a>
                                </li>
                            </ul>
                            <h3 class="blog-card__title">
                                <a href="{{ url('blog-details-right') }}">Today Health insurance Blog off Deductible</a>
                            </h3>
                        </div>
                        <div class="blog-card__bottom">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__btn">
                                <i class="icon-right-arrow-up"></i>
                            </a>
                            <div class="blog-card__admin">
                                <img src="{{ asset('assets/images/blog/blog-admin-1-2.png') }}" alt="Bessie Cooper" class="blog-card__admin__image">
                                <div class="blog-card__admin__content">
                                    <h3 class="blog-card__admin__name">
                                        <a href="{{ url('blog-details-right') }}">Bessie Cooper</a>
                                    </h3>
                                    <p class="blog-card__admin__designation">Admin</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="blog-card wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='200ms'>
                    <div class="blog-card__image">
                        <div class="blog-card__image__inner blog-card__image__inner--1">
                            <img src="{{ asset('assets/images/blog/blog-1-3.jpg') }}" alt="Nail jelly to the hothouse wall pixel pushing">
                        </div>
                        <div class="blog-card__image__inner blog-card__image__inner--2">
                            <img src="{{ asset('assets/images/blog/blog-1-3.jpg') }}" alt="Nail jelly to the hothouse wall pixel pushing">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__image__link">
                                <span class="sr-only">Nail jelly to the hothouse wall pixel pushing</span>
                            </a>
                        </div>
                        <div class="blog-card__date">
                            <span class="blog-card__date__day">28</span>
                            <span class="blog-card__date__month">June</span>
                        </div>
                    </div>
                    <div class="blog-card__content">
                        <div class="blog-card__inner">
                            <ul class="blog-card__meta list-unstyled">
                                <li>
                                    <a href="#">
                                        <span class="blog-card__meta__icon"><i class="icon-bubble-chat"></i></span>
                                        2 Comment
                                    </a>
                                </li>
                            </ul>
                            <h3 class="blog-card__title">
                                <a href="{{ url('blog-details-right') }}">Nail jelly to the hothouse wall pixel pushing</a>
                            </h3>
                        </div>
                        <div class="blog-card__bottom">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__btn">
                                <i class="icon-right-arrow-up"></i>
                            </a>
                            <div class="blog-card__admin">
                                <img src="{{ asset('assets/images/blog/blog-admin-1-3.png') }}" alt="Jenny Wilson" class="blog-card__admin__image">
                                <div class="blog-card__admin__content">
                                    <h3 class="blog-card__admin__name">
                                        <a href="{{ url('blog-details-right') }}">Jenny Wilson</a>
                                    </h3>
                                    <p class="blog-card__admin__designation">Admin</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="blog-card wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='00ms'>
                    <div class="blog-card__image">
                        <div class="blog-card__image__inner blog-card__image__inner--1">
                            <img src="{{ asset('assets/images/blog/blog-1-4.jpg') }}" alt="My Capacity Is Full We're Building The Plane">
                        </div><!-- /.blog-card__image__inner -->
                        <div class="blog-card__image__inner blog-card__image__inner--2">
                            <img src="{{ asset('assets/images/blog/blog-1-4.jpg') }}" alt="My Capacity Is Full We're Building The Plane">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__image__link">
                                <span class="sr-only">My Capacity Is Full We're Building The Plane</span>
                            </a>
                        </div><!-- /.blog-card__image__inner -->
                        <div class="blog-card__date">
                            <span class="blog-card__date__day">09</span>
                            <span class="blog-card__date__month">March</span>
                        </div><!-- /.blog-card__date -->
                    </div><!-- /.blog-card__image -->
                    <div class="blog-card__content">
                        <div class="blog-card__inner">
                            <ul class="blog-card__meta list-unstyled">
                                <li>
                                    <a href="#">
                                        <span class="blog-card__meta__icon"><i class="icon-bubble-chat"></i></span>
                                        2 Comment
                                    </a>
                                </li>
                            </ul><!-- /.blog-card__meta -->
                            <h3 class="blog-card__title">
                                <a href="{{ url('blog-details-right') }}">My Capacity Is Full We're Building The Plane</a>
                            </h3><!-- /.blog-card__title -->
                        </div><!-- /.blog-card__inner -->
                        <div class="blog-card__bottom">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__btn">
                                <i class="icon-right-arrow-up"></i>
                            </a><!-- /.blog-card__btn -->
                            <div class="blog-card__admin">
                                <img src="{{ asset('assets/images/blog/blog-admin-1-4.png') }}" alt="Darlene Robertson" class="blog-card__admin__image">
                                <div class="blog-card__admin__content">
                                    <h3 class="blog-card__admin__name">
                                        <a href="{{ url('blog-details-right') }}">Darlene Robertson</a>
                                    </h3>
                                    <p class="blog-card__admin__designation">Admin</p>
                                </div><!-- /.blog-card__admin__content -->
                            </div><!-- /.blog-card__admin -->
                        </div><!-- /.blog-card__bottom -->
                    </div><!-- /.blog-card__content -->
                </div><!-- /.blog-card -->
            </div><!-- /.col-md-6 col-lg-4 -->
            <div class="col-md-6 col-lg-4">
                <div class="blog-card wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='100ms'>
                    <div class="blog-card__image">
                        <div class="blog-card__image__inner blog-card__image__inner--1">
                            <img src="{{ asset('assets/images/blog/blog-1-5.jpg') }}" alt="Big data are there any leftovers in the kitchen">
                        </div><!-- /.blog-card__image__inner -->
                        <div class="blog-card__image__inner blog-card__image__inner--2">
                            <img src="{{ asset('assets/images/blog/blog-1-5.jpg') }}" alt="Big data are there any leftovers in the kitchen">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__image__link">
                                <span class="sr-only">Big data are there any leftovers in the kitchen</span>
                            </a>
                        </div><!-- /.blog-card__image__inner -->
                        <div class="blog-card__date">
                            <span class="blog-card__date__day">01</span>
                            <span class="blog-card__date__month">April</span>
                        </div><!-- /.blog-card__date -->
                    </div><!-- /.blog-card__image -->
                    <div class="blog-card__content">
                        <div class="blog-card__inner">
                            <ul class="blog-card__meta list-unstyled">
                                <li>
                                    <a href="#">
                                        <span class="blog-card__meta__icon"><i class="icon-bubble-chat"></i></span>
                                        2 Comment
                                    </a>
                                </li>
                            </ul><!-- /.blog-card__meta -->
                            <h3 class="blog-card__title">
                                <a href="{{ url('blog-details-right') }}">Big data are there any leftovers in the kitchen</a>
                            </h3><!-- /.blog-card__title -->
                        </div><!-- /.blog-card__inner -->
                        <div class="blog-card__bottom">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__btn">
                                <i class="icon-right-arrow-up"></i>
                            </a><!-- /.blog-card__btn -->
                            <div class="blog-card__admin">
                                <img src="{{ asset('assets/images/blog/blog-admin-1-5.png') }}" alt="Kristin Watson" class="blog-card__admin__image">
                                <div class="blog-card__admin__content">
                                    <h3 class="blog-card__admin__name">
                                        <a href="{{ url('blog-details-right') }}">Kristin Watson</a>
                                    </h3>
                                    <p class="blog-card__admin__designation">Admin</p>
                                </div><!-- /.blog-card__admin__content -->
                            </div><!-- /.blog-card__admin -->
                        </div><!-- /.blog-card__bottom -->
                    </div><!-- /.blog-card__content -->
                </div><!-- /.blog-card -->
            </div><!-- /.col-md-6 col-lg-4 -->
            <div class="col-md-6 col-lg-4">
                <div class="blog-card wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='200ms'>
                    <div class="blog-card__image">
                        <div class="blog-card__image__inner blog-card__image__inner--1">
                            <img src="{{ asset('assets/images/blog/blog-1-6.jpg') }}" alt="Circle Back, If You Want To Motivate These">
                        </div><!-- /.blog-card__image__inner -->
                        <div class="blog-card__image__inner blog-card__image__inner--2">
                            <img src="{{ asset('assets/images/blog/blog-1-6.jpg') }}" alt="Circle Back, If You Want To Motivate These">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__image__link">
                                <span class="sr-only">Circle Back, If You Want To Motivate These</span>
                            </a>
                        </div><!-- /.blog-card__image__inner -->
                        <div class="blog-card__date">
                            <span class="blog-card__date__day">21</span>
                            <span class="blog-card__date__month">May</span>
                        </div><!-- /.blog-card__date -->
                    </div><!-- /.blog-card__image -->
                    <div class="blog-card__content">
                        <div class="blog-card__inner">
                            <ul class="blog-card__meta list-unstyled">
                                <li>
                                    <a href="#">
                                        <span class="blog-card__meta__icon"><i class="icon-bubble-chat"></i></span>
                                        2 Comment
                                    </a>
                                </li>
                            </ul><!-- /.blog-card__meta -->
                            <h3 class="blog-card__title">
                                <a href="{{ url('blog-details-right') }}">Circle Back, If You Want To Motivate These</a>
                            </h3><!-- /.blog-card__title -->
                        </div><!-- /.blog-card__inner -->
                        <div class="blog-card__bottom">
                            <a href="{{ url('blog-details-right') }}" class="blog-card__btn">
                                <i class="icon-right-arrow-up"></i>
                            </a><!-- /.blog-card__btn -->
                            <div class="blog-card__admin">
                                <img src="{{ asset('assets/images/blog/blog-admin-1-6.png') }}" alt="Jerome Bell" class="blog-card__admin__image">
                                <div class="blog-card__admin__content">
                                    <h3 class="blog-card__admin__name">
                                        <a href="{{ url('blog-details-right') }}">Jerome Bell</a>
                                    </h3>
                                    <p class="blog-card__admin__designation">Admin</p>
                                </div><!-- /.blog-card__admin__content -->
                            </div><!-- /.blog-card__admin -->
                        </div><!-- /.blog-card__bottom -->
                    </div><!-- /.blog-card__content -->
                </div><!-- /.blog-card -->
            </div><!-- /.col-md-6 col-lg-4 --> 

            {{-- Repeat the same structure for other cards --}}
            
            <div class="col-12">
                <ul class="post-pagination wow fadeInUp" data-wow-duration="1500ms">
                    <li>
                        <a href="#">
                            <span class="post-pagination__icon">
                                <i class="fas fa-chevron-left"></i>
                            </span>
                        </a>
                    </li>
                    <li><a href="#">01</a></li>
                    <li><a href="#">02</a></li>
                    <li class="active">
                        <a href="#">
                            <span class="post-pagination__icon post-pagination__icon--right">
                                <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>


    <x-footer />
    <x-mobileMenu />
    <x-searchPopup />
    <x-scroll-to-top />
@endsection