new go blocks (#43771)

### FAQ (`type: 'faq'`)
Accordion-style FAQ with expand/collapse. Each item has a `question` and
`answer`. Click to toggle — only one open at a time.

<img width="1309" height="610" alt="Screenshot 2026-03-13 at 17 31 31"
src="https://github.com/user-attachments/assets/289c8a12-3835-4f64-bbe6-fb7095df4e7c"
/>

### Code Block (`type: 'code-block'`)
Syntax-highlighted code display using shiki with custom Supabase
dark/light themes. Supports:
- **Single file** — `code` + optional `filename` + `language`
- **Multi-file** — `files: [{ filename, code, language }]` with
clickable tabs
- Line numbers via CSS counters
- All highlighting runs at build time (server component), only tab
switching is client-side

<img width="1283" height="415" alt="Screenshot 2026-03-13 at 17 32 07"
src="https://github.com/user-attachments/assets/9cc9a215-d5c9-47c9-8e21-c1dd3beca4ba"
/>

### Steps (`type: 'steps'`)
Numbered step-by-step guide with a vertical timeline connector. Each
item has `title` and either a plain `description` string or a `content`
slot accepting any React node (e.g. images, code blocks).

<img width="1119" height="810" alt="Screenshot 2026-03-13 at 17 32 20"
src="https://github.com/user-attachments/assets/cb67aaab-9ed4-42e2-bf1c-8d836024e469"
/>

### Quote (`type: 'quote'`)
Centered testimonial block with `quote`, `author`, optional `role`, and
optional `avatar` image.

<img width="1095" height="238" alt="Screenshot 2026-03-13 at 17 32 37"
src="https://github.com/user-attachments/assets/356a39ca-9f65-4414-bf77-6060993594a4"
/>

Author: stylessh

apps/www/_go/index.tsx

@@ -22,8 +22,10 @@ import pgconfDevContestThankYou from './events/pgconf-dev-2026/contest-thank-you
 import aiEngineerEuropeContest from './events/ai-engineer-europe-2026/contest'
 import aiEngineerEuropeContestThankYou from './events/ai-engineer-europe-2026/contest-thank-you'
 import startupGrindContest from './events/startup-grind-2026/contest'
+import exampleLeadGen from './lead-gen/example-lead-gen'
 
 const pages: GoPageInput[] = [
+  exampleLeadGen,
   byocEarlyAccess,
   amoe,
   amoeThankYou,

apps/www/_go/lead-gen/example-lead-gen.tsx

@@ -14,7 +14,7 @@ const page: GoPageInput = {
     title: 'Building Modern Applications with Supabase',
     subtitle: 'Sample ebook landing page',
     description:
-      'This is a sample lead generation page. The content below demonstrates the template layout. Replace it with your real ebook title, description, and cover image.',
+      'This is a sample lead generation page. The content below demonstrates the template layout and all available section components. Replace it with your real ebook title, description, and cover image.',
     image: {
       src: 'https://zhfonblqamxferhoguzj.supabase.co/functions/v1/generate-og?template=announcement&layout=vertical&copy=Modern+applications&icon=supabase.svg',
       alt: 'Ebook cover: Building Modern Applications with Supabase',
@@ -72,6 +72,92 @@ const page: GoPageInput = {
         },
       ],
     },
+    {
+      type: 'steps',
+      title: 'Get started in minutes',
+      description: 'Three simple steps to launch your project with Supabase.',
+      items: [
+        {
+          title: 'Create a project',
+          description:
+            'Sign up for a free Supabase account and create a new project from the dashboard. Your database, auth, and storage are provisioned instantly.',
+        },
+        {
+          title: 'Build your schema',
+          description:
+            'Use the Table Editor or write SQL directly to define your tables, relationships, and row-level security policies.',
+        },
+        {
+          title: 'Connect your app',
+          description:
+            'Install the Supabase client library for your framework and start querying your database with auto-generated APIs.',
+        },
+        {
+          title: 'Deploy to production',
+          content: (
+            <div className="mt-2 space-y-3">
+              <p className="text-foreground-lighter text-sm leading-relaxed">
+                Push your project live with a single click. Supabase handles scaling, backups, and
+                monitoring automatically.
+              </p>
+              <img
+                src="https://zhfonblqamxferhoguzj.supabase.co/functions/v1/generate-og?template=announcement&layout=vertical&copy=Deploy+to+production&icon=supabase.svg"
+                alt="Deploy to production"
+                className="rounded-lg border border-muted w-full max-w-lg"
+              />
+            </div>
+          ),
+        },
+      ],
+    },
+    {
+      type: 'code-block',
+      title: 'Simple, powerful APIs',
+      description: 'Interact with your database using the auto-generated client library.',
+      files: [
+        {
+          filename: 'app/page.tsx',
+          language: 'typescript',
+          code: `import { createClient } from '@supabase/supabase-js'
+
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+)
+
+// Fetch all published posts
+const { data: posts } = await supabase
+  .from('posts')
+  .select('id, title, content, author(name)')
+  .eq('published', true)
+  .order('created_at', { ascending: false })`,
+        },
+        {
+          filename: 'lib/supabase.ts',
+          language: 'typescript',
+          code: `import { createClient } from '@supabase/supabase-js'
+
+export const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+)`,
+        },
+        {
+          filename: 'schema.sql',
+          language: 'sql',
+          code: `create table posts (
+  id bigint generated always as identity primary key,
+  title text not null,
+  content text,
+  author_id bigint references authors(id),
+  published boolean default false,
+  created_at timestamptz default now()
+);
+
+alter table posts enable row level security;`,
+        },
+      ],
+    },
     {
       type: 'metrics',
       items: [
@@ -80,6 +166,44 @@ const page: GoPageInput = {
         { label: 'GitHub stars', value: '80,000+' },
       ],
     },
+    {
+      type: 'quote',
+      quote:
+        'Supabase has completely transformed how we build products. What used to take weeks now takes hours.',
+      author: 'Jane Smith',
+      role: 'CTO, Acme Corp',
+      avatar: {
+        src: 'https://i.pravatar.cc/80?u=jane-smith',
+        alt: 'Jane Smith',
+      },
+    },
+    {
+      type: 'faq',
+      title: 'Frequently asked questions',
+      description: 'Everything you need to know about getting started with Supabase.',
+      items: [
+        {
+          question: 'What is Supabase?',
+          answer:
+            'Supabase is an open-source Firebase alternative that provides a Postgres database, authentication, instant APIs, edge functions, real-time subscriptions, and storage. It gives you all the backend services you need to build a product.',
+        },
+        {
+          question: 'How much does Supabase cost?',
+          answer:
+            'Supabase has a generous free tier that includes 500MB of database space, 1GB of storage, and 50,000 monthly active users. Paid plans start at $25/month for additional resources and features like daily backups and priority support.',
+        },
+        {
+          question: 'Can I self-host Supabase?',
+          answer:
+            'Yes! Supabase is fully open-source and can be self-hosted using Docker. The official documentation provides detailed guides for deploying Supabase on your own infrastructure.',
+        },
+        {
+          question: 'What frameworks does Supabase support?',
+          answer:
+            'Supabase provides client libraries for JavaScript/TypeScript, Python, Dart (Flutter), Swift, and Kotlin. It works with any framework including Next.js, React, Vue, Svelte, and more.',
+        },
+      ],
+    },
     {
       type: 'tweets',
       title: 'Loved by developers',

packages/marketing/package.json

@@ -17,12 +17,13 @@
     "typescript": "catalog:"
   },
   "dependencies": {
-    "ui": "workspace:*",
-    "zod": "catalog:",
+    "@types/react": "catalog:",
     "react": "catalog:",
     "react-markdown": "^8.0.3",
     "server-only": "^0.0.1",
-    "@types/react": "catalog:"
+    "shiki": "^4.0.1",
+    "ui": "workspace:*",
+    "zod": "catalog:"
   },
   "license": "MIT"
 }

packages/marketing/src/go/schemas.ts

@@ -233,6 +233,62 @@ export const tweetsSectionSchema = z.object({
   ctas: z.array(ctaSchema).optional(),
 })
 
+export const faqItemSchema = z.object({
+  question: z.string().min(1),
+  answer: z.string().min(1),
+})
+
+export const faqSectionSchema = z.object({
+  ...sectionBase,
+  type: z.literal('faq'),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  items: z.array(faqItemSchema).min(1),
+})
+
+export const codeFileSchema = z.object({
+  filename: z.string().min(1),
+  code: z.string().min(1),
+  language: z.string().optional().default('sql'),
+})
+
+export const codeBlockSectionSchema = z.object({
+  ...sectionBase,
+  type: z.literal('code-block'),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  /** Single-file mode */
+  code: z.string().optional(),
+  language: z.string().optional().default('sql'),
+  filename: z.string().optional(),
+  /** Multi-file mode — takes precedence over code/filename/language when set */
+  files: z.array(codeFileSchema).optional(),
+})
+
+export const stepItemSchema = z.object({
+  title: z.string().min(1),
+  description: z.string().optional(),
+  content: z.any().optional(),
+  icon: z.string().optional(),
+})
+
+export const stepsSectionSchema = z.object({
+  ...sectionBase,
+  type: z.literal('steps'),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  items: z.array(stepItemSchema).min(1),
+})
+
+export const quoteSectionSchema = z.object({
+  ...sectionBase,
+  type: z.literal('quote'),
+  quote: z.string().min(1),
+  author: z.string().min(1),
+  role: z.string().optional(),
+  avatar: imageSchema.optional(),
+})
+
 // ----- Dynamic sections -----
 
 export const goSectionSchema = z.discriminatedUnion('type', [
@@ -243,6 +299,10 @@ export const goSectionSchema = z.discriminatedUnion('type', [
   featureGridSectionSchema,
   metricsSectionSchema,
   tweetsSectionSchema,
+  faqSectionSchema,
+  codeBlockSectionSchema,
+  stepsSectionSchema,
+  quoteSectionSchema,
 ])
 
 // ----- Page-level schemas -----
@@ -307,6 +367,13 @@ export type GoFeatureGridSection = z.infer<typeof featureGridSectionSchema>
 export type GoMetricItem = z.infer<typeof metricItemSchema>
 export type GoMetricsSection = z.infer<typeof metricsSectionSchema>
 export type GoTweetsSection = z.infer<typeof tweetsSectionSchema>
+export type GoFaqItem = z.infer<typeof faqItemSchema>
+export type GoFaqSection = z.infer<typeof faqSectionSchema>
+export type GoCodeFile = z.infer<typeof codeFileSchema>
+export type GoCodeBlockSection = z.infer<typeof codeBlockSectionSchema>
+export type GoStepItem = z.infer<typeof stepItemSchema>
+export type GoStepsSection = z.infer<typeof stepsSectionSchema>
+export type GoQuoteSection = z.infer<typeof quoteSectionSchema>
 export type GoSection = z.infer<typeof goSectionSchema>
 export type GoMetadata = z.infer<typeof metadataSchema>
 

packages/marketing/src/go/sections/CodeBlockSection.tsx

@@ -0,0 +1,84 @@
+import { codeToHtml } from 'shiki'
+
+import type { GoCodeBlockSection } from '../schemas'
+import CodeBlockTabs from './CodeBlockTabs'
+import { supabaseDark, supabaseLight } from './codeThemes'
+
+const lineNumberStyles = `
+  .go-code code { counter-reset: line; }
+  .go-code code .line { counter-increment: line; }
+  .go-code code .line::before {
+    content: counter(line);
+    display: inline-block;
+    width: 2ch;
+    margin-right: 1.5ch;
+    text-align: right;
+    color: hsl(var(--foreground-light));
+    opacity: 0.35;
+  }
+`
+
+async function highlightCode(code: string, language: string) {
+  const [darkHtml, lightHtml] = await Promise.all([
+    codeToHtml(code, { lang: language, theme: supabaseDark }),
+    codeToHtml(code, { lang: language, theme: supabaseLight }),
+  ])
+  return { darkHtml, lightHtml }
+}
+
+export default async function CodeBlockSection({ section }: { section: GoCodeBlockSection }) {
+  const isMultiFile = section.files && section.files.length > 0
+  const isSingleFileWithName = !isMultiFile && section.filename && section.code
+
+  // Build the highlighted files array
+  const highlightedFiles = isMultiFile
+    ? await Promise.all(
+        section.files!.map(async (file) => {
+          const { darkHtml, lightHtml } = await highlightCode(file.code, file.language ?? 'sql')
+          return { filename: file.filename, darkHtml, lightHtml }
+        })
+      )
+    : section.code
+      ? [
+          {
+            filename: section.filename ?? '',
+            ...(await highlightCode(section.code, section.language ?? 'sql')),
+          },
+        ]
+      : []
+
+  const showTabs =
+    highlightedFiles.length > 1 || (highlightedFiles.length === 1 && isSingleFileWithName)
+
+  return (
+    <div className="max-w-[80rem] w-full min-w-0 mx-auto px-8">
+      {(section.title || section.description) && (
+        <div className="mb-12">
+          {section.title && (
+            <h2 className="text-2xl sm:text-3xl font-medium text-foreground">{section.title}</h2>
+          )}
+          {section.description && (
+            <p className="text-foreground-lighter mt-3 text-lg">{section.description}</p>
+          )}
+        </div>
+      )}
+      <style dangerouslySetInnerHTML={{ __html: lineNumberStyles }} />
+      <div className="go-code border border-muted rounded-xl overflow-hidden w-full">
+        {showTabs ? (
+          <CodeBlockTabs files={highlightedFiles} />
+        ) : highlightedFiles.length === 1 ? (
+          <>
+            <div
+              className="hidden dark:block px-5 py-4 sm:px-6 sm:py-5 overflow-x-auto text-[13px] leading-[1.6] [&_pre]:!bg-transparent [&_pre]:!m-0 [&_code]:font-mono"
+              dangerouslySetInnerHTML={{ __html: highlightedFiles[0].darkHtml }}
+            />
+            <div
+              className="block dark:hidden px-5 py-4 sm:px-6 sm:py-5 overflow-x-auto text-[13px] leading-[1.6] [&_pre]:!bg-transparent [&_pre]:!m-0 [&_code]:font-mono"
+              dangerouslySetInnerHTML={{ __html: highlightedFiles[0].lightHtml }}
+            />
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}

packages/marketing/src/go/sections/CodeBlockTabs.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from 'ui'
+
+interface CodeBlockTabsProps {
+  files: { filename: string; darkHtml: string; lightHtml: string }[]
+}
+
+export default function CodeBlockTabs({ files }: CodeBlockTabsProps) {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  return (
+    <>
+      <div className="flex border-b border-muted bg-surface-200/50">
+        {files.map((file, i) => (
+          <button
+            key={file.filename}
+            type="button"
+            onClick={() => setActiveIndex(i)}
+            className={cn(
+              'px-5 py-3 text-xs font-mono transition-colors',
+              i === activeIndex
+                ? 'text-foreground border-b border-foreground -mb-px'
+                : 'text-foreground-lighter hover:text-foreground-light'
+            )}
+          >
+            {file.filename}
+          </button>
+        ))}
+      </div>
+      <div
+        className="hidden dark:block px-5 py-4 sm:px-6 sm:py-5 overflow-x-auto text-[13px] leading-[1.6] [&_pre]:!bg-transparent [&_pre]:!m-0 [&_code]:font-mono"
+        dangerouslySetInnerHTML={{ __html: files[activeIndex].darkHtml }}
+      />
+      <div
+        className="block dark:hidden px-5 py-4 sm:px-6 sm:py-5 overflow-x-auto text-[13px] leading-[1.6] [&_pre]:!bg-transparent [&_pre]:!m-0 [&_code]:font-mono"
+        dangerouslySetInnerHTML={{ __html: files[activeIndex].lightHtml }}
+      />
+    </>
+  )
+}