@extends('layouts.main-app')

@section('title','Home')

@section('content')

@include('layouts.navbar')
<div class="relative">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/blogs/banner.webp')}}" alt="">
    <div class="relative pb-32 pt-52 ">
        <h1 class="text-[#dab97d] text-6xl text-center">Blogs</h1>
    </div>
</div>
<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/blogs/bg-body.webp')}}" alt="">
    <div class="container relative max-w-screen-xl px-4 py-20 mx-auto space-y-8">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
            <div class="space-y-8 md:col-span-2">

                <div class="space-y-4">
                    <img class="w-full h-full" src="{{asset($blogs->image)}}" alt="">
                    <div class="space-y-4">
                        <h1 class="text-[#dab97d]">{{$blogs->created_at->format('F d, Y')}}</h1>
                        <h2 class="text-4xl font-semibold text-white">{{$blogs->title}}</h2>
                        <div class="text-white">
                            <p>{!!$blogs->subtitle!!}</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="flex flex-col gap-4">
                <h1 class="text-[#dab97d] text-2xl font-semibold">Recent Posts</h1>
                @foreach ($recent_posts as $recent_post)
                <a href="{{url('blogs_details', $recent_post->id)}}">
                    <div class="grid items-center grid-cols-1 gap-4 md:grid-cols-3">
                        <div>
                            <img class="object-cover w-full h-20" src="{{asset($recent_post->image)}}" alt="">
                        </div>
                        <div class="md:col-span-2">
                            <div class="space-y-4">
                                <h2 class="text-xl font-semibold text-white truncate ">{{$recent_post->title}}</h2>
                                <h1 class="text-[#dab97d]">{{$recent_post->created_at->format('F d, Y')}}</h1>
                            </div>
                        </div>
                    </div>
                </a>
                @endforeach

            </div>
        </div>

    </div>
</div>
@include('layouts.footer')

@endsection