Replicate

How it works

hero:

Full-width gradient background (magenta to yellow) with white headline and subheading left-aligned, accompanied by a call-to-action button and right-positioned image showing 60/40 horizontal split.

layout:

Repeating horizontal card rows with alternating left-right image placement; full-width colored sections (red, black, gradient) separate functional areas; stacked workflow section uses left column labels with right-column code blocks; footer compresses navigation into four-column grid.

type:

Large bold white headline (5xl) in hero; smaller gray body copy with colored accent headings (magenta, red, teal); monospace code blocks in technical sections; sans-serif labels on buttons and category chips maintain consistent hierarchy.

colors:

Magenta and yellow form the dominant gradient hero; pure red and black act as structural dividers and section headers; white content areas contrast sharply against colored zones; accent colors (blue, orange, teal) appear in icon sets and category tags.

distinctive:

Alternating magenta and red full-width section dividers that act as visual breakers, paired with white content cards that slide into the colored zones, creating a modular rhythm that feels both technical and energetic.