{% extends "base.html" %}

{% block title %}Pricing - MarketMatchr{% endblock %}

{% block content %}
<div class="container mt-5 pt-5">
    <div class="row text-center mb-5">
        <div class="col">
            <h1>Our Pricing Plans</h1>
            <p class="lead">Choose the plan that's right for you.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                    <h5 class="card-title text-muted text-uppercase text-center">Free</h5>
                    <h6 class="card-price text-center">$0<span class="period">/month</span></h6>
                    <hr>
                    <ul class="fa-ul">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>0 Published Campaigns</strong></li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>Up to 3 Draft Campaigns</li>
                        <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Campaign Analytics</li>
                    </ul>
                    <div class="d-grid">
                        <a href="#" class="btn btn-primary text-uppercase">Sign up for free</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                    <h5 class="card-title text-muted text-uppercase text-center">Professional</h5>
                    <h6 class="card-price text-center">$49<span class="period">/month</span></h6>
                    <hr>
                    <ul class="fa-ul">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>10 Published Campaigns</strong> per month</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Draft Campaigns</li>
                        <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Campaign Analytics</li>
                    </ul>
                    <div class="d-grid">
                        <a href="#" class="btn btn-primary text-uppercase">Get Started</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted text-uppercase text-center">Premium</h5>
                    <h6 class="card-price text-center">$99<span class="period">/month</span></h6>
                    <hr>
                    <ul class="fa-ul">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>50 Published Campaigns</strong> per month</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Draft Campaigns</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>Campaign Analytics</li>
                    </ul>
                    <div class="d-grid">
                        <a href="#" class="btn btn-primary text-uppercase">Get Started</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}