@extends('../layout/' . $layout)

@section('subhead')
    <title>Pricing - Midone - Tailwind HTML Admin Template</title>
@endsection

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Pricing Layout</h2>
    </div>
    <!-- BEGIN: Pricing Layout -->
    <div class="intro-y box flex flex-col lg:flex-row mt-5">
        <div class="intro-y flex-1 px-5 py-16">
            <i data-lucide="credit-card" class="block w-12 h-12 text-primary mx-auto"></i>
            <div class="text-xl font-medium text-center mt-10">Basic Plan</div>
            <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
                1 Domain <span class="mx-1">•</span> 10 Users <span class="mx-1">•</span> 20 Copies
            </div>
            <div class="text-slate-500 px-10 text-center mx-auto mt-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="flex justify-center">
                <div class="relative text-5xl font-semibold mt-8 mx-auto">
                    <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 35
                </div>
            </div>
            <button type="button" class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8">PURCHASE NOW</button>
        </div>
        <div class="intro-y border-b border-t lg:border-b-0 lg:border-t-0 flex-1 p-5 lg:border-l lg:border-r border-slate-200/60 dark:border-darkmode-400 py-16">
            <i data-lucide="briefcase" class="block w-12 h-12 text-primary mx-auto"></i>
            <div class="text-xl font-medium text-center mt-10">Business</div>
            <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
                1 Domain <span class="mx-1">•</span> 10 Users <span class="mx-1">•</span> 20 Copies
            </div>
            <div class="text-slate-500 px-10 text-center mx-auto mt-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="flex justify-center">
                <div class="relative text-5xl font-semibold mt-8 mx-auto">
                    <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 60
                </div>
            </div>
            <button type="button" class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8">PURCHASE NOW</button>
        </div>
        <div class="intro-y flex-1 px-5 py-16">
            <i data-lucide="shopping-bag" class="block w-12 h-12 text-primary mx-auto"></i>
            <div class="text-xl font-medium text-center mt-10">Enterprise</div>
            <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
                1 Domain <span class="mx-1">•</span> 10 Users <span class="mx-1">•</span> 20 Copies
            </div>
            <div class="text-slate-500 px-10 text-center mx-auto mt-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="flex justify-center">
                <div class="relative text-5xl font-semibold mt-8 mx-auto">
                    <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 120
                </div>
            </div>
            <button type="button" class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8">PURCHASE NOW</button>
        </div>
    </div>
    <!-- END: Pricing Layout -->
    <!-- BEGIN: Pricing Layout -->
    <div class="intro-y box flex flex-col lg:flex-row mt-5">
        <div class="intro-y flex-1 px-5 py-16">
            <i data-lucide="activity" class="block w-12 h-12 text-primary mx-auto"></i>
            <div class="text-xl font-medium text-center mt-10">Basic Plan</div>
            <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
                1 Domain <span class="mx-1">•</span> 10 Users <span class="mx-1">•</span> 20 Copies
            </div>
            <div class="text-slate-500 px-10 text-center mx-auto mt-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="flex justify-center">
                <div class="relative text-5xl font-semibold mt-8 mx-auto">
                    <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 35
                </div>
            </div>
            <button type="button" class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8">PURCHASE NOW</button>
        </div>
        <div class="intro-y border-b border-t lg:border-b-0 lg:border-t-0 flex-1 px-5 lg:border-l lg:border-r border-slate-200/60 dark:border-darkmode-400 py-16">
            <i data-lucide="box" class="block w-12 h-12 text-primary mx-auto"></i>
            <div class="text-xl font-medium text-center mt-10">Business</div>
            <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
                1 Domain <span class="mx-1">•</span> 10 Users <span class="mx-1">•</span> 20 Copies
            </div>
            <div class="text-slate-500 px-10 text-center mx-auto mt-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="flex justify-center">
                <div class="relative text-5xl font-semibold mt-8 mx-auto">
                    <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 60
                </div>
            </div>
            <button type="button" class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8">PURCHASE NOW</button>
        </div>
        <div class="intro-y flex-1 px-5 py-16">
            <i data-lucide="send" class="block w-12 h-12 text-primary mx-auto"></i>
            <div class="text-xl font-medium text-center mt-10">Enterprise</div>
            <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
                1 Domain <span class="mx-1">•</span> 10 Users <span class="mx-1">•</span> 20 Copies
            </div>
            <div class="text-slate-500 px-10 text-center mx-auto mt-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="flex justify-center">
                <div class="relative text-5xl font-semibold mt-8 mx-auto">
                    <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 120
                </div>
            </div>
            <button type="button" class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8">PURCHASE NOW</button>
        </div>
    </div>
    <!-- END: Pricing Layout -->
@endsection