@extends('_layouts.master')

@section('content')
    <div class="py-24 sm:py-32" itemscope itemtype="http://schema.org/Product">
        <div class="mx-auto max-w-7xl">
            <div class="mx-auto max-w-4xl sm:text-center">
                <h2 class="text-5xl font-semibold tracking-tight text-pretty text-stone-700 sm:text-6xl sm:text-balance" itemprop="name">Simple
                    no-tricks pricing</h2>
                <p class="mx-auto mt-6 max-w-3xl text-lg font-medium text-pretty text-stone-400 sm:text-xl/8" itemprop="description">The monthly
                    subscription fee is the amount you will pay for 2 users and all features. You will pay an additional 6 EUR for each additional
                    user and integration.</p>
            </div>
            <div class="mx-auto bg-white mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none">
                <div class="p-8 sm:p-10 lg:flex-auto">
                    <h3 class="text-3xl font-semibold tracking-tight text-stone-700" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        Monthly Subscription</h3>
                    <p class="mt-2 text-base/7 text-stone-500" itemprop="description">The standard subscription plan includes 2 users and all Cloud
                        POS features. It is non-binding and you can cancel at any time. There is no device requirement. You can use it with just a
                        mobile phone or tablet.</p>
                    <div class="mt-6 flex items-center gap-x-4">
                        <h4 class="flex-none text-sm/6 font-semibold text-orange-600">What's included?</h4>
                        <div class="h-px flex-auto bg-gray-100"></div>
                    </div>
                    <ul role="list" class="mt-4 grid grid-cols-1 gap-2 text-sm/6 text-stone-500 sm:grid-cols-2 sm:gap-2">
                        <li class="flex gap-x-3">
                            <svg class="h-6 w-5 flex-none text-orange-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                 data-slot="icon">
                                <path fill-rule="evenodd"
                                      d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                                      clip-rule="evenodd"/>
                            </svg>
                            Support service during usage
                        </li>
                        <li class="flex gap-x-3">
                            <svg class="h-6 w-5 flex-none text-orange-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                 data-slot="icon">
                                <path fill-rule="evenodd"
                                      d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                                      clip-rule="evenodd"/>
                            </svg>
                            Automatic backup
                        </li>
                        <li class="flex gap-x-3">
                            <svg class="h-6 w-5 flex-none text-orange-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                 data-slot="icon">
                                <path fill-rule="evenodd"
                                      d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                                      clip-rule="evenodd"/>
                            </svg>
                            No surprise payments
                        </li>
                        <li class="flex gap-x-3">
                            <svg class="h-6 w-5 flex-none text-orange-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                 data-slot="icon">
                                <path fill-rule="evenodd"
                                      d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                                      clip-rule="evenodd"/>
                            </svg>
                            Compatible with all devices
                        </li>
                    </ul>
                </div>
                <div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:shrink-0">
                    <div
                        class="rounded-2xl bg-stone-50 py-10 text-center ring-1 ring-gray-900/5 ring-inset lg:flex lg:flex-col lg:justify-center lg:py-16">
                        <div class="mx-auto max-w-xs px-8">
                            <p class="text-base font-semibold text-stone-500">Monthly subscription</p>
                            <p class="mt-6 flex items-baseline justify-center gap-x-1">
                                <span class="text-5xl font-semibold tracking-tight text-stone-700" itemprop="price">19</span>
                                <span class="text-sm/6 font-semibold tracking-wide text-stone-500" itemprop="priceCurrency" content="TRL">EUR</span>
                            </p>
                            <a href="https://app.bulutadisyon.com/register"
                               class="mt-8 block w-full rounded-md bg-orange-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-xs hover:bg-orange-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600">Try
                                Free for 15 Days</a>
                            <p class="mt-6 text-sm text-stone-500">Subscribe if you are satisfied</p>
                            <p class="mt-2 text-xs text-stone-400">*Prices do not include VAT.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection