create-bearminion 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # create-bearminion
 
+## 1.2.0
+
+### Minor Changes
+
+- 4c3f823: New sections and section options in the default template, from the bearminion.com design:
+  
+  - **Media**: one video or image under a heading, in centered, wide and split layouts, with a shape (16:9, 4:3, 21:9, 1:1) and a switch for the heading. A YouTube or Vimeo link plays through youtube-nocookie.com or Vimeo with Do Not Track, and nothing loads until the visitor presses play.
+  - **Steps**: two to six short points with an icon each, as cards, a rail or a list, numbered or not. The grid never leaves one card alone on a row.
+  - **Hero**: an install command with a Copy button in three styles (in the button row, a chip, or a terminal), a switch that hides the primary button, and a linked badge in place of the eyebrow, and an optional soft background glow in the accent color.
+  - **Features**: the bento layout takes three to six cards instead of exactly four.
+  - **Text + Image**: points are rich text, so they can hold bold, links and `code`.
+  - **Call to action**: the terminal layout is a dark terminal in every tone, and each printed line can start with a prompt such as → or ✓.
+  
+  Fixes: headings render semibold and eyebrows in the mono font, as the type scale defines (a default weight and font were overriding them); a section with motion switched off is no longer hidden on a long page; an empty Video or Media frame shows only in the editor and is left out of the built site.
+- 9261888: The default template has a new **Video** section (framed, wide and split layouts) for an `.mp4` or `.webm` file, with a poster image, a caption, and a `loop` playback option that plays muted while the video is on screen and stays paused with reduced motion. YouTube and other page links are refused with a message saying why. The hero gains an optional `command`, shown with a copy button, and the terminal call to action's printed lines are now editable (`output`) instead of fixed text.
+
+### Patch Changes
+
+- d584e76: The FAQ's split layout had a fixed "Contact us" link to `#contact` that could not be edited or removed, and pointed nowhere on a page without a contact section. It is now an optional `link`, editable in the editor like any other button.
+- 19c1e5a: The default template uses the new field rules: Steps icons are picked from an icon grid, Media shows the Video, Poster and Label fields only for a video, the Image field only for an image, and the heading fields only while Show heading is on, and Hero hides the command while Install command is off, the primary button while it is switched off, the secondary button while the command takes its place, and the badge in the editorial layout.
+
 ## 1.1.0
 
 ### Minor Changes

package/README.md

@@ -54,7 +54,7 @@ The folder must be new or empty. Inside an existing git repository, the site is
 
 ## What you get
 
-The [default BearMinion template](https://github.com/langehelp-software/bearminion/tree/main/templates/default): an Astro and Tailwind site with ten section types, the [`bearminion`](https://www.npmjs.com/package/bearminion) editor at the same version as this package, and content as JSON files you own and commit. The template ships inside this package, so it works offline and always matches its editor.
+The [default BearMinion template](https://github.com/langehelp-software/bearminion/tree/main/templates/default): an Astro and Tailwind site with thirteen section types, the [`bearminion`](https://www.npmjs.com/package/bearminion) editor at the same version as this package, and content as JSON files you own and commit. The template ships inside this package, so it works offline and always matches its editor.
 
 ## Learn more
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bearminion",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Create a BearMinion site: an Astro website you edit by clicking on it.",
   "license": "MIT",
   "author": "Jakub Lange",

package/template/README.md

@@ -29,18 +29,18 @@ This template is yours to change: it is the theme. `bearminion` is the only runt
 
 Organisms are Header, Navigation, MobileMenu, and Footer. A modal, a dialog, and a cookie banner belong in this folder too. They are the chrome around every page (or a standalone widget), and they are fed by `content/site.json`.
 
-Sections are `hero`, `logoStrip`, `features`, `textImage`, `stats`, `testimonials`, `pricing`, `faq`, `cta`, and `contact`. Each page entry is `{ id, anchor?, type, variant, tone, motion?, props }`. `anchor` is an optional lowercase slug, unique on the page, and it becomes the section element's `id`. `data-section-id` stays the section id. `[data-section-id]` sets `scroll-margin-top: 7rem` so a sticky or floating header does not cover the target. `html` uses `scroll-behavior: smooth`, and `prefers-reduced-motion: reduce` forces `scroll-behavior: auto`. Section components are built from molecules and atoms. A section may use an organism when it needs one, such as a modal. The section root carries `data-section-id`, `data-section-type`, `data-variant`, `data-tone`, and `data-motion`. Atoms accept a `class` and forward `data-*` attributes, including `data-field`, so the editor can find the text.
+Sections are `hero`, `logoStrip`, `steps`, `features`, `textImage`, `stats`, `testimonials`, `pricing`, `video`, `media`, `faq`, `cta`, and `contact`. Each page entry is `{ id, anchor?, type, variant, tone, motion?, props }`. `anchor` is an optional lowercase slug, unique on the page, and it becomes the section element's `id`. `data-section-id` stays the section id. `[data-section-id]` sets `scroll-margin-top: 7rem` so a sticky or floating header does not cover the target. `html` uses `scroll-behavior: smooth`, and `prefers-reduced-motion: reduce` forces `scroll-behavior: auto`. Section components are built from molecules and atoms. A section may use an organism when it needs one, such as a modal. The section root carries `data-section-id`, `data-section-type`, `data-variant`, `data-tone`, and `data-motion`. Atoms accept a `class` and forward `data-*` attributes, including `data-field`, so the editor can find the text.
 
-Paragraph fields (`sub`, `intro`, `body`, `description`, `quote`, `note`, `thanks`, and FAQ answers) are markdown. The template renders bold, italic, links, and paragraphs through `bearminion/rich-text`, escapes every other character, and adds `rel="noopener noreferrer"` on `http` and `https` links.
+Paragraph fields (`sub`, `intro`, `body`, `description`, `quote`, `note`, `thanks`, FAQ answers and Text + Image `points`) are markdown. The template renders bold, italic, inline `code` (a mono chip), links, and paragraphs through `bearminion/rich-text`, escapes every other character, and adds `rel="noopener noreferrer"` on `http` and `https` links.
 
 ```text
 src/components/
   atoms/        Typography, Button, Image, LogoMark, Emphasis
-  molecules/    SectionShell, SectionHeader, MediaFrame, Pill
+  molecules/    SectionShell, SectionHeader, MediaFrame, Pill, CommandLine
   organisms/    Header, Navigation, MobileMenu, Footer, plus site-definition.ts (header and footer layouts, limits)
   sections/     one directory per type, plus definitions.ts, registry.ts, shared.ts, SectionList.astro
     hero/         definition.ts (zod schema, defaults, options), wireframe.ts (picker thumbnail), Hero.astro, Hero.stories.ts
-    logo-strip/ features/ text-image/ stats/ testimonials/ pricing/ faq/ cta/ contact/
+    logo-strip/ steps/ features/ text-image/ stats/ testimonials/ pricing/ video/ media/ faq/ cta/ contact/
   seo/          Seo
 ```
 
@@ -196,7 +196,7 @@ The style guide at `/style-guide` renders every typography size and button varia
 
 The page gets a shadow-root overlay. Click text with `data-field` to edit it, and hover a section (`data-section-id`) for add, duplicate, move, and delete. The corner **Editor** button or Ctrl+E / Cmd+E opens the sidebar. Ctrl+S / Cmd+S saves. Escape leaves a field, then closes the add picker or the sidebar. Unsaved edits turn the corner dot amber and trigger a beforeunload warning.
 
-A variant change or a new, duplicated, moved, or deleted section is re-rendered by `POST /__bearminion/api/preview`. The handler validates the draft, renders `SectionList` with Astro's container API inside the Vite SSR runner, and returns HTML. The overlay replaces `main#content`. Nothing is written until save. In dev, an image path under `src/assets/` that is missing from the eager glob is served from `/__bearminion/assets` so a new upload can use a plain `<img>` immediately. When the file is gone, that route returns a Missing image placeholder instead, so the page shows the gap. Production still resolves that path with `import.meta.glob` and Astro `<Image>`, and still throws if the file is missing; the editor's save validation keeps content from pointing at a missing file.
+A variant change, a new, duplicated, moved, or deleted section, and a sidebar value with no text of its own on the page (such as a video link) are re-rendered by `POST /__bearminion/api/preview`. The handler validates the draft, renders `SectionList` with Astro's container API inside the Vite SSR runner, and returns HTML. The overlay replaces `main#content` and runs scripts the page had not loaded, so a section type added from the picker works at once. A section script binds on load and again on the `bearminion:preview` event, and marks what it bound so it never binds twice. Nothing is written until save. In dev, an image path under `src/assets/` that is missing from the eager glob is served from `/__bearminion/assets` so a new upload can use a plain `<img>` immediately. When the file is gone, that route returns a Missing image placeholder instead, so the page shows the gap. Production still resolves that path with `import.meta.glob` and Astro `<Image>`, and still throws if the file is missing; the editor's save validation keeps content from pointing at a missing file.
 
 Header links nest up to three levels (`MAX_NAV_DEPTH`). Desktop navigation uses hover and focus flyouts. The mobile menu uses an accordion. The link picker lists pages, `#anchor` on the current page, `/page#anchor` on other pages, and a custom URL.
 

package/template/content/pages/index.json

@@ -368,6 +368,10 @@
             "q": "How do I get help?"
           }
         ],
