feat(blog): add Vercel-inspired patterns and Tone of Voice alignment

- Add reading time display to blog posts
- Create BlogPostCTA component with 4 variants (default, extension, cloud, enterprise)
- Add zebra striping to tables in blog posts
- Add CTA to blog landing and paginated pages
- Remove 'Posted' prefix from dates
- Update blog description: 'How teams use agents to iterate, review, and ship PRs with proof'
- Add BlogPostList and BlogPagination components
- Add 100+ new blog posts from content pipeline

Author: mp-roocode

apps/web-roo-code/src/app/blog/[slug]/page.tsx

@@ -5,6 +5,9 @@
  * Renders a single blog post from Markdown.
  * Uses dynamic rendering (force-dynamic) for request-time publish gating.
  * Does NOT use generateStaticParams to avoid static generation.
+ *
+ * AEO Enhancement: Parses FAQ sections from markdown, renders as accordion,
+ * and generates FAQPage JSON-LD schema for AI search optimization.
  */
 
 import type { Metadata } from "next"
@@ -13,11 +16,19 @@ import { notFound } from "next/navigation"
 import Script from "next/script"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { getBlogPostBySlug, getAdjacentPosts, formatPostDatePt } from "@/lib/blog"
+import { ChevronLeft, ChevronRight, Clock } from "lucide-react"
+import {
+	getBlogPostBySlug,
+	getAdjacentPosts,
+	formatPostDatePt,
+	calculateReadingTime,
+	formatReadingTime,
+} from "@/lib/blog"
 import { SEO } from "@/lib/seo"
 import { ogImageUrl } from "@/lib/og"
 import { BlogPostAnalytics } from "@/components/blog/BlogAnalytics"
+import { BlogFAQ, type FAQItem } from "@/components/blog/BlogFAQ"
+import { BlogPostCTA } from "@/components/blog/BlogPostCTA"
 
 // Force dynamic rendering for request-time publish gating
 export const dynamic = "force-dynamic"
@@ -27,6 +38,58 @@ interface Props {
 	params: Promise<{ slug: string }>
 }
 
+/**
+ * Parse FAQ section from markdown content
+ *
+ * Looks for a section starting with "## Frequently asked questions"
+ * and extracts H3 questions with their content as answers.
+ *
+ * Returns the FAQ items and the content with FAQ section removed.
+ */
+function parseFAQFromMarkdown(content: string): {
+	faqItems: FAQItem[]
+	contentWithoutFAQ: string
+} {
+	// Match FAQ section: ## Frequently asked questions (case-insensitive)
+	const faqSectionRegex = /^## Frequently asked questions\s*$/im
+	const faqMatch = content.match(faqSectionRegex)
+
+	if (!faqMatch || faqMatch.index === undefined) {
+		return { faqItems: [], contentWithoutFAQ: content }
+	}
+
+	const faqStartIndex = faqMatch.index
+	const beforeFAQ = content.slice(0, faqStartIndex).trim()
+	const faqSection = content.slice(faqStartIndex)
+
+	// Find where FAQ section ends (next H2 or end of content)
+	const nextH2Match = faqSection.slice(faqMatch[0].length).match(/^## /m)
+	const faqContent =
+		nextH2Match && nextH2Match.index !== undefined
+			? faqSection.slice(0, faqMatch[0].length + nextH2Match.index)
+			: faqSection
+
+	const afterFAQ =
+		nextH2Match && nextH2Match.index !== undefined ? faqSection.slice(faqMatch[0].length + nextH2Match.index) : ""
+
+	// Parse individual FAQ items (### Question followed by content)
+	const faqItems: FAQItem[] = []
+	const questionRegex = /^### (.+?)$\s*([\s\S]*?)(?=^### |$(?![\s\S]))/gm
+	let match
+
+	while ((match = questionRegex.exec(faqContent)) !== null) {
+		const question = match[1]?.trim()
+		const answer = match[2]?.trim()
+		if (question && answer) {
+			faqItems.push({ question, answer })
+		}
+	}
+
+	const contentWithoutFAQ = (beforeFAQ + "\n\n" + afterFAQ).trim()
+
+	return { faqItems, contentWithoutFAQ }
+}
+
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
 	const { slug } = await params
 	const post = getBlogPostBySlug(slug)
@@ -80,6 +143,14 @@ export default async function BlogPostPage({ params }: Props) {
 
 	const { previous, next } = getAdjacentPosts(slug)
 
+	// Calculate reading time
+	const readingTime = calculateReadingTime(post.content)
+	const readingTimeDisplay = formatReadingTime(readingTime)
+
+	// Parse FAQ section from markdown content
+	const { faqItems, contentWithoutFAQ } = parseFAQFromMarkdown(post.content)
+	const hasFAQ = faqItems.length > 0
+
 	// Article JSON-LD schema
 	const articleSchema = {
 		"@context": "https://schema.org",
@@ -134,6 +205,22 @@ export default async function BlogPostPage({ params }: Props) {
 		],
 	}
 
+	// FAQPage schema (only if post has FAQ section) - AEO optimization
+	const faqSchema = hasFAQ
+		? {
+				"@context": "https://schema.org",
+				"@type": "FAQPage",
+				mainEntity: faqItems.map((item) => ({
+					"@type": "Question",
+					name: item.question,
+					acceptedAnswer: {
+						"@type": "Answer",
+						text: item.answer,
+					},
+				})),
+			}
+		: null
+
 	return (
 		<>
 			<Script
@@ -146,6 +233,13 @@ export default async function BlogPostPage({ params }: Props) {
 				type="application/ld+json"
 				dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
 			/>
+			{faqSchema && (
+				<Script
+					id="faq-schema"
+					type="application/ld+json"
+					dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
+				/>
+			)}
 
 			<BlogPostAnalytics post={post} />
 
@@ -171,7 +265,14 @@ export default async function BlogPostPage({ params }: Props) {
 					<div className="prose prose-lg dark:prose-invert">
 						<header className="not-prose mb-8">
 							<h1 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">{post.title}</h1>
-							<p className="mt-4 text-muted-foreground">Posted {formatPostDatePt(post.publish_date)}</p>
+							<div className="mt-4 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+								<span>{formatPostDatePt(post.publish_date)}</span>
+								<span className="text-border">•</span>
+								<span className="flex items-center gap-1">
+									<Clock className="h-4 w-4" />
+									{readingTimeDisplay}
+								</span>
+							</div>
 							{post.tags.length > 0 && (
 								<div className="mt-4 flex flex-wrap gap-2">
 									{post.tags.map((tag) => (
@@ -231,9 +332,34 @@ export default async function BlogPostPage({ params }: Props) {
 								// Lists
 								ul: ({ ...props }) => <ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props} />,
 								ol: ({ ...props }) => <ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props} />,
+								// Tables with zebra striping (visible in both light and dark mode)
+								table: ({ ...props }) => (
+									<div className="not-prose my-6 w-full overflow-x-auto rounded-lg border border-border">
+										<table className="w-full border-collapse text-sm" {...props} />
+									</div>
+								),
+								thead: ({ ...props }) => <thead className="bg-muted" {...props} />,
+								tbody: ({ ...props }) => <tbody {...props} />,
+								tr: ({ ...props }) => (
+									<tr
+										className="border-b border-border last:border-b-0 transition-colors even:bg-muted/70 hover:bg-muted"
+										{...props}
+									/>
+								),
+								th: ({ ...props }) => (
+									<th className="px-4 py-3 text-left font-semibold text-foreground" {...props} />
+								),
+								td: ({ ...props }) => <td className="px-4 py-3" {...props} />,
 							}}>
-							{post.content}
+							{contentWithoutFAQ}
 						</ReactMarkdown>
+
+						{/* FAQ Section rendered as accordion */}
+						{hasFAQ && <BlogFAQ items={faqItems} />}
+
+						{/* Product CTA Module - Inspired by Vercel's blog design
+						    Default variant prioritizes Roo Code Cloud sign-up */}
+						<BlogPostCTA />
 					</div>
 
 					{/* Previous/Next Post Navigation */}

apps/web-roo-code/src/app/blog/page.tsx

@@ -2,25 +2,26 @@
  * Blog Index Page
  * MKT-68: Blog Index Page
  *
- * Lists all published blog posts, sorted newest-first.
+ * Lists published blog posts with pagination (12 posts per page).
  * Uses dynamic rendering (force-dynamic) for request-time publish gating.
  */
 
 import type { Metadata } from "next"
-import Link from "next/link"
 import Script from "next/script"
-import { getAllBlogPosts, formatPostDatePt } from "@/lib/blog"
+import { getPaginatedBlogPosts, getAllBlogPosts } from "@/lib/blog"
 import { SEO } from "@/lib/seo"
 import { ogImageUrl } from "@/lib/og"
 import { BlogIndexAnalytics } from "@/components/blog/BlogAnalytics"
+import { BlogPostList } from "@/components/blog/BlogPostList"
+import { BlogPagination } from "@/components/blog/BlogPagination"
+import { BlogPostCTA } from "@/components/blog/BlogPostCTA"
 
 // Force dynamic rendering for request-time publish gating
 export const dynamic = "force-dynamic"
 export const runtime = "nodejs"
 
 const TITLE = "Blog"
-const DESCRIPTION =
-	"Insights on AI-powered development, engineering practices, and building better software with Roo Code."
+const DESCRIPTION = "How teams use agents to iterate, review, and ship PRs with proof."
 const PATH = "/blog"
 
 export const metadata: Metadata = {
@@ -55,9 +56,10 @@ export const metadata: Metadata = {
 }
 
 export default function BlogIndexPage() {
-	const posts = getAllBlogPosts()
+	const { posts, currentPage, totalPages, totalPosts } = getPaginatedBlogPosts(1)
+	const allPosts = getAllBlogPosts()
 
-	// Schema.org CollectionPage + ItemList
+	// Schema.org CollectionPage + ItemList (includes all posts for SEO)
 	const blogSchema = {
 		"@context": "https://schema.org",
 		"@type": "CollectionPage",
@@ -66,7 +68,7 @@ export default function BlogIndexPage() {
 		url: `${SEO.url}${PATH}`,
 		mainEntity: {
 			"@type": "ItemList",
-			itemListElement: posts.map((post, index) => ({
+			itemListElement: allPosts.map((post, index) => ({
 				"@type": "ListItem",
 				position: index + 1,
 				url: `${SEO.url}/blog/${post.slug}`,
@@ -115,43 +117,18 @@ export default function BlogIndexPage() {
 					<h1 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Blog</h1>
 					<p className="mt-4 text-lg text-muted-foreground">{DESCRIPTION}</p>
 
-					{posts.length === 0 ? (
-						<div className="mt-12 text-center">
-							<p className="text-muted-foreground">No posts published yet. Check back soon!</p>
-						</div>
-					) : (
-						<div className="mt-12 space-y-12">
-							{posts.map((post) => (
-								<article key={post.slug} className="border-b border-border pb-12 last:border-b-0">
-									<Link href={`/blog/${post.slug}`} className="group">
-										<h2 className="text-xl font-semibold tracking-tight transition-colors group-hover:text-primary sm:text-2xl">
-											{post.title}
-										</h2>
-									</Link>
-									<p className="mt-2 text-sm text-muted-foreground">
-										Posted {formatPostDatePt(post.publish_date)}
-									</p>
-									<p className="mt-3 text-muted-foreground">{post.description}</p>
-									{post.tags.length > 0 && (
-										<div className="mt-4 flex flex-wrap gap-2">
-											{post.tags.map((tag) => (
-												<span
-													key={tag}
-													className="rounded bg-muted px-2 py-1 text-xs text-muted-foreground">
-													{tag}
-												</span>
-											))}
-										</div>
-									)}
-									<Link
-										href={`/blog/${post.slug}`}
-										className="mt-4 inline-block text-sm font-medium text-primary hover:underline">
-										Read more →
-									</Link>
-								</article>
-							))}
-						</div>
+					{totalPosts > 0 && totalPages > 1 && (
+						<p className="mt-2 text-sm text-muted-foreground">
+							Showing {posts.length} of {totalPosts} posts
+						</p>
 					)}
+
+					<BlogPostList posts={posts} />
+
+					<BlogPagination currentPage={currentPage} totalPages={totalPages} />
+
+					{/* Cloud CTA - shown after pagination */}
+					<BlogPostCTA />
 				</div>
 			</div>
 		</>