@extends('front.layouts.app')

@section('content')
    {{-- <div class="overlay" id="overlay">
        <div class="container h-100">
            <div class="row align-items-center justify-content-center h-100">
                <div class="col-md-4 text-center text-md-start">
                    <p class="coming-soon">
                        {{ \App\Helpers\TranslationHelper::translate('This content will be available soon') }}</p>
                </div>
                <div class="col-md-4 text-center">
                    <button class="lock-btn" onclick="unlockContent()">
                        <img src="{{ asset('front/assets/img/lock.png') }}" alt="" class="img-fluid">
                    </button>
                </div>
            </div>
        </div>
    </div> --}}

    <section class="hero-section">
        <div class="overlay"></div>
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-md-10 text-center">
                    <div class="text-hero-7">
                        <h2 data-aos="zoom-in" data-aos-duration="1000">
                            {{ \App\Helpers\TranslationHelper::translate('Sell Your Currency Now') }}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Buttons Section -->
    <div class="custom-buttons-section mt-5" style="text-align: center;">
        <h2 data-aos="zoom-in" data-aos-duration="1000" style="color: #fff">
            {{ \App\Helpers\TranslationHelper::translate('Download the app now') }}
        </h2>
        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="custom-btn-container"
                    style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
                    <a href="#" class="custom-btn custom-android"
                        style="display: inline-block; background-color: #3ddc84; color: #fff; padding: 15px 25px; font-size: 18px; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; text-align: center;">
                        <i class="fab fa-android" style="font-size: 30px; margin-bottom: 10px;"></i>
                        <p style="font-size: 14px; margin-top: 10px;">
                            {{ \App\Helpers\TranslationHelper::translate('Android') }}</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="custom-btn-container"
                    style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
                    <a href="#" class="custom-btn custom-iphone"
                        style="display: inline-block; background-color: #000; color: #fff; padding: 15px 25px; font-size: 18px; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; text-align: center;">
                        <i class="fab fa-apple" style="font-size: 30px; margin-bottom: 10px;"></i>
                        <p style="font-size: 14px; margin-top: 10px;">
                            {{ \App\Helpers\TranslationHelper::translate('iPhone') }}</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection





@push('js')
    {{-- <script>
        function unlockContent() {
            let overlay = document.getElementById("overlay");
            overlay.style.opacity = "0";

            setTimeout(() => {
                overlay.style.display = "none";
                document.getElementById("main-content").style.display = "block";
            }, 300);
        }
    </script> --}}
@endpush