+        "link": {
+          "href": "#contact",
+          "label": "Contact us"
+        },
         "marks": [
           {
             "end": 28,

package/template/package.json

@@ -19,7 +19,7 @@
     "@fontsource/jetbrains-mono": "^5.3.0",
     "@tailwindcss/vite": "^4.1.12",
     "astro": "^7.3.8",
-    "bearminion": "^1.1.0",
+    "bearminion": "^1.2.0",
     "class-variance-authority": "^0.7.1",
     "sharp": "^0.35.5",
     "tailwind-merge": "^3.7.0",

package/template/src/components/atoms/typography.ts

@@ -18,6 +18,7 @@ export const typography = cva('text-balance', {
         'mx-auto max-w-[16ch] font-sans text-[clamp(2.75rem,1.2rem+6.6cqi,7rem)] leading-[0.93] font-semibold tracking-[-0.05em]',
       'display-editorial': 'font-sans text-[clamp(3.25rem,0.5rem+11cqi,10.5rem)] leading-[0.86] font-semibold tracking-[-0.06em]',
       h2: 'font-sans text-[clamp(2rem,1.2rem+3.4cqi,3.75rem)] leading-none font-semibold tracking-[-0.04em]',
+      'h2-md': 'font-sans text-[clamp(2.25rem,1.3rem+3.6cqi,4rem)] leading-[0.98] font-semibold tracking-[-0.045em]',
       'h2-lg': 'font-sans text-[clamp(2.25rem,1.2rem+4.4cqi,4.75rem)] leading-[0.95] font-semibold tracking-[-0.05em]',
       h3: 'font-sans text-[1.25rem] leading-[1.25] font-semibold tracking-[-0.02em]',
       lead: 'text-pretty font-sans text-[clamp(1.0625rem,1rem+0.35cqi,1.25rem)] leading-[1.55]',
@@ -52,11 +53,11 @@ export const typography = cva('text-balance', {
       right: 'text-right',
     },
   },
+  // No default weight or font: the size already sets them (headings are semibold, eyebrows mono), and a default here
+  // would be merged in after the size and override it.
   defaultVariants: {
     size: 'body',
     color: 'default',
-    weight: 'regular',
-    font: 'sans',
   },
 })
 

package/template/src/components/molecules/CommandLine.astro

@@ -0,0 +1,109 @@
+---
+import { cn } from '../../lib/cn'
+
+interface Props {
+  /** The shell command, such as `npm create bearminion@latest`. */
+  command: string
+  /**
+   * `chip`: a small pill. `action`: a pill as tall as a button, for a button row. `terminal`: a dark block with a
+   * "Terminal" bar, the same in every tone.
+   */
+  variant?: 'chip' | 'action' | 'terminal'
+  class?: string
+  'data-field'?: string
+}
+
+const { command, variant = 'chip', class: className, 'data-field': dataField } = Astro.props
+const copyIcon = 'M8 8h11v11H8zM5 16V5h11'
+---
+
+{
+  variant === 'terminal' ? (
+    <div
+      class={cn(
+        'w-full max-w-[30rem] overflow-hidden rounded-2xl bg-[oklch(0.17_0.012_255)] text-left text-[oklch(0.93_0.004_250)] shadow-[0_0_0_1px_oklch(0.97_0.004_250/0.08),0_32px_64px_-40px_oklch(0.15_0.02_255/0.6)]',
+        className,
+      )}
+      data-command-line
+    >
+      <div class="flex items-center justify-between border-b border-[oklch(0.97_0.004_250/0.08)] py-2 ps-4 pe-2">
+        <span class="font-mono text-[0.6875rem] tracking-[0.08em] text-[oklch(0.93_0.004_250/0.55)] uppercase">Terminal</span>
+        <button
+          type="button"
+          class="h-[1.875rem] rounded-full bg-[oklch(0.97_0.004_250/0.08)] px-3 text-[0.75rem] font-medium transition-colors hover:bg-[oklch(0.97_0.004_250/0.14)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+          aria-label="Copy command"
+          data-copy-command
+        >
+          <span data-copy-label>Copy</span>
+        </button>
+      </div>
+      <div class="flex gap-3 overflow-x-auto p-4 font-mono text-[0.8125rem] leading-[1.6] whitespace-pre">
+        <span class="text-[oklch(0.87_0.2_145)] select-none" aria-hidden="true">$</span>
+        <code data-command data-field={dataField}>{command}</code>
+      </div>
+      <span class="sr-only" role="status" data-copy-status />
+    </div>
+  ) : (
+    <div
+      class={cn(
+        'inline-flex max-w-full items-center rounded-full bg-surface font-mono text-fg ring-line',
+        variant === 'action' ? 'h-12 gap-3.5 ps-[1.125rem] pe-1.5 text-[0.875rem]' : 'h-11 gap-3 ps-4 pe-1.5 text-[0.8125rem]',
+        className,
+      )}
+      data-command-line
+    >
+      <span class="text-muted select-none" aria-hidden="true">$</span>
+      <code class="min-w-0 truncate" data-command data-field={dataField}>{command}</code>
+      <button
+        type="button"
+        class={cn(
+          'inline-flex shrink-0 items-center gap-1.5 rounded-full bg-fg font-sans font-medium text-bg transition-opacity hover:opacity-85 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+          variant === 'action' ? 'h-9 px-3.5 text-[0.8125rem]' : 'h-8 px-3 text-[0.75rem]',
+        )}
+        aria-label="Copy command"
+        data-copy-command
+      >
+        {variant === 'action' && (
+          <svg viewBox="0 0 24 24" class="size-[13px]" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true">
+            <path d={copyIcon} />
+          </svg>
+        )}
+        <span data-copy-label>Copy</span>
+      </button>
+      <span class="sr-only" role="status" data-copy-status />
+    </div>
+  )
+}
+
+<script>
+  /** Copies the command as it is on the page now, so an edit in the editor is what gets copied. */
+  function bindCommandLines() {
+    for (const button of document.querySelectorAll<HTMLButtonElement>('[data-copy-command]')) {
+      if (button.dataset.bound === 'true') continue
+      button.dataset.bound = 'true'
+      const line = button.closest('[data-command-line]')
+      const label = button.querySelector('[data-copy-label]')
+      const status = line?.querySelector('[data-copy-status]')
+      button.addEventListener('click', async () => {
+        const code = line?.querySelector('[data-command]')
+        const command = code?.textContent?.trim() ?? ''
+        if (!command) return
+        try {
+          await navigator.clipboard.writeText(command)
+        } catch {
+          // No clipboard access (an insecure origin, or the permission was refused): select the text instead.
+          if (code) window.getSelection()?.selectAllChildren(code)
+          return
+        }
+        if (label) label.textContent = 'Copied'
+        if (status) status.textContent = 'Command copied'
+        window.setTimeout(() => {
+          if (label) label.textContent = 'Copy'
+          if (status) status.textContent = ''
+        }, 1600)
+      })
+    }
+  }
+  bindCommandLines()
+  document.addEventListener('bearminion:preview', bindCommandLines)
+</script>

package/template/src/components/molecules/SectionHeader.astro

@@ -11,7 +11,7 @@ interface Props {
   intro?: string
   align?: 'left' | 'center'
   headingAs?: 'h1' | 'h2'
-  size?: 'h2' | 'h2-lg' | 'display' | 'display-center' | 'display-editorial'
+  size?: 'h2' | 'h2-md' | 'h2-lg' | 'display' | 'display-center' | 'display-editorial'
   field?: (path: string) => string
   /** Prop name used for the intro `data-field` path. */
   introField?: string

package/template/src/components/sections/SectionList.astro

@@ -11,11 +11,14 @@ interface Props {
 const { sections, motion = true } = Astro.props
 const Hero = sectionComponents.hero
 const LogoStrip = sectionComponents.logoStrip
+const Steps = sectionComponents.steps
 const Features = sectionComponents.features
 const TextImage = sectionComponents.textImage
 const Stats = sectionComponents.stats
 const Testimonials = sectionComponents.testimonials
 const Pricing = sectionComponents.pricing
+const Video = sectionComponents.video
+const Media = sectionComponents.media
 const Faq = sectionComponents.faq
 const Cta = sectionComponents.cta
 const Contact = sectionComponents.contact
@@ -28,6 +31,8 @@ const Contact = sectionComponents.contact
         return <Hero section={section} index={index} motion={motion} />
       case 'logoStrip':
         return <LogoStrip section={section} index={index} motion={motion} />
+      case 'steps':
+        return <Steps section={section} index={index} motion={motion} />
       case 'features':
         return <Features section={section} index={index} motion={motion} />
       case 'textImage':
@@ -38,6 +43,10 @@ const Contact = sectionComponents.contact
         return <Testimonials section={section} index={index} motion={motion} />
       case 'pricing':
         return <Pricing section={section} index={index} motion={motion} />
+      case 'video':
+        return <Video section={section} index={index} motion={motion} />
+      case 'media':
+        return <Media section={section} index={index} motion={motion} />
       case 'faq':
         return <Faq section={section} index={index} motion={motion} />
       case 'cta':

package/template/src/components/sections/cta/Cta.astro

@@ -109,7 +109,7 @@ const bandSecondary = props.secondary ? buttonVariant(props.secondary, 'secondar
   }
   {
     section.variant === 'terminal' && (
-      <div class="section-container grid items-center gap-10 @min-[880px]:grid-cols-[minmax(22rem,1fr)_minmax(0,1fr)]" data-cta>
+      <div class="section-container grid grid-cols-[repeat(auto-fit,minmax(min(100%,22rem),1fr))] items-center gap-[clamp(2.5rem,6cqi,5rem)]" data-cta>
         {
           (props.heading || props.body || hasActions) && (
             <div class="flex flex-col items-start gap-6">
@@ -136,20 +136,43 @@ const bandSecondary = props.secondary ? buttonVariant(props.secondary, 'secondar
             </div>
           )
         }
-        <div class="rounded-panel bg-fg p-6 text-bg">
-          <div class="mb-4 flex items-center justify-between">
-            <span class="font-mono text-[0.6875rem] tracking-[0.08em] text-bg/60 uppercase">terminal</span>
+        {/* A dark terminal in every tone, like the one on your machine. Nothing to print, no terminal. */}
+        {(props.command || (props.output ?? []).length > 0) && (<div class="overflow-hidden rounded-[1.25rem] bg-[oklch(0.17_0.012_255)] text-[oklch(0.93_0.004_250)] shadow-[0_0_0_1px_oklch(0.97_0.004_250/0.08),0_40px_80px_-40px_oklch(0.15_0.02_255/0.6)]">
+          <div class="flex items-center justify-between border-b border-[oklch(0.97_0.004_250/0.08)] py-3 ps-4 pe-3">
+            <div class="flex gap-1.5" aria-hidden="true">
+              <span class="size-2.5 rounded-full bg-[oklch(0.97_0.004_250/0.18)]" />
+              <span class="size-2.5 rounded-full bg-[oklch(0.97_0.004_250/0.18)]" />
+              <span class="size-2.5 rounded-full bg-[oklch(0.97_0.004_250/0.18)]" />
+            </div>
             {props.command && (
-              <button type="button" data-copy class="font-mono text-[0.75rem] text-accent" data-command={props.command}>
+              <button
+                type="button"
+                data-copy
+                class="h-[1.875rem] rounded-full bg-[oklch(0.97_0.004_250/0.08)] px-3 text-[0.75rem] font-medium transition-colors hover:bg-[oklch(0.97_0.004_250/0.14)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.87_0.2_145)]"
+                aria-label="Copy command"
+                data-command={props.command}
+              >
                 <span data-copy-label>Copy</span>
               </button>
             )}
           </div>
-          <pre class="font-mono text-[0.8125rem] leading-[1.7] whitespace-pre-wrap text-bg/90"><code>{`$ ${props.command ?? ''}
-# pages live in content/pages
-# site chrome lives in content/site.json
-# production is the static build`}</code></pre>
-        </div>
+          <ol class="flex flex-col gap-2.5 overflow-x-auto px-5 pt-5 pb-6 font-mono text-[clamp(0.75rem,0.7rem+0.2cqi,0.875rem)] leading-[1.6]">
+            {props.command && (
+              <li class="flex gap-3 whitespace-pre">
+                <span class="text-[oklch(0.87_0.2_145)] select-none" aria-hidden="true">$</span>
+                <span data-terminal-command data-field={field('command')}>{props.command}</span>
+              </li>
+            )}
+            {(props.output ?? []).map((line, lineIndex) => (
+              <li class="flex gap-3 whitespace-pre">
+                <span class="min-w-[1ch] text-[oklch(0.87_0.2_145)] select-none" aria-hidden={line.prompt ? undefined : 'true'} data-field={line.prompt ? field(`output.${lineIndex}.prompt`) : undefined}>
+                  {line.prompt ?? ' '}
+                </span>
+                <span class="text-[oklch(0.93_0.004_250/0.45)]" data-field={field(`output.${lineIndex}.text`)}>{line.text}</span>
+              </li>
+            ))}
+          </ol>
+        </div>)}
       </div>
     )
   }
@@ -163,7 +186,9 @@ const bandSecondary = props.secondary ? buttonVariant(props.secondary, 'secondar
     const label = button.querySelector('[data-copy-label]')
     const original = label?.textContent ?? 'Copy'
     button.addEventListener('click', async () => {
-      const command = button.dataset.command ?? ''
+      // The command as it is on the page now, so an edit made in the editor is what gets copied.
+      const shown = button.closest('[data-cta]')?.querySelector('[data-terminal-command]')?.textContent?.trim()
+      const command = shown || button.dataset.command || ''
       try {
         await navigator.clipboard.writeText(command)
       } catch {

package/template/src/components/sections/cta/definition.ts

@@ -1,14 +1,23 @@
-import type { z } from 'zod'
+import { z } from 'zod'
 import { defineSection, linkSchema, richTextSchema, textSchema, withEmphasis } from 'bearminion'
 import { accent, heading } from '../shared'
 import { ctaWireframe } from './wireframe'
 
 export const ctaVariants = ['band', 'centered', 'terminal'] as const
 
+export const ctaLineSchema = z
+  .object({
+    prompt: textSchema.optional(),
+    text: textSchema,
+  })
+  .strict()
+
 export const ctaSchema = withEmphasis({
   heading,
   body: richTextSchema.optional(),
   command: textSchema.optional(),
+  /** Lines the terminal variant shows under the command, such as what it prints. `prompt` is a mark before the line, such as → or ✓. */
+  output: z.array(ctaLineSchema).max(8).optional(),
   primary: linkSchema.optional(),
   secondary: linkSchema.optional(),
 })
@@ -25,11 +34,16 @@ export const cta = defineSection({
     marks: accent('Ready to get started?', 'get started?'),
     body: 'One sentence that repeats the main benefit and tells the reader what happens next.',
     command: 'npm create astro@latest',
+    output: [
+      { text: '# pages live in content/pages' },
+      { text: '# site chrome lives in content/site.json' },
+      { text: '# production is the static build' },
+    ],
     primary: { label: 'Primary action', href: '#' },
     secondary: { label: 'Secondary action', href: '#' },
   },
   variants: ctaVariants,
   defaultVariant: 'band',
-  optional: { props: ['heading', 'body', 'command', 'primary', 'secondary'] },
+  optional: { props: ['heading', 'body', 'command', 'output', 'primary', 'secondary'], items: { output: ['prompt'] } },
   wireframe: ctaWireframe,
 })

package/template/src/components/sections/definitions.ts

@@ -12,10 +12,13 @@ import { faq } from './faq/definition'
 import { features } from './features/definition'
 import { hero } from './hero/definition'
 import { logoStrip } from './logo-strip/definition'
+import { media } from './media/definition'
 import { pricing } from './pricing/definition'
 import { stats } from './stats/definition'
+import { steps } from './steps/definition'
 import { testimonials } from './testimonials/definition'
 import { textImage } from './text-image/definition'
+import { video } from './video/definition'
 
 /**
  * Every section type of this site. Each one is defined in its own directory:
@@ -27,11 +30,14 @@ import { textImage } from './text-image/definition'
 export const sectionDefinitions = {
   hero,
   logoStrip,
+  steps,
   features,
   textImage,
   stats,
   testimonials,
   pricing,
+  video,
+  media,
   faq,
   cta,
   contact,

package/template/src/components/sections/faq/Faq.astro

@@ -1,5 +1,5 @@
 ---
-import { DEFAULT_CONTACT_ANCHOR } from '../shared'
+import { anchorAttrs } from '../../../lib/link-attrs'
 import type { Section } from '../definitions'
 import Typography from '../../atoms/Typography.astro'
 import SectionHeader from '../../molecules/SectionHeader.astro'
@@ -50,9 +50,14 @@ const reveal = section.motion ?? motion
               {props.more}
             </Typography>
           )}
-          <a href={`#${DEFAULT_CONTACT_ANCHOR}`} class="text-[0.9375rem] font-medium text-link underline-offset-4 hover:underline">
-            Contact us →
-          </a>
+          {props.link && (
+            <a
+              {...anchorAttrs(props.link)}
+              class="text-[0.9375rem] font-medium text-link underline-offset-4 hover:underline"
+            >
+              <span data-field={field('link.label')}>{props.link.label}</span> <span aria-hidden="true">→</span>
+            </a>
+          )}
         </div>
         <div>
           {props.items.map((item, itemIndex) => (

package/template/src/components/sections/faq/definition.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod'
-import { defineSection, richTextSchema, textSchema, withEmphasis, type CountRule } from 'bearminion'
-import { accent, eyebrow, heading } from '../shared'
+import { defineSection, linkSchema, richTextSchema, textSchema, withEmphasis, type CountRule } from 'bearminion'
+import { DEFAULT_CONTACT_ANCHOR, accent, eyebrow, heading } from '../shared'
 import { faqWireframe } from './wireframe'
 
 export const faqVariants = ['accordion', 'split', 'grid'] as const
@@ -21,6 +21,8 @@ export const faqSchema = withEmphasis({
   eyebrow,
   heading,
   more: textSchema.optional(),
+  /** The link under the heading in the split layout, such as one to the contact section. */
+  link: linkSchema.optional(),
   items: z.array(faqItemSchema).min(faqCounts.items.min).max(faqCounts.items.max),
 })
 
@@ -36,6 +38,7 @@ export const faq = defineSection({
     eyebrow: 'FAQ',
     heading: 'Questions, answered plainly.',
     marks: accent('Questions, answered plainly.', 'plainly.'),
+    link: { label: 'Contact us', href: `#${DEFAULT_CONTACT_ANCHOR}` },
     items: [
       { q: 'What is included?', a: 'Answer the question people ask most before they buy, in two or three sentences.' },
       { q: 'How long does it take to get started?', a: 'Give a realistic time frame and say what the reader needs to have ready.' },
@@ -45,7 +48,7 @@ export const faq = defineSection({
   },
   variants: faqVariants,
   defaultVariant: 'accordion',
-  optional: { props: ['eyebrow', 'heading', 'more'] },
+  optional: { props: ['eyebrow', 'heading', 'more', 'link'] },
   counts: faqCounts,
   wireframe: faqWireframe,
 })

package/template/src/components/sections/features/Features.astro

@@ -6,6 +6,7 @@ import Typography from '../../atoms/Typography.astro'
 import MediaFrame from '../../molecules/MediaFrame.astro'
 import SectionHeader from '../../molecules/SectionHeader.astro'
 import SectionShell from '../../molecules/SectionShell.astro'
+import { cn } from '../../../lib/cn'
 
 interface Props {
   section: Extract<Section, { type: 'features' }>
@@ -17,6 +18,9 @@ const { section, index, motion = true } = Astro.props
 const props = section.props
 const field = (path: string) => `sections.${index}.props.${path}`
 const reveal = section.motion ?? motion
+const wideFourth = props.items.length === 4
+/** At two columns, an even count leaves the last card alone on its row, so it spans the row with its text beside the picture. */
+const spanLast = (itemIndex: number) => !wideFourth && itemIndex === props.items.length - 1 && props.items.length % 2 === 0
 ---
 
 <SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
@@ -88,29 +92,50 @@ const reveal = section.motion ?? motion
     section.variant === 'bento' && (
       <div class="section-container">
         <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} intro={props.intro} align="center" field={field} class="mx-auto max-w-3xl" />
-        <ul class="mt-12 grid grid-cols-1 gap-4 @min-[620px]:grid-cols-2 @min-[960px]:grid-cols-3">
+        <ul class="mt-[clamp(2.5rem,4cqi,4rem)] grid grid-cols-1 gap-4 @min-[620px]:grid-cols-2 @min-[960px]:grid-cols-3">
           {props.items.map((item, itemIndex) => (
             <li
               class:list={[
-                'flex flex-col gap-4 rounded-card-lg bg-surface p-6 ring-line',
-                itemIndex === 0 && '@min-[620px]:col-span-2 @min-[960px]:row-span-2',
-                itemIndex === 3 && '@min-[620px]:col-span-2 @min-[960px]:col-span-3 @min-[960px]:grid @min-[960px]:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] @min-[960px]:items-end @min-[960px]:gap-8',
+                'flex min-h-72 flex-col gap-4 rounded-card-lg bg-surface p-2 ring-line',
+                // The first card is the big one: two columns, and two rows at three columns.
+                itemIndex === 0 && '@min-[620px]:col-span-2 @min-[620px]:min-h-[26rem] @min-[960px]:row-span-2',
+                // Four cards: the fourth spans the row, with its text beside the picture at three columns.
+                wideFourth &&
+                  itemIndex === 3 &&
+                  '@min-[620px]:col-span-2 @min-[960px]:col-span-3 @min-[960px]:flex-row-reverse @min-[960px]:items-center',
+                // Any other count at two columns: the last card spans the row when it would sit alone, picture beside text.
+                spanLast(itemIndex) && '@min-[620px]:@max-[959px]:col-span-2 @min-[620px]:@max-[959px]:flex-row-reverse @min-[620px]:@max-[959px]:items-center',
               ]}
             >
               {!item.image?.hidden && (
-<MediaFrame
-                src={item.image?.src}
-                alt={item.image?.alt ?? item.title}
-                aspectClass={itemIndex === 0 ? 'aspect-[4/3] min-h-48 flex-1' : 'aspect-[4/3]'}
-                fit={item.image?.fit} position={item.image?.position} data-field={field(`items.${itemIndex}.image.alt`)}
-              />
-)}
-              <div>
-                <p class="font-mono text-[0.6875rem] tracking-[0.08em] text-muted">{String(itemIndex + 1).padStart(2, '0')}</p>
-                <Typography as="h3" size="h3" class="mt-3" data-field={field(`items.${itemIndex}.title`)}>
+                <MediaFrame
+                  src={item.image?.src}
+                  alt={item.image?.alt ?? item.title}
+                  aspectClass={cn(
+                    'min-h-36 flex-1',
+                    wideFourth && itemIndex === 3 && '@min-[960px]:self-stretch',
+                    spanLast(itemIndex) && '@min-[620px]:@max-[959px]:self-stretch',
+                  )}
+                  roundedClass="rounded-2xl"
+                  class="p-3"
+                  fit={item.image?.fit}
+                  position={item.image?.position}
+                  data-field={field(`items.${itemIndex}.image.alt`)}
+                />
+              )}
+              <div
+                class:list={[
+                  'flex flex-col gap-1.5 px-2 pt-1 pb-2',
+                  wideFourth && itemIndex === 3 && '@min-[960px]:flex-1 @min-[960px]:px-6',
+                  spanLast(itemIndex) && '@min-[620px]:@max-[959px]:flex-1 @min-[620px]:@max-[959px]:px-6',
+                ]}
+              >
+                <Typography as="h3" size="h3" data-field={field(`items.${itemIndex}.title`)}>
                   {item.title}
                 </Typography>
-                {item.description && <Typography as="p" size="body" color="muted" class="mt-2" data-field={field(`items.${itemIndex}.description`)} markdown={item.description} />}
+                {item.description && (
+                  <Typography as="p" size="body" color="muted" class="max-w-[30rem]" data-field={field(`items.${itemIndex}.description`)} markdown={item.description} />
+                )}
               </div>
             </li>
           ))}

package/template/src/components/sections/features/definition.ts

@@ -5,9 +5,9 @@ import { featuresWireframe } from './wireframe'
 
 export const featuresVariants = ['cards', 'list', 'bento'] as const
 
-/** Three to six cards; the bento layout is a fixed four-tile grid. */
+/** Three to six cards. In the bento grid, four keeps a wide fourth card; any other count fills rows of three. */
 export const featuresCounts = {
-  items: { recommended: '4 for bento, 3–6 otherwise', min: 3, max: 6, exact: { variant: 'bento', count: 4 } },
+  items: { recommended: '3–6; 4 or 6 fill the bento grid best', min: 3, max: 6 },
 } as const satisfies Record<string, CountRule>
 
 export const featureItemSchema = z
@@ -51,14 +51,4 @@ export const features = defineSection({
   optional: { props: ['eyebrow', 'heading', 'intro', 'link'], items: { items: ['description', 'image'] } },
   counts: featuresCounts,
   wireframe: featuresWireframe,
-  refine({ variant, props }, ctx) {
-    const { variant: exactVariant, count } = featuresCounts.items.exact
-    if (variant === exactVariant && props.items.length !== count) {
-      ctx.addIssue({
-        code: 'custom',
-        message: `The ${exactVariant} variant needs exactly ${count} feature items`,
-        path: ['props', 'items'],
-      })
-    }
-  },
 })