Component Library

Sedo UI
Components

All reusable components for the Sedo redesign — built in Astro, styled with Tailwind CSS, and driven by structured Markdown frontmatter.

Astro + Tailwind

29 Components

2026

🦸 Heroes

H1

Simple Centered

Heroes

Clean centered hero with gradient orb background decoration, announcement pill badge, and dual CTA — adapted with Sedo navy/accent palette and domain marketplace copy.

View Component
H2

Split with Image

Heroes

Two-column split layout with left-side copy and a full-bleed right-side photo, featuring Sedo wordmark and domain search CTAs.

View Component
H3

Centered with Background

Heroes

Dark navy hero with a full-bleed monochrome background image overlay, white headline text, and light-blue accent buttons suited for Sedo's premium brand.

View Component
H4

With Screenshot

Heroes

Centered hero with a large product screenshot below the headline, showcasing Sedo's domain portfolio management dashboard to drive sign-ups.

View Component

⚡ Feature Sections

F1

3-Col Small Icons

Feature Sections

Three-column feature grid with inline small icons and learn-more links, showcasing Sedo's domain appraisal, secure escrow, and global reach.

View Component
F2

3-Col Large Icons

Feature Sections

Three-column feature grid with large icon badges on a Sedo navy background, highlighting 24M+ listings, 3M+ buyers, and broker-assisted sales.

View Component
F3

Screenshot Right

Feature Sections

Two-column layout with feature list on the left and a product screenshot on the right, focused on Sedo's free listing, secure transfers, and analytics.

View Component
F4

Screenshot Left

Feature Sections

Two-column layout with a product screenshot on the left and feature list on the right, showcasing Sedo's advanced search, price transparency, and instant transfer support.

View Component
F5

Offset 2x2 Grid

Feature Sections

Offset 5-column grid with a headline spanning two columns and a 2x2 icon feature grid, covering portfolio management, appraisals, offer negotiation, and domain parking.

View Component
F6

Centered 2x2 Grid

Feature Sections

Centered heading above a 2x2 icon feature grid, detailing Sedo's bulk listing, escrow payments, registrar-agnostic transfers, and fraud prevention.

View Component
F7

Simple 3x2 Grid

Feature Sections

Left-aligned heading with a compact 3x2 inline-icon feature grid covering domain search, escrow, global reach, parking, broker service, and market insights.

View Component
F8

Simple List

Feature Sections

Plain 3x2 description list without icons, presenting Sedo's six core marketplace features from search and appraisal through to auctions and parking.

View Component
F9

With Testimonial

Feature Sections

Two-column layout featuring a CTA button and a customer testimonial blockquote alongside a product screenshot, designed to drive seller sign-ups.

View Component

📣 CTA Sections

C1

Simple Stacked

CTA Sections

Left-aligned stacked headline with a primary CTA button and secondary text link, adapted with Sedo navy and domain marketplace copy.

View Component
C2

Centered Dark Panel

CTA Sections

Full-width dark panel on a navy background with a glowing radial gradient accent, centered headline, and dual CTA buttons promoting Sedo's marketplace scale.

View Component
C3

Simple Centered

CTA Sections

Centered two-column-constrained layout with headline, supporting copy referencing 24M domains, and a search-focused primary CTA.

View Component
C4

Centered on Brand

CTA Sections

Solid Sedo navy background section with white headline, light-blue muted body copy, and a white-on-navy CTA promoting free domain listing.

View Component
C5

Simple Justified

CTA Sections

Horizontally justified layout placing a two-line headline on the left and CTA buttons on the right, referencing Sedo's 24M+ domain inventory.

View Component
C6

Justified Subtle Brand

CTA Sections

Justified layout on a soft Sedo navy tint background, paired with a free-listing headline and primary CTA button.

View Component
C7

Split with Image

CTA Sections

Half-and-half layout with a navy image panel on the left and brokerage-focused copy on the right, highlighting Sedo's 700K+ successful transactions.

View Component
C8

Two Columns with Photo

CTA Sections

Card-style two-column layout with a photo alongside a feature checklist of six Sedo marketplace benefits, finished with a link to create a free account.

View Component

🔲 Bento Grids

B1

Three Column Bento

Bento Grids

Three-column asymmetric bento grid highlighting Sedo's domain search, transparent pricing, secure escrow, and registrar API with an inline code snippet panel.

View Component
B2

Two Row Bento

Bento Grids

Two-row image-led bento grid showcasing Sedo's auction platform, 650+ registrar integrations, escrow protection, and domain parking revenue features.

View Component
B3

Two Row + Three Column

Bento Grids

Two-row bento with equal top columns and a three-equal-column bottom row covering domain appraisal, broker service, fast listing, Sedo MLS syndication, and global marketplace reach.

View Component

📐 Header Sections

HD1

With Stats

Header Sections

Dark-tinted hero with background image and gradient blobs, showcasing Sedo's marketplace scale via four key stats: 24M+ domains, 3M+ buyers, 700K+ sales, and 150+ countries served.

View Component
HD2

Centered

Header Sections

Clean centered layout with a single headline and supporting copy introducing sedo.com as the world's leading domain marketplace.

View Component
HD3

Centered with Eyebrow

Header Sections

Centered layout with a small Sedo-navy eyebrow label above the headline, reinforcing the domain marketplace value proposition with a two-level typographic hierarchy.

View Component

📧 Newsletter

N1

Side by Side with Details

Newsletter

Two-column newsletter signup with a headline and email input on the left, and two feature callouts (weekly market digest, no spam) with icons on the right, plus a soft gradient background blob.

View Component
N2

Simple Side by Side

Newsletter

Minimal full-width newsletter row with a bold headline spanning seven columns and a compact email input with subscribe button in the remaining columns.

View Component

How components work. Every component is an .astro file in src/components/sections/. They're driven by structured YAML in each page's .md frontmatter and rendered automatically by LandingLayout.astro. No template code needed per page — just add the block to the frontmatter.