SaaS
SaaS — Blog Content Hub
Copy-paste layout brief covering Navigation Bar, Hero Section, Featured Article and Article Grid — hand it to ChatGPT, Claude, or v0 as-is.
SaaS — Blog Content Hub is a copy-ready build prompt for saas pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
Everything on this page — the summary, the category and the how-to — is written by HowToPrompts; the link below goes to the original project.
| Use case | SaaS |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
Create a blog and content hub page for a SaaS product called "Flowline" (project management tool) that serves as the company's content marketing engine:
1. NAVIGATION BAR
- Logo: "Flowline" with abstract flow icon in #2563EB blue
- Links: Product, Solutions, Pricing, Resources (active dropdown), Company
- Resources dropdown: Blog, Guides, Webinars, Case Studies, API Docs
- Right side: Search icon, "Sign In" text link, "Start Free" button (#2563EB)
- Sticky with white background and subtle bottom border on scroll
2. HERO SECTION (full-width, 50vh)
- Light gradient background from #EFF6FF to white
- Large headline: "The Flowline Blog"
- Subheadline: "Insights on productivity, project management, and building better teams"
- Search bar with icon: "Search articles..." (480px max-width, centered)
- Topic filter pills below search: All, Productivity, Engineering, Remote Work, Leadership, Product Updates, Customer Stories
- Active pill filled #2563EB with white text, others outlined
3. FEATURED ARTICLE (full-width card, 400px height)
- Left 55%: large thumbnail image with rounded corners (12px)
- Right 45%: padding 48px
- Category badge: "PRODUCTIVITY" in #2563EB
- Title: "The 4-Day Work Week: How We Boosted Output by 23%"
- Excerpt: "After six months of experimentation, here's what we learned about compressed schedules, async communication, and measuring what matters."
- Author row: avatar, "Sarah Chen · Head of People" · "Mar 10, 2026" · "8 min read"
- "Read Article →" link in blue
- Card has subtle shadow and hover lift effect
4. ARTICLE GRID (3-column, 32px gap)
- 9 article cards total (3 rows), each card:
- Thumbnail image (16:9 ratio, rounded top corners)
- Category badge (small, colored by topic)
- Title (20px, semibold, 2-line clamp)
- Excerpt (14px, gray-600, 2-line clamp)
- Bottom row: author avatar (28px round), author name, date, read time
- Hover: subtle shadow increase, image slight zoom
Sample articles:
- "Async-First: 7 Rules for Teams That Ship Faster" — Engineering, 6 min
- "Building a Culture of Ownership in Remote Teams" — Remote Work, 10 min
- "What We Shipped in February 2026" — Product Updates, 4 min
- "How Designlab Reduced Project Delays by 40%" — Customer Stories, 7 min
- "The Manager's Guide to Running Better Standups" — Leadership, 5 min
- "Why We Replaced Meetings With Flowline Briefs" — Productivity, 9 min
- "CI/CD for Non-Engineers: A Visual Guide" — Engineering, 12 min
- "From Chaos to Clarity: Our Planning Framework" — Productivity, 8 min
- "Introducing Flowline AI: Your Smart Assistant" — Product Updates, 3 min
Category badge colors:
- Productivity: #2563EB (blue)
- Engineering: #7C3AED (purple)
- Remote Work: #059669 (green)
- Leadership: #D97706 (amber)
- Product Updates: #DC2626 (red)
- Customer Stories: #0891B2 (cyan)
5. NEWSLETTER SIGNUP BANNER (between row 2 and 3)
- Background: #1E3A5F dark blue with subtle dot pattern
- Headline: "Get smarter about work, weekly"
- Subheadline: "Join 12,000+ managers and makers. No spam, unsubscribe anytime."
- Email input + "Subscribe" button inline (max-width 500px)
- Small text: "By subscribing, you agree to our Privacy Policy"
- Decorative envelope icon
6. PAGINATION
- "Load More Articles" button (outline style, centered)
- Or numbered pagination: ← 1 2 3 ... 12 →
- Show "Showing 9 of 108 articles"
7. RESOURCE SIDEBAR (right rail on desktop, 300px width)
- "Popular This Month" — top 5 articles, numbered list with titles and read counts
1. "The 4-Day Work Week..." — 14.2K reads
2. "Async-First: 7 Rules..." — 9.8K reads
3. "Flowline AI: Your Smart..." — 8.1K reads
4. "Manager's Guide to Standups" — 6.4K reads
5. "CI/CD for Non-Engineers" — 5.7K reads
- Divider
- "Free Resources" section:
- "📘 The Remote Team Playbook" — Download PDF
- "📊 Project Health Scorecard" — Download Template
- "🎥 Flowline Masterclass" — Watch Free
Each with thumbnail, title, and download/watch CTA
8. TOPIC PAGES SECTION (below main grid)
- Headline: "Explore by Topic"
- 6 topic cards in 3x2 grid:
- Icon + topic name + article count
- "Productivity — 28 articles"
- "Engineering — 22 articles"
- "Remote Work — 19 articles"
- "Leadership — 15 articles"
- "Product Updates — 14 articles"
- "Customer Stories — 10 articles"
- Each card links to filtered view, hover border highlight
9. FOOTER CTA
- Light blue background (#EFF6FF)
- "Ready to work smarter?"
- "See how Flowline helps teams ship 2x faster."
- "Start Free Trial" button and "Book a Demo" outline button
Design: Clean editorial style. Primary: #2563EB (blue), text: #111827 (gray-900), body: #4B5563 (gray-600), backgrounds: white and #F9FAFB. Typography: Inter for body, Cal Sans or similar geometric sans for headings. Cards with 8px border-radius and #E5E7EB borders. Generous whitespace between sections (80px).
Responsive: On tablet, article grid becomes 2 columns with sidebar below. On mobile, single column, featured article stacks vertically (image on top), topic pills horizontally scrollable, newsletter banner full-width with stacked input/button. Sticky mobile header with hamburger menu.How to use it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts