@extends('layouts.landingPage.master')

@section('title')
    Notifikasi 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">
                            <div class="py-10 px-10">
                                <div class="bg-white shadow-2xl px-10 py-10 rounded-2xl">
                                    <div class="flex items-center justify-center">
                                        <img src="{{ asset('landing/img/iccheck.png') }}" alt="">
                                    </div>
                                    <p class="font-display text-accent text-2xl text-center py-10">
                                        {{ __('message.Selamat Donasi Anda Berhasil!') }}
                                    </p>
                                    <p class="text-center text-md font-display text-jacarta-700 px-10">
                                        {{ __('message.Donasi anda telah selesai dan berhasil. silahkan cek email secara berkala (Spam, Inbox, dan Junk) untuk mendapatkan bukti pembayaran anda!') }}
                                    </p>
                                    <div class="pt-10">
                                        <div class="flex w-full items-center justify-center">
                                            <a href="{{ route('landing.index') }}"
                                                class=" text-accent border px-10 py-3 rounded-xl">
                                                {{ __('message.Kembali ke Beranda!') }}
                                            </a>
                                        </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