@extends('layouts.main-app')

@section('title', 'About Us - Our Story')
@section('content')

@include('layouts.navbar')
<div class="relative ">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/about_us/banner-aboutus.webp')}}" alt="">
    <div class="container relative max-w-screen-xl mx-auto text-white py-[10rem]">
        <div class="grid grid-cols-1 px-4 md:grid-cols-3">
            <div>
                <h1 class="text-4xl font-bold">About Us</h1>
                <p>Tipón is a cooperative federation that offers member cooperatives back-end support services such as HR, compliance, finance, legal, IT, marketing, and project monitoring.</p>
            </div>
        </div>
    </div>
</div>

<div class="container max-w-screen-xl mx-auto">
    <h1 class="py-8 text-4xl font-bold text-center">Our Story</h1>

    <section class="relative flex flex-col justify-center overflow-hidden ">
        <div class="px-4 py-12 md:px-6">
            <div class="flex flex-col justify-center ">
                <div class="w-full ">
                    <div class="grid overflow-hidden grid-cols-1 md:grid-cols-5 items-center gap-8 space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-blue-500 pl-12 md:pl-0">
                        <div class="col-span-2"></div>
                        <div class="relative flex items-center justify-center">
                            <div class="w-3/4 h-0.5 bg-blue-500 hidden md:block"></div>
                        </div>
                        <div class="col-span-2"></div>
                        <!-- Item 1 -->
                        <div data-aos="fade-right"
                            data-aos-duration="1500" class="relative flex flex-col col-span-2 space-y-4 group is-active">
                            <h1 class="text-xl font-bold">1999</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Asiapro was established</p>
                            <h1 class="text-xl font-bold">2007</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> First time to cross P1 Billion in gross billings</p>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> The first stage of Asiapro's reorganization and culture building was completed</p>
                            <h1 class="text-xl font-bold">2008</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Ra 9520, or the Cooperative Code was passed, for the first time, workers cooperatives was recognized as a legitimate entity.</p>
                        </div>
                        <!-- Horizontal Line -->
                        <div class="relative flex items-center justify-center">
                            <div class="w-3/4 h-0.5 bg-blue-500 hidden md:block"></div>
                        </div>
                        <!-- Item 2 -->
                        <div data-aos="fade-left"
                            data-aos-duration="1500" class="relative flex col-span-2 group is-active">
                            <img src="{{asset('images/about_us/img-1.webp')}}" alt="">
                        </div>



                        <div data-aos="fade-right"
                            data-aos-duration="1500" class="relative flex col-span-2 group is-active">
                            <img src="{{asset('images/about_us/img-2.webp')}}" alt="">
                        </div>

                        <div class="relative flex items-center justify-center">
                            <div class="w-3/4 h-0.5 bg-blue-500 hidden md:block"></div>
                        </div>

                        <div data-aos="fade-left"
                            data-aos-duration="1500" class="relative flex flex-col col-span-2 space-y-4 group is-active">
                            <h1 class="text-xl font-bold">November 17,2009</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Supreme Court decision on SSS vs. Asiapro came out (Case No. 6-15507-03)</p>
                            <h1 class="text-xl font-bold">August 20,2010</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Pagpayag form between our members, Asiapro & SSS was first drafted and submitted</p>
                        </div>

                        <div data-aos="fade-right"
                            data-aos-duration="1500" class="relative flex flex-col col-span-2 space-y-4 group is-active">
                            <h1 class="text-xl font-bold">2012</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> The CDA issues MC 12-2012, outlining the break-up of Cooperatives, operating on a national basis.</p>
                            <h1 class="text-xl font-bold">2014 - 2015</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Asiapro embarked in redifining its culture, its brand constitution and architecture. Asiapro's Purpose, Principles, and Norms was drafted.</p>
                        </div>
                        <div class="relative flex items-center justify-center">
                            <div class="w-3/4 h-0.5 bg-blue-500 hidden md:block"></div>
                        </div>
                        <div data-aos="fade-left"
                            data-aos-duration="1500" class="relative flex col-span-2 group is-active">
                            <img src="{{asset('images/about_us/img-3.webp')}}" alt="">
                        </div>

                        <div data-aos="fade-right"
                            data-aos-duration="1500" class="relative flex col-span-2 group is-active">
                            <img src="{{asset('images/about_us/img-4.webp')}}" alt="">
                        </div>

                        <div class="relative flex items-center justify-center">
                            <div class="w-3/4 h-0.5 bg-blue-500 hidden md:block"></div>
                        </div>


                        <div data-aos="fade-left"
                            data-aos-duration="1500" class="relative flex flex-col col-span-2 space-y-4 group is-active">
                            <h1 class="text-xl font-bold">2016</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Duterte won and the Security of Tenure Bill, with similar variations, were filled in the House of Representatives and the Senate.</p>
                        </div>


                        <div data-aos="fade-right"
                            data-aos-duration="1500" class="relative flex flex-col col-span-2 space-y-4 group is-active">
                            <h1 class="text-xl font-bold">2017</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Department Order 174, series of 2017 was issued, on March 16, 2017.</p>
                            <h1 class="font-bold">What was the impact?</h1>
                            <p>1. Raised the capital requirements necessary to get a license to P5 million.</p>
                            <p>2. Absolute prohibition of labor only contracting ? the 3 fold test.</p>
                            <p>3. Permissible activities</p>
                            <p>4. Open ended employment contracts</p>
                            <p>5. Raising the application and renewal fee to P100,000.</p>
                            <p>6. Cancellation and due process for cancellation</p>
                        </div>

                        <div class="relative flex items-center justify-center">
                            <div class="w-3/4 h-0.5 bg-blue-500 hidden md:block"></div>
                        </div>


                        <div data-aos="fade-left"
                            data-aos-duration="1500" class="relative flex col-span-2 group is-active">
                            <img src="{{asset('images/about_us/img-5.webp')}}" alt="">
                        </div>

                        <div data-aos="fade-right"
                            data-aos-duration="1500" class="relative flex col-span-2 group is-active">
                            <img src="{{asset('images/about_us/img-6.webp')}}" alt="">
                        </div>
                        <div class="relative flex items-center justify-center">
                            <div class="w-3/4 h-0.5 bg-blue-500 hidden md:block"></div>
                        </div>
                        <div data-aos="fade-left"
                            data-aos-duration="1500" class="relative flex flex-col col-span-2 space-y-4 group is-active">
                            <h1 class="text-xl font-bold">2017</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Department Order 174, series of 2017 was issued, on March 16, 2017.</p>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Department Order 174, series of 2017 was issued, on March 16, 2017.</p>
                            <h1 class="font-bold">Taking from the Department Circular No.1, we created Project Exodus. This was our attempt to create businesses outside of the purview of DO 174.</h1>
                            <p>A. Toll Manufacturing and the creation of the Independent Manufacturing Group.</p>
                            <p>B. Contract Selling and the creation of the Independent Sales and Services Platform.</p>
                            <p>C. Securing of PCAB licenses for the various sites for MDC.</p>
                        </div>

                        <div data-aos="fade-right"
                            data-aos-duration="1500" class="relative flex flex-col col-span-2 space-y-4 group is-active">
                            <h1 class="text-xl font-bold">2020</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Succession was put into play. Noel Gonzales was hired.</p>

                            <h1 class="font-bold">October 2023</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> MVG becomes the PGM.</p>

                            <h1 class="font-bold">2024</h1>
                            <p><button class="w-2 h-2 bg-black rounded-full"></button> Continuing the Legacy</p>

                        </div>

                        <div class="relative flex items-center justify-center">
                            <div class="w-3/4 h-0.5 bg-blue-500 hidden md:block"></div>
                        </div>

                        <div data-aos="fade-left"
                            data-aos-duration="1500" class="relative flex col-span-2 group is-active">
                            <img src="{{asset('images/about_us/img-7.webp')}}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>





</div>


<div class="relative">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/about_us/bg-purpose.webp')}}" alt="">
    <div data-aos="zoom-in"
        data-aos-duration="1500" class="container relative max-w-screen-xl py-8 mx-auto space-y-8 text-center text-white">
        <div class="space-y-4">
            <h1 class="text-5xl font-bold">Purpose & Principles</h1>
            <p>Aliquam pelientesque nisi aliquet suspendisse moltis velit fermentum. Augue maecenas nullam fusce finibus fusce imperdiet montes taciti. Vivamus felis potenti sollicitudin efficitur laculis luctus ridiculus adipiscing orci.</p>
        </div>

        <div class="space-y-4">
            <h1 class="font-bold">EMPOWER WORKERS</h1>
            <p>Aliquam pelientesque nisi aliquet suspendisse moltis velit fermentum. Augue maecenas nullam fusce finibus fusce imperdiet montes taciti. Vivamus felis potenti sollicitudin efficitur laculis luctus ridiculus adipiscing orci.</p>
        </div>

        <div class="space-y-4">
            <h1 class="font-bold">PROMOTE SUSTAINABLE DEVELOPMENT</h1>
            <p>Aliquam pelientesque nisi aliquet suspendisse moltis velit fermentum. Augue maecenas nullam fusce finibus fusce imperdiet montes taciti. Vivamus felis potenti sollicitudin efficitur laculis luctus ridiculus adipiscing orci.</p>
        </div>

        <div class="space-y-4">
            <h1 class="font-bold">DELIVER QUALITY SERVICES</h1>
            <p>Aliquam pelientesque nisi aliquet suspendisse moltis velit fermentum. Augue maecenas nullam fusce finibus fusce imperdiet montes taciti. Vivamus felis potenti sollicitudin efficitur laculis luctus ridiculus adipiscing orci.</p>
        </div>
    </div>
</div>

<div class="container max-w-screen-xl mx-auto">
    @include('layouts.newsletter')
</div>
@include('layouts.footer')




@endsection