@extends('layouts.main-app')

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

@section('content')


@include('layouts.navbar')
<div class="relative ">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/contact_us/banner.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">Contact Us</h1>
                <p>Get in touch with Tipón to learn more about our services and how we can support your cooperative’s success.</p>
            </div>
        </div>
    </div>
</div>


<div class="container max-w-screen-xl mx-auto">
    <div class="grid items-center grid-cols-1 gap-12 px-4 py-12 md:grid-cols-2">
        <div>
            <h1 class="py-4 text-4xl font-bold text-center">We'll Love To Hear From You</h1>
            @include('layouts.contact')
        </div>
        <div>
            <img src="{{asset('images/contact_us/img-contact.webp')}}" alt="">
        </div>
    </div>
</div>

<div class="relative">
    <img src="{{ asset('images/bg-map.webp') }}" alt="Banner"
        class="absolute object-cover w-full h-full ">
    <div class="container relative grid grid-cols-1 gap-8 px-4 py-12 mx-auto lg:grid-cols-2">
        <div>
            <img src="{{ asset('images/obj-map.webp') }}" alt="Banner" class="w-full h-auto px-2">
        </div>
        <div class="flex flex-col justify-center space-y-12 text-white">
            <h1 class="text-4xl font-bold ">Our Contact Details</h1>
            <div class="space-y-4 ">
                <p>Address</p>
                <h1 class="font-bold ">1st Workers Center, No.70 <br> San Rafael St. Brgy. Kapitolyo, <br> Pasig City, Metro Manila Philippines</h1>
                <hr>
                <p>Email Address</p>
                <h1 class="font-bold ">marketing@asiapro.coop</h1>
                <hr>
                <p>Phone Number</p>
                <h1 class="font-bold ">09176343335</h1>

            </div>

        </div>
    </div>
</div>
<div data-aos="zoom-in"
    data-aos-duration="1500" class="container max-w-screen-xl mx-auto">

    @include('layouts.newsletter')

</div>


@include('layouts.footer')



@endsection