diff options
Diffstat (limited to 'static/blog.html')
| -rw-r--r-- | static/blog.html | 347 |
1 files changed, 347 insertions, 0 deletions
diff --git a/static/blog.html b/static/blog.html new file mode 100644 index 0000000..2fc128b --- /dev/null +++ b/static/blog.html @@ -0,0 +1,347 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Blog - TaskFlow</title> + <link rel="stylesheet" href="blog-styles.css"> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> +</head> +<body> + <nav class="navbar"> + <div class="nav-container"> + <a href="/" class="nav-logo">TaskFlow</a> + <ul class="nav-menu"> + <li><a href="/#features" class="nav-link">Features</a></li> + <li><a href="/#pricing" class="nav-link">Pricing</a></li> + <li><a href="about.html" class="nav-link">About</a></li> + <li><a href="blog.html" class="nav-link active">Blog</a></li> + <li><a href="#contact" class="nav-link">Contact</a></li> + </ul> + <div class="nav-actions"> + <a href="login.html" class="btn btn-ghost">Sign In</a> + <button class="btn btn-primary">Start Free Trial</button> + </div> + </div> + </nav> + + <main> + <section class="hero"> + <div class="container"> + <div class="hero-content"> + <h1 class="hero-title">TaskFlow <span class="gradient-text">Blog</span></h1> + <p class="hero-subtitle"> + Insights, tips, and best practices for project management, team collaboration, + and productivity from the TaskFlow team and industry experts. + </p> + <div class="hero-search"> + <div class="search-container"> + <input type="text" placeholder="Search articles..." class="search-input" id="searchInput"> + <button class="search-btn" id="searchBtn"> + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> + <circle cx="11" cy="11" r="8"></circle> + <path d="m21 21-4.35-4.35"></path> + </svg> + </button> + </div> + </div> + </div> + </div> + </section> + + <section class="blog-content"> + <div class="container"> + <div class="blog-layout"> + <aside class="blog-sidebar"> + <div class="sidebar-section"> + <h3>Categories</h3> + <ul class="category-list"> + <li><a href="#" class="category-link active" data-category="all">All Posts <span class="count">24</span></a></li> + <li><a href="#" class="category-link" data-category="productivity">Productivity <span class="count">8</span></a></li> + <li><a href="#" class="category-link" data-category="project-management">Project Management <span class="count">6</span></a></li> + <li><a href="#" class="category-link" data-category="team-collaboration">Team Collaboration <span class="count">5</span></a></li> + <li><a href="#" class="category-link" data-category="remote-work">Remote Work <span class="count">3</span></a></li> + <li><a href="#" class="category-link" data-category="company-news">Company News <span class="count">2</span></a></li> + </ul> + </div> + + <div class="sidebar-section"> + <h3>Recent Posts</h3> + <div class="recent-posts"> + <article class="recent-post"> + <div class="recent-post-meta"> + <span class="recent-post-date">Jan 15, 2025</span> + </div> + <h4><a href="#post1">10 Project Management Trends to Watch in 2025</a></h4> + </article> + <article class="recent-post"> + <div class="recent-post-meta"> + <span class="recent-post-date">Jan 10, 2025</span> + </div> + <h4><a href="#post2">How to Build High-Performing Remote Teams</a></h4> + </article> + <article class="recent-post"> + <div class="recent-post-meta"> + <span class="recent-post-date">Jan 5, 2025</span> + </div> + <h4><a href="#post3">The Ultimate Guide to Agile Project Management</a></h4> + </article> + </div> + </div> + + <div class="sidebar-section"> + <h3>Newsletter</h3> + <div class="newsletter-signup"> + <p>Get the latest insights delivered to your inbox.</p> + <form class="newsletter-form"> + <input type="email" placeholder="Your email address" class="newsletter-input"> + <button type="submit" class="btn btn-primary btn-small">Subscribe</button> + </form> + </div> + </div> + </aside> + + <div class="blog-main"> + <div class="blog-filters"> + <div class="filter-group"> + <label for="sortBy">Sort by:</label> + <select id="sortBy" class="filter-select"> + <option value="newest">Newest First</option> + <option value="oldest">Oldest First</option> + <option value="popular">Most Popular</option> + </select> + </div> + </div> + + <div class="blog-grid" id="blogGrid"> + <article class="blog-post featured" data-category="project-management"> + <div class="post-image"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'%3E%3Crect width='400' height='250' fill='%236366f1'/%3E%3Ctext x='200' y='130' text-anchor='middle' fill='white' font-size='24' font-family='Inter'%3EProject Trends 2025%3C/text%3E%3C/svg%3E" alt="Project Management Trends 2025"> + <div class="post-badge">Featured</div> + </div> + <div class="post-content"> + <div class="post-meta"> + <span class="post-category">Project Management</span> + <span class="post-date">January 15, 2025</span> + <span class="post-read-time">8 min read</span> + </div> + <h2 class="post-title">10 Project Management Trends to Watch in 2025</h2> + <p class="post-excerpt"> + Discover the emerging trends that will shape project management in 2025, from AI-powered + automation to hybrid work methodologies that are transforming how teams collaborate. + </p> + <div class="post-footer"> + <div class="post-author"> + <div class="author-avatar">AS</div> + <span class="author-name">Alex Smith</span> + </div> + <a href="#post1" class="read-more">Read More →</a> + </div> + </div> + </article> + + <article class="blog-post" data-category="team-collaboration"> + <div class="post-image"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'%3E%3Crect width='400' height='250' fill='%238b5cf6'/%3E%3Ctext x='200' y='130' text-anchor='middle' fill='white' font-size='20' font-family='Inter'%3ERemote Team Building%3C/text%3E%3C/svg%3E" alt="Remote Team Building"> + </div> + <div class="post-content"> + <div class="post-meta"> + <span class="post-category">Team Collaboration</span> + <span class="post-date">January 10, 2025</span> + <span class="post-read-time">6 min read</span> + </div> + <h2 class="post-title">How to Build High-Performing Remote Teams</h2> + <p class="post-excerpt"> + Learn proven strategies for creating cohesive, productive remote teams that deliver + exceptional results while maintaining strong communication and collaboration. + </p> + <div class="post-footer"> + <div class="post-author"> + <div class="author-avatar">SJ</div> + <span class="author-name">Sarah Johnson</span> + </div> + <a href="#post2" class="read-more">Read More →</a> + </div> + </div> + </article> + + <article class="blog-post" data-category="productivity"> + <div class="post-image"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'%3E%3Crect width='400' height='250' fill='%2310b981'/%3E%3Ctext x='200' y='130' text-anchor='middle' fill='white' font-size='22' font-family='Inter'%3EAgile Guide%3C/text%3E%3C/svg%3E" alt="Agile Project Management"> + </div> + <div class="post-content"> + <div class="post-meta"> + <span class="post-category">Productivity</span> + <span class="post-date">January 5, 2025</span> + <span class="post-read-time">12 min read</span> + </div> + <h2 class="post-title">The Ultimate Guide to Agile Project Management</h2> + <p class="post-excerpt"> + A comprehensive guide to implementing Agile methodologies in your projects, including + best practices, common pitfalls, and tools to maximize team efficiency. + </p> + <div class="post-footer"> + <div class="post-author"> + <div class="author-avatar">MC</div> + <span class="author-name">Mike Chen</span> + </div> + <a href="#post3" class="read-more">Read More →</a> + </div> + </div> + </article> + + <article class="blog-post" data-category="remote-work"> + <div class="post-image"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'%3E%3Crect width='400' height='250' fill='%23f59e0b'/%3E%3Ctext x='200' y='130' text-anchor='middle' fill='white' font-size='18' font-family='Inter'%3EProductivity Hacks%3C/text%3E%3C/svg%3E" alt="Productivity Hacks"> + </div> + <div class="post-content"> + <div class="post-meta"> + <span class="post-category">Remote Work</span> + <span class="post-date">December 28, 2024</span> + <span class="post-read-time">5 min read</span> + </div> + <h2 class="post-title">5 Productivity Hacks for Remote Workers</h2> + <p class="post-excerpt"> + Boost your productivity while working from home with these proven techniques that help + you stay focused, organized, and motivated throughout the day. + </p> + <div class="post-footer"> + <div class="post-author"> + <div class="author-avatar">LD</div> + <span class="author-name">Lisa Davis</span> + </div> + <a href="#post4" class="read-more">Read More →</a> + </div> + </div> + </article> + + <article class="blog-post" data-category="project-management"> + <div class="post-image"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'%3E%3Crect width='400' height='250' fill='%23ef4444'/%3E%3Ctext x='200' y='130' text-anchor='middle' fill='white' font-size='20' font-family='Inter'%3EProject Failures%3C/text%3E%3C/svg%3E" alt="Project Failures"> + </div> + <div class="post-content"> + <div class="post-meta"> + <span class="post-category">Project Management</span> + <span class="post-date">December 20, 2024</span> + <span class="post-read-time">7 min read</span> + </div> + <h2 class="post-title">Why Projects Fail and How to Prevent It</h2> + <p class="post-excerpt"> + Analyze the most common reasons projects fail and learn actionable strategies to + identify warning signs early and keep your projects on track for success. + </p> + <div class="post-footer"> + <div class="post-author"> + <div class="author-avatar">AS</div> + <span class="author-name">Alex Smith</span> + </div> + <a href="#post5" class="read-more">Read More →</a> + </div> + </div> + </article> + + <article class="blog-post" data-category="company-news"> + <div class="post-image"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'%3E%3Crect width='400' height='250' fill='%236366f1'/%3E%3Ctext x='200' y='130' text-anchor='middle' fill='white' font-size='18' font-family='Inter'%3ETaskFlow Updates%3C/text%3E%3C/svg%3E" alt="TaskFlow Updates"> + </div> + <div class="post-content"> + <div class="post-meta"> + <span class="post-category">Company News</span> + <span class="post-date">December 15, 2024</span> + <span class="post-read-time">4 min read</span> + </div> + <h2 class="post-title">TaskFlow 2.0: New Features and Improvements</h2> + <p class="post-excerpt"> + Discover the latest updates to TaskFlow, including enhanced collaboration tools, + improved analytics, and new integrations that make project management even easier. + </p> + <div class="post-footer"> + <div class="post-author"> + <div class="author-avatar">TF</div> + <span class="author-name">TaskFlow Team</span> + </div> + <a href="#post6" class="read-more">Read More →</a> + </div> + </div> + </article> + </div> + + <div class="pagination"> + <button class="pagination-btn" id="prevBtn" disabled>← Previous</button> + <div class="pagination-numbers"> + <button class="pagination-number active">1</button> + <button class="pagination-number">2</button> + <button class="pagination-number">3</button> + <span class="pagination-dots">...</span> + <button class="pagination-number">8</button> + </div> + <button class="pagination-btn" id="nextBtn">Next →</button> + </div> + </div> + </div> + </div> + </section> + + <section class="newsletter-cta"> + <div class="container"> + <div class="newsletter-content"> + <h2>Stay Updated</h2> + <p>Get the latest project management insights and TaskFlow updates delivered to your inbox.</p> + <form class="newsletter-form-large"> + <input type="email" placeholder="Enter your email address" class="newsletter-input-large"> + <button type="submit" class="btn btn-primary">Subscribe Now</button> + </form> + <p class="newsletter-note">No spam, unsubscribe at any time.</p> + </div> + </div> + </section> + </main> + + <footer class="footer"> + <div class="container"> + <div class="footer-content"> + <div class="footer-section"> + <div class="footer-logo">TaskFlow</div> + <p>Streamline your project management with the tools teams love to use.</p> + </div> + <div class="footer-section"> + <h4>Product</h4> + <ul> + <li><a href="/#features">Features</a></li> + <li><a href="/#pricing">Pricing</a></li> + <li><a href="#integrations">Integrations</a></li> + <li><a href="#security">Security</a></li> + </ul> + </div> + <div class="footer-section"> + <h4>Company</h4> + <ul> + <li><a href="about.html">About</a></li> + <li><a href="#careers">Careers</a></li> + <li><a href="blog.html">Blog</a></li> + <li><a href="#press">Press</a></li> + </ul> + </div> + <div class="footer-section"> + <h4>Support</h4> + <ul> + <li><a href="#help">Help Center</a></li> + <li><a href="#contact">Contact</a></li> + <li><a href="#status">Status</a></li> + <li><a href="#api">API Docs</a></li> + </ul> + </div> + </div> + <div class="footer-bottom"> + <p>© 2025 TaskFlow. All rights reserved.</p> + <div class="footer-links"> + <a href="#privacy">Privacy Policy</a> + <a href="#terms">Terms of Service</a> + </div> + </div> + </div> + </footer> + + <script src="blog-script.js"></script> +</body> +</html> |