Loading…
Loading…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MarketPulse Blog | Marketing Insights Landing Page</title>
<meta name="description" content="Responsive Bootstrap 5 marketing blog landing page with featured posts, article search, topic filters, Chart.js traffic chart, sidebar widgets, and newsletter CTA.">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css">
</head>
<body>
<div class="marketing-blog">
<a class="skip-link" href="#mainContent">Skip to content</a>
<header class="site-header">
<nav class="navbar navbar-expand-lg blog-navbar" aria-label="Main navigation">
<div class="container">
<a class="navbar-brand brand" href="#home" aria-label="MarketPulse home">
<span class="brand-mark" aria-hidden="true"><i class="fa-solid fa-bullhorn"></i></span>
<span>MarketPulse</span>
</a>
<button class="navbar-toggler nav-toggle" type="button" aria-controls="primaryNav" aria-expanded="false" aria-label="Open navigation menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#featured">Featured</a></li>
<li class="nav-item"><a class="nav-link" href="#analytics">Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="#insights">Insights</a></li>
<li class="nav-item ms-lg-2"><a class="btn btn-primary-custom btn-sm px-3" href="#newsletter">Subscribe</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="mainContent">
<section class="hero-section" id="home" aria-labelledby="heroTitle">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-7">
<p class="eyebrow-pill"><i class="fa-solid fa-bolt" aria-hidden="true"></i> Marketing insights for growing teams</p>
<h1 id="heroTitle">Build smarter campaigns with data-backed content.</h1>
<p class="hero-text">Explore practical SEO, content strategy, analytics, conversion, and email growth tips built for founders, creators, and marketing teams.</p>
<div class="hero-search" role="search">
<label for="blogSearch" class="form-label">Search articles</label>
<div class="input-group input-group-lg">
<span class="input-group-text" aria-hidden="true"><i class="fa-solid fa-magnifying-glass"></i></span>
<input id="blogSearch" type="search" class="form-control" placeholder="Try SEO, email, analytics, or content">
</div>
</div>
<div class="topic-filter-group" role="group" aria-label="Filter articles by topic">
<button class="topic-filter active" type="button" data-filter="all" aria-pressed="true">All</button>
<button class="topic-filter" type="button" data-filter="seo" aria-pressed="false">SEO</button>
<button class="topic-filter" type="button" data-filter="content" aria-pressed="false">Content</button>
<button class="topic-filter" type="button" data-filter="email" aria-pressed="false">Email</button>
<button class="topic-filter" type="button" data-filter="analytics" aria-pressed="false">Analytics</button>
</div>
</div>
<div class="col-lg-5">
<aside class="hero-panel" aria-label="Marketing performance summary">
<div class="metric-card large">
<span class="metric-label">Monthly Readers</span>
<strong>48.2K</strong>
<span class="metric-trend"><i class="fa-solid fa-arrow-trend-up me-1" aria-hidden="true"></i>+18% this month</span>
</div>
<div class="mini-grid">
<div class="metric-card">
<span class="metric-label">Avg. Read Time</span>
<strong>4.8m</strong>
</div>
<div class="metric-card">
<span class="metric-label">Email CTR</span>
<strong>12.4%</strong>
</div>
</div>
<div class="insight-note">
<i class="fa-solid fa-circle-check" aria-hidden="true"></i>
<span>Search, Chart.js analytics, sidebar widgets, and newsletter CTA included.</span>
</div>
</aside>
</div>
</div>
</div>
</section>
<section class="featured-section" id="featured" aria-labelledby="featuredTitle">
<div class="container">
<div class="section-heading text-center">
<p class="eyebrow">Featured Articles</p>
<h2 id="featuredTitle">Start with these marketing playbooks</h2>
<p>Hand-picked guides for improving traffic, conversions, and content performance.</p>
</div>
<div class="row g-4">
<div class="col-lg-4">
<article class="feature-card highlight-card h-100 blog-post-item" data-category="seo" data-search="seo growth sprint keywords ranking search optimization">
<div class="card-icon" aria-hidden="true"><i class="fa-solid fa-chart-line"></i></div>
<p class="card-category">SEO Strategy</p>
<h3><a href="#">How to Plan a 90-Day SEO Growth Sprint</a></h3>
<p>Map keywords, publish focused content, and measure progress with a simple repeatable workflow.</p>
<span class="read-time">8 min read</span>
</article>
</div>
<div class="col-lg-4">
<article class="feature-card h-100 blog-post-item" data-category="content" data-search="conversion landing page copy proof signups cta">
<div class="card-icon" aria-hidden="true"><i class="fa-solid fa-bullseye"></i></div>
<p class="card-category">Conversion</p>
<h3><a href="#">Landing Page Tweaks That Improve Signups</a></h3>
<p>Use clearer copy, stronger proof, and focused calls to action to improve conversion rates.</p>
<span class="read-time">6 min read</span>
</article>
</div>
<div class="col-lg-4">
<article class="feature-card h-100 blog-post-item" data-category="email" data-search="email welcome sequence leads subscribers nurture trust">
<div class="card-icon" aria-hidden="true"><i class="fa-solid fa-envelope-open-text"></i></div>
<p class="card-category">Email Marketing</p>
<h3><a href="#">A Simple Welcome Sequence for New Leads</a></h3>
<p>Create a helpful email sequence that educates subscribers and builds trust over time.</p>
<span class="read-time">5 min read</span>
</article>
</div>
</div>
</div>
</section>
<section class="analytics-section" id="analytics" aria-labelledby="analyticsTitle">
<div class="container">
<div class="chart-card">
<div class="chart-header">
<div>
<p class="eyebrow">Traffic Snapshot</p>
<h2 id="analyticsTitle">Monthly visitor growth</h2>
<p>A responsive Chart.js line chart for tracking content growth.</p>
</div>
<span class="chart-badge">2026</span>
</div>
<div class="chart-wrapper">
<canvas id="visitorsChart" role="img" aria-label="Line chart showing monthly blog visitors from January to December 2026"></canvas>
<p class="chart-fallback" id="chartFallback" hidden>Chart preview is unavailable because Chart.js could not be loaded.</p>
</div>
<div class="chart-summary">
<div><strong>34.8K</strong><span>December visitors</span></div>
<div><strong>+324%</strong><span>Yearly growth</span></div>
<div><strong>12.4%</strong><span>Email click rate</span></div>
</div>
</div>
</div>
</section>
<section class="content-section" id="insights" aria-labelledby="insightsTitle">
<div class="container">
<div class="row g-4 align-items-start">
<div class="col-lg-8">
<div class="d-flex flex-column flex-md-row justify-content-between gap-3 mb-4">
<div>
<p class="eyebrow">Latest Insights</p>
<h2 id="insightsTitle">Fresh articles for practical marketers</h2>
</div>
<p class="results-text" aria-live="polite">Showing all articles.</p>
</div>
<div class="row g-4 posts-grid">
<div class="col-md-6 blog-post-item" data-category="content" data-search="content repurpose blog post social newsletter assets workflow">
<article class="post-card h-100">
<span class="post-tag">Content</span>
<h3><a href="#">Repurpose One Blog Post into Five Content Assets</a></h3>
<p>Turn a single article into newsletter snippets, social posts, short videos, and lead magnets.</p>
<div class="post-meta">By Growth Team · 7 min read</div>
</article>
</div>
<div class="col-md-6 blog-post-item" data-category="analytics" data-search="analytics metrics reporting conversion traffic engagement decisions">
<article class="post-card h-100">
<span class="post-tag">Analytics</span>
<h3><a href="#">Track the Metrics That Actually Guide Decisions</a></h3>
<p>Focus on the numbers that help you improve traffic quality, engagement, and conversions.</p>
<div class="post-meta">By Data Desk · 6 min read</div>
</article>
</div>
<div class="col-md-6 blog-post-item" data-category="content" data-search="social content system planning calendar publish review">
<article class="post-card h-100">
<span class="post-tag">Social</span>
<h3><a href="#">Build a Weekly Social Content System</a></h3>
<p>Plan, batch, publish, and review social content without turning your calendar into chaos.</p>
<div class="post-meta">By Editorial Team · 5 min read</div>
</article>
</div>
<div class="col-md-6 blog-post-item" data-category="email" data-search="lead magnet email list subscribers free resource conversion">
<article class="post-card h-100">
<span class="post-tag">Lead Gen</span>
<h3><a href="#">Create a Lead Magnet That Solves One Clear Problem</a></h3>
<p>Design a focused free resource that attracts the right audience and supports your offer.</p>
<div class="post-meta">By Strategy Lab · 8 min read</div>
</article>
</div>
</div>
<div class="empty-state" hidden>
<i class="fa-regular fa-folder-open" aria-hidden="true"></i>
<h3>No articles found</h3>
<p>Try a different keyword or topic filter.</p>
</div>
</div>
<aside class="col-lg-4" aria-label="Blog sidebar">
<div class="sidebar-stack">
<section class="sidebar-card">
<h2><i class="fa-solid fa-folder-open me-2" aria-hidden="true"></i>Categories</h2>
<ul class="category-list">
<li><a href="#">SEO <span>18</span></a></li>
<li><a href="#">Content Marketing <span>24</span></a></li>
<li><a href="#">Email Growth <span>11</span></a></li>
<li><a href="#">Analytics <span>9</span></a></li>
</ul>
</section>
<section class="sidebar-card">
<h2><i class="fa-solid fa-tags me-2" aria-hidden="true"></i>Popular Tags</h2>
<div class="tag-cloud" aria-label="Popular tags">
<a href="#">SEO</a>
<a href="#">Funnels</a>
<a href="#">Copywriting</a>
<a href="#">Growth</a>
<a href="#">Analytics</a>
</div>
</section>
<section class="sidebar-card newsletter-card" id="newsletter">
<h2><i class="fa-solid fa-paper-plane me-2" aria-hidden="true"></i>Join the newsletter</h2>
<p>Get one practical marketing lesson every week.</p>
<form class="newsletter-form" novalidate>
<label for="newsletterEmail">Email address</label>
<input id="newsletterEmail" name="email" type="email" placeholder="you@example.com" autocomplete="email" required>
<button class="btn btn-primary-custom w-100" type="submit">Subscribe</button>
<p class="form-message" role="status" aria-live="polite"></p>
</form>
</section>
</div>
</aside>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
<p class="mb-0">© <span id="currentYear"></span> MarketPulse. Built for marketing teams, creators, and growth-focused founders.</p>
<div class="footer-links" aria-label="Footer links">
<a href="#featured">Featured</a>
<a href="#insights">Resources</a>
<a href="#home">Back to top</a>
</div>
</div>
</footer>
</div>
</body>
</html>:root {
--mp-bg: #f6f8ff;
--mp-surface: #ffffff;
--mp-soft: #eef3ff;
--mp-text: #172033;
--mp-muted: #667085;
--mp-primary: #4f46e5;
--mp-primary-dark: #3730a3;
--mp-accent: #06b6d4;
--mp-success: #16a34a;
--mp-border: #e4e7ec;
--mp-shadow: 0 18px 45px rgba(23, 32, 51, 0.1);
--mp-radius: 1.5rem;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--mp-bg);
}
.marketing-blog {
min-height: 100vh;
color: var(--mp-text);
background: radial-gradient(circle at 12% 8%, rgba(79, 70, 229, 0.1), transparent 32%), linear-gradient(180deg, #f8fbff 0%, var(--mp-bg) 100%);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.65;
overflow-x: hidden;
}
.marketing-blog *,
.marketing-blog *::before,
.marketing-blog *::after {
box-sizing: border-box;
}
.marketing-blog h1,
.marketing-blog h2,
.marketing-blog h3,
.marketing-blog p {
margin-top: 0;
}
.marketing-blog h1,
.marketing-blog h2,
.marketing-blog h3 {
color: var(--mp-text);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.12;
}
.skip-link {
position: fixed;
top: -4rem;
left: 1rem;
z-index: 1200;
padding: 0.7rem 1rem;
border-radius: 0.65rem;
background: var(--mp-text);
color: #ffffff;
text-decoration: none;
}
.skip-link:focus {
top: 1rem;
color: #ffffff;
}
.site-header {
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid transparent;
background: rgba(255, 255, 255, 0.93);
backdrop-filter: blur(14px);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
border-color: var(--mp-border);
box-shadow: 0 8px 28px rgba(23, 32, 51, 0.06);
}
.blog-navbar {
min-height: 4.75rem;
padding: 0.85rem 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--mp-text);
font-weight: 850;
letter-spacing: -0.03em;
}
.brand:hover,
.brand:focus {
color: var(--mp-primary);
}
.brand-mark {
display: inline-grid;
width: 2.45rem;
height: 2.45rem;
place-content: center;
border-radius: 0.8rem;
background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
color: #ffffff;
box-shadow: 0 12px 24px rgba(79, 70, 229, 0.24);
}
.blog-navbar .nav-link {
color: var(--mp-muted);
font-weight: 750;
padding: 0.55rem 0.75rem;
}
.blog-navbar .nav-link:hover,
.blog-navbar .nav-link:focus,
.blog-navbar .nav-link.active {
color: var(--mp-primary);
}
.nav-toggle {
border-color: var(--mp-border);
box-shadow: none !important;
}
.btn-primary-custom {
border: 1px solid var(--mp-primary);
border-radius: 999px;
background: linear-gradient(135deg, var(--mp-primary), var(--mp-primary-dark));
color: #ffffff;
font-weight: 800;
box-shadow: 0 14px 28px rgba(79, 70, 229, 0.22);
}
.btn-primary-custom:hover,
.btn-primary-custom:focus {
border-color: var(--mp-primary-dark);
background: var(--mp-primary-dark);
color: #ffffff;
}
.hero-section {
padding: clamp(4rem, 8vw, 7.25rem) 0 clamp(3.5rem, 7vw, 6rem);
scroll-margin-top: 5rem;
}
.eyebrow-pill {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 1.1rem;
padding: 0.45rem 0.9rem;
border: 1px solid #c7d2fe;
border-radius: 999px;
background: var(--mp-soft);
color: var(--mp-primary-dark);
font-size: 0.9rem;
font-weight: 850;
}
.hero-section h1 {
max-width: 780px;
margin-bottom: 1.25rem;
font-size: clamp(2.4rem, 5.8vw, 4.75rem);
}
.hero-text {
max-width: 680px;
margin-bottom: 1.8rem;
color: var(--mp-muted);
font-size: clamp(1.04rem, 2vw, 1.18rem);
}
.hero-search {
max-width: 650px;
margin-bottom: 1rem;
}
.hero-search .form-label {
color: var(--mp-text);
font-weight: 800;
}
.hero-search .input-group-text,
.hero-search .form-control {
border-color: var(--mp-border);
}
.hero-search .input-group-text {
background: #ffffff;
color: var(--mp-primary);
}
.topic-filter-group {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.topic-filter {
border: 1px solid var(--mp-border);
border-radius: 999px;
padding: 0.45rem 0.9rem;
background: #ffffff;
color: var(--mp-text);
font-weight: 800;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.topic-filter:hover,
.topic-filter.active {
border-color: var(--mp-primary);
background: var(--mp-primary);
color: #ffffff;
}
.hero-panel,
.feature-card,
.chart-card,
.post-card,
.sidebar-card {
border: 1px solid var(--mp-border);
border-radius: var(--mp-radius);
background: var(--mp-surface);
box-shadow: var(--mp-shadow);
}
.hero-panel {
display: grid;
gap: 1rem;
padding: clamp(1.2rem, 3vw, 1.6rem);
}
.metric-card {
padding: 1.35rem;
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
background: linear-gradient(135deg, #f8fbff, #eef4ff);
}
.metric-card.large {
border: 0;
background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
color: #ffffff;
}
.metric-label,
.metric-trend {
display: block;
color: inherit;
font-size: 0.9rem;
opacity: 0.88;
}
.metric-card strong {
display: block;
margin: 0.35rem 0;
font-size: 2rem;
letter-spacing: -0.05em;
}
.metric-trend {
color: #dcfce7;
opacity: 1;
}
.mini-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.insight-note {
display: flex;
gap: 0.7rem;
padding: 0.95rem 1rem;
border-radius: 1rem;
background: #ecfeff;
color: #155e75;
font-weight: 750;
}
.featured-section,
.analytics-section,
.content-section {
padding: clamp(3.5rem, 7vw, 5.5rem) 0;
scroll-margin-top: 5rem;
}
.section-heading {
max-width: 720px;
margin: 0 auto 2.4rem;
}
.section-heading p:not(.eyebrow),
.chart-header p:not(.eyebrow) {
color: var(--mp-muted);
}
.eyebrow {
margin-bottom: 0.55rem;
color: var(--mp-primary);
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.section-heading h2,
.chart-header h2,
.content-section h2 {
font-size: clamp(1.85rem, 4vw, 2.5rem);
}
.feature-card,
.post-card,
.sidebar-card {
padding: clamp(1.25rem, 3vw, 1.6rem);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover,
.post-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 50px rgba(23, 32, 51, 0.14);
}
.highlight-card {
background: linear-gradient(135deg, #ffffff, #eff6ff);
}
.card-icon {
display: grid;
width: 3.1rem;
height: 3.1rem;
place-content: center;
margin-bottom: 1.1rem;
border-radius: 1rem;
background: var(--mp-soft);
color: var(--mp-primary);
font-size: 1.4rem;
}
.card-category,
.post-tag {
display: inline-flex;
margin-bottom: 0.75rem;
color: var(--mp-primary);
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.feature-card a,
.post-card a,
.category-list a,
.tag-cloud a,
.footer-links a {
color: inherit;
text-decoration: none;
}
.feature-card a:hover,
.post-card a:hover,
.category-list a:hover,
.footer-links a:hover {
color: var(--mp-primary);
}
.feature-card p,
.post-card p,
.sidebar-card p {
color: var(--mp-muted);
}
.read-time,
.post-meta {
color: var(--mp-muted);
font-size: 0.9rem;
font-weight: 750;
}
.analytics-section {
background: rgba(255, 255, 255, 0.55);
}
.chart-card {
padding: clamp(1.35rem, 4vw, 2rem);
}
.chart-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.chart-badge {
padding: 0.5rem 0.8rem;
border-radius: 999px;
background: var(--mp-soft);
color: var(--mp-primary);
font-weight: 850;
}
.chart-wrapper {
position: relative;
min-height: 340px;
padding: 1rem;
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
background: linear-gradient(180deg, #ffffff, #f8fbff);
}
#visitorsChart {
width: 100% !important;
height: 320px !important;
}
.chart-fallback {
margin: 0;
padding: 1rem;
border-radius: 1rem;
background: var(--mp-soft);
color: var(--mp-muted);
font-weight: 750;
}
.chart-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1.25rem;
}
.chart-summary div {
padding: 1rem;
border-radius: 1rem;
background: var(--mp-soft);
text-align: center;
}
.chart-summary strong {
display: block;
color: var(--mp-text);
font-size: 1.4rem;
}
.chart-summary span {
color: var(--mp-muted);
font-size: 0.88rem;
font-weight: 700;
}
.content-section {
background: var(--mp-bg);
}
.results-text {
align-self: flex-start;
margin: 0;
padding: 0.55rem 0.85rem;
border: 1px solid var(--mp-border);
border-radius: 999px;
background: #ffffff;
color: var(--mp-muted);
font-size: 0.9rem;
font-weight: 800;
}
.post-card {
box-shadow: none;
}
.sidebar-stack {
display: grid;
gap: 1rem;
}
.sidebar-card {
box-shadow: none;
}
.sidebar-card h2 {
margin-bottom: 1rem;
font-size: 1.2rem;
}
.category-list {
display: grid;
gap: 0.1rem;
margin: 0;
padding: 0;
list-style: none;
}
.category-list a {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--mp-border);
font-weight: 800;
}
.category-list span {
color: var(--mp-muted);
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.tag-cloud a {
padding: 0.45rem 0.75rem;
border-radius: 999px;
background: var(--mp-soft);
color: var(--mp-primary);
font-size: 0.88rem;
font-weight: 850;
}
.tag-cloud a:hover,
.tag-cloud a:focus {
background: var(--mp-primary);
color: #ffffff;
}
.newsletter-card {
background: linear-gradient(135deg, #ffffff, #eef7ff);
}
.newsletter-form {
display: grid;
gap: 0.7rem;
}
.newsletter-form label {
font-weight: 800;
}
.newsletter-form input {
min-height: 2.9rem;
width: 100%;
border: 1px solid var(--mp-border);
border-radius: 0.9rem;
padding: 0.65rem 0.8rem;
color: var(--mp-text);
background: #ffffff;
}
.form-message {
min-height: 1.25rem;
margin: 0.25rem 0 0;
color: var(--mp-success);
font-size: 0.92rem;
font-weight: 800;
}
.empty-state {
margin-top: 1.5rem;
padding: 2rem;
border: 1px dashed #cbd5e1;
border-radius: var(--mp-radius);
background: #ffffff;
text-align: center;
}
.empty-state i {
margin-bottom: 0.7rem;
color: var(--mp-primary);
font-size: 2rem;
}
.blog-post-item.is-hidden {
display: none !important;
}
.site-footer {
padding: 1.8rem 0;
border-top: 1px solid var(--mp-border);
color: var(--mp-muted);
background: #ffffff;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-weight: 850;
}
.footer-links a {
color: var(--mp-primary);
}
.footer-links a:hover,
.footer-links a:focus {
text-decoration: underline;
}
.marketing-blog a:focus-visible,
.marketing-blog button:focus-visible,
.marketing-blog input:focus-visible {
outline: 3px solid rgba(79, 70, 229, 0.35);
outline-offset: 3px;
}
@media (max-width: 991.98px) {
.blog-navbar .navbar-collapse {
padding: 0.9rem 0 0.35rem;
}
.blog-navbar .nav-link {
padding: 0.7rem 0;
}
.hero-section {
padding-top: 3.5rem;
}
}
@media (max-width: 767.98px) {
.mini-grid,
.chart-summary {
grid-template-columns: 1fr;
}
.chart-header {
flex-direction: column;
}
.chart-wrapper {
min-height: 290px;
padding: 0.75rem;
}
#visitorsChart {
height: 270px !important;
}
}
@media (max-width: 575.98px) {
.topic-filter {
flex: 1 1 auto;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.marketing-blog *,
.marketing-blog *::before,
.marketing-blog *::after {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
}
}document.addEventListener("DOMContentLoaded", function () {
"use strict";
const root = document.querySelector(".marketing-blog");
if (!root) return;
const header = root.querySelector(".site-header");
const navToggle = root.querySelector(".nav-toggle");
const navMenu = root.querySelector("#primaryNav");
const navLinks = Array.from(root.querySelectorAll(".blog-navbar .nav-link"));
const currentYear = root.querySelector("#currentYear");
const searchInput = root.querySelector("#blogSearch");
const filterButtons = Array.from(root.querySelectorAll(".topic-filter"));
const postItems = Array.from(root.querySelectorAll(".blog-post-item"));
const resultsText = root.querySelector(".results-text");
const emptyState = root.querySelector(".empty-state");
const newsletterForm = root.querySelector(".newsletter-form");
const formMessage = root.querySelector(".form-message");
const chartCanvas = root.querySelector("#visitorsChart");
const chartFallback = root.querySelector("#chartFallback");
const placeholderLinks = Array.from(root.querySelectorAll("a[href='#']"));
let activeFilter = "all";
if (currentYear) {
currentYear.textContent = String(new Date().getFullYear());
}
placeholderLinks.forEach(function (link) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
});
function normalize(value) {
return String(value || "").toLowerCase().trim();
}
function updateHeader() {
if (header) {
header.classList.toggle("is-scrolled", window.scrollY > 8);
}
}
function closeMenu() {
if (!navMenu || !navToggle) return;
navMenu.classList.remove("show");
navToggle.setAttribute("aria-expanded", "false");
navToggle.setAttribute("aria-label", "Open navigation menu");
}
if (navToggle && navMenu) {
navToggle.addEventListener("click", function () {
const isOpen = navMenu.classList.toggle("show");
navToggle.setAttribute("aria-expanded", String(isOpen));
navToggle.setAttribute("aria-label", isOpen ? "Close navigation menu" : "Open navigation menu");
});
navLinks.forEach(function (link) {
link.addEventListener("click", closeMenu);
});
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") closeMenu();
});
}
function updateVisiblePosts() {
const query = normalize(searchInput ? searchInput.value : "");
let visibleCount = 0;
postItems.forEach(function (item) {
const category = normalize(item.getAttribute("data-category"));
const searchable = normalize(item.getAttribute("data-search")) + " " + normalize(item.textContent);
const matchesFilter = activeFilter === "all" || category === activeFilter;
const matchesSearch = !query || searchable.indexOf(query) !== -1;
const shouldShow = matchesFilter && matchesSearch;
item.classList.toggle("is-hidden", !shouldShow);
if (shouldShow) visibleCount += 1;
});
if (resultsText) {
resultsText.textContent = visibleCount === 1 ? "Showing 1 article." : "Showing " + visibleCount + " articles.";
}
if (emptyState) {
emptyState.hidden = visibleCount !== 0;
}
}
if (searchInput) {
searchInput.addEventListener("input", updateVisiblePosts);
}
filterButtons.forEach(function (button) {
button.addEventListener("click", function () {
activeFilter = button.getAttribute("data-filter") || "all";
filterButtons.forEach(function (currentButton) {
const isActive = currentButton === button;
currentButton.classList.toggle("active", isActive);
currentButton.setAttribute("aria-pressed", String(isActive));
});
updateVisiblePosts();
});
});
if (newsletterForm && formMessage) {
newsletterForm.addEventListener("submit", function (event) {
event.preventDefault();
const emailInput = newsletterForm.querySelector("input[type='email']");
const email = emailInput ? emailInput.value.trim() : "";
if (!email) {
formMessage.textContent = "Please enter your email address.";
return;
}
formMessage.textContent = "Thanks! You are on the list.";
newsletterForm.reset();
});
}
function createVisitorsChart() {
if (!chartCanvas) return;
if (typeof Chart === "undefined") {
chartCanvas.hidden = true;
if (chartFallback) chartFallback.hidden = false;
return;
}
const context = chartCanvas.getContext("2d");
const gradient = context.createLinearGradient(0, 0, 0, 320);
gradient.addColorStop(0, "rgba(79, 70, 229, 0.24)");
gradient.addColorStop(1, "rgba(6, 182, 212, 0.02)");
new Chart(context, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: "Monthly visitors",
data: [8200, 9400, 11200, 12800, 15100, 17300, 19800, 22100, 24600, 27400, 31600, 34800],
borderColor: "#4f46e5",
backgroundColor: gradient,
pointBackgroundColor: "#4f46e5",
pointBorderColor: "#ffffff",
pointBorderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6,
borderWidth: 3,
tension: 0.35,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
mode: "index",
intersect: false,
callbacks: {
label: function (context) {
return "Visitors: " + context.parsed.y.toLocaleString();
}
}
}
},
interaction: {
mode: "nearest",
axis: "x",
intersect: false
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: "#667085",
font: {
weight: "700"
}
}
},
y: {
beginAtZero: true,
grid: {
color: "rgba(102, 112, 133, 0.16)"
},
ticks: {
color: "#667085",
callback: function (value) {
return value >= 1000 ? value / 1000 + "K" : value;
}
}
}
}
}
});
}
if ("IntersectionObserver" in window && navLinks.length) {
const sections = navLinks
.map(function (link) {
const href = link.getAttribute("href");
return href && href.startsWith("#") ? root.querySelector(href) : null;
})
.filter(Boolean);
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
navLinks.forEach(function (link) {
link.classList.toggle("active", link.getAttribute("href") === "#" + entry.target.id);
});
}
});
}, { rootMargin: "-30% 0px -55% 0px", threshold: 0.05 });
sections.forEach(function (section) {
observer.observe(section);
});
}
createVisitorsChart();
updateVisiblePosts();
updateHeader();
window.addEventListener("scroll", updateHeader, { passive: true });
});