Internal design-system gallery

@repo/sections — all marketing sections

Every section from the medeo harvest rendered with neutral sample props. 32 blocks across 21 components. Not linked from navigation, noindex — internal reference only.

LandingHeroSection

@repo/sections/marketing/hero-sectionvariant='split' (default)
Hero eyebrow

A sample headline that shows the hero layout

Placeholder supporting copy describing the value of the product in one or two sentences.

Primary action
Hero media slot

LandingHeroSection

@repo/sections/marketing/hero-sectionvariant='centered'
Hero eyebrow

A sample headline that shows the hero layout

Placeholder supporting copy describing the value of the product in one or two sentences.

Primary action

LandingHeroSection

@repo/sections/marketing/hero-sectionvariant='aboutCentered' + logoMark
Hero eyebrow

A sample headline that shows the hero layout

Placeholder supporting copy describing the value of the product in one or two sentences.

Primary action

LandingHeroSection

@repo/sections/marketing/hero-sectionvariant='console' + consoleSlot（产品控制台走 slot）
Hero eyebrow

A sample headline that shows the hero layout

Placeholder supporting copy describing the value of the product in one or two sentences.

Product console slot (app-owned surface)
Model · Ratio · MoreGenerate

StatsStripSection

@repo/sections/marketing/stats-strip-section
Fast setupMinutes, not hours
Real previewHear before export
One workflowEnd to end
Portable outputDownload anywhere

FeatureAlternatingSection

@repo/sections/marketing/feature-alternating-section
Eyebrow label

Feature alternating sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Row eyebrow

First alternating row

Media sits on one side, copy on the other; rows alternate.

Row media 1
Row media 2
Row eyebrow

Second alternating row

The second row flips the media side automatically.

FeatureGridSection

@repo/sections/marketing/feature-grid-sectioncolumns=3
Eyebrow label

Feature grid sample title

Neutral placeholder description showing how supporting copy sits under the section title.

First feature card

Short outcome-oriented description of the capability.

Second feature card

Another capability summary at the same altitude.

Third feature card

A third card so the grid rhythm is visible.

LandingUseCasesSection

@repo/sections/marketing/use-cases-sectionhairline 单面板 icon grid；无 icon 时为 text-cell 变体
Eyebrow label

Use cases sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Use case one

Icon-led cell.

Use case two

Second cell.

Use case three

Third cell.

Text-only cell

No icon — the text-cell variant.

Another text cell

Benefit copy without an icon.

Sixth cell

Completes the 3×2 rhythm.

LandingWorkflowSection

@repo/sections/marketing/workflow-section
Eyebrow label

Workflow sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Step 1

Describe the input

What the user provides first.

Step 2

Pick a direction

The main configuration choice.

Step 3

Run the job

Async processing with progress.

Step 4

Review the result

Preview before committing.

OverviewShowcaseSection

@repo/sections/marketing/overview-showcase-sectionconsole/mockup 均为 slot（frontend-design boundary）
Eyebrow label

Overview showcase sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Console slot
Model · Ratio · MoreGenerate
Floating app-UI mockup slot

BeforeAfterSection

@repo/sections/marketing/before-after-sectionvariant='text'
Eyebrow label

Before / after (text) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Before

  • Manual step

    Slow and repetitive.

  • Second pain

    Error-prone handoff.

After

  • Automated step

    Handled by the tool.

  • Second win

    One continuous flow.

BeforeAfterSection

@repo/sections/marketing/before-after-sectionvariant='media'（after 侧 accent 强调）
Eyebrow label

Before / after (media) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Before
Source media

Source input

After
Result media

Generated result

PromptExamplesSection

@repo/sections/marketing/prompt-examples-section
Eyebrow label

Prompt examples sample title

Neutral placeholder description showing how supporting copy sits under the section title.

TypePrompt
Warm intro
A calm, friendly opening line that welcomes the viewer and sets the topic.
Tutorial
Step-by-step instructional tone, short sentences, clear emphasis on actions.
With media
A row that also carries a media cell for the rendered result.
Result cell

TipsChecklistSection

@repo/sections/marketing/tips-checklist-section
Eyebrow label

Tips checklist sample title

Neutral placeholder description showing how supporting copy sits under the section title.

First best practice

Why this tip improves results.

Second best practice

