@extends('layouts.simple')

@section('content')
<!-- Main Container -->
    <main id="main-container">
        <!-- Hero Content -->
        <div class="bg-primary-dark">
            <div class="content content-full overflow-hidden">
                <div class="mt-7 mb-5 text-center">
                    <h1 class="h2 text-white mb-2 invisible" data-toggle="appear" data-class="animated fadeInDown">Super flexible plans just for you.</h1>
                    <h2 class="h4 font-w400 text-white-75 invisible" data-toggle="appear" data-class="animated fadeInDown">Step up your game with a better plan.</h2>
                </div>
            </div>
        </div>
        <!-- END Hero Content -->
        <!-- Pricing -->
        <div class="content overflow-hidden">
            <div class="row">
                <div class="col-md-6 col-xl-3 invisible" data-toggle="appear" data-offset="50" data-class="animated fadeInUp">
                    <!-- Developer Plan -->
                    <a class="block block-link-shadow text-center" href="javascript:void(0)">
                        <div class="block-header">
                            <h3 class="block-title">Developer</h3>
                        </div>
                        <div class="block-content bg-body-light">
                            <div class="py-2">
                                <p class="h1 font-w700 mb-2">$9</p>
                                <p class="h6 text-muted">per month</p>
                            </div>
                        </div>
                        <div class="block-content">
                            <div class="font-size-sm py-2">
                                <p>
                                    <strong>2</strong> Projects
                                </p>
                                <p>
                                    <strong>10GB</strong> Storage
                                </p>
                                <p>
                                    <strong>15</strong> Clients
                                </p>
                                <p>
                                    <strong>Email</strong> Support
                                </p>
                            </div>
                        </div>
                        <div class="block-content block-content-full bg-body-light">
                            <span class="btn btn-secondary px-4">Sign Up</span>
                        </div>
                    </a>
                    <!-- END Developer Plan -->
                </div>
                <div class="col-md-6 col-xl-3 invisible" data-toggle="appear" data-offset="50" data-timeout="200" data-class="animated fadeInUp">
                    <!-- Startup Plan -->
                    <a class="block block-link-shadow text-center" href="javascript:void(0)">
                        <div class="block-header">
                            <h3 class="block-title">Startup</h3>
                        </div>
                        <div class="block-content bg-body-light">
                            <div class="py-2">
                                <p class="h1 font-w700 mb-2">$29</p>
                                <p class="h6 text-muted">per month</p>
                            </div>
                        </div>
                        <div class="block-content">
                            <div class="font-size-sm py-2">
                                <p>
                                    <strong>10</strong> Projects
                                </p>
                                <p>
                                    <strong>30GB</strong> Storage
                                </p>
                                <p>
                                    <strong>100</strong> Clients
                                </p>
                                <p>
                                    <strong>FULL</strong> Support
                                </p>
                            </div>
                        </div>
                        <div class="block-content block-content-full bg-body-light">
                            <span class="btn btn-secondary px-4">Sign Up</span>
                        </div>
                    </a>
                    <!-- END Startup Plan -->
                </div>
                <div class="col-md-6 col-xl-3 invisible" data-toggle="appear" data-offset="50" data-timeout="400" data-class="animated fadeInUp">
                    <!-- Business Plan -->
                    <a class="block block-link-shadow block-themed block-fx-shadow text-center" href="javascript:void(0)">
                        <div class="block-header">
                            <h3 class="block-title">
                                <i class="fa fa-thumbs-up mr-1"></i> Business
                            </h3>
                        </div>
                        <div class="block-content bg-body-light">
                            <div class="py-2">
                                <p class="h1 font-w700 mb-2">$49</p>
                                <p class="h6 text-muted">per month</p>
                            </div>
                        </div>
                        <div class="block-content">
                            <div class="font-size-sm py-2">
                                <p>
                                    <strong>50</strong> Projects
                                </p>
                                <p>
                                    <strong>100GB</strong> Storage
                                </p>
                                <p>
                                    <strong>1000</strong> Clients
                                </p>
                                <p>
                                    <strong>FULL</strong> Support
                                </p>
                            </div>
                        </div>
                        <div class="block-content block-content-full bg-body-light">
                            <span class="btn btn-primary px-4">Sign Up</span>
                        </div>
                    </a>
                    <!-- END Business Plan -->
                </div>
                <div class="col-md-6 col-xl-3 invisible" data-toggle="appear" data-offset="50" data-timeout="600" data-class="animated fadeInUp">
                    <!-- VIP Plan -->
                    <a class="block block-link-shadow text-center" href="javascript:void(0)">
                        <div class="block-header">
                            <h3 class="block-title">VIP</h3>
                        </div>
                        <div class="block-content bg-body-light">
                            <div class="py-2">
                                <p class="h1 font-w700 mb-2">$99</p>
                                <p class="h6 text-muted">per month</p>
                            </div>
                        </div>
                        <div class="block-content">
                            <div class="font-size-sm py-2">
                                <p>
                                    <strong>Unlimited</strong> Projects
                                </p>
                                <p>
                                    <strong>Unlimited</strong> Storage
                                </p>
                                <p>
                                    <strong>Unlimited</strong> Clients
                                </p>
                                <p>
                                    <strong>FULL</strong> Support
                                </p>
                            </div>
                        </div>
                        <div class="block-content block-content-full bg-body-light">
                            <span class="btn btn-secondary px-4">Sign Up</span>
                        </div>
                    </a>
                    <!-- END VIP Plan -->
                </div>
            </div>
        </div>
        <!-- END Pricing -->
    </main>
 <!-- END Main Container -->
@endsection