@php

    use App\Models\Bot;

    $page_title = 'Frequently Asked Questions';
    $short_description =
        'Prior to availing any of our services, we kindly request that you review and acknowledge our Acceptable Use Terms of Service. Your utilization of our services constitutes your agreement to abide by the terms and conditions outlined therein. We appreciate your understanding and compliance.';

@endphp

{{-- layout --}}
@extends('templates.' . site('template') . '.layouts.front')

@section('css')
@endsection


@section('contents')
    {{-- hero section  --}}
    <section class="pt-8 md:pt-20 px-6">
        <div class="max-w-7xl mx-auto   relative">

            <div class="absolute -left-72 -top-28 p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10"></div>
            <div class="absolute -right-20 -top-28 p-40 md:p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10">
            </div>
            <div
                class="absolute left-40 md:left-96 -top-60 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
            </div>
            <div
                class="absolute left-40 md:left-96 -bottom-40 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
            </div>
            <!-- Text Content -->
            <div class="flex flex-col justify-center text-center h-full">
                <h1
                    class="max-w-lg mx-auto text-3xl md:text-5xl font-bold py-1 text-transparent bg-clip-text bg-gradient-to-r from-[#5823c1] via-[#ff8ac7] to-[#feba7f]">
                    F.A.Q
                </h1>
                <p class="text-[#afb3ca] my-8 text-sm md:text-lg md:max-w-5xl mx-auto">
                    Here are some of the most common questions our users ask, along with detailed answers to help you find
                    the information you need quickly and easily.
                </p>

            </div>

        </div>
    </section>

    {{-- terms section  --}}
    <section class="w-full mb-10 relative">
        <!-- Desktop Only -->
        <div class="absolute left-72 -top-28 p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10"></div>
        <div class="absolute right-40 -top-28 p-40 md:p-80 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div class="absolute left-40 md:left-96 -top-60 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div
            class="absolute left-40 md:left-96 -bottom-40 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>

        <!-- Mobile & Tablet Only -->
        <div class="absolute left-10 top-10 p-20 bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
        <div class="absolute right-10 top-10 p-20 md:p-40 bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
        <div class="absolute left-10 md:left-40 top-20 p-20 bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
        <div class="absolute left-10 md:left-40 bottom-10 p-20 bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10"></div>

        <div class="w-[90%] mx-auto py-10">
            <div class="max-w-screen-lg mx-auto relative">
                <div class="absolute -left-72 -bottom-28 p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10">
                </div>
                <div
                    class="absolute -right-20 -bottom-28 p-40 md:p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10">
                </div>
                <ul
                    class="w-full bg-gradient-to-r from-white/10 to-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">What is
                                    {{ site('name') }}?</span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca]">
                                        {{ site('name') }} is an advanced trading platform that utilizes AI technology to
                                        analyze market trends and execute trades with high precision.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">How can I get started with
                                    {{ site('name') }}?</span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca]">Getting started is simple. Sign up for an account, complete
                                        the verification process, and you can begin trading.</p>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">Is my personal information
                                    secure with {{ site('name') }}?</span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca]">Yes, we take data security seriously. We employ
                                        industry-standard measures to protect your information.</p>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">Can I trade on
                                    {{ site('name') }}
                                    from anywhere?</span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca]">Absolutely {{ site('name') }} allows you to trade from
                                        anywhere with
                                        an
                                        internet connection.</p>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">Do I need prior trading
                                    experience to use {{ site('name') }}?</span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca]">No, {{ site('name') }} is designed for both beginners and
                                        experienced
                                        traders. We offer educational resources to help you get started.</p>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">What fees are associated
                                    with using {{ site('name') }}?</span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca] mb-3">We charge competitive fees, which are transparently
                                        displayed on our platform. There are no hidden charges.</p>
                                    <p class="text-[#afb3ca]">

                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">Can I withdraw my profits
                                    easily?</span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca]"> Yes, withdrawing your profits is straightforward. You can
                                        initiate withdrawals through your account.</p>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">Is customer support
                                    available?
                                </span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca]">Absolutely. Our customer support team is here to assist you
                                        with any questions or issues you may have.</p>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="mb-5" x-data="{
                        expanded: false,
                        showAdd: false,
                    }">
                        <div class="border-[#09C241]/20 border-opacity-15"
                            x-bind:class="expanded ? 'border-0' : 'border-b'">
                            <p class="text-lg flex justify-between items-center mb-6"
                                x-on:click="expanded = !expanded; showAdd = !showAdd">
                                <span x-bind:class="expanded ? 'text-white' : 'text-[#afb3ca]'">How often are trading
                                    signals generated?</span>
                                <img x-bind:src="showAdd ?
                                    '{{ asset('/assets/templates/trello/images/minus-icon.svg') }}' :
                                    '{{ asset('/assets/templates/trello/images/plus-icon.svg') }}'"
                                    alt="icon" class="w-6 h-6">
                            </p>
                            <div class="w-full pl-4" x-cloak x-transition x-show="expanded">
                                <div class="w-full border-l-4 border-[#f272d5] px-6 py-4 bg-white/5 rounded-r-lg">
                                    <p class="text-[#afb3ca]">{{ site('name') }} generates trading signals continuously,
                                        ensuring
                                        you have access to up-to-date market information.

                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>



                </ul>
            </div>
        </div>
    </section>


    <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-14  mb-14 bg-gradient-to-r from-white/5 to-white/10 py-2 md:py-4">
        <!-- Column 1 -->
        <div class="flex flex-col gap-4">
            <div class="text-white font-semibold text-4xl md:text-5xl text-center">
                3.5K+
                <span class="text-white block text-lg mt-2 md:mt-4">Users</span>
            </div>
        </div>
        <!-- Column 2 -->
        <div class="flex flex-col gap-4">
            <div class="text-white font-semibold text-4xl md:text-5xl text-center">
                USD5.5M+
                <span class="text-white block text-lg mt-2 md:mt-4">Deposits</span>
            </div>
        </div>
        <!-- Column 3 -->
        <div class="flex flex-col gap-4">
            <div class="text-white font-semibold text-4xl md:text-5xl text-center">
                USD10.2M+
                <span class="text-white block text-lg mt-2 md:mt-4">Withdrawals</span>
            </div>
        </div>
        <!-- Column 4 -->
        <div class="flex flex-col gap-4">
            <div class="text-white font-semibold text-4xl md:text-5xl text-center">
                200+
                <span class="text-white block text-lg mt-2 md:mt-4">Countries Supported</span>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
@endsection