A supporting explanation.

Third best practice

VersusListSection

@repo/sections/marketing/versus-list-section
Eyebrow label

Versus list sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Option A vs Option B

Pick A when speed matters; pick B when control matters.

Option A vs Option C

C trades simplicity for flexibility in larger projects.

ComparisonTableSection

@repo/sections/marketing/comparison-table-sectionvariant='specMatrix'
Eyebrow label

Comparison (spec matrix) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

ModelInputOutputBest for
Sample OneTextVideoFast drafts
Sample TwoText + imageVideoControlled scenes
Sample ThreeImageImageStyle transfer

ComparisonTableSection

@repo/sections/marketing/comparison-table-sectionvariant='tabbed'
Eyebrow label

Comparison (tabbed) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

MetricValueEquivalent
1,00050~$1.50
5,000260~$7.80

ComparisonTableSection

@repo/sections/marketing/comparison-table-sectionvariant='groupedCredits'
Eyebrow label

Comparison (grouped credits) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Sample Model APremium
Text to video
720P1080P
3.3 /s
Image to video
720P
6.6 /s
Sample Model B
Text to image
1K2K
0.9 /img

TestimonialsSection

@repo/sections/marketing/testimonials-sectionlayout='grid' (default)
Eyebrow label

Testimonials (grid) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

A short sample quote about the product.
Avery Sample · Producer
Second placeholder quote with a little more length to wrap onto two lines.
Jordan Placeholder · Editor
Third quote keeps the marquee loop looking natural.
Sam Fixture

TestimonialsSection

@repo/sections/marketing/testimonials-sectionlayout='marquee'（双行反向）
Eyebrow label

Testimonials (marquee) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

A short sample quote about the product.
Avery Sample · Producer
Second placeholder quote with a little more length to wrap onto two lines.
Jordan Placeholder · Editor
Third quote keeps the marquee loop looking natural.
Sam Fixture
Fourth quote for the opposite marquee row.
Riley Demo · Creator

TeamMarqueeSection

@repo/sections/marketing/team-marquee-section
Eyebrow label

Team marquee sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Avery SampleProfile

Avery Sample

Engineering

Short one-line bio.

Jordan Placeholder

Jordan Placeholder

Design

Another one-line bio.

Riley Demo

Riley Demo

Product

MediaShowcaseSection

@repo/sections/marketing/media-showcase-sectionvariant='marquee' aspect='portrait'
Eyebrow label

Media showcase (marquee) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Showcase media 1
Example 1
Showcase media 2
Example 2
Showcase media 3
Example 3
Showcase media 4
Example 4

MediaShowcaseSection

@repo/sections/marketing/media-showcase-sectionvariant='arrows'
Eyebrow label

Media showcase (arrows) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Showcase media 1
Example 1
Showcase media 2
Example 2
Showcase media 3
Example 3
Showcase media 4
Example 4
Showcase media 5
Example 5

MediaShowcaseSection

@repo/sections/marketing/media-showcase-sectionvariant='grid'
Eyebrow label

Media showcase (grid) sample title

Neutral placeholder description showing how supporting copy sits under the section title.

Showcase media 1
Example 1
Showcase media 2
Example 2
Showcase media 3
Example 3
Showcase media 4
Example 4
Showcase media 5
Example 5
Showcase media 6
Example 6

DirectoryIndexSection

@repo/sections/marketing/directory-index-section

First category

Short category subtitle

Tool oneOne-line tool description.
Tool twoSecond tool description.
Tool threeThird tool description.

Second category

Tool fourNo icon variant.
Tool fiveAnother entry.

AccentCtaSection

@repo/sections/marketing/accent-cta-sectionCTA pill 在面板下方外侧（契约不变量）
Accent panel eyebrow

Mid-page accent call to action

Supporting copy rendered at reduced opacity inside the accent panel.

Primary action

LandingFaqSection

@repo/sections/marketing/faq-section

FAQ sample title

Placeholder subtitle for the FAQ block.

First sample question?

A concise placeholder answer.

Second sample question?

Another placeholder answer with a bit more length to wrap.

Third sample question?

Final placeholder answer.

LandingFinalCtaSection

@repo/sections/marketing/final-cta-sectionaurora 收尾 CTA
Closing eyebrow

What will you build first?

Get startedSee how it works