@extends('layouts.main-app')

@section('title')

@section('content')
    @include('layouts.navbar');
    <div class="w-full relative">
        <img class="absolute w-full h-full object-cover" src="{{ asset('images/images/about-us-banner.png') }}"
            alt="about us banner">
        <div class="relative text-center py-14">
            <h1 class="text-5xl text-white anton-regular">ABOUT <span class="text-[#ef5400]">US</span></h1>
            <p class=" text-white py-2">HOME/ABOUT US</p>
        </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/background-vp.png') }}" alt="Steel Icon" class=" w-full h-full absolute object-cover">
    <div class="container mx-auto relative pb-52" data-aos="fade-up">
        <div class="flex py-8 gap-4">
            <img src="{{ asset('images/icons/icon-steel.png') }}" alt="about-us-background" class="w-5 h-5">
            <h2 class="text-[#ef5400] italic">Value Proposition</h2>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2">
            <div>
                <h1 class="anton-regular text-5xl">WHY TDT POWERSTEEL IS THE <br> <span class="text-[#ef5400]">LEADING
                        CHOICE</span></h1>
                <img src="{{ asset('images/images/main-image-VP.png') }}"
                    alt="A collective of men positioned in front of a truck, representing a scene of friendship and shared purpose."
                    class="  object-cover py-4">
            </div>
            <div>
                <hr style="border-color: #ef5400;">
                <div class="grid grid-cols-2">
                    <div class="py-4 px-4">
                        <h1>One stop solution partner</h1>
                        <img src="{{ asset('images/icons/one-stop-solution-partner-vp1.png') }}" alt=""
                            class="object-cover px-10 text-center">
                    </div>
                    <div class="flex items-center">
                        We offer a complete selection of steel and construction products to meet customers dynamic needs.
                    </div>
                </div>
                <hr style="border-color: #ef5400;">
                <div class="grid grid-cols-2">
                    <div class="py-4 px-4">
                        <h1>Quality Assured Projects</h1>
                        <img src="{{ asset('images/icons/quality-assured-projects-vp2.png') }}" alt=""
                            class="object-cover px-10 text-center">
                    </div>
                    <div class="flex items-center">
                        We guarantee top grade solutions at most competitive price range.
                    </div>
                </div>
                <hr style="border-color: #ef5400;">
                <div class="grid grid-cols-2">
                    <div class="py-4 px-4">
                        <h1>Strategic Planning</h1>
                        <img src="{{ asset('images/icons/strategic-planning-vp3.png') }}" alt=""
                            class="object-cover px-10 text-center">
                    </div>
                    <div class="flex items-center">
                        We commit to excellence in delivering utmost customer satisfaction
                    </div>
                </div>
                <hr style="border-color: #ef5400;">
                <div class="grid grid-cols-2">
                    <div class="py-4 px-4">
                        <h1>Trusted Professional Team</h1>
                        <img src="{{ asset('images/icons/trusted-professional-team-vp4.png') }}" alt=""
                            class="object-cover px-10 text-center">
                    </div>
                    <div class="flex items-center">
                        We understand clients' requirements for strategic projects and investments.
                    </div>
                </div>
                <hr style="border-color: #ef5400;">
                <div class="grid grid-cols-2">
                    <div class="py-4 px-4">
                        <h1>Response Delivery</h1>
                        <img src="{{ asset('images/icons/response-delivery-vp5.png') }}" alt=""
                            class="object-cover px-10 text-center">
                    </div>
                    <div class="flex items-center">
                        We respond to clients' sense of urgency and priorities
                    </div>
                </div>
                <hr style="border-color: #ef5400;">
                <div class="grid grid-cols-2">
                    <div class="py-4 px-4">
                        <h1>Strategic Sourcing</h1>
                        <img src="{{ asset('images/icons/strategic-sourcing-vp6.png') }}" alt=""
                            class="object-cover px-10 text-center">
                    </div>
                    <div class="flex items-center">
                        We position our hubs to be your preferred strategic partner.
                    </div>
                </div>
                <hr style="border-color: #ef5400;">
            </div>
        </div>
    </div>

    @include('layouts.footer')
@endsection