476 lines
20 KiB
HTML
476 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<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 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 }}">
|
||
<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: 120px 0 100px 0;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.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;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.btn-primary:hover {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px var(--primary-opacity-15);
|
||
filter: brightness(1.1);
|
||
}
|
||
.btn-outline-primary {
|
||
border: 2px solid var(--primary-color);
|
||
color: var(--primary-color);
|
||
border-radius: 25px;
|
||
padding: 12px 30px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.btn-outline-primary:hover {
|
||
background: rgba(var(--primary-color-rgb), 0.05);
|
||
border-color: var(--primary-color);
|
||
color: var(--primary-color);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.1);
|
||
}
|
||
.btn-secondary {
|
||
background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
|
||
border: none;
|
||
border-radius: 25px;
|
||
padding: 12px 30px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
color: white;
|
||
}
|
||
.btn-secondary:hover {
|
||
background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
|
||
color: white;
|
||
}
|
||
.btn-light {
|
||
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: rgba(255, 255, 255, 1);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.4);
|
||
}
|
||
.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.15);
|
||
border-color: rgba(255, 255, 255, 1);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
|
||
}
|
||
.btn-lg {
|
||
padding: 15px 40px;
|
||
font-size: 1.1rem;
|
||
}
|
||
.btn-close {
|
||
background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
|
||
border: none;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
opacity: 0.8;
|
||
}
|
||
.btn-close:hover {
|
||
background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
|
||
opacity: 1;
|
||
}
|
||
.btn-close::before {
|
||
content: '×';
|
||
color: white;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
/* Ensure hero buttons are clickable */
|
||
.hero-section .d-flex {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero-section .btn {
|
||
position: relative;
|
||
z-index: 3;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
{% include 'components/header_nav.html' %}
|
||
|
||
<!-- Hero Section -->
|
||
{% with
|
||
title="Enterprise Document Management Made Simple",
|
||
description="Secure, intelligent, and scalable document management platform designed for modern enterprises. Streamline workflows, enhance collaboration, and protect your data.",
|
||
buttons=[
|
||
{
|
||
'type': 'link',
|
||
'url': url_for('public.pricing'),
|
||
'text': 'Get Started',
|
||
'icon': 'fas fa-rocket',
|
||
'style': 'light'
|
||
},
|
||
{
|
||
'type': 'modal',
|
||
'target': '#explainerVideoModal',
|
||
'text': 'Learn More',
|
||
'icon': 'fas fa-play',
|
||
'style': 'outline-light'
|
||
}
|
||
]
|
||
%}
|
||
{% include 'components/hero_section.html' %}
|
||
{% endwith %}
|
||
|
||
<!-- Features Section -->
|
||
<section id="features" class="py-5">
|
||
<div class="container">
|
||
<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="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-door-open fa-2x"></i>
|
||
</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 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-comments fa-2x"></i>
|
||
</div>
|
||
<h3 class="h5 fw-bold">Client Document Requests</h3>
|
||
<p class="text-muted">Streamlined communication system for requesting documents from clients with file attachments and conversation 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-folder-tree fa-2x"></i>
|
||
</div>
|
||
<h3 class="h5 fw-bold">Advanced File Management</h3>
|
||
<p class="text-muted">Upload, organize, search, and manage files with hierarchical folders 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 class="text-center mt-5">
|
||
<a href="{{ url_for('public.features') }}" class="btn btn-outline-primary btn-lg px-5 py-3">
|
||
<i class="fas fa-arrow-right me-2"></i>View All Features
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials Section -->
|
||
<section class="py-5" style="background-color: var(--bg-color);">
|
||
<div class="container">
|
||
<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>
|
||
|
||
<!-- 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>
|
||
{% with primary_url=url_for('public.pricing'), primary_icon='fas fa-rocket', primary_text='Get Started', secondary_url=url_for('public.contact'), secondary_icon='fas fa-envelope', secondary_text='Contact Sales' %}
|
||
{% include 'components/cta_buttons.html' %}
|
||
{% endwith %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{% include 'components/footer_nav.html' %}
|
||
|
||
<!-- Explainer Video Modal -->
|
||
{% with
|
||
modal_title='DocuPulse Overview',
|
||
video_title='Explainer Video',
|
||
video_placeholder='Video placeholder - Replace with actual explainer video',
|
||
learning_title='What you\'ll learn:',
|
||
learning_points=[
|
||
'How DocuPulse streamlines document management',
|
||
'Room-based collaboration features',
|
||
'Security and permission controls',
|
||
'Real-time messaging and notifications'
|
||
],
|
||
cta_url=url_for('public.pricing'),
|
||
cta_text='Get Started Now'
|
||
%}
|
||
{% include 'components/explainer_video_modal.html' %}
|
||
{% endwith %}
|
||
|
||
<!-- Hidden Admin Link -->
|
||
<div class="admin-link">
|
||
<a href="{{ url_for('auth.login') }}" title="Admin Login">
|
||
<i class="fas fa-cog"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<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>
|
||
</html> |