80 lines
2.1 KiB
Twig
80 lines
2.1 KiB
Twig
---
|
|
title: Pricing
|
|
prices:
|
|
- name: Full
|
|
price: 0
|
|
features:
|
|
- 10 users included
|
|
- 2 GB of storage
|
|
- Email support
|
|
- Help center access
|
|
button:
|
|
text: Sign up for free
|
|
inverted: true
|
|
- name: Pro
|
|
price: 15
|
|
features:
|
|
- 20 users included
|
|
- 10 GB of storage
|
|
- Priority email support
|
|
- Help center access
|
|
button:
|
|
text: Get started
|
|
- name: Enterprise
|
|
price: 29
|
|
features:
|
|
- 30 users included
|
|
- 15 GB of storage
|
|
- Phone and email support
|
|
- Help center access
|
|
button:
|
|
text: Contact us
|
|
---
|
|
|
|
<section class="mt-16">
|
|
<div class="max-w-2xl mx-auto px-4 text-center">
|
|
<h1 class="text-5xl">{{ page.title }}</h1>
|
|
|
|
<p class="mt-4 text-xl leading-relaxed">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="max-w-5xl px-6 mt-8 mx-auto grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3">
|
|
{% for price in page.prices %}
|
|
<div class="max-w-sm w-full mx-auto border border-gray-300 overflow-hidden rounded-md shadow-md shadow-gray-200 text-center md:max-w-full">
|
|
<h2 class="px-4 py-3 text-2xl border-b border-gray-300 bg-gray-100">
|
|
{{ price.name }}
|
|
</h2>
|
|
|
|
<div class="p-6">
|
|
<p>
|
|
<span class="text-4xl">{{ price.price }}</span>
|
|
<span class="ml-1 text-3xl text-gray-600">
|
|
/ mo<span class="sr-only">nth</span>
|
|
</span>
|
|
</p>
|
|
|
|
<div class="mt-5">
|
|
<h3 class="sr-only">Features</h3>
|
|
|
|
<ul class="space-y-1">
|
|
{% for feature in price.features %}
|
|
<li>{{ feature }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mt-7">
|
|
{% include 'button' with {
|
|
inverted: price.button.inverted,
|
|
shape: 'rounded',
|
|
size: 'large',
|
|
text: price.button.text,
|
|
type: 'primary'
|
|
} only %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|