better features and pricing
This commit is contained in:
9
templates/components/cta_buttons.html
Normal file
9
templates/components/cta_buttons.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<!-- CTA Buttons Component -->
|
||||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||
<a href="{{ primary_url }}" class="btn btn-lg px-5 py-3" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); border: none; color: white; border-radius: 25px; font-weight: 600;">
|
||||
<i class="{{ primary_icon }} me-2"></i>{{ primary_text }}
|
||||
</a>
|
||||
<a href="{{ secondary_url }}" class="btn btn-lg px-5 py-3" style="border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; border-radius: 25px; font-weight: 600;">
|
||||
<i class="{{ secondary_icon }} me-2"></i>{{ secondary_text }}
|
||||
</a>
|
||||
</div>
|
||||
144
templates/components/pricing_section.html
Normal file
144
templates/components/pricing_section.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!-- Pricing Section Component -->
|
||||
<section id="pricing" class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-5 fw-bold mb-3">Simple, Transparent Pricing</h2>
|
||||
<p class="lead text-muted">Choose the plan that fits your organization's needs</p>
|
||||
</div>
|
||||
<div class="row g-4 justify-content-center">
|
||||
<div class="col-md-3">
|
||||
<div class="card pricing-card h-100 d-flex flex-column">
|
||||
<div class="card-body text-center p-5 d-flex flex-column">
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="card-title">Starter</h3>
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">
|
||||
<span class="monthly-price">€29</span>
|
||||
<span class="annual-price" style="display: none;">€23</span>
|
||||
<span class="fs-6 text-muted">/month</span>
|
||||
</div>
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 5 rooms</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 10 conversations</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>10GB storage</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 10 managers</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Email support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card pricing-card h-100 border-primary d-flex flex-column position-relative" style="border: 3px solid var(--primary-color) !important;">
|
||||
<div class="position-absolute top-0 start-0" style="z-index: 10;">
|
||||
<span class="badge px-3 py-2" style="background: var(--primary-color); color: white; font-size: 0.8rem; font-weight: 600; border-radius: 0 0 15px 0; margin-top: 0; border-top-left-radius: 10px;">
|
||||
Most Popular
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body text-center p-5 d-flex flex-column">
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="card-title">Professional</h3>
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">
|
||||
<span class="monthly-price">€99</span>
|
||||
<span class="annual-price" style="display: none;">€79</span>
|
||||
<span class="fs-6 text-muted">/month</span>
|
||||
</div>
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 25 rooms</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 50 conversations</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>100GB storage</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 50 managers</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Priority support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ contact_url }}" class="btn btn-primary w-100 mt-auto">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card pricing-card h-100 d-flex flex-column">
|
||||
<div class="card-body text-center p-5 d-flex flex-column">
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="card-title">Enterprise</h3>
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">
|
||||
<span class="monthly-price">€299</span>
|
||||
<span class="annual-price" style="display: none;">€239</span>
|
||||
<span class="fs-6 text-muted">/month</span>
|
||||
</div>
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 100 rooms</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 200 conversations</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>500GB storage</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 200 managers</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>24/7 dedicated support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card pricing-card h-100 d-flex flex-column">
|
||||
<div class="card-body text-center p-5 d-flex flex-column">
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="card-title">Custom</h3>
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">Custom</div>
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Unlimited rooms</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Unlimited conversations</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Unlimited storage</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Unlimited users</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Custom integrations</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Dedicated account manager</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Contact Sales</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Billing Toggle -->
|
||||
<div class="d-flex justify-content-center align-items-center mt-4 mb-3">
|
||||
<span class="me-3">Monthly</span>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="annualBilling" style="width: 3rem; height: 1.5rem; background-color: var(--border-color); border-color: var(--border-color);">
|
||||
<label class="form-check-label" for="annualBilling"></label>
|
||||
</div>
|
||||
<span class="ms-3">Annual <span class="badge text-white px-2 py-1 ms-1" style="background: var(--primary-color); font-size: 0.75rem;">Save 20%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const billingToggle = document.getElementById('annualBilling');
|
||||
const monthlyPrices = document.querySelectorAll('.monthly-price');
|
||||
const annualPrices = document.querySelectorAll('.annual-price');
|
||||
|
||||
// Add CSS for switch styling
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.form-check-input:checked {
|
||||
background-color: var(--primary-color) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
.form-check-input:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
billingToggle.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
// Show annual prices
|
||||
monthlyPrices.forEach(price => price.style.display = 'none');
|
||||
annualPrices.forEach(price => price.style.display = 'inline');
|
||||
} else {
|
||||
// Show monthly prices
|
||||
monthlyPrices.forEach(price => price.style.display = 'inline');
|
||||
annualPrices.forEach(price => price.style.display = 'none');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user