@extends('layouts.main-app')

@section('title', 'About Us')

@section('content')

    @include('layouts.navbar')

    <div class="relative h-[20rem]">
        <div class="relative z-50 py-20 text-center">
            <h1 class="text-4xl font-bold text-black">ABOUT US </h1>
        </div>
    </div>

    <div class="relative h-full px-4 py-20 overflow-hidden">
        <img class="absolute z-0 w-full h-[100rem] -mt-40 " src="{{ asset('images/Background.png') }}" alt="">
        <div class="relative container mx-auto">
            <div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div>
                        <div>
                            <h1 class=" text-black text-6xl font-bold">HISTORY</h1>
                            <p class="py-2">Lorem ipsum odor amet, consectetuer adipiscing elit. Nullam volutpat
                                etiam
                                diam
                                penatibus eu etiam
                                ridiculus</p>
                        </div>
                        <div class="py-8">
                            <h1 class=" text-black text-6xl font-bold">WHO WE ARE</h1>
                            <p class="py-2">Lorem ipsum odor amet, consectetuer adipiscing elit. Nullam volutpat
                                etiam
                                diam
                                penatibus eu etiam
                                ridiculus</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="h-72 w-full overflow-hidden">
                            <img src="{{ asset('images/Revision-Folders/Resources/img-about-3.webp') }}" alt=""
                                class="h-full w-full object-cover">
                        </div>
                        <div class="h-72 w-full overflow-hidden">
                            <img src="{{ asset('images/Revision-Folders/Resources/img-about-4.webp') }}" alt=""
                                class="h-full w-full object-cover">
                        </div>
                        <div class="h-72 w-full overflow-hidden">
                            <img src="{{ asset('images/Revision-Folders/Resources/img-about-3 (2).webp') }}" alt=""
                                class="h-full w-full object-cover">
                        </div>
                        <div class="h-72 w-full overflow-hidden">
                            <img src="{{ asset('images/Revision-Folders/Resources/img-about-1.webp') }}" alt=""
                                class="h-full w-full object-cover">
                        </div>
                    </div>


                </div>

                <div class="py-8">
                    <h1 class="text-black text-6xl font-bold text-center 2xl:text-start">MISSION:</h1>
                    <p class="py-2 text-[#356d1c] text-center 2xl:text-start font-bold w-full">
                        PCSI aims to transform "the choice" of finding "the one" into an empowering and uplifting
                        recruitment journey, with these 3 Core Missions:
                    </p>
                    <div class="flex justify-center 2xl:justify-start">
                        <ul class="list-disc 2xl:w-2/4 px-2">
                            <li class="py-2">
                                A recognized leading workforce provider that offers best in class services in the
                                Recruitment industry. We are here to stay and achieve longevity to fulfill our Mission to
                                our Stakeholders.
                            </li>
                            <li class="py-2">
                                One of the most bankable service providers that joins together companies with workforce
                                needs and job seekers who aspire for a successful career. We are a company that continuously
                                innovates to make career opportunities accessible to all qualified individuals.
                            </li>
                            <li class="py-2">
                                A lifelong significant contributor to the growth of the Philippine economy. We are a
                                business that strongly takes part in creating a vibrant, happy, and healthy labor market.
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="py-8">
                    <div class="items-end">
                        <h1 class="text-black text-6xl font-bold text-center 2xl:text-end">VISION:</h1>
                        <p class="py-2 text-[#356d1c] text-center 2xl:text-end font-bold w-full">
                            PCSI envisions itself as a long-term key player in the recruitment sector, positively
                            influencing companies, jobseekers, and the Philippine economy for years ahead.
                        </p>
                    </div>

                    <div class="flex justify-center 2xl:justify-end">
                        <ul class="list-disc 2xl:w-2/4 px-2">
                            <li class="py-2">
                                A recognized leading workforce provider that offers best in class services in the
                                Recruitment industry. We are here to stay and achieve longevity to fulfill our Mission to
                                our Stakeholders.
                            </li>
                            <li class="py-2">
                                One of the most bankable service providers that joins together companies with workforce
                                needs and job seekers who aspire for a successful career. We are a company that continuously
                                innovates to make career opportunities accessible to all qualified individuals.
                            </li>
                            <li class="py-2">
                                A lifelong significant contributor to the growth of the Philippine economy. We are a
                                business that strongly takes part in creating a vibrant, happy, and healthy labor market.
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="relative">
        <img src="{{ asset('images/Revision-Folders/Resources/bg-milestones (1).webp') }}" alt=""
            class="absolute object-cover w-full h-[100rem] 2xl:h-full">
        <div class="relative container mx-auto">
            <div class="flex justify-center py-8">
                <h1 class="text-3xl 2xl:text-6xl font-bold">MILESTONES</h1>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2">
                <div>

                </div>
                <div class="py-4 px-2 text-center lg:text-start" data-aos="fade-left">
                    <h1 class="text-2xl font-bold py-4">2000</h1>
                    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Quis leo erat mus tellus curae massa vehicula ad
                        porta. Iaculis leo in convallis donec fames et condimentum aliquam maximus.</p>
                </div>
                <div class="py-4 px-2 text-center lg:text-start" data-aos="fade-right">
                    <h1 class="text-2xl font-bold py-4">2005</h1>
                    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Quis leo erat mus tellus curae massa vehicula ad
                        porta. Iaculis leo in convallis donec fames et condimentum aliquam maximus.</p>
                </div>
                <div>

                </div>
                <div>

                </div>
                <div class="py-4 px-2 text-center lg:text-start" data-aos="fade-left">
                    <h1 class="text-2xl font-bold py-4">2010</h1>
                    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Quis leo erat mus tellus curae massa vehicula ad
                        porta. Iaculis leo in convallis donec fames et condimentum aliquam maximus.</p>
                </div>
                <div class="py-4 px-2 text-center lg:text-start" data-aos="fade-right">
                    <h1 class="text-2xl font-bold py-4">2015</h1>
                    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Quis leo erat mus tellus curae massa vehicula ad
                        porta. Iaculis leo in convallis donec fames et condimentum aliquam maximus.</p>
                </div>
                <div>

                </div>
                <div>

                </div>
                <div class="py-4 px-2 text-center lg:text-start" data-aos="fade-left">
                    <h1 class="text-2xl font-bold py-4">2020</h1>
                    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Quis leo erat mus tellus curae massa vehicula ad
                        porta. Iaculis leo in convallis donec fames et condimentum aliquam maximus.</p>
                </div>
                <div class="pb-32 px-2 text-center lg:text-start" data-aos="fade-right">
                    <h1 class="text-2xl font-bold py-4">2025</h1>
                    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Quis leo erat mus tellus curae massa vehicula ad
                        porta. Iaculis leo in convallis donec fames et condimentum aliquam maximus.</p>
                </div>
            </div>

        </div>
    </div>




    {{-- @include('layouts.newsletter')

    @include('layouts.innovation') --}}

    @include('layouts.footer')


@endsection