@extends('frontend::layouts.master')

@section('content')
    <section class="bg-gray-50">
        <div class="relative text-center py-10 lg:py-16 overflow-hidden ">
            <h1 class="text-9xl font-black text-gray-100/10 tracking-wider z-10 relative">
                BLOG
            </h1>
            <div class="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full z-10 relative">
                <h2 class="text-6xl font-bold text-primary-600">
                    BLOGS
                </h2>
                <p class="mt-4 text-xl text-gray-600">
                    Discover Our Product Range
                </p>
            </div>
            <div
                class="absolute bottom-10 left-1/2 -translate-x-1/2 text-[120px] font-black text-white tracking-[0.2em] z-0">
                BLOGS
            </div>
        </div>

        <div class="pb-10 lg:pb-16">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 tn:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
                    <x-frontend::card.blog_card
                        img="https://images.unsplash.com/photo-1482100199117-a4a38a64e7e3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8d2VsbG5lc3N8ZW58MHwwfDB8fHwy"
                        title="Modern Meditation Techniques"
                        details="Explore contemporary meditation practices that fit 
                            seamlessly into your busy lifestyle."
                        day="15" month="APR" url="/blog-detail">
                    </x-frontend::card.blog_card>
                    <x-frontend::card.blog_card
                        img="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHdlbGxuZXNzfGVufDB8MHwwfHx8Mg%3D%3D"
                        title="Holistic Healing Guide"
                        details="Learn about comprehensive approaches to wellness 
                        that treat mind, body, and spirit as one."
                        day="28" month="MAR" url="/blog-detail">
                    </x-frontend::card.blog_card>
                    <x-frontend::card.blog_card
                        img="https://images.unsplash.com/photo-1515377905703-c4788e51af15?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        title="Natural Supplements 101"
                        details="Understanding the essential vitamins and minerals 
                            for optimal health and vitality."
                        day="10" month="MAR" url="/blog-detail">
                    </x-frontend::card.blog_card>
                    <x-frontend::card.blog_card
                        img="https://images.unsplash.com/photo-1600618528240-fb9fc964b853?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        title="Mindful Living Practice"
                        details="Discover daily habits and routines that promote 
                            mental clarity and emotional balance."
                        day="25" month="FEB" url="/blog-detail">
                    </x-frontend::card.blog_card>

                    <x-frontend::card.blog_card
                        img="https://images.unsplash.com/photo-1482100199117-a4a38a64e7e3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8d2VsbG5lc3N8ZW58MHwwfDB8fHwy"
                        title="Modern Meditation Techniques"
                        details="Explore contemporary meditation practices that fit 
                            seamlessly into your busy lifestyle."
                        day="15" month="APR" url="/blog-detail">
                    </x-frontend::card.blog_card>
                    <x-frontend::card.blog_card
                        img="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHdlbGxuZXNzfGVufDB8MHwwfHx8Mg%3D%3D"
                        title="Holistic Healing Guide"
                        details="Learn about comprehensive approaches to wellness 
                        that treat mind, body, and spirit as one."
                        day="28" month="MAR" url="/blog-detail">
                    </x-frontend::card.blog_card>
                    <x-frontend::card.blog_card
                        img="https://images.unsplash.com/photo-1515377905703-c4788e51af15?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        title="Natural Supplements 101"
                        details="Understanding the essential vitamins and minerals 
                            for optimal health and vitality."
                        day="10" month="MAR" url="/blog-detail">
                    </x-frontend::card.blog_card>
                    <x-frontend::card.blog_card
                        img="https://images.unsplash.com/photo-1600618528240-fb9fc964b853?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        title="Mindful Living Practice"
                        details="Discover daily habits and routines that promote 
                            mental clarity and emotional balance."
                        day="25" month="FEB" url="/blog-detail">
                    </x-frontend::card.blog_card>
                </div>
            </div>
            <div class="pt-10">
                <div class="flex justify-center">
                    <nav class="flex items-center gap-4">
                        <a href="#"
                            class="px-4 py-2 text-lg font-medium text-emerald-500 bg-white border-2 border-emerald-500 rounded-full hover:bg-emerald-500 hover:text-white transition duration-300 ease-in-out">
                            &#x2190;
                        </a>
                        <div class="flex items-center gap-2">
                            <a href="#"
                                class="px-4 py-2 text-lg font-medium text-white bg-emerald-500 border-2 border-emerald-500 rounded-full">1</a>
                            <a href="#"
                                class="px-4 py-2 text-lg font-medium text-emerald-500 bg-white border-2 border-emerald-500 rounded-full hover:bg-emerald-500 hover:text-white transition duration-300 ease-in-out">2</a>
                            <a href="#"
                                class="px-4 py-2 text-lg font-medium text-emerald-500 bg-white border-2 border-emerald-500 rounded-full hover:bg-emerald-500 hover:text-white transition duration-300 ease-in-out">3</a>
                        </div>
                        <a href="#"
                            class="px-4 py-2 text-lg font-medium text-emerald-500 bg-white border-2 border-emerald-500 rounded-full hover:bg-emerald-500 hover:text-white transition duration-300 ease-in-out">
                            &#x2192;
                        </a>
                    </nav>
                </div>
            </div>
        </div>


    </section>
@endsection