634 lines
25 KiB
HTML
634 lines
25 KiB
HTML
<!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>
|
|
/* Enhanced Features Page Styles */
|
|
.hero-section {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
color: white;
|
|
padding: 120px 0 80px 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;
|
|
}
|
|
|
|
.feature-section {
|
|
padding: 100px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.feature-section:nth-child(even) {
|
|
background: linear-gradient(135deg, var(--bg-color) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--white);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 15px 35px var(--shadow-color);
|
|
transition: all 0.4s ease;
|
|
height: 100%;
|
|
border: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 25px 50px var(--shadow-color-light);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
border-radius: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 25px;
|
|
color: white;
|
|
font-size: 2rem;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover .feature-icon {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.feature-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -5px;
|
|
left: -5px;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
border-radius: 25px;
|
|
z-index: -1;
|
|
opacity: 0.2;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover .feature-icon::after {
|
|
transform: scale(1.2);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.feature-showcase {
|
|
background: linear-gradient(135deg, var(--primary-bg-light) 0%, var(--secondary-bg-light) 100%);
|
|
border-radius: 25px;
|
|
padding: 60px 40px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 40px var(--shadow-color);
|
|
}
|
|
|
|
.feature-showcase::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(180deg); }
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.section-title {
|
|
color: var(--text-dark);
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.section-subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 1.1rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.feature-highlight {
|
|
background: linear-gradient(135deg, var(--white) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
border: 2px solid transparent;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-highlight::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 0;
|
|
}
|
|
|
|
.feature-highlight:hover::before {
|
|
opacity: 0.05;
|
|
}
|
|
|
|
.feature-highlight > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.feature-highlight:hover {
|
|
border-color: var(--primary-color);
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 35px var(--shadow-color);
|
|
}
|
|
|
|
.interactive-demo {
|
|
background: var(--white);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 15px 35px var(--shadow-color);
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 400px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.interactive-demo::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(45deg, transparent 30%, rgba(var(--primary-color-rgb), 0.05) 50%, transparent 70%);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.6s ease;
|
|
}
|
|
|
|
.interactive-demo:hover::before {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.demo-placeholder {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.demo-placeholder i {
|
|
font-size: 4rem;
|
|
margin-bottom: 20px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.stats-section {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
color: white;
|
|
padding: 80px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-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;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 15px 40px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Unified button styling */
|
|
.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;
|
|
}
|
|
|
|
/* Animation classes */
|
|
.fade-in-up {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.6s ease;
|
|
}
|
|
|
|
.fade-in-up.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.stagger-delay-1 { transition-delay: 0.1s; }
|
|
.stagger-delay-2 { transition-delay: 0.2s; }
|
|
.stagger-delay-3 { transition-delay: 0.3s; }
|
|
.stagger-delay-4 { transition-delay: 0.4s; }
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-section {
|
|
padding: 100px 0 60px 0;
|
|
}
|
|
|
|
.feature-section {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.feature-showcase {
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{% include 'components/header_nav.html' %}
|
|
|
|
<!-- Hero Section -->
|
|
{% with
|
|
title="Powerful Features for Modern Enterprises",
|
|
description="Discover how DocuPulse transforms document management with intelligent workflows, secure collaboration, and scalable architecture.",
|
|
title_size="4",
|
|
description_size="5",
|
|
buttons=[
|
|
{
|
|
'type': 'modal',
|
|
'target': '#explainerVideoModal',
|
|
'text': 'Watch Demo',
|
|
'icon': 'fas fa-play',
|
|
'style': 'outline-light'
|
|
}
|
|
]
|
|
%}
|
|
{% include 'components/hero_section.html' %}
|
|
{% endwith %}
|
|
|
|
<!-- Key Features Grid -->
|
|
<section class="feature-section">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2 class="section-title gradient-text">Core Features</h2>
|
|
<p class="section-subtitle">Everything you need to revolutionize your document management workflow</p>
|
|
</div>
|
|
<div class="feature-grid">
|
|
<div class="feature-card fade-in-up">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-door-open"></i>
|
|
</div>
|
|
<h3 class="h4 fw-bold mb-3">Room-Based Workspaces</h3>
|
|
<p class="text-muted mb-4">Create isolated collaboration environments with granular permissions, file storage, and real-time messaging for teams and projects.</p>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Isolated team spaces</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Granular permissions</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Real-time messaging</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Integrated file storage</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in-up stagger-delay-1">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-comments"></i>
|
|
</div>
|
|
<h3 class="h4 fw-bold mb-3">Client Document Requests</h3>
|
|
<p class="text-muted mb-4">Streamlined communication system for requesting documents from clients with file attachments and conversation tracking.</p>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Document workflows</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Conversation tracking</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>File attachments</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Status notifications</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in-up stagger-delay-2">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-folder-tree"></i>
|
|
</div>
|
|
<h3 class="h4 fw-bold mb-3">Advanced File Management</h3>
|
|
<p class="text-muted mb-4">Upload, organize, search, and manage files with hierarchical folders and comprehensive metadata tracking.</p>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Hierarchical folders</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Advanced search</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Metadata tracking</li>
|
|
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>File versioning</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Demo Section -->
|
|
<section class="feature-section" style="background-color: var(--bg-color);">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="feature-showcase">
|
|
<h2 class="section-title gradient-text">See It In Action</h2>
|
|
<p class="section-subtitle">Experience the intuitive interface and powerful features that make DocuPulse the choice for modern enterprises.</p>
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="text-center p-3">
|
|
<i class="fas fa-users fa-2x mb-2" style="color: var(--primary-color);"></i>
|
|
<h6 class="fw-bold">Team Collaboration</h6>
|
|
<small class="text-muted">Real-time messaging and file sharing</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center p-3">
|
|
<i class="fas fa-shield-alt fa-2x mb-2" style="color: var(--primary-color);"></i>
|
|
<h6 class="fw-bold">Enterprise Security</h6>
|
|
<small class="text-muted">Role-based access controls</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center p-3">
|
|
<i class="fas fa-search fa-2x mb-2" style="color: var(--primary-color);"></i>
|
|
<h6 class="fw-bold">Smart Search</h6>
|
|
<small class="text-muted">Find files instantly</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center p-3">
|
|
<i class="fas fa-bell fa-2x mb-2" style="color: var(--primary-color);"></i>
|
|
<h6 class="fw-bold">Notifications</h6>
|
|
<small class="text-muted">Stay updated in real-time</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="interactive-demo">
|
|
<div class="demo-placeholder">
|
|
<i class="fas fa-laptop"></i>
|
|
<h5 class="fw-bold">Interactive Demo</h5>
|
|
<p>Experience the platform firsthand</p>
|
|
<button class="btn btn-primary btn-lg px-4 py-3">
|
|
<i class="fas fa-play me-2"></i>Launch Demo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Advanced Features -->
|
|
<section class="feature-section">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2 class="section-title gradient-text">Advanced Capabilities</h2>
|
|
<p class="section-subtitle">Enterprise-grade features for complex document management needs</p>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-lg-4">
|
|
<div class="feature-highlight fade-in-up">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-user-shield"></i>
|
|
</div>
|
|
<h3 class="h5 fw-bold mb-3">Security & Compliance</h3>
|
|
<p class="text-muted">Enterprise-grade security with comprehensive compliance features for data protection and regulatory requirements.</p>
|
|
<ul class="list-unstyled mt-3">
|
|
<li><i class="fas fa-check text-success me-2"></i>Role-based access controls</li>
|
|
<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>GDPR and HIPAA compliance</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="feature-highlight fade-in-up stagger-delay-1">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-palette"></i>
|
|
</div>
|
|
<h3 class="h5 fw-bold mb-3">White Labeling</h3>
|
|
<p class="text-muted">Complete brand customization with custom logos, company colors, and personalized branding throughout the platform.</p>
|
|
<ul class="list-unstyled mt-3">
|
|
<li><i class="fas fa-check text-success me-2"></i>Custom company logo</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Brand color customization</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Personalized templates</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="feature-highlight fade-in-up stagger-delay-2">
|
|
<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>Email 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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
{% with stats=[
|
|
{'value': 99.9, 'suffix': '%', 'display': '99.9%', 'label': 'Uptime'},
|
|
{'value': 256, 'suffix': '-bit', 'display': '256-bit', 'label': 'Encryption'},
|
|
{'value': 24, 'suffix': '/7', 'display': '24/7', 'label': 'Support'},
|
|
{'value': 1000, 'suffix': '+', 'display': '1000+', 'label': 'Organizations'}
|
|
] %}
|
|
{% include 'components/animated_numbers.html' %}
|
|
{% endwith %}
|
|
|
|
<!-- 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>
|
|
{% with primary_url=url_for('public.pricing'), primary_icon='fas fa-rocket', primary_text='View Pricing', secondary_url=url_for('public.contact'), secondary_icon='fas fa-envelope', secondary_text='Contact Sales' %}
|
|
{% include 'components/cta_buttons.html' %}
|
|
{% endwith %}
|
|
</div>
|
|
</section>
|
|
|
|
{% include 'components/footer_nav.html' %}
|
|
|
|
<!-- Explainer Video Modal -->
|
|
{% with
|
|
modal_title='DocuPulse Features Overview',
|
|
video_title='Features Demo Video',
|
|
video_placeholder='Video placeholder - Replace with actual features demo video',
|
|
learning_title='What you\'ll see:',
|
|
learning_points=[
|
|
'Room-based workspace creation and management',
|
|
'Document request workflows and client communication',
|
|
'Advanced file management and organization',
|
|
'Security features and permission controls',
|
|
'White labeling and brand customization'
|
|
],
|
|
cta_url=url_for('public.pricing'),
|
|
cta_text='Get Started Now'
|
|
%}
|
|
{% include 'components/explainer_video_modal.html' %}
|
|
{% endwith %}
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Intersection Observer for animations
|
|
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('.fade-in-up');
|
|
fadeElements.forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |