@extends('layouts.main-app')

@section('title')

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

    <div>
        <div class="w-full relative">
            <img class="absolute w-full h-full object-cover" src="{{ asset('images/images/banner-homepage.png') }}"
                alt="icon button">
            <div class="relative py-24 sm:py-32 lg:py-40">
                <h4 class="text-white poppins-regular text-center text-2xl sm:text-3xl md:text-4xl lg:text-5xl">WE'RE MORE
                    THAN JUST STEEL</h4>
                <h1 class="text-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-anton-regular text-white">
                    WE EM<span class="text-[#ef5400]">POWER</span> DEVELOPMENT
                </h1>
                <div class="w-full text-center flex justify-center py-4 px-4 sm:px-8">
                    <p class="text-white max-w-3xl text-sm sm:text-base">
                        Lorem ipsum odor amet, consectetuer adipiscing elit. Donec magna facilisi adipiscing lacinia vitae
                        est sapien. Laoreet ligula ridiculus curabitur vivamus sociosqu non elit.
                    </p>
                </div>
                <div class="flex justify-center">
                    <a href="#discover-more"
                        class="bg-white text-lg font-normal px-6 py-3 rounded-xl flex items-center justify-center hover:bg-orange-700 hover:text-white transition duration-300 gap-4 w-72 sm:w-80 md:w-96 lg:w-96">
                        <div class="rounded-full bg-[#ef5400] p-2">
                            <img src="{{ asset('images/icons/icon-button-white.png') }}" alt="Discover More Icon"
                                class="w-6 h-6">
                        </div>
                        <p class="text-[#ef5400] hover:text-white">Discover More</p>
                    </a>
                </div>
            </div>
        </div>

        <img src="{{ asset('images/images/about-us-background.png') }}" alt="Steel Icon"
            class="absolute object-cover hidden lg:block">
        <div class="  ml-auto  relative">
            <div class="grid grid-cols-1 xl:grid-cols-3 relative">
                <div class="col-span-2 lg:px-32">
                    <div class="py-14" data-aos="zoom-in">
                        <!-- About Us Header -->
                        <div class="flex flex-col sm:flex-row items-center py-2 mb-4">
                            <img src="{{ asset('images/icons/icon-steel.png') }}" alt="Steel Icon"
                                class="w-5 h-5 mb-2 sm:mb-0 sm:mr-4">
                            <h2 class="text-[#ef5400] italic text-xl sm:text-2xl md:text-3xl">About us</h2>
                        </div>

                        <!-- Main Heading -->
                        <div class="text-black anton-regular text-4xl sm:text-5xl md:text-6xl lg:text-7xl mb-4">
                            <h1>STEEL SUPPLIER IN THE <br> <span class="text-[#ef5400]">PHILIPPINES</span></h1>
                        </div>

                        <!-- Description Text -->
                        <p class="py-4 text-sm sm:text-base md:text-lg lg:text-xl leading-relaxed mb-4">
                            TDT Powersteel Corporation is one of the most reliable and trusted brands in the Philippine
                            steel supply and distribution industry.
                            <br> <br>
                            It has continuously proven its commitment to provide premium quality construction solutions with
                            its over 1,000 steel products, tailored-fit professional services, and nationwide distribution
                            hubs – making TDT Powersteel Corporation the preferred partner of many contractors, architects,
                            and developers of major landmark projects in the country today.
                            <br> <br>
                            The knowledge and expertise in the steel and construction distribution business has earned TDT
                            Powersteel Corporation the recognition of being a frontrunner in the industry.
                        </p>

                        <!-- Read More Button -->
                        <div class="py-8">
                            <a href=""
                                class="bg-[#ef5400] text-white text-center p-4 py-4 text-lg sm:text-xl rounded-lg hover:bg-orange-700 transition duration-300">
                                Read More About Us
                            </a>
                        </div>

                        <!-- Horizontal Line -->
                        <hr class="border-t-2 border-black mb-4">

                        <!-- Vision and Mission Section -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 py-4">
                            <!-- Vision Column -->
                            <div>
                                <h1 class="anton-regular text-4xl sm:text-5xl lg:text-7xl text-[#292929] mb-4">VISION</h1>
                                <p class="text-sm sm:text-base lg:text-lg pr-14">Our vision is to be the most trusted and
                                    preferred steel and construction solutions partner in Asia.</p>
                            </div>

                            <!-- Mission Column -->
                            <div>
                                <h1 class="anton-regular text-4xl sm:text-5xl lg:text-7xl text-[#292929] mb-4">MISSION</h1>
                                <p class="text-sm sm:text-base lg:text-lg">Our goal is to provide premium quality and
                                    innovative steel and construction solutions at reasonable prices.</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="relative w-full h-full hidden xl:block">
                    <div>
                        <!-- Video image as background -->
                        <img src="{{ asset('images/images/about-us-video.png') }}" alt="Steel Icon"
                            class="w-full h-full object-cover xl:h-[70rem]">

                        <!-- Play button positioned on top of the video image -->
                        <img src="{{ asset('images/icons/play-button.png') }}" alt="Play Button"
                            class="absolute top-1/2  transform -translate-x-1/2 -translate-y-1/2">
                    </div>
                </div>
            </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">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            STEEL BARS
                        </div>
                        <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">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            SHEET PILE
                        </div>
                        <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">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            STEEL TUBE
                        </div>
                        <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">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            STEEL BARS
                        </div>
                        <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">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            HARDWARE
                        </div>
                        <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">
                        <div class="px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4">
                            STEEL PLATES
                        </div>
                        <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">
                <a href="#discover-more"
                    class="bg-white text-lg font-normal px-6 py-3 rounded-xl flex items-center justify-center hover:bg-orange-700 hover:text-white transition duration-300 gap-4 w-72 md:w-80 lg:w-96 shadow-lg"
                    style="box-shadow: 0 4px 6px rgba(239, 84, 0, 0.4);">
                    <!-- Custom shadow color with rgba for a softer shadow -->
                    <div class="rounded-full bg-[#ef5400] p-2">
                        <img src="{{ asset('images/icons/icon-button-white.png') }}" alt="Discover More Icon"
                            class="w-6 h-6">
                    </div>
                    <p class="text-[#ef5400] hover:text-white">Discover More</p>
                </a>
            </div>
        </div>
    </div>

    @include('layouts.footer')

@endsection