@extends('layouts.main-app')

@section('title')

@section('content')
    @include('layouts.navbar')

    <div class="w-full h-full relative">
        <img class="absolute w-full h-96 object-cover" src="{{ asset('images/images/banner-blogs.png') }}"
            alt="blog topics banner">
        <div class="relative text-center py-32">
            <h1 class="text-5xl text-white anton-regular">BLOGS</h1>
            <p class=" text-white py-2">HOME/BLOGS</p>
        </div>

        <div class="grid grid-cols-3 py-24 container mx-auto">
            <div class="grid col-span-2">
                <div class="grid  gap-4">
                    <div>
                        <img class="" src="{{ asset('images/images/blog1 - landscape.png') }}"
                            alt="blog topics banner">
                        <h1 class="anton-regular text-2xl py-2">RELIABLE SOLUTIONS, SOLID RESULT</h1>
                        <p class="">December 25, 2024</p>
                        <p class="py-2">Lorem ipsum odor amet, consectetuer adipiscing elit. Vivamus maximus elit eu
                            maximus lacus. Eu
                            ipsum iaculis est ultrices phasellus imperdiet. Tristique quisque venenatis potenti sem eros
                            magnis inceptos primis. <br> <br>

                            What Industries rely most on steel
                            Steel has become a cornerstone in modern construction due to its incredible strength and
                            versatility. From skyscrapers to bridges. steel's durability ensures long-lasting structures.
                        </p>
                        <div class="grid grid-cols-2 gap-4 pr-4">
                            <img class="" src="{{ asset('images/images/blog1 - landscape.png') }}"
                                alt="blog topics banner">
                            <img class="" src="{{ asset('images/images/blog1 - landscape.png') }}"
                                alt="blog topics banner">
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="border-2">
                    <div class="max-w-md mx-auto my-8">
                        <div class="relative">
                            <input type="text" placeholder="Search products..."
                                class="w-full px-4 py-2 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#ef5400]">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M11 19a8 8 0 100-16 8 8 0 000 16zm4.293-4.293l5.414 5.414" />
                            </svg>
                        </div>
                        <div class=" py-4">
                            <h1 class="font-semibold py-4">Latest Post</h1>
                            <div class="flex gap-8 py-4">
                                <img class="" src="{{ asset('images/images/business1.png') }}"
                                    alt="blog topics banner">
                                <div>
                                    <h1 class="font-semibold">Business - December 25, 2024</h1>
                                    <h1>The Strength of Steel in Modern Construction</h1>
                                </div>
                            </div>
                            <div class="flex gap-8 py-4">
                                <img class="" src="{{ asset('images/images/business1.png') }}"
                                    alt="blog topics banner">
                                <div>
                                    <h1 class="font-semibold">Business - December 25, 2024</h1>
                                    <h1>The Strength of Steel in Modern Construction</h1>
                                </div>
                            </div>
                            <div class="flex gap-8 py-4">
                                <img class="" src="{{ asset('images/images/business1.png') }}"
                                    alt="blog topics banner">
                                <div>
                                    <h1 class="font-semibold">Business - December 25, 2024</h1>
                                    <h1>The Strength of Steel in Modern Construction</h1>
                                </div>
                            </div>

                            <div>
                                <h1 class="font-semibold">Tags</h1>
                                <div class="grid grid-cols-3 gap-4 w-full max-w-md mx-auto mt-8">
                                    <div class="border border-gray-300 p-4 text-start">Manufacturing</div>
                                    <div class="border border-gray-300 p-4 text-center">Delivery</div>
                                    <div class="border border-gray-300 p-4 text-center">Business</div>
                                    <div class="border border-gray-300 p-4 text-center">Steel</div>
                                    <div class="border border-gray-300 p-4 text-center">Transport</div>
                                    <div class="border border-gray-300 p-4 text-center">Materials</div>
                                </div>
                            </div>
                            <div class="py-4 flex justify-center">
                                <img class="" src="{{ asset('images/images/ads banner.png') }}"
                                    alt="blog topics banner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footer')

@endsection