436 lines
19 KiB
HTML
436 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blog - DocuPulse</title>
|
|
<meta name="description" content="Stay updated with the latest insights, tips, and news about document management, enterprise collaboration, and DocuPulse updates.">
|
|
<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>
|
|
.blog-section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.featured-post {
|
|
background: var(--white);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 15px 35px var(--shadow-color);
|
|
transition: transform 0.3s ease;
|
|
height: 100%;
|
|
}
|
|
|
|
.featured-post:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.featured-image {
|
|
height: 250px;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.blog-card {
|
|
background: var(--white);
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 25px var(--shadow-color);
|
|
transition: transform 0.3s ease;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.blog-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.blog-image {
|
|
height: 200px;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.blog-content {
|
|
padding: 25px;
|
|
}
|
|
|
|
.blog-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.blog-category {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
color: white;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.category-card {
|
|
background: var(--white);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
box-shadow: 0 10px 25px var(--shadow-color);
|
|
transition: transform 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.category-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.category-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
border-radius: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 20px;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.newsletter-section {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
color: white;
|
|
padding: 60px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.newsletter-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;
|
|
}
|
|
|
|
.newsletter-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.search-box {
|
|
background: var(--white);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
box-shadow: 0 10px 25px var(--shadow-color);
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.search-input {
|
|
border: none;
|
|
outline: none;
|
|
width: 100%;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
.search-input:focus {
|
|
background: white;
|
|
box-shadow: 0 0 0 2px var(--primary-color);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.read-more {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.read-more:hover {
|
|
color: var(--secondary-color);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{% include 'components/header_nav.html' %}
|
|
|
|
<!-- Hero Section -->
|
|
{% with
|
|
title="DocuPulse Blog",
|
|
description="Insights, tips, and updates on document management, enterprise collaboration, and digital transformation.",
|
|
title_size="4",
|
|
description_size="5"
|
|
%}
|
|
{% include 'components/hero_section.html' %}
|
|
{% endwith %}
|
|
|
|
<!-- Search and Categories -->
|
|
<section class="blog-section">
|
|
<div class="container">
|
|
<!-- Search Box -->
|
|
<div class="search-box">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-transparent border-0">
|
|
<i class="fas fa-search text-muted"></i>
|
|
</span>
|
|
<input type="text" class="form-control search-input" placeholder="Search articles..." id="searchInput">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="category-card" data-category="all">
|
|
<div class="category-icon">
|
|
<i class="fas fa-th-large"></i>
|
|
</div>
|
|
<h5 class="fw-bold">All Posts</h5>
|
|
<p class="text-muted small">Browse all articles</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="category-card" data-category="product">
|
|
<div class="category-icon">
|
|
<i class="fas fa-cube"></i>
|
|
</div>
|
|
<h5 class="fw-bold">Product Updates</h5>
|
|
<p class="text-muted small">Latest features and improvements</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="category-card" data-category="tips">
|
|
<div class="category-icon">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<h5 class="fw-bold">Tips & Tricks</h5>
|
|
<p class="text-muted small">Best practices and workflows</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="category-card" data-category="industry">
|
|
<div class="category-icon">
|
|
<i class="fas fa-chart-line"></i>
|
|
</div>
|
|
<h5 class="fw-bold">Industry Insights</h5>
|
|
<p class="text-muted small">Trends and analysis</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Post -->
|
|
<div class="row mb-5">
|
|
<div class="col-12">
|
|
<h2 class="display-6 fw-bold mb-4">Featured Article</h2>
|
|
<div class="featured-post">
|
|
<div class="row g-0">
|
|
<div class="col-lg-6">
|
|
<div class="featured-image">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="blog-content">
|
|
<div class="blog-meta">
|
|
<span class="blog-category">Security</span>
|
|
<span><i class="fas fa-calendar me-1"></i>March 15, 2024</span>
|
|
<span><i class="fas fa-clock me-1"></i>8 min read</span>
|
|
</div>
|
|
<h3 class="h4 fw-bold mb-3">The Future of Enterprise Document Security</h3>
|
|
<p class="text-muted mb-4">As cyber threats continue to evolve, organizations must adopt advanced security measures to protect their sensitive documents. This comprehensive guide explores the latest security trends and best practices for enterprise document management.</p>
|
|
<a href="#" class="read-more">Read Full Article <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Posts -->
|
|
<div class="row mb-5">
|
|
<div class="col-12">
|
|
<h2 class="display-6 fw-bold mb-4">Recent Posts</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="blog-card">
|
|
<div class="blog-image">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="blog-content">
|
|
<div class="blog-meta">
|
|
<span class="blog-category">Collaboration</span>
|
|
<span><i class="fas fa-calendar me-1"></i>March 12, 2024</span>
|
|
</div>
|
|
<h4 class="h5 fw-bold mb-3">Building Effective Remote Teams with Document Management</h4>
|
|
<p class="text-muted mb-3">Discover how modern document management tools are enabling seamless collaboration for distributed teams across the globe.</p>
|
|
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="blog-card">
|
|
<div class="blog-image">
|
|
<i class="fas fa-robot"></i>
|
|
</div>
|
|
<div class="blog-content">
|
|
<div class="blog-meta">
|
|
<span class="blog-category">AI</span>
|
|
<span><i class="fas fa-calendar me-1"></i>March 10, 2024</span>
|
|
</div>
|
|
<h4 class="h5 fw-bold mb-3">AI-Powered Document Processing: What's Next?</h4>
|
|
<p class="text-muted mb-3">Explore the cutting-edge AI technologies that are revolutionizing how we process, analyze, and manage documents in the enterprise.</p>
|
|
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="blog-card">
|
|
<div class="blog-image">
|
|
<i class="fas fa-chart-bar"></i>
|
|
</div>
|
|
<div class="blog-content">
|
|
<div class="blog-meta">
|
|
<span class="blog-category">Analytics</span>
|
|
<span><i class="fas fa-calendar me-1"></i>March 8, 2024</span>
|
|
</div>
|
|
<h4 class="h5 fw-bold mb-3">Document Analytics: Unlocking Hidden Insights</h4>
|
|
<p class="text-muted mb-3">Learn how document analytics can provide valuable insights into workflow efficiency and help optimize business processes.</p>
|
|
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="blog-card">
|
|
<div class="blog-image">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
</div>
|
|
<div class="blog-content">
|
|
<div class="blog-meta">
|
|
<span class="blog-category">Mobile</span>
|
|
<span><i class="fas fa-calendar me-1"></i>March 5, 2024</span>
|
|
</div>
|
|
<h4 class="h5 fw-bold mb-3">Mobile Document Management: Best Practices</h4>
|
|
<p class="text-muted mb-3">Essential tips for implementing effective mobile document management strategies that keep your team productive on the go.</p>
|
|
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="blog-card">
|
|
<div class="blog-image">
|
|
<i class="fas fa-gavel"></i>
|
|
</div>
|
|
<div class="blog-content">
|
|
<div class="blog-meta">
|
|
<span class="blog-category">Compliance</span>
|
|
<span><i class="fas fa-calendar me-1"></i>March 3, 2024</span>
|
|
</div>
|
|
<h4 class="h5 fw-bold mb-3">Compliance in the Digital Age: A Complete Guide</h4>
|
|
<p class="text-muted mb-3">Navigate the complex landscape of regulatory compliance with our comprehensive guide to digital document management.</p>
|
|
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="blog-card">
|
|
<div class="blog-image">
|
|
<i class="fas fa-cloud"></i>
|
|
</div>
|
|
<div class="blog-content">
|
|
<div class="blog-meta">
|
|
<span class="blog-category">Cloud</span>
|
|
<span><i class="fas fa-calendar me-1"></i>March 1, 2024</span>
|
|
</div>
|
|
<h4 class="h5 fw-bold mb-3">Cloud vs On-Premise: Making the Right Choice</h4>
|
|
<p class="text-muted mb-3">Compare cloud-based and on-premise document management solutions to find the best fit for your organization.</p>
|
|
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load More Button -->
|
|
<div class="text-center mt-5">
|
|
<button class="btn btn-outline-primary btn-lg px-5 py-3">
|
|
<i class="fas fa-plus me-2"></i>Load More Articles
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter Section -->
|
|
<section class="newsletter-section">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 text-center newsletter-content">
|
|
<h2 class="display-5 fw-bold mb-4">Stay Updated</h2>
|
|
<p class="lead mb-5">Get the latest insights, tips, and updates delivered directly to your inbox.</p>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="input-group">
|
|
<input type="email" class="form-control form-control-lg" placeholder="Enter your email address" style="border-radius: 25px 0 0 25px; border: none;">
|
|
<button class="btn btn-light btn-lg" type="button" style="border-radius: 0 25px 25px 0; border: none;">
|
|
<i class="fas fa-paper-plane me-2"></i>Subscribe
|
|
</button>
|
|
</div>
|
|
<p class="text-white-50 mt-3 small">No spam, unsubscribe at any time. We respect your privacy.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
// Category filtering
|
|
document.querySelectorAll('.category-card').forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
const category = this.dataset.category;
|
|
// Add filtering logic here
|
|
console.log('Filtering by category:', category);
|
|
});
|
|
});
|
|
|
|
// Search functionality
|
|
document.getElementById('searchInput').addEventListener('input', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
// Add search logic here
|
|
console.log('Searching for:', searchTerm);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |