Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better features and pricing

Browse Source
This commit is contained in:
Kobe
2025-06-20 16:05:15 +02:00
parent c06dd6c578
commit bb139a2b95
5 changed files with 497 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
templates/public/pricing.html
View File

@@ -13,62 +13,15 @@
padding: 80px 0;
}
.pricing-card {
background: var(--white);
border: none;
border-radius: 15px;
padding: 40px 30px;
transition: transform 0.3s ease;
box-shadow: 0 5px 15px var(--shadow-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
border: 2px solid transparent;
position: relative;
}
.pricing-card:hover {
transform: translateY(-5px);
transform: translateY(-10px);
box-shadow: 0 15px 35px var(--shadow-color-light);
}
.pricing-card.featured {
border-color: var(--primary-color);
transform: scale(1.05);
}
.pricing-card.featured::before {
content: 'Most Popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-color);
color: white;
padding: 5px 20px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.price {
font-size: 3rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.price-period {
color: var(--text-muted);
font-size: 1rem;
}
.feature-list {
list-style: none;
padding: 0;
margin: 2rem 0;
}
.feature-list li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-color);
}
.feature-list li:last-child {
border-bottom: none;
}
.feature-list i {
color: var(--success-color);
margin-right: 0.5rem;
}
.hero-section {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
@@ -93,6 +46,22 @@
padding: 1.5rem;
color: var(--text-muted);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border: none;
border-radius: 25px;
padding: 12px 30px;
}
.btn-outline-primary {
border: 2px solid var(--primary-color);
color: var(--primary-color);
border-radius: 25px;
padding: 12px 30px;
}
.btn-outline-primary:hover {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-color: var(--primary-color);
}
</style>
</head>
<body>
@@ -107,157 +76,9 @@
</section>
<!-- Pricing Plans -->
<section class="pricing-section">
<div class="container">
<div class="row g-4 justify-content-center">
<div class="col-lg-3 col-md-6">
<div class="pricing-card">
<h3 class="h4 fw-bold mb-3">Starter</h3>
<div class="price">$29<span class="price-period">/month</span></div>
<p class="text-muted mb-4">Perfect for small teams getting started</p>
<ul class="feature-list">
<li><i class="fas fa-check"></i>Up to 10 rooms</li>
<li><i class="fas fa-check"></i>Up to 20 conversations</li>
<li><i class="fas fa-check"></i>25GB storage</li>
<li><i class="fas fa-check"></i>Up to 10 managers</li>
<li><i class="fas fa-check"></i>Basic support</li>
<li><i class="fas fa-check"></i>Core features</li>
</ul>
<a href="{{ url_for('public.contact') }}" class="btn btn-outline-primary w-100">Get Started</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="pricing-card featured">
<h3 class="h4 fw-bold mb-3">Professional</h3>
<div class="price">$99<span class="price-period">/month</span></div>
<p class="text-muted mb-4">Ideal for growing businesses</p>
<ul class="feature-list">
<li><i class="fas fa-check"></i>Up to 25 rooms</li>
<li><i class="fas fa-check"></i>Up to 50 conversations</li>
<li><i class="fas fa-check"></i>100GB storage</li>
<li><i class="fas fa-check"></i>Up to 50 managers</li>
<li><i class="fas fa-check"></i>Priority support</li>
<li><i class="fas fa-check"></i>Advanced features</li>
</ul>
<a href="{{ url_for('public.contact') }}" class="btn btn-primary w-100">Get Started</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="pricing-card">
<h3 class="h4 fw-bold mb-3">Enterprise</h3>
<div class="price">$299<span class="price-period">/month</span></div>
<p class="text-muted mb-4">For large organizations</p>
<ul class="feature-list">
<li><i class="fas fa-check"></i>Up to 100 rooms</li>
<li><i class="fas fa-check"></i>Up to 200 conversations</li>
<li><i class="fas fa-check"></i>500GB storage</li>
<li><i class="fas fa-check"></i>Up to 200 managers</li>
<li><i class="fas fa-check"></i>24/7 dedicated support</li>
<li><i class="fas fa-check"></i>All features included</li>
</ul>
<a href="{{ url_for('public.contact') }}" class="btn btn-outline-primary w-100">Get Started</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="pricing-card">
<h3 class="h4 fw-bold mb-3">Custom</h3>
<div class="price">Custom</div>
<p class="text-muted mb-4">Tailored for your needs</p>
<ul class="feature-list">
<li><i class="fas fa-check"></i>Unlimited rooms</li>
<li><i class="fas fa-check"></i>Unlimited conversations</li>
<li><i class="fas fa-check"></i>Unlimited storage</li>
<li><i class="fas fa-check"></i>Unlimited users</li>
<li><i class="fas fa-check"></i>Custom integrations</li>
<li><i class="fas fa-check"></i>Dedicated account manager</li>
</ul>
<a href="{{ url_for('public.contact') }}" class="btn btn-outline-primary w-100">Contact Sales</a>
</div>
</div>
</div>
</div>
</section>
<!-- Features Comparison -->
<section class="pricing-section" style="background-color: var(--bg-color);">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">Feature Comparison</h2>
<p class="lead text-muted">See what's included in each plan</p>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Feature</th>
<th class="text-center">Starter</th>
<th class="text-center">Professional</th>
<th class="text-center">Enterprise</th>
<th class="text-center">Custom</th>
</tr>
</thead>
<tbody>
<tr>
<td>Room-based workspaces</td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<td>Real-time messaging</td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<td>File management</td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<td>Role-based security</td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<td>Advanced notifications</td>
<td class="text-center"><i class="fas fa-times text-muted"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<td>Custom theming</td>
<td class="text-center"><i class="fas fa-times text-muted"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<td>Analytics & reporting</td>
<td class="text-center"><i class="fas fa-times text-muted"></i></td>
<td class="text-center"><i class="fas fa-times text-muted"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<td>Custom integrations</td>
<td class="text-center"><i class="fas fa-times text-muted"></i></td>
<td class="text-center"><i class="fas fa-times text-muted"></i></td>
<td class="text-center"><i class="fas fa-times text-muted"></i></td>
<td class="text-center"><i class="fas fa-check text-success"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
{% with contact_url=url_for('public.contact') %}
{% include 'components/pricing_section.html' %}
{% endwith %}
<!-- FAQ Section -->
<section class="pricing-section faq-section">
@@ -277,15 +98,6 @@
Yes, you can upgrade or downgrade your plan at any time. Changes will be prorated and reflected in your next billing cycle.
</div>
</div>
<div class="faq-item">
<div class="faq-question" onclick="toggleFAQ(this)">
<i class="fas fa-chevron-down me-2"></i>
Is there a free trial available?
</div>
<div class="faq-answer" style="display: none;">
We offer a 14-day free trial for all plans. No credit card required to start your trial.
</div>
</div>
<div class="faq-item">
<div class="faq-question" onclick="toggleFAQ(this)">
<i class="fas fa-chevron-down me-2"></i>
@@ -318,22 +130,6 @@
</div>
</section>
<!-- CTA Section -->
<section class="py-5">
<div class="container text-center">
<h2 class="display-5 fw-bold mb-4">Ready to Get Started?</h2>
<p class="lead text-muted mb-5">Join thousands of businesses using DocuPulse for their document management needs</p>
<div class="d-flex justify-content-center gap-3 flex-wrap">
<a href="{{ url_for('public.contact') }}" class="btn btn-primary btn-lg px-5 py-3">
<i class="fas fa-rocket me-2"></i>Start Free Trial
</a>
<a href="{{ url_for('public.contact') }}" class="btn btn-outline-primary btn-lg px-5 py-3">
<i class="fas fa-phone me-2"></i>Talk to Sales
</a>
</div>
</div>
</section>
{% include 'components/footer_nav.html' %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>