@extends('layouts.app')
@section('content')
    <div class="container container-md py-4">
        <div class="text-center mb-3 pb-3">
            <div class="h2 text-bold">Launch your business today</div>
            <p>Select the plan in different options that best fit your project</p>
        </div>
    </div>
    <div class="container container-md">
        <!-- START PLAN TABLE-->
        <div class="row">
            <!-- PLAN-->
            <div class="col-lg-4">
                <div class="plan">
                    <h3 class="plan-header">Single</h3>
                    <div class="plan-price">
                        <div class="text-lg">
                            <sup><small>$</small></sup>
                            18
                            <!-- span.plan-period /mo-->
                        </div>
                    </div>
                    <ul class="plan-features">
                        <li>
                            <em class="fa fa-check"></em>
                            Unlimited Styles
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            RTL &amp; Translation
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Customer support
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Free Updates
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Limited to one client
                        </li>
                        <li>
                            <em class="fa fa-times plan-feature-disable"></em>
                            Multiple installation
                        </li>
                        <li>
                            <em class="fa fa-times plan-feature-disable"></em>
                            Not ready for resale
                        </li>
                    </ul>
                    <hr />
                    <div class="text-center"><a class="btn btn-info" href="">Choose</a></div>
                </div>
            </div>
            <!-- PLAN-->
            <div class="col-lg-4">
                <div class="plan">
                    <h3 class="plan-header">Multiple</h3>
                    <div class="plan-price">
                        <div class="text-lg">
                            <sup><small>$</small></sup>
                            60
                            <!-- span.plan-period /mo-->
                        </div>
                    </div>
                    <ul class="plan-features">
                        <li>
                            <em class="fa fa-check"></em>
                            Unlimited Styles
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            RTL &amp; Translation
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Customer support
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Free Updates
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Unlimited clients
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Multiple installation
                        </li>
                        <li>
                            <em class="fa fa-times plan-feature-disable"></em>
                            Not ready for resale
                        </li>
                    </ul>
                    <hr />
                    <p class="plan-description">The perfect price for all your project solutions.</p>
                    <div class="text-center"><a class="btn btn-info" href="">Choose</a></div>
                </div>
            </div>
            <!-- PLAN-->
            <div class="col-lg-4">
                <div class="plan">
                    <h3 class="plan-header">Extended</h3>
                    <div class="plan-price">
                        <div class="text-lg">
                            <sup><small>$</small></sup>
                            900
                            <!-- span.plan-period /mo-->
                        </div>
                    </div>
                    <ul class="plan-features">
                        <li>
                            <em class="fa fa-check"></em>
                            Unlimited Styles
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            RTL &amp; Translation
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Customer support
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Free Updates
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Unlimited clients
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Multiple installation
                        </li>
                        <li>
                            <em class="fa fa-check"></em>
                            Ready for resale
                        </li>
                    </ul>
                    <hr />
                    <div class="text-center"><a class="btn btn-info" href="">Choose</a></div>
                </div>
                <p class="text-center text-muted"><small>* Subject to specific license terms. Price and features listed for demo only.</small></p>
            </div>
        </div>
        <!-- END PLAN TABLE-->
        <div class="text-center my-3 py-4">
            <div class="h2 text-bold">Native styles</div>
            <p>Example plan table using card for demonstration</p>
        </div>
        <!-- START PLAN TABLE-->
        <div class="row">
            <!-- PLAN-->
            <div class="col-lg-4">
                <div class="card b">
                    <div class="card-body text-center bb">
                        <div class="text-bold">STARTER</div>
                        <h3 class="my-3">
                            <sup>$</sup>
                            <span class="text-lg">17</span>
                            <span>/mo</span>
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Unlimited Styles</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>RTL &amp; Translation</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Customer support</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Free Updates</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Limited to one client</span>
                        </p>
                        <p>
                            <em class="fa fa-times fa-fw text-warning mr-2"></em>
                            <span>Multiple installation</span>
                        </p>
                        <p>
                            <em class="fa fa-times fa-fw text-warning mr-2"></em>
                            <span>Not ready for resale</span>
                        </p>
                    </div>
                    <div class="card-body text-center"><a class="btn btn-secondary btn-lg" href="">Select this plan</a></div>
                </div>
            </div>
            <!-- PLAN-->
            <div class="col-lg-4">
                <div class="card b">
                    <div class="card-body text-center bg-green">
                        <div class="text-bold">IDEAL</div>
                        <h3 class="my-3">
                            <sup>$</sup>
                            <span class="text-lg">49</span>
                            <span>/mo</span>
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Unlimited Styles</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>RTL &amp; Translation</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Customer support</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Free Updates</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Limited to one client</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Multiple installation</span>
                        </p>
                        <p>
                            <em class="fa fa-times fa-fw text-warning mr-2"></em>
                            <span>Not ready for resale</span>
                        </p>
                    </div>
                    <div class="card-body text-center"><a class="btn btn-danger btn-lg" href="">Select this plan</a></div>
                </div>
            </div>
            <!-- PLAN-->
            <div class="col-lg-4">
                <div class="card b">
                    <div class="card-body text-center bb">
                        <div class="text-bold">PREMIUM</div>
                        <h3 class="my-3">
                            <sup>$</sup>
                            <span class="text-lg">95</span>
                            <span>/mo</span>
                        </h3>
                    </div>
                    <div class="card-body">
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Unlimited Styles</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>RTL &amp; Translation</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Customer support</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Free Updates</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Limited to one client</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Multiple installation</span>
                        </p>
                        <p>
                            <em class="fa fa-check fa-fw text-green mr-2"></em>
                            <span>Ready for resale*</span>
                        </p>
                    </div>
                    <div class="card-body text-center"><a class="btn btn-secondary btn-lg" href="">Select this plan</a></div>
                </div>
            </div>
        </div>
        <p class="text-center text-muted"><small>* Subject to specific license terms. Price and features listed for demo only.</small></p>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')@endsection
