@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/about-us-banner.png') }}"
            alt="blog topics banner">
        <div class="relative text-center py-32">
            <h1 class="text-5xl text-white anton-regular">PRODUCT</h1>
            <p class=" text-white py-2">HOME/PRODUCTS</p>
        </div>
    </div>
    <img src="{{ asset('images/images/product-mesh-background.png') }}" alt="product mesh background"
        class="absolute object-cover w-full hidden lg:block">
    <div>
        <div class="flex justify-center pt-8 lg:pt-32">
            <img src="{{ asset('images/icons/icon-steel.png') }}" alt="Steel Icon" class="w-5 h-5">
            <h2 class="text-[#ef5400] italic">About Our Products</h2>
        </div>
        <div>
            <h1 class="anton-regular text-6xl text-center">PRODUCTS <span class="text-[#ef5400]">CATEGORY</span></h1>
            <p class="text-center lg:px-96 py-4">Lorem ipsum odor amet, consectetuer adipiscing elit. Donec
                magna facilisi
                adipiscing
                lacinia vitae est sapien. Laoreet ligula ridiculus curabitur vivamus sociosqu non elit. Nisl malesuada
                primis nec porttitor dis vulputate. Mollis nam curabitur maecenas mollis metus scelerisque venenatis
                fusce phasellus.</p>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-3 px-14">
            <div class="relative group w-full max-w-xl mx-auto overflow-hidden mt-4">
                <!-- Image -->
                <img src="{{ asset('images/images/prod1.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">
                    STEEL BARS
                </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') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            STEEL BARS
                        </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/sheet pile.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">
                    SHEET PILE
                </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') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            SHEET PILE
                        </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/steel tube.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">
                    STEEL TUBE
                </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') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            STEEL TUBE
                        </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/steel purlins.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">
                    STEEL BARS
                </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') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            STEEL BARS
                        </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/hardware.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">
                    HARDWARE
                </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') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            HARDWARE
                        </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/steel plates.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">
                    STEEL PLATES
                </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') }}">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            STEEL PLATES
                        </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-24">

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