@extends('layouts.main-app')

@section('title', 'Partners')

@section('content')

@include('layouts.navbar')

<div class="relative h-[25rem] w-full py-[15rem]">
    <img class="absolute inset-0 object-cover object-bottom w-full h-full" src="{{asset('images/blogs/bg-header-singlepage.jpg')}}" alt="">
</div>

<div class="relative w-full h-full bg-[#595959] ">
    <img class="absolute bottom-0 object-contain object-bottom w-full h-full" src="{{asset('images/homepage/bg-home-2.png')}}" alt="">
    <div data-aos="fade-up" data-aos-duration="1000" class="container relative max-w-screen-xl pb-[5rem] md:pb-[20rem] mx-auto">
        <div data-aos="zoom-in" data-aos-duration="1000" class="flex flex-col items-center justify-center space-y-4">
            <h1 class="text-[#ffd916] font-bold text-4xl">Power Up Your Business With Us</h1>
            <p class="text-center text-white">Charge Cycle Powerbank Station is seeking dynamic partners to join us in revolutionizing the way people access power. Whether you're a business owner, property manager, or a tech enthusiast, we invite you to explore exciting partnership opportunities.</p>
        </div>
        @if (session('success'))
        <div class="p-4 mb-4 text-green-800 bg-green-100 rounded-lg">
            {{ session('success') }}
        </div>
        @endif

        @if ($errors->any())
        <div class="p-4 mb-4 text-red-800 bg-red-100 rounded-lg">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        <form action="{{ route('contact_us.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div data-aos="zoom-in" data-aos-duration="1000" class="w-full h-full space-y-4 bg-[#01325a] border-4 border-[#ffd916] py-20 px-14 rounded-full flex justify-center">
                <div class="w-full space-y-4 md:w-3/5">
                    <div>
                        <input id="full_name" name="full_name" class="w-full h-full pb-6 text-white placeholder-white bg-transparent border-2 border-white rounded-lg" placeholder="Fullname" type="text">
                    </div>
                    <div>
                        <input id="email_address" name="email_address" class="w-full h-full pb-6 text-white placeholder-white bg-transparent border-2 border-white rounded-lg" placeholder="Email Address" type="email">
                    </div>
                    <div>
                        <input id="contact_no" name="contact_no" class="w-full h-full pb-6 text-white placeholder-white bg-transparent border-2 border-white rounded-lg" placeholder="Contact No." type="tel">
                    </div>
                    <div>
                        <textarea id="message" name="message" class="w-full h-full p-2 text-white placeholder-white bg-transparent border-2 border-white rounded-lg" rows="6" placeholder="Message"></textarea>
                    </div>
                    <div class="relative">
                        <div class="flex w-full">
                            <div class="relative ">
                                <button class="flex items-center justify-center">
                                    <img class="absolute inset-0 w-[20rem] h-full" src="{{asset('images/homepage/btn-partner2.png')}}" alt="">
                                    <h1 class="relative px-20 py-8 font-bold">SUBMIT</h1>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>


        <div data-aos="zoom-in" data-aos-duration="1000" class="my-20">
            <div class="flex flex-col items-center justify-center space-y-4">
                <h1 class="text-[#ffd916] font-bold text-4xl">Our Valued Partners </h1>
                <p class="text-center text-white">In today's fast-paced world, staying connected is crucial. Charge Cycle Powerbank Station empowers you to do more, be more, and live life to the fullest without worrying about a dead battery.</p>
            </div>

            <div class="p-4 my-20 bg-white rounded-3xl md:p-14">
                <div class="grid grid-cols-6 gap-4 md:gap-8">
                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon1.png')}}" alt="">
                    </div>
                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon2.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon3.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon4.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon5.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon6.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon7.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon8.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon9.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon10.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon11.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon12.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon13.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon14.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon15.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon16.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon1.png')}}" alt="">
                    </div>

                    <div class="flex items-center justify-center">
                        <img src="{{asset('images/partners/icon1.png')}}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('layouts.station')
@include('layouts.footer')



@endsection