{% extends "base.html" %}
{% block head_extra %}
<title>Blog — AgentForms</title>
<meta name="description" content="Product updates, technical deep dives, and thoughts on AI form infrastructure from the AgentForms team.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://agentforms.io/blog/">
<meta property="og:title" content="Blog — AgentForms">
<meta property="og:description" content="Product updates, technical deep dives, and thoughts on AI form infrastructure.">
<meta property="og:image" content="https://agentforms.io/static/og-image.png">
<meta property="og:site_name" content="AgentForms">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Blog — AgentForms">
<meta name="twitter:description" content="Product updates, technical deep dives, and thoughts on AI form infrastructure.">
<meta name="twitter:image" content="https://agentforms.io/static/og-image.png">
<link rel="canonical" href="https://agentforms.io/blog/">
{% endblock %}
{% block content %}
<style>
/* ─── Blog Index Styling ─── */
.blog-index {
max-width: 760px;
margin: 0 auto;
padding: 40px 24px 80px;
}
.blog-index-header {
margin-bottom: 48px;
}
.blog-index-header h1 {
font-size: 2.4em;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 8px;
}
.blog-index-header p {
font-size: 1.1em;
color: var(--text-muted);
line-height: 1.5;
}
/* Featured post */
.blog-featured {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px;
margin-bottom: 48px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
transition: box-shadow 0.2s, border-color 0.2s;
}
.blog-featured:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
border-color: #ccc;
}
.blog-featured-badge {
display: inline-block;
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 16px;
}
.blog-featured h2 {
margin: 0 0 12px;
font-size: 1.5em;
font-weight: 700;
line-height: 1.25;
}
.blog-featured h2 a {
color: var(--text);
text-decoration: none;
transition: color 0.15s;
}
.blog-featured h2 a:hover {
color: var(--accent);
}
.blog-featured-summary {
color: var(--text-muted);
font-size: 1em;
line-height: 1.6;
margin-bottom: 16px;
}
/* Post cards */
.blog-post-card {
padding: 28px 0;
border-bottom: 1px solid var(--border);
transition: border-color 0.2s;
}
.blog-post-card:first-of-type {
padding-top: 0;
}
.blog-post-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
.blog-post-card:hover .blog-post-title a {
color: var(--accent);
}
.blog-post-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
font-size: 13px;
color: var(--text-muted);
}
.blog-post-date {
color: var(--text-muted);
}
.blog-post-tag {
display: inline-block;
background: var(--accent-dim);
color: var(--accent-bright);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.blog-post-title {
margin-bottom: 8px;
font-size: 1.3em;
font-weight: 700;
line-height: 1.3;
}
.blog-post-title a {
color: var(--text);
text-decoration: none;
transition: color 0.15s;
}
.blog-post-title a:hover {
color: var(--accent);
}
.blog-post-summary {
color: var(--text-muted);
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 12px;
}
.blog-post-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.blog-read-more {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--accent);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: gap 0.15s;
}
.blog-read-more:hover {
gap: 8px;
}
.blog-reading-time {
font-size: 13px;
color: var(--text-dim);
}
/* Empty state */
.blog-empty {
text-align: center;
padding: 60px 24px;
color: var(--text-muted);
}
.blog-empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.4;
}
.blog-empty h3 {
margin-bottom: 8px;
color: var(--text);
font-size: 1.2em;
}
/* Responsive */
@media (max-width: 640px) {
.blog-index {
padding: 24px 16px 60px;
}
.blog-index-header h1 {
font-size: 1.8em;
}
.blog-featured {
padding: 24px;
}
.blog-featured h2 {
font-size: 1.25em;
}
.blog-post-title {
font-size: 1.15em;
}
}
</style>
<div class="blog-index">
<header class="blog-index-header">
<h1>Blog</h1>
<p>Product updates, technical deep dives, and thoughts on AI form infrastructure from the AgentForms team.</p>
</header>
{% if posts %}
{% set featured = posts[0] %}
<article class="blog-featured">
<span class="blog-featured-badge">Latest</span>
<h2><a href="/blog/{{ featured.slug }}">{{ featured.title }}</a></h2>
{% if featured.summary %}
<p class="blog-featured-summary">{{ featured.summary }}</p>
{% endif %}
<div class="blog-post-meta">
{% if featured.date %}
<span class="blog-post-date">{{ featured.date }}</span>
{% endif %}
{% if featured.author %}
<span>· {{ featured.author }}</span>
{% endif %}
{% if featured.reading_time %}
<span class="blog-reading-time">{{ featured.reading_time }} min read</span>
{% endif %}
</div>
<a href="/blog/{{ featured.slug }}" class="blog-read-more">Read article →</a>
</article>
{% for post in posts[1:] %}
<article class="blog-post-card">
<div class="blog-post-meta">
{% if post.date %}
<span class="blog-post-date">{{ post.date }}</span>
{% endif %}
{% if post.author %}
<span>· {{ post.author }}</span>
{% endif %}
{% for tag in post.tags %}
<span class="blog-post-tag">{{ tag }}</span>
{% endfor %}
{% if post.reading_time %}
<span class="blog-reading-time" style="margin-left:auto;">{{ post.reading_time }} min read</span>
{% endif %}
</div>
<h2 class="blog-post-title">
<a href="/blog/{{ post.slug }}">{{ post.title }}</a>
</h2>
{% if post.summary %}
<p class="blog-post-summary">{{ post.summary }}</p>
{% endif %}
<div class="blog-post-footer">
<a href="/blog/{{ post.slug }}" class="blog-read-more">Read more →</a>
</div>
</article>
{% endfor %}
{% else %}
<div class="blog-empty">
<div class="blog-empty-icon">📝</div>
<h3>No posts yet</h3>
<p>Check back soon for updates from the AgentForms team.</p>
</div>
{% endif %}
</div>
{% endblock %}