@extends('layouts.app')

@php
    $mainClass = 'w-full bg-[#f7f7f7]'
@endphp

@section('title', 'تعرفه تبلیغات در نیکس فایل')

@section('content')

    <div class="my-12">
        @include('components.header')
    </div>

    <h1 class="text-2xl lg:text-4xl font-bold text-center mb-12">
        تبلیغات در
        <span class="text-primary-color">
      نیکس فایل
    </span>
    </h1>

    <div class="grid lg:grid-cols-2 gap-4 lg:gap-0 mb-12 container mx-auto">

        <div class="rounded-3xl overflow-hidden w-[90%] lg:w-3/4 mx-auto shadow-custom">
            <div class="bg-[#2F2B42]">
                <p class="p-4 text-lg text-center text-white py-3 font-semibold">
                    استاندارد
                </p>
            </div>
            <div class="p-4">
                <div class="flex justify-between text-md mx-8 py-4 border-b">
                    <p class="text-text-color">
                        کارمزد شارژ :
                    </p>
                    <p class="text-zinc-900">
                        ۸ درصد
                    </p>
                </div>

                <div class="flex justify-between text-sm mx-8 py-4 border-b">
                    <p class="text-text-color">
                        کارمزد مدیریت :
                    </p>
                    <p class="text-zinc-900">
                        ۸ درصد
                    </p>
                </div>

                <div class="flex justify-between text-sm mx-8 py-4 border-b">
                    <p class="text-text-color">
                        مبلغ نهایی :
                    </p>
                    <p class="text-primary-color">
                        ۸ درصد
                    </p>
                </div>

                <div class="flex justify-center text-sm mx-8 py-4">
                    <a href="#" class="bg-primary-color text-white py-2 mt-4 px-12 rounded-full"> خرید
                        تبلیغات</a>
                </div>

            </div>
        </div>

        <div class="rounded-3xl overflow-hidden w-[90%] lg:w-3/4 mx-auto shadow-custom">
            <div class="bg-primary-color">
                <p class="p-4 text-lg text-center text-white py-3 font-semibold">
                    پیشرفته
                </p>
            </div>
            <div class="p-4">
                <div class="flex justify-between text-sm mx-8 py-4 border-b">
                    <p class="text-text-color">
                        کارمزد شارژ :
                    </p>
                    <p class="text-zinc-900">
                        ۸ درصد
                    </p>
                </div>

                <div class="flex justify-between text-sm mx-8 py-4 border-b">
                    <p class="text-text-color">
                        کارمزد مدیریت :
                    </p>
                    <p class="text-zinc-900">
                        ۸ درصد
                    </p>
                </div>

                <div class="flex justify-between text-sm mx-8 py-4 border-b">
                    <p class="text-text-color">
                        مبلغ نهایی :
                    </p>
                    <p class="text-primary-color">
                        ۸ درصد
                    </p>
                </div>

                <div class="flex justify-center text-sm mx-8 py-4">
                    <a href="#" class="bg-primary-color text-white py-2 mt-4 px-12 rounded-full"> خرید
                        تبلیغات</a>
                </div>

            </div>
        </div>

    </div>
@endsection