test — FlintLab Blog

<!DOCTYPE html>

Flintlab

The FlintLab Blog, Newsletter & Content Platform aims to establish a centralized engineering knowledge hub where visitors can discover technical articles, product updates, and engineering insights. The platform will also provide a seamless newsletter subscription experience and enhance the existing Demo Request form by capturing user consent for future product communication

“

Flintlab

<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>FlintLab Blog</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8f7f4; color: #1a1a18; line-height: 1.7; }

/* Nav */
nav { background: #fff; border-bottom: 1px solid #e8e6df; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; z-index: 100; }
.logo { font-size: 18px; font-weight: 700; color: #1a1a18; text-decoration: none; letter-spacing: -0.3px; }
.logo span { color: #4f46e5; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; color: #555; font-size: 14px; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: #1a1a18; font-weight: 500; }
.nav-cta { background: #1a1a18; color: #fff; padding: 8px 18px; border-radius: 8px; font-size: 14px; text-decoration: none; font-weight: 500; transition: opacity .2s; }
.nav-cta:hover { opacity: .85; }

/* Hero */
.hero { background: #fff; border-bottom: 1px solid #e8e6df; padding: 60px 2rem 50px; text-align: center; }
.hero-tag { display: inline-block; background: #eeedfb; color: #4f46e5; font-size: 12px; font-weight: 600; letter-spacing: .05em; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; text-transform: uppercase; }
.hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -1px; margin-bottom: 12px; color: #0f0f0e; }
.hero p { font-size: 17px; color: #666; max-width: 520px; margin: 0 auto 28px; }
.subscribe-bar { display: flex; gap: 10px; max-width: 400px; margin: 0 auto; }
.subscribe-bar input { flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; background: #f8f7f4; }
.subscribe-bar input:focus { border-color: #4f46e5; background: #fff; }
.subscribe-bar button { background: #4f46e5; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.subscribe-bar button:hover { background: #4338ca; }

/* Category filters */
.filters { padding: 24px 2rem 0; max-width: 1100px; margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }
.filter-btn { padding: 6px 16px; border-radius: 20px; border: 1px solid #ddd; background: #fff; font-size: 13px; cursor: pointer; color: #555; transition: all .2s; }
.filter-btn:hover, .filter-btn.active { background: #1a1a18; color: #fff; border-color: #1a1a18; }

/* Main layout */
.container { max-width: 1100px; margin: 0 auto; padding: 40px 2rem 80px; display: grid; grid-template-columns: 1fr 300px; gap: 48px; }
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } nav .nav-links { display: none; } }

/* Featured post */
.featured { grid-column: 1 / -1; background: #fff; border-radius: 16px; border: 1px solid #e8e6df; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) { .featured { grid-template-columns: 1fr; } }
.featured-img { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 40px; }
.featured-img-inner { text-align: center; color: #fff; }
.featured-img-inner svg { opacity: .9; margin-bottom: 12px; }
.featured-img-inner p { font-size: 13px; opacity: .7; }
.featured-content { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.post-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; margin-bottom: 14px; }
.tag-product { background: #e0f2fe; color: #0369a1; }
.tag-tutorial { background: #dcfce7; color: #15803d; }
.tag-insight { background: #fef9c3; color: #854d0e; }
.tag-culture { background: #fce7f3; color: #9d174d; }
.tag-case { background: #ede9fe; color: #5b21b6; }
.featured-content h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 12px; line-height: 1.3; }
.featured-content p { color: #555; font-size: 15px; margin-bottom: 20px; }
.post-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #888; margin-bottom: 20px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #4f46e5; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.read-link { display: inline-flex; align-items: center; gap: 6px; color: #4f46e5; font-size: 14px; font-weight: 500; text-decoration: none; }
.read-link:hover { text-decoration: underline; }

/* Post grid */
.posts-grid { display: flex; flex-direction: column; gap: 20px; }
.post-card { background: #fff; border: 1px solid #e8e6df; border-radius: 12px; padding: 24px; transition: box-shadow .2s, transform .2s; cursor: pointer; }
.post-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); transform: translateY(-2px); }
.post-card h3 { font-size: 16px; font-weight: 600; margin: 10px 0 8px; line-height: 1.4; color: #0f0f0e; }
.post-card p { font-size: 14px; color: #666; margin-bottom: 16px; }
.post-footer { display: flex; align-items: center; justify-content: space-between; }
.read-time { font-size: 12px; color: #aaa; }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; gap: 24px; }
.sidebar-card { background: #fff; border: 1px solid #e8e6df; border-radius: 12px; padding: 20px; }
.sidebar-card h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #888; margin-bottom: 14px; }
.popular-post { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #f0ede6; }
.popular-post:last-child { border-bottom: none; padding-bottom: 0; }
.popular-num { font-size: 18px; font-weight: 700; color: #e8e6df; min-width: 24px; }
.popular-post h5 { font-size: 13px; font-weight: 500; line-height: 1.4; margin-bottom: 2px; }
.popular-post span { font-size: 11px; color: #aaa; }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-pill { font-size: 12px; padding: 5px 12px; background: #f8f7f4; border: 1px solid #e8e6df; border-radius: 20px; color: #555; cursor: pointer; }
.topic-pill:hover { background: #1a1a18; color: #fff; border-color: #1a1a18; }
.newsletter-card { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border: none; }
.newsletter-card h4 { color: rgba(255,255,255,.7); }
.newsletter-card p { font-size: 13px; opacity: .85; margin-bottom: 14px; }
.newsletter-card input { width: 100%; padding: 9px 12px; border-radius: 7px; border: none; font-size: 13px; margin-bottom: 8px; }
.newsletter-card button { width: 100%; padding: 9px; background: #fff; color: #4f46e5; border: none; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; }
</style>
</head>
<body>

<nav>
<a class="logo" href="#">Flint<span>Lab</span></a>
<ul class="nav-links">
<li><a href="#">Product</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#" class="active">Blog</a></li>
<li><a href="#">Docs</a></li>
</ul>
<a class="nav-cta" href="#">Get started</a>
</nav>

<div class="hero">
<div class="hero-tag">FlintLab Journal</div>
<h1>Ideas, updates & insights</h1>
<p>Tutorials, product news, and thinking from the team building FlintLab.</p>
<div class="subscribe-bar">
<input type="email" placeholder="you@company.com"/>
<button>Subscribe</button>
</div>
</div>

<div class="filters">
<button class="filter-btn active">All</button>
<button class="filter-btn">Product updates</button>
<button class="filter-btn">Tutorials</button>
<button class="filter-btn">Insights</button>
<button class="filter-btn">Case studies</button>
<button class="filter-btn">Team culture</button>
</div>

<div class="container">

<div class="featured">
<div class="featured-img">
<div class="featured-img-inner">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="8" width="48" height="48" rx="12" fill="rgba(255,255,255,0.15)"/>
<path d="M20 32h24M20 24h16M20 40h20" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
</svg>
<p>Featured article</p>
</div>
</div>
<div class="featured-content">
<span class="post-tag tag-product">Product update</span>
<h2>Introducing FlintLab 2.0 — built for speed and scale</h2>
<p>We've completely rethought the core of Flitlab. Here's what's new, what's faster, and what it means for your team.</p>
<div class="post-meta">
<div class="avatar">AR</div>
<span>Aditi Rao</span>
<span>·</span>
<span>June 10, 2026</span>
<span>·</span>
<span>5 min read</span>
</div>
<a class="read-link" href="#">Read article →</a>
</div>
</div>

<div class="posts-grid">

<div class="post-card">
<span class="post-tag tag-tutorial">Tutorial</span>
<h3>How to set up your first workflow in FlintLab in under 10 minutes</h3>
<p>A step-by-step walkthrough for new users — from signup to your first automated pipeline, no prior experience needed.</p>
<div class="post-footer">
<div class="post-meta" style="margin:0">
<div class="avatar" style="background:#15803d">KP</div>
<span>Kiran Pillai</span>
<span>·</span><span>May 28, 2026</span>
</div>
<span class="read-time">4 min read</span>
</div>
</div>

<div class="post-card">
<span class="post-tag tag-insight">Insight</span>
<h3>Why most teams over-engineer their data pipelines (and how to stop)</h3>
<p>We analyzed 500 customer pipelines and found a surprising pattern: the most effective ones are often the simplest. Here's what we learned.</p>
<div class="post-footer">
<div class="post-meta" style="margin:0">
<div class="avatar" style="background:#854d0e">SM</div>
<span>Siddharth Mehta</span>
<span>·</span><span>May 15, 2026</span>
</div>
<span class="read-time">7 min read</span>
</div>
</div>

<div class="post-card">
<span class="post-tag tag-case">Case study</span>
<h3>How Zephyr Analytics cut processing time by 60% using FlintLab</h3>
<p>A deep dive into how the team at Zephyr rearchitected their data stack and the results they saw in the first 30 days.</p>
<div class="post-footer">
<div class="post-meta" style="margin:0">
<div class="avatar" style="background:#5b21b6">NJ</div>
<span>Naina Joshi</span>
<span>·</span><span>April 30, 2026</span>
</div>
<span class="read-time">6 min read</span>
</div>
</div>

<div class="post-card">
<span class="post-tag tag-culture">Team culture</span>
<h3>Building in public: what we shipped, broke, and learned in Q1</h3>
<p>An honest retrospective from our engineering team — including a production incident that taught us more than any planning session.</p>
<div class="post-footer">
<div class="post-meta" style="margin:0">
<div class="avatar" style="background:#9d174d">RD</div>
<span>Rohan Desai</span>
<span>·</span><span>April 12, 2026</span>
</div>
<span class="read-time">5 min read</span>
</div>
</div>

</div>

<aside class="sidebar">

<div class="sidebar-card newsletter-card">
<h4>Stay in the loop</h4>
<p>Get new posts delivered to your inbox every two weeks.</p>
<input type="email" placeholder="you@company.com"/>
<button>Subscribe free</button>
</div>

<div class="sidebar-card">
<h4>Popular this month</h4>
<div class="popular-post">
<span class="popular-num">01</span>
<div>
<h5>The 5 FlintLab features power users swear by</h5>
<span>2.4k reads</span>
</div>
</div>
<div class="popular-post">
<span class="popular-num">02</span>
<div>
<h5>FlintLab vs the alternatives: an honest comparison</h5>
<span>1.9k reads</span>
</div>
</div>
<div class="popular-post">
<span class="popular-num">03</span>
<div>
<h5>How to use FlintLab's API to automate reporting</h5>
<span>1.5k reads</span>
</div>
</div>
</div>

<div class="sidebar-card">
<h4>Browse topics</h4>
<div class="topic-list">
<span class="topic-pill">Automation</span>
<span class="topic-pill">Data pipelines</span>
<span class="topic-pill">Integrations</span>
<span class="topic-pill">Team tips</span>
<span class="topic-pill">API</span>
<span class="topic-pill">Product news</span>
<span class="topic-pill">Engineering</span>
<span class="topic-pill">Growth</span>
</div>
</div>

</aside>
</div>