@extends('layouts.main-app')

@section('title')

@section('content')
    @include('layouts.navbar');
    <div class="w-full relative">
        <img class="absolute w-full h-96 object-cover" src="{{ asset('images/images/product-category.png') }}"
            alt="blog topics banner">
        <div class="relative text-center py-32">
            <h1 class="text-5xl text-white anton-regular">STEEL <span class="text-[#ef5400]">BARS</span></h1>
            <p class=" text-white py-2">HOME/BLOGS</p>
        </div>
    </div>
    <img src="{{ asset('images/images/product-mesh-background.png') }}" alt="product mesh background"
        class="absolute object-cover w-full">
    <div class="pt-14 z-50">
        <div class="grid grid-cols-1 lg:grid-cols-3 px-14">
            <!--Dynamic Display of Item Category based on the selected category on the first page-->
            <div class="relative group w-full max-w-xl mx-auto overflow-hidden mt-4">
                <!-- Image -->
                <img src="{{ asset('images/images/AB1-DeformedBar.png') }}" alt="Steel Bars"
                    class="w-full h-auto object-cover rounded-lg">

                <!-- Initial label (shown by default) -->
                <div
                    class="absolute bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-orange-500 text-white font-bold rounded-full group-hover:hidden">
                    Deformed Bar
                </div>

                <!-- Hover content (scroll-up effect) -->
                <div
                    class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4 rounded-t-lg transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out">
                    <a href="{{ url('/products/category/item') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            Deformed Bar
                        </div>
                    </a>
                    <ul class="grid grid-cols-2 gap-x-4 gap-y-2 text-center text-gray-700">
                        <li><a href="#" class="hover:underline">Angle Bar</a></li>
                        <li><a href="#" class="hover:underline">Channel Bar</a></li>
                        <li><a href="#" class="hover:underline">Deformed Bar</a></li>
                        <li><a href="#" class="hover:underline">Flat Bar</a></li>
                        <li><a href="#" class="hover:underline">Round Bar</a></li>
                        <li><a href="#" class="hover:underline">Square Bar</a></li>
                    </ul>
                </div>
            </div>

            <div class="relative group w-full max-w-xl mx-auto overflow-hidden mt-4">
                <!-- Image -->
                <img src="{{ asset('images/images/AB2-SquareBar.png') }}" alt="Steel Bars"
                    class="w-full h-auto object-cover rounded-lg">

                <!-- Initial label (shown by default) -->
                <div
                    class="absolute bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-orange-500 text-white font-bold rounded-full group-hover:hidden">
                    Square Bar
                </div>

                <!-- Hover content (scroll-up effect) -->
                <div
                    class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4 rounded-t-lg transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out">
                    <a href="{{ url('/products/category/item') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            Square Bar
                        </div>
                    </a>
                    <ul class="grid grid-cols-2 gap-x-4 gap-y-2 text-center text-gray-700">
                        <li><a href="#" class="hover:underline">Angle Bar</a></li>
                        <li><a href="#" class="hover:underline">Channel Bar</a></li>
                        <li><a href="#" class="hover:underline">Deformed Bar</a></li>
                        <li><a href="#" class="hover:underline">Flat Bar</a></li>
                        <li><a href="#" class="hover:underline">Round Bar</a></li>
                        <li><a href="#" class="hover:underline">Square Bar</a></li>
                    </ul>
                </div>
            </div>

            <div class="relative group w-full max-w-xl mx-auto overflow-hidden mt-4">
                <!-- Image -->
                <img src="{{ asset('images/images/AB3-RoundBar.png') }}" alt="Steel Bars"
                    class="w-full h-auto object-cover rounded-lg">

                <!-- Initial label (shown by default) -->
                <div
                    class="absolute bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-orange-500 text-white font-bold rounded-full group-hover:hidden">
                    Round Bar
                </div>

                <!-- Hover content (scroll-up effect) -->
                <div
                    class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4 rounded-t-lg transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out">
                    <a href="{{ url('/products/category/item') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            Round Bar
                        </div>
                    </a>
                    <ul class="grid grid-cols-2 gap-x-4 gap-y-2 text-center text-gray-700">
                        <li><a href="#" class="hover:underline">Angle Bar</a></li>
                        <li><a href="#" class="hover:underline">Channel Bar</a></li>
                        <li><a href="#" class="hover:underline">Deformed Bar</a></li>
                        <li><a href="#" class="hover:underline">Flat Bar</a></li>
                        <li><a href="#" class="hover:underline">Round Bar</a></li>
                        <li><a href="#" class="hover:underline">Square Bar</a></li>
                    </ul>
                </div>
            </div>

            <div class="relative group w-full max-w-xl mx-auto overflow-hidden mt-4">
                <!-- Image -->
                <img src="{{ asset('images/images/AB4-ChannelBar.png') }}" alt="Steel Bars"
                    class="w-full h-auto object-cover rounded-lg">

                <!-- Initial label (shown by default) -->
                <div
                    class="absolute bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-orange-500 text-white font-bold rounded-full group-hover:hidden">
                    Channel Bar
                </div>

                <!-- Hover content (scroll-up effect) -->
                <div
                    class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4 rounded-t-lg transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out">
                    <a href="{{ url('/products/category/item') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            Channel Bar
                        </div>
                    </a>
                    <ul class="grid grid-cols-2 gap-x-4 gap-y-2 text-center text-gray-700">
                        <li><a href="#" class="hover:underline">Angle Bar</a></li>
                        <li><a href="#" class="hover:underline">Channel Bar</a></li>
                        <li><a href="#" class="hover:underline">Deformed Bar</a></li>
                        <li><a href="#" class="hover:underline">Flat Bar</a></li>
                        <li><a href="#" class="hover:underline">Round Bar</a></li>
                        <li><a href="#" class="hover:underline">Square Bar</a></li>
                    </ul>
                </div>
            </div>

            <div class="relative group w-full max-w-xl mx-auto overflow-hidden mt-4">
                <!-- Image -->
                <img src="{{ asset('images/images/AB5-FlatSteelBar.png') }}" alt="Steel Bars"
                    class="w-full h-auto object-cover rounded-lg">

                <!-- Initial label (shown by default) -->
                <div
                    class="absolute bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-orange-500 text-white font-bold rounded-full group-hover:hidden">
                    Flat Steel Bar
                </div>

                <!-- Hover content (scroll-up effect) -->
                <div
                    class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4 rounded-t-lg transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out">
                    <a href="{{ url('/products/category/item') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            Flat Steel Bar
                        </div>
                    </a>
                    <ul class="grid grid-cols-2 gap-x-4 gap-y-2 text-center text-gray-700">
                        <li><a href="#" class="hover:underline">Angle Bar</a></li>
                        <li><a href="#" class="hover:underline">Channel Bar</a></li>
                        <li><a href="#" class="hover:underline">Deformed Bar</a></li>
                        <li><a href="#" class="hover:underline">Flat Bar</a></li>
                        <li><a href="#" class="hover:underline">Round Bar</a></li>
                        <li><a href="#" class="hover:underline">Square Bar</a></li>
                    </ul>
                </div>
            </div>

            <div class="relative group w-full max-w-xl mx-auto overflow-hidden mt-4">
                <!-- Image -->
                <img src="{{ asset('images/images/AB6-AngleBar.png') }}" alt="Steel Bars"
                    class="w-full h-auto object-cover rounded-lg">

                <!-- Initial label (shown by default) -->
                <div
                    class="absolute bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-orange-500 text-white font-bold rounded-full group-hover:hidden">
                    Angle Bar
                </div>

                <!-- Hover content (scroll-up effect) -->
                <div
                    class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4 rounded-t-lg transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out">
                    <a href="{{ url('/products/category/item') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            Angle Bar
                        </div>
                    </a>
                    <ul class="grid grid-cols-2 gap-x-4 gap-y-2 text-center text-gray-700">
                        <li><a href="#" class="hover:underline">Angle Bar</a></li>
                        <li><a href="#" class="hover:underline">Channel Bar</a></li>
                        <li><a href="#" class="hover:underline">Deformed Bar</a></li>
                        <li><a href="#" class="hover:underline">Flat Bar</a></li>
                        <li><a href="#" class="hover:underline">Round Bar</a></li>
                        <li><a href="#" class="hover:underline">Square Bar</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="flex justify-center relative py-32">

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