starting public section
This commit is contained in:
@@ -8,6 +8,7 @@ def init_app(app: Flask):
|
|||||||
main_bp = Blueprint('main', __name__)
|
main_bp = Blueprint('main', __name__)
|
||||||
auth_bp = Blueprint('auth', __name__, url_prefix='/auth')
|
auth_bp = Blueprint('auth', __name__, url_prefix='/auth')
|
||||||
rooms_bp = Blueprint('rooms', __name__)
|
rooms_bp = Blueprint('rooms', __name__)
|
||||||
|
public_bp = Blueprint('public', __name__)
|
||||||
|
|
||||||
# Import and initialize routes
|
# Import and initialize routes
|
||||||
from .main import init_routes as init_main_routes
|
from .main import init_routes as init_main_routes
|
||||||
@@ -18,10 +19,12 @@ def init_app(app: Flask):
|
|||||||
from .admin import admin as admin_routes
|
from .admin import admin as admin_routes
|
||||||
from .email_templates import email_templates as email_templates_routes
|
from .email_templates import email_templates as email_templates_routes
|
||||||
from .user import user_bp as user_routes
|
from .user import user_bp as user_routes
|
||||||
|
from .public import init_public_routes
|
||||||
|
|
||||||
# Initialize routes
|
# Initialize routes
|
||||||
init_main_routes(main_bp)
|
init_main_routes(main_bp)
|
||||||
init_auth_routes(auth_bp)
|
init_auth_routes(auth_bp)
|
||||||
|
init_public_routes(public_bp)
|
||||||
|
|
||||||
# Add site_settings context processor to all blueprints
|
# Add site_settings context processor to all blueprints
|
||||||
@app.context_processor
|
@app.context_processor
|
||||||
@@ -37,6 +40,7 @@ def init_app(app: Flask):
|
|||||||
# Register blueprints
|
# Register blueprints
|
||||||
app.register_blueprint(main_bp)
|
app.register_blueprint(main_bp)
|
||||||
app.register_blueprint(auth_bp)
|
app.register_blueprint(auth_bp)
|
||||||
|
app.register_blueprint(public_bp)
|
||||||
app.register_blueprint(rooms_routes)
|
app.register_blueprint(rooms_routes)
|
||||||
app.register_blueprint(contacts_routes)
|
app.register_blueprint(contacts_routes)
|
||||||
app.register_blueprint(conversations_routes)
|
app.register_blueprint(conversations_routes)
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
@@ -44,10 +44,20 @@ def init_routes(main_bp):
|
|||||||
return {'unread_notifications': 0}
|
return {'unread_notifications': 0}
|
||||||
|
|
||||||
@main_bp.route('/')
|
@main_bp.route('/')
|
||||||
@login_required
|
def public_home():
|
||||||
@require_password_change
|
"""Public homepage for the master instance - client-facing website"""
|
||||||
def home():
|
# Check if this is a master instance
|
||||||
|
is_master = os.environ.get('MASTER', 'false').lower() == 'true'
|
||||||
|
|
||||||
|
if is_master:
|
||||||
|
# For master instance, show the public homepage
|
||||||
|
return render_template('home.html')
|
||||||
|
else:
|
||||||
|
# For child instances, redirect to login if not authenticated, otherwise dashboard
|
||||||
|
if current_user.is_authenticated:
|
||||||
return redirect(url_for('main.dashboard'))
|
return redirect(url_for('main.dashboard'))
|
||||||
|
else:
|
||||||
|
return redirect(url_for('auth.login'))
|
||||||
|
|
||||||
@main_bp.route('/dashboard')
|
@main_bp.route('/dashboard')
|
||||||
@login_required
|
@login_required
|
||||||
|
|||||||
79
routes/public.py
Normal file
79
routes/public.py
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
from flask import Blueprint, render_template, redirect, url_for
|
||||||
|
from models import SiteSettings
|
||||||
|
import os
|
||||||
|
|
||||||
|
def init_public_routes(public_bp):
|
||||||
|
@public_bp.context_processor
|
||||||
|
def inject_site_settings():
|
||||||
|
site_settings = SiteSettings.query.first()
|
||||||
|
return dict(site_settings=site_settings)
|
||||||
|
|
||||||
|
@public_bp.route('/features')
|
||||||
|
def features():
|
||||||
|
"""Features page"""
|
||||||
|
return render_template('public/features.html')
|
||||||
|
|
||||||
|
@public_bp.route('/pricing')
|
||||||
|
def pricing():
|
||||||
|
"""Pricing page"""
|
||||||
|
return render_template('public/pricing.html')
|
||||||
|
|
||||||
|
@public_bp.route('/about')
|
||||||
|
def about():
|
||||||
|
"""About page"""
|
||||||
|
return render_template('public/about.html')
|
||||||
|
|
||||||
|
@public_bp.route('/blog')
|
||||||
|
def blog():
|
||||||
|
"""Blog page"""
|
||||||
|
return render_template('public/blog.html')
|
||||||
|
|
||||||
|
@public_bp.route('/careers')
|
||||||
|
def careers():
|
||||||
|
"""Careers page"""
|
||||||
|
return render_template('public/careers.html')
|
||||||
|
|
||||||
|
@public_bp.route('/press')
|
||||||
|
def press():
|
||||||
|
"""Press page"""
|
||||||
|
return render_template('public/press.html')
|
||||||
|
|
||||||
|
@public_bp.route('/help')
|
||||||
|
def help_center():
|
||||||
|
"""Help Center page"""
|
||||||
|
return render_template('public/help.html')
|
||||||
|
|
||||||
|
@public_bp.route('/contact')
|
||||||
|
def contact():
|
||||||
|
"""Contact page"""
|
||||||
|
return render_template('public/contact.html')
|
||||||
|
|
||||||
|
@public_bp.route('/status')
|
||||||
|
def status():
|
||||||
|
"""Status page"""
|
||||||
|
return render_template('public/status.html')
|
||||||
|
|
||||||
|
@public_bp.route('/security')
|
||||||
|
def security():
|
||||||
|
"""Security page"""
|
||||||
|
return render_template('public/security.html')
|
||||||
|
|
||||||
|
@public_bp.route('/privacy')
|
||||||
|
def privacy():
|
||||||
|
"""Privacy Policy page"""
|
||||||
|
return render_template('public/privacy.html')
|
||||||
|
|
||||||
|
@public_bp.route('/terms')
|
||||||
|
def terms():
|
||||||
|
"""Terms of Service page"""
|
||||||
|
return render_template('public/terms.html')
|
||||||
|
|
||||||
|
@public_bp.route('/gdpr')
|
||||||
|
def gdpr():
|
||||||
|
"""GDPR page"""
|
||||||
|
return render_template('public/gdpr.html')
|
||||||
|
|
||||||
|
@public_bp.route('/compliance')
|
||||||
|
def compliance():
|
||||||
|
"""Compliance page"""
|
||||||
|
return render_template('public/compliance.html')
|
||||||
@@ -1,22 +1,48 @@
|
|||||||
|
/* Enhanced Homepage Styles */
|
||||||
.navbar {
|
.navbar {
|
||||||
background-color: var(--primary-color) !important;
|
background: var(--white) !important;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.scrolled {
|
||||||
|
background: var(--white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-section {
|
.hero-section {
|
||||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 100px 0;
|
padding: 120px 0 100px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-section {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
padding: 80px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-card {
|
.feature-card {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 15px;
|
||||||
transition: transform 0.3s;
|
transition: all 0.3s ease;
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 5px 15px var(--shadow-color);
|
||||||
|
background: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-card:hover {
|
.feature-card:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 15px 35px var(--shadow-color-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-icon {
|
.feature-icon {
|
||||||
@@ -25,30 +51,222 @@
|
|||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.testimonial-card {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: 0 5px 15px var(--shadow-color);
|
||||||
|
margin: 20px 0;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card {
|
||||||
|
border: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 5px 15px var(--shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px var(--shadow-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card.border-primary {
|
||||||
|
border: 2px solid var(--primary-color) !important;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background-color: var(--primary-color);
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
border-color: var(--primary-color);
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 12px 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
background-color: var(--primary-light);
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
|
||||||
border-color: var(--primary-light);
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 15px var(--primary-opacity-15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline-primary {
|
.btn-outline-primary {
|
||||||
|
border: 2px solid var(--primary-color);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
border-color: var(--primary-color);
|
border-radius: 25px;
|
||||||
|
padding: 12px 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline-primary:hover {
|
.btn-outline-primary:hover {
|
||||||
background-color: var(--primary-color);
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
border-color: var(--primary-color);
|
border-color: var(--primary-color);
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
.btn-light {
|
||||||
background-color: var(--primary-color) !important;
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 12px 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-light:hover {
|
||||||
|
background: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-light {
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||||
|
color: white;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 12px 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-light:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-color: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-link {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
opacity: 0.3;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-link:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-link a {
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
box-shadow: 0 2px 10px var(--shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
color: var(--secondary-color) !important;
|
color: rgba(255, 255, 255, 0.8) !important;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth scrolling */
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero-section {
|
||||||
|
padding: 100px 0 80px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-3 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-5 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card.border-primary {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Feature icon backgrounds */
|
||||||
|
.feature-icon-bg {
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats section text colors */
|
||||||
|
.stats-section .h2 {
|
||||||
|
color: var(--primary-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-section .text-muted {
|
||||||
|
color: var(--text-muted) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pricing card highlights */
|
||||||
|
.pricing-card.border-primary {
|
||||||
|
border: 2px solid var(--primary-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card .card-header {
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
color: white;
|
||||||
|
border-radius: 15px 15px 0 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade in animations */
|
||||||
|
.fade-in {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
transition: all 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--primary-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--primary-light);
|
||||||
}
|
}
|
||||||
58
templates/components/footer_nav.html
Normal file
58
templates/components/footer_nav.html
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
<!-- Reusable Footer Component -->
|
||||||
|
<footer class="py-5" style="background-color: var(--text-dark); color: var(--white);">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4 mb-4">
|
||||||
|
<h5 class="mb-3" style="color: var(--white);"><i class="fas fa-cube me-2"></i>DocuPulse</h5>
|
||||||
|
<p style="color: var(--border-light);">Enterprise document management platform designed for modern businesses. Secure, scalable, and intelligent.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 mb-4">
|
||||||
|
<h6 class="mb-3" style="color: var(--white);">Product</h6>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><a href="#features" style="color: var(--border-light); text-decoration: none;">Features</a></li>
|
||||||
|
<li><a href="#pricing" style="color: var(--border-light); text-decoration: none;">Pricing</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 mb-4">
|
||||||
|
<h6 class="mb-3" style="color: var(--white);">Company</h6>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">About</a></li>
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Blog</a></li>
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Careers</a></li>
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Press</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 mb-4">
|
||||||
|
<h6 class="mb-3" style="color: var(--white);">Support</h6>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Help Center</a></li>
|
||||||
|
<li><a href="#contact" style="color: var(--border-light); text-decoration: none;">Contact</a></li>
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Status</a></li>
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Security</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 mb-4">
|
||||||
|
<h6 class="mb-3" style="color: var(--white);">Legal</h6>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Privacy</a></li>
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Terms</a></li>
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">GDPR</a></li>
|
||||||
|
<li><a href="#" style="color: var(--border-light); text-decoration: none;">Compliance</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="my-4" style="border-color: var(--border-color);">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<p class="mb-0" style="color: var(--border-light);">© 2024 DocuPulse. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 text-md-end">
|
||||||
|
<div class="d-flex gap-3 justify-content-md-end">
|
||||||
|
<a href="#" style="color: var(--border-light);"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a href="#" style="color: var(--border-light);"><i class="fab fa-linkedin"></i></a>
|
||||||
|
<a href="#" style="color: var(--border-light);"><i class="fab fa-github"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
60
templates/components/header_nav.html
Normal file
60
templates/components/header_nav.html
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<!-- Reusable Header Navigation Component -->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 1030; border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand fw-bold" href="/" style="color: var(--primary-color);">
|
||||||
|
<i class="fas fa-cube me-2"></i>DocuPulse
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
|
<ul class="navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" style="color: var(--text-dark); font-weight: 500;">
|
||||||
|
Product
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" style="background-color: var(--white); border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);">
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.features') }}" style="color: var(--text-dark);">Features</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.pricing') }}" style="color: var(--text-dark);">Pricing</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" style="color: var(--text-dark); font-weight: 500;">
|
||||||
|
Company
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" style="background-color: var(--white); border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);">
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.about') }}" style="color: var(--text-dark);">About</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.blog') }}" style="color: var(--text-dark);">Blog</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.careers') }}" style="color: var(--text-dark);">Careers</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.press') }}" style="color: var(--text-dark);">Press</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" style="color: var(--text-dark); font-weight: 500;">
|
||||||
|
Support
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" style="background-color: var(--white); border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);">
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.help_center') }}" style="color: var(--text-dark);">Help Center</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.contact') }}" style="color: var(--text-dark);">Contact</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.status') }}" style="color: var(--text-dark);">Status</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.security') }}" style="color: var(--text-dark);">Security</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" style="color: var(--text-dark); font-weight: 500;">
|
||||||
|
Legal
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" style="background-color: var(--white); border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);">
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.privacy') }}" style="color: var(--text-dark);">Privacy</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.terms') }}" style="color: var(--text-dark);">Terms</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.gdpr') }}" style="color: var(--text-dark);">GDPR</a></li>
|
||||||
|
<li><a class="dropdown-item" href="{{ url_for('public.compliance') }}" style="color: var(--text-dark);">Compliance</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Spacer to prevent content from being hidden behind fixed header -->
|
||||||
|
<div style="height: 63px;"></div>
|
||||||
@@ -3,70 +3,196 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>DocuPulse - Legal Document Management</title>
|
<title>DocuPulse - Enterprise Document Management Platform</title>
|
||||||
|
<meta name="description" content="Secure, intelligent document management for modern enterprises. Streamline workflows, enhance collaboration, and protect your data with DocuPulse.">
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}?v={{ 'css/home.css'|asset_version }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}?v={{ 'css/home.css'|asset_version }}">
|
||||||
|
<style>
|
||||||
|
.admin-link {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
opacity: 0.3;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.admin-link:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.admin-link a {
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.feature-card {
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
border: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 30px var(--shadow-color);
|
||||||
|
}
|
||||||
|
.hero-section {
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
.stats-section {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.testimonial-card {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: 0 5px 15px var(--shadow-color);
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.pricing-card {
|
||||||
|
border: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
.pricing-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation dropdown styles */
|
||||||
|
.dropdown:hover .dropdown-menu {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
color: var(--primary-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item:hover {
|
||||||
|
background-color: var(--primary-bg-light) !important;
|
||||||
|
color: var(--primary-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px var(--shadow-color);
|
||||||
|
background-color: var(--white);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Navigation -->
|
{% include 'components/header_nav.html' %}
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
||||||
<div class="container">
|
|
||||||
<a class="navbar-brand" href="/">DocuPulse</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
|
||||||
<ul class="navbar-nav ms-auto">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="{{ url_for('auth.login') }}">Login</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="{{ url_for('auth.register') }}">Register</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
<h1 class="display-4 mb-4">Streamline Your Legal Document Management</h1>
|
<h1 class="display-3 fw-bold mb-4">Enterprise Document Management<br>Made Simple</h1>
|
||||||
<p class="lead mb-5">Secure, efficient, and intelligent document handling for modern law practices</p>
|
<p class="lead mb-5 fs-4">Secure, intelligent, and scalable document management platform designed for modern enterprises. Streamline workflows, enhance collaboration, and protect your data.</p>
|
||||||
<a href="{{ url_for('auth.register') }}" class="btn btn-light btn-lg">Get Started</a>
|
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||||
|
<a href="#contact" class="btn btn-light btn-lg px-5 py-3">
|
||||||
|
<i class="fas fa-rocket me-2"></i>Get Started
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="btn btn-outline-light btn-lg px-5 py-3">
|
||||||
|
<i class="fas fa-play me-2"></i>Learn More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features Section -->
|
<!-- Features Section -->
|
||||||
<section class="py-5">
|
<section id="features" class="py-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center mb-5">Key Features</h2>
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="display-5 fw-bold mb-3">Powerful Features</h2>
|
||||||
|
<p class="lead text-muted">Everything you need to manage documents efficiently and securely</p>
|
||||||
|
</div>
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card feature-card h-100 p-4">
|
<div class="card feature-card h-100 p-4">
|
||||||
<div class="card-body text-center">
|
<div class="card-body text-center">
|
||||||
<i class="fas fa-shield-alt feature-icon"></i>
|
<div class="feature-icon-bg">
|
||||||
<h3 class="h5">Secure Storage</h3>
|
<i class="fas fa-door-open fa-2x"></i>
|
||||||
<p class="text-muted">Bank-level encryption and secure cloud storage for your sensitive legal documents</p>
|
</div>
|
||||||
|
<h3 class="h5 fw-bold">Room-Based Workspaces</h3>
|
||||||
|
<p class="text-muted">Create isolated collaboration environments with granular permissions, file storage, and real-time messaging for teams and projects.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card feature-card h-100 p-4">
|
<div class="card feature-card h-100 p-4">
|
||||||
<div class="card-body text-center">
|
<div class="card-body text-center">
|
||||||
<i class="fas fa-search feature-icon"></i>
|
<div class="feature-icon-bg">
|
||||||
<h3 class="h5">Smart Search</h3>
|
<i class="fas fa-comments fa-2x"></i>
|
||||||
<p class="text-muted">Advanced search capabilities to find any document in seconds</p>
|
</div>
|
||||||
|
<h3 class="h5 fw-bold">Real-Time Messaging</h3>
|
||||||
|
<p class="text-muted">Advanced chat system with file attachments, member management, conversation history, and instant notifications.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card feature-card h-100 p-4">
|
<div class="card feature-card h-100 p-4">
|
||||||
<div class="card-body text-center">
|
<div class="card-body text-center">
|
||||||
<i class="fas fa-users feature-icon"></i>
|
<div class="feature-icon-bg">
|
||||||
<h3 class="h5">Collaboration</h3>
|
<i class="fas fa-folder-tree fa-2x"></i>
|
||||||
<p class="text-muted">Seamless collaboration tools for legal teams and clients</p>
|
</div>
|
||||||
|
<h3 class="h5 fw-bold">Advanced File Management</h3>
|
||||||
|
<p class="text-muted">Upload, organize, search, and manage files with hierarchical folders, version control, and comprehensive metadata tracking.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card feature-card h-100 p-4">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<div class="feature-icon-bg">
|
||||||
|
<i class="fas fa-bell fa-2x"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold">Smart Notifications</h3>
|
||||||
|
<p class="text-muted">Comprehensive notification system with customizable email templates, SMTP integration, and real-time alerts.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card feature-card h-100 p-4">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<div class="feature-icon-bg">
|
||||||
|
<i class="fas fa-user-shield fa-2x"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold">Role-Based Security</h3>
|
||||||
|
<p class="text-muted">Granular permission system with user roles, access controls, and comprehensive audit logging for security compliance.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card feature-card h-100 p-4">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<div class="feature-icon-bg">
|
||||||
|
<i class="fas fa-palette fa-2x"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold">Dynamic Theming</h3>
|
||||||
|
<p class="text-muted">Customizable color system with CSS custom properties, allowing instant theme changes and brand customization.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,13 +200,246 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Testimonials Section -->
|
||||||
<footer class="text-light py-4">
|
<section class="py-5" style="background-color: var(--bg-color);">
|
||||||
<div class="container text-center">
|
<div class="container">
|
||||||
<p class="mb-0">© 2024 DocuPulse. All rights reserved.</p>
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="display-5 fw-bold mb-3">Trusted by Industry Leaders</h2>
|
||||||
|
<p class="lead text-muted">See what our clients say about DocuPulse</p>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="testimonial-card">
|
||||||
|
<div class="mb-3">
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
</div>
|
||||||
|
<p class="mb-3">"The room-based workspace system is brilliant. Each project gets its own isolated environment with files and messaging. It's like having separate offices for every team without the overhead."</p>
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="feature-icon-bg me-3" style="width: 40px; height: 40px;">
|
||||||
|
<i class="fas fa-user"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Sarah Johnson</strong><br>
|
||||||
|
<small class="text-muted">Project Manager, TechCorp</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="testimonial-card">
|
||||||
|
<div class="mb-3">
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
</div>
|
||||||
|
<p class="mb-3">"The file management is intuitive and powerful. We can organize everything in folders, search across all our rooms, and the real-time messaging keeps everyone connected. Perfect for our distributed team."</p>
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="feature-icon-bg me-3" style="width: 40px; height: 40px;">
|
||||||
|
<i class="fas fa-user"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Michael Chen</strong><br>
|
||||||
|
<small class="text-muted">Operations Director, FinancePro</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="testimonial-card">
|
||||||
|
<div class="mb-3">
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
<i class="fas fa-star text-warning"></i>
|
||||||
|
</div>
|
||||||
|
<p class="mb-3">"The granular permissions are game-changing. We can give different access levels to different team members in each room. Plus, the notification system keeps everyone updated without being overwhelming."</p>
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="feature-icon-bg me-3" style="width: 40px; height: 40px;">
|
||||||
|
<i class="fas fa-user"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Emily Rodriguez</strong><br>
|
||||||
|
<small class="text-muted">IT Manager, GlobalLaw</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pricing Section -->
|
||||||
|
<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">
|
||||||
|
<div class="card-body text-center p-5">
|
||||||
|
<h3 class="card-title">Starter</h3>
|
||||||
|
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">$29<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>
|
||||||
|
<a href="#contact" class="btn btn-outline-primary w-100">Get Started</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card pricing-card h-100 border-primary">
|
||||||
|
<div class="card-body text-center p-5">
|
||||||
|
<div class="badge mb-2" style="background: var(--primary-color);">Most Popular</div>
|
||||||
|
<h3 class="card-title">Professional</h3>
|
||||||
|
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">$99<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>
|
||||||
|
<a href="#contact" class="btn btn-primary w-100">Get Started</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card pricing-card h-100">
|
||||||
|
<div class="card-body text-center p-5">
|
||||||
|
<h3 class="card-title">Enterprise</h3>
|
||||||
|
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">$299<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>
|
||||||
|
<a href="#contact" class="btn btn-outline-primary w-100">Get Started</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card pricing-card h-100">
|
||||||
|
<div class="card-body text-center p-5">
|
||||||
|
<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>
|
||||||
|
<a href="#contact" class="btn btn-outline-primary w-100">Contact Sales</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="contact" class="py-5" style="background-color: var(--bg-color);">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-8 text-center">
|
||||||
|
<h2 class="display-5 fw-bold mb-3">Ready to Get Started?</h2>
|
||||||
|
<p class="lead text-muted mb-5">Contact us today to learn how DocuPulse can transform your document management</p>
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<i class="fas fa-envelope fa-2x mb-3" style="color: var(--primary-color);"></i>
|
||||||
|
<h5>Email Us</h5>
|
||||||
|
<p class="text-muted">info@docupulse.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<i class="fas fa-phone fa-2x mb-3" style="color: var(--primary-color);"></i>
|
||||||
|
<h5>Call Us</h5>
|
||||||
|
<p class="text-muted">+1 (555) 123-4567</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<i class="fas fa-clock fa-2x mb-3" style="color: var(--primary-color);"></i>
|
||||||
|
<h5>Support Hours</h5>
|
||||||
|
<p class="text-muted">24/7 Available</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{% include 'components/footer_nav.html' %}
|
||||||
|
|
||||||
|
<!-- Hidden Admin Link -->
|
||||||
|
<div class="admin-link">
|
||||||
|
<a href="{{ url_for('auth.login') }}" title="Admin Login">
|
||||||
|
<i class="fas fa-cog"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script>
|
||||||
|
// Smooth scrolling for anchor links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fade in animation on scroll
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(function(entries) {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe elements for fade-in animation
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const fadeElements = document.querySelectorAll('.feature-card, .testimonial-card, .pricing-card');
|
||||||
|
fadeElements.forEach(el => {
|
||||||
|
el.classList.add('fade-in');
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add loading animation
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
document.body.classList.add('loaded');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
257
templates/public/contact.html
Normal file
257
templates/public/contact.html
Normal file
@@ -0,0 +1,257 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Contact Us - DocuPulse</title>
|
||||||
|
<meta name="description" content="Get in touch with the DocuPulse team. We're here to help with your enterprise document management needs.">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
|
||||||
|
<style>
|
||||||
|
.contact-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.contact-card {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 40px 30px;
|
||||||
|
box-shadow: 0 5px 15px var(--shadow-color);
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.contact-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
.hero-section {
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 120px 0 80px 0;
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
padding: 12px 15px;
|
||||||
|
}
|
||||||
|
.form-control:focus {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
box-shadow: 0 0 0 0.2rem var(--primary-opacity-15);
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 12px 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% include 'components/header_nav.html' %}
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero-section">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1 class="display-4 fw-bold mb-4">Get in Touch</h1>
|
||||||
|
<p class="lead fs-5">We're here to help with your enterprise document management needs</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Information -->
|
||||||
|
<section class="contact-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row g-4 mb-5">
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="contact-card text-center">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="fw-bold mb-3">Email Us</h4>
|
||||||
|
<p class="text-muted mb-3">Get in touch with our support team</p>
|
||||||
|
<a href="mailto:info@docupulse.com" class="text-decoration-none" style="color: var(--primary-color);">
|
||||||
|
info@docupulse.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="contact-card text-center">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<i class="fas fa-phone"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="fw-bold mb-3">Call Us</h4>
|
||||||
|
<p class="text-muted mb-3">Speak with our sales team</p>
|
||||||
|
<a href="tel:+15551234567" class="text-decoration-none" style="color: var(--primary-color);">
|
||||||
|
+1 (555) 123-4567
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="contact-card text-center">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<i class="fas fa-clock"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="fw-bold mb-3">Support Hours</h4>
|
||||||
|
<p class="text-muted mb-3">We're here when you need us</p>
|
||||||
|
<span style="color: var(--primary-color);">24/7 Available</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Form -->
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="contact-card">
|
||||||
|
<h2 class="text-center mb-4">Send us a Message</h2>
|
||||||
|
<form>
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="firstName" class="form-label">First Name *</label>
|
||||||
|
<input type="text" class="form-control" id="firstName" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="lastName" class="form-label">Last Name *</label>
|
||||||
|
<input type="text" class="form-control" id="lastName" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="email" class="form-label">Email Address *</label>
|
||||||
|
<input type="email" class="form-control" id="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="phone" class="form-label">Phone Number</label>
|
||||||
|
<input type="tel" class="form-control" id="phone">
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label for="company" class="form-label">Company</label>
|
||||||
|
<input type="text" class="form-control" id="company">
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label for="subject" class="form-label">Subject *</label>
|
||||||
|
<select class="form-control" id="subject" required>
|
||||||
|
<option value="">Select a subject</option>
|
||||||
|
<option value="sales">Sales Inquiry</option>
|
||||||
|
<option value="support">Technical Support</option>
|
||||||
|
<option value="demo">Request Demo</option>
|
||||||
|
<option value="pricing">Pricing Questions</option>
|
||||||
|
<option value="partnership">Partnership</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label for="message" class="form-label">Message *</label>
|
||||||
|
<textarea class="form-control" id="message" rows="5" required placeholder="Tell us how we can help you..."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" id="newsletter">
|
||||||
|
<label class="form-check-label" for="newsletter">
|
||||||
|
Subscribe to our newsletter for updates and insights
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg px-5">
|
||||||
|
<i class="fas fa-paper-plane me-2"></i>Send Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Office Locations -->
|
||||||
|
<section class="contact-section" style="background-color: var(--bg-color);">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="display-5 fw-bold mb-3">Our Offices</h2>
|
||||||
|
<p class="lead text-muted">Visit us at one of our locations</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="contact-card">
|
||||||
|
<h4 class="fw-bold mb-3">
|
||||||
|
<i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>
|
||||||
|
Headquarters
|
||||||
|
</h4>
|
||||||
|
<p class="text-muted mb-3">
|
||||||
|
123 Business Street<br>
|
||||||
|
Suite 100<br>
|
||||||
|
San Francisco, CA 94105<br>
|
||||||
|
United States
|
||||||
|
</p>
|
||||||
|
<a href="tel:+15551234567" class="text-decoration-none" style="color: var(--primary-color);">
|
||||||
|
<i class="fas fa-phone me-2"></i>+1 (555) 123-4567
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="contact-card">
|
||||||
|
<h4 class="fw-bold mb-3">
|
||||||
|
<i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>
|
||||||
|
European Office
|
||||||
|
</h4>
|
||||||
|
<p class="text-muted mb-3">
|
||||||
|
456 Innovation Avenue<br>
|
||||||
|
Floor 3<br>
|
||||||
|
London, UK SW1A 1AA<br>
|
||||||
|
United Kingdom
|
||||||
|
</p>
|
||||||
|
<a href="tel:+442071234567" class="text-decoration-none" style="color: var(--primary-color);">
|
||||||
|
<i class="fas fa-phone me-2"></i>+44 20 7123 4567
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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.pricing') }}" class="btn btn-primary btn-lg px-5 py-3">
|
||||||
|
<i class="fas fa-rocket me-2"></i>View Pricing
|
||||||
|
</a>
|
||||||
|
<a href="{{ url_for('public.features') }}" class="btn btn-outline-primary btn-lg px-5 py-3">
|
||||||
|
<i class="fas fa-play me-2"></i>Learn More
|
||||||
|
</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>
|
||||||
|
<script>
|
||||||
|
// Form submission handling
|
||||||
|
document.querySelector('form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get form data
|
||||||
|
const formData = new FormData(this);
|
||||||
|
const data = Object.fromEntries(formData);
|
||||||
|
|
||||||
|
// Show success message (in a real app, this would send to server)
|
||||||
|
alert('Thank you for your message! We\'ll get back to you soon.');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
304
templates/public/features.html
Normal file
304
templates/public/features.html
Normal file
@@ -0,0 +1,304 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Features - DocuPulse</title>
|
||||||
|
<meta name="description" content="Discover the powerful features of DocuPulse - the enterprise document management platform designed for modern businesses.">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
|
||||||
|
<style>
|
||||||
|
.feature-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.feature-card {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 40px 30px;
|
||||||
|
box-shadow: 0 5px 15px var(--shadow-color);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 15px 35px var(--shadow-color-light);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 30px;
|
||||||
|
color: white;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.hero-section {
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 120px 0 80px 0;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
color: var(--text-dark);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.section-subtitle {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% include 'components/header_nav.html' %}
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero-section">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1 class="display-4 fw-bold mb-4">Powerful Features for Modern Enterprises</h1>
|
||||||
|
<p class="lead fs-5">Discover how DocuPulse transforms document management with intelligent workflows, secure collaboration, and scalable architecture.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Core Features -->
|
||||||
|
<section class="feature-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="section-title">Core Features</h2>
|
||||||
|
<p class="section-subtitle">Everything you need to manage documents efficiently and securely</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-door-open"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Room-Based Workspaces</h3>
|
||||||
|
<p class="text-muted">Create isolated collaboration environments with granular permissions, file storage, and real-time messaging for teams and projects.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Isolated team spaces</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Granular permissions</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Project organization</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-comments"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Real-Time Messaging</h3>
|
||||||
|
<p class="text-muted">Advanced chat system with file attachments, member management, conversation history, and instant notifications.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>File attachments</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Member management</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Conversation history</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-folder-tree"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Advanced File Management</h3>
|
||||||
|
<p class="text-muted">Upload, organize, search, and manage files with hierarchical folders, version control, and comprehensive metadata tracking.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Hierarchical folders</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Version control</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Metadata tracking</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Security & Compliance -->
|
||||||
|
<section class="feature-section" style="background-color: var(--bg-color);">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="section-title">Security & Compliance</h2>
|
||||||
|
<p class="section-subtitle">Enterprise-grade security with comprehensive compliance features</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-user-shield"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Role-Based Security</h3>
|
||||||
|
<p class="text-muted">Granular permission system with user roles, access controls, and comprehensive audit logging for security compliance.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>User roles & permissions</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Access controls</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Audit logging</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-lock"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Data Protection</h3>
|
||||||
|
<p class="text-muted">End-to-end encryption, secure file storage, and comprehensive data protection measures to keep your information safe.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>End-to-end encryption</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Secure storage</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Data protection</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-shield-alt"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Compliance Ready</h3>
|
||||||
|
<p class="text-muted">Built-in compliance features for GDPR, HIPAA, and other regulatory requirements with automated compliance reporting.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>GDPR compliance</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>HIPAA ready</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Automated reporting</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Collaboration & Communication -->
|
||||||
|
<section class="feature-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="section-title">Collaboration & Communication</h2>
|
||||||
|
<p class="section-subtitle">Enhanced team collaboration with intelligent communication tools</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-bell"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Smart Notifications</h3>
|
||||||
|
<p class="text-muted">Comprehensive notification system with customizable email templates, SMTP integration, and real-time alerts.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Customizable templates</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>SMTP integration</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Real-time alerts</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Team Management</h3>
|
||||||
|
<p class="text-muted">Efficient team management with member roles, permissions, and collaborative workflows for seamless project execution.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Member roles</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Collaborative workflows</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Project execution</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-star"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">File Organization</h3>
|
||||||
|
<p class="text-muted">Advanced file organization with starring, tagging, and intelligent search capabilities for quick access to important documents.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>File starring</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Intelligent search</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Quick access</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Customization & Integration -->
|
||||||
|
<section class="feature-section" style="background-color: var(--bg-color);">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="section-title">Customization & Integration</h2>
|
||||||
|
<p class="section-subtitle">Flexible platform that adapts to your business needs</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-palette"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Dynamic Theming</h3>
|
||||||
|
<p class="text-muted">Customizable color system with CSS custom properties, allowing instant theme changes and brand customization.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Custom colors</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Brand customization</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Instant changes</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-cogs"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Flexible Configuration</h3>
|
||||||
|
<p class="text-muted">Comprehensive settings and configuration options to tailor the platform to your specific business requirements.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Custom settings</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Business requirements</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Flexible options</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<i class="fas fa-chart-line"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 fw-bold mb-3">Analytics & Insights</h3>
|
||||||
|
<p class="text-muted">Comprehensive analytics and reporting tools to track usage, performance, and user engagement across your platform.</p>
|
||||||
|
<ul class="list-unstyled mt-3">
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Usage tracking</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>Performance metrics</li>
|
||||||
|
<li><i class="fas fa-check text-success me-2"></i>User engagement</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">Experience the power of DocuPulse for your enterprise document management needs</p>
|
||||||
|
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||||
|
<a href="{{ url_for('public.pricing') }}" class="btn btn-primary btn-lg px-5 py-3">
|
||||||
|
<i class="fas fa-rocket me-2"></i>View Pricing
|
||||||
|
</a>
|
||||||
|
<a href="{{ url_for('public.contact') }}" class="btn btn-outline-primary btn-lg px-5 py-3">
|
||||||
|
<i class="fas fa-envelope me-2"></i>Contact 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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
357
templates/public/pricing.html
Normal file
357
templates/public/pricing.html
Normal file
@@ -0,0 +1,357 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Pricing - DocuPulse</title>
|
||||||
|
<meta name="description" content="Choose the perfect DocuPulse plan for your enterprise. Transparent pricing with flexible options for teams of all sizes.">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
|
||||||
|
<style>
|
||||||
|
.pricing-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.pricing-card {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 40px 30px;
|
||||||
|
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);
|
||||||
|
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;
|
||||||
|
padding: 120px 0 80px 0;
|
||||||
|
}
|
||||||
|
.faq-section {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
}
|
||||||
|
.faq-item {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
box-shadow: 0 2px 5px var(--shadow-color);
|
||||||
|
}
|
||||||
|
.faq-question {
|
||||||
|
padding: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.faq-answer {
|
||||||
|
padding: 1.5rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% include 'components/header_nav.html' %}
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero-section">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1 class="display-4 fw-bold mb-4">Simple, Transparent Pricing</h1>
|
||||||
|
<p class="lead fs-5">Choose the perfect plan for your enterprise. No hidden fees, no surprises.</p>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- FAQ Section -->
|
||||||
|
<section class="pricing-section faq-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="display-5 fw-bold mb-3">Frequently Asked Questions</h2>
|
||||||
|
<p class="lead text-muted">Everything you need to know about our pricing</p>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question" onclick="toggleFAQ(this)">
|
||||||
|
<i class="fas fa-chevron-down me-2"></i>
|
||||||
|
Can I change my plan at any time?
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer" style="display: none;">
|
||||||
|
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>
|
||||||
|
What payment methods do you accept?
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer" style="display: none;">
|
||||||
|
We accept all major credit cards, PayPal, and bank transfers for annual plans. Enterprise customers can also pay by invoice.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question" onclick="toggleFAQ(this)">
|
||||||
|
<i class="fas fa-chevron-down me-2"></i>
|
||||||
|
Do you offer discounts for annual billing?
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer" style="display: none;">
|
||||||
|
Yes, we offer a 20% discount when you choose annual billing instead of monthly billing.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question" onclick="toggleFAQ(this)">
|
||||||
|
<i class="fas fa-chevron-down me-2"></i>
|
||||||
|
What happens if I exceed my storage limit?
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer" style="display: none;">
|
||||||
|
You'll receive a notification when you're approaching your limit. You can either upgrade your plan or purchase additional storage.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<script>
|
||||||
|
function toggleFAQ(element) {
|
||||||
|
const answer = element.nextElementSibling;
|
||||||
|
const icon = element.querySelector('i');
|
||||||
|
|
||||||
|
if (answer.style.display === 'none') {
|
||||||
|
answer.style.display = 'block';
|
||||||
|
icon.classList.remove('fa-chevron-down');
|
||||||
|
icon.classList.add('fa-chevron-up');
|
||||||
|
} else {
|
||||||
|
answer.style.display = 'none';
|
||||||
|
icon.classList.remove('fa-chevron-up');
|
||||||
|
icon.classList.add('fa-chevron-down');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user