@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Rutinitas Donasi') }}
@endsection

@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-cover" />
        </picture>
        <div class="container py-20">
            <div class="flex">
                <div class="w-1/3">
                    <div class="w-full">
                        <div class="tabs-nav">
                            <a href="#tab1"
                                class="text-xs font-bold uppercase px-5 py-3 shadow-2xl mt-2 rounded-lg block leading-normal text-white bg-accent ">
                                <i class="fas fa-space-shuttle text-base mr-1"></i> {{ __('message.Transaksi Donasi') }}
                            </a>
                            <a href="#tab2"
                                class="text-xs font-bold uppercase px-5 py-3 shadow-2xl mt-2 rounded-lg  block leading-normal text-black bg-light-base">
                                <i class="fas fa-cog text-base mr-1"></i> {{ __('message.FAQ') }}
                            </a>

                        </div>
                    </div>
                </div>
                <div class="w-full">
                    <div class="px-10">
                        <h2
                            class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                            {{ __('message.Donasi') }}
                        </h2>
                        <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
                        <div class="py-10 px-5">
                            <p class="font-display text-accent text-2xl text-center">
                                {{ __('message.Pilih Rutinitas Donasi Anda!') }}</p>
                            <div class="py-10">
                                <a href="{{ route('landing.donation.identity') }}">
                                    <div class="bg-white shadow-2xl py-20 rounded-xl">
                                        <div class="flex justify-between  items-center">
                                            <div class="w-1/2">
                                                <div class="flex items-center justify-center">
                                                    <img src="{{ asset('landing/img/icdonation.png') }}" class="text-center"
                                                        width="" alt="">
                                                </div>
                                            </div>
                                            <div class="w-full text-start px-10">
                                                <p class="text-accent text-xl font-display" style="padding-right: 20px;">
                                                    {{ __('message.Donasi Sekali dalam Transaksi') }}
                                                </p>
                                                <p class="py-5" style="padding-right: 20px;">
                                                    {{ __('message.Rutinitas donasi dilakukan hanya sekali dalam setiap transaksi, dan jika ingin donasi kembali silahkan buka menu donasi kembali') }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="py-5">
                                <div class="bg-white shadow-2xl py-20 rounded-xl">
                                    <div class="flex justify-between  items-center">
                                        <div class="w-1/2">
                                            <div class="flex items-center justify-center">
                                                <img src="{{ asset('landing/img/icmoney.png') }}" class="text-center"
                                                    width="" alt="">
                                            </div>
                                        </div>
                                        <div class="w-full text-start px-10">
                                            <p class="text-accent text-xl font-display" style="padding-right: 20px;">
                                                {{ __('message.Donasi dengan Rutinitas tiap Bulan') }}
                                            </p>
                                            <p class="py-5" style="padding-right: 20px;">
                                                {{ __('message.Tiap bulannya anda akan memberikan donasi secara langsung. anda akan menerima notifikasi email untuk donasi bulanan ini.') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="py-5">
                                <div class="bg-white shadow-2xl py-20 rounded-xl">
                                    <div class="flex justify-between  items-center">
                                        <div class="w-1/2">
                                            <div class="flex items-center justify-center">
                                                <img src="{{ asset('landing/img/icmoney.png') }}" class="text-center"
                                                    width="" alt="">
                                            </div>
                                        </div>
                                        <div class="w-full text-start px-10">
                                            <p class="text-accent text-xl font-display" style="padding-right: 20px;">
                                                {{ __('message.Donasi dengan Rutinitas Tahunan') }}
                                            </p>
                                            <p class="py-5" style="padding-right: 20px;">
                                                {{ __('message.Tiap tahunnya anda akan memberikan donasi secara langsung. anda akan menerima notifikasi email untuk donasi tahunan ini.') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="py-5">
                                <p class="font-display text-accent text-xl">{{ __('message.Kembali') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection