ComparisonSection · ui.voila.dev

For client teams

Your roadmap keeps moving. Hiring shouldn't slow it.

Traditional hiring

Weeks lost sourcing candidates for one task
A contractor found in a rush, never vetted
No follow-up once the work is delivered

With Acme

A verified freelancer ready when the project starts
A complete, professional toolkit from day one
Zero overhead on contracts or invoicing

DesignDevelopmentCopywriting

Illustration (app-side)

<ComparisonSection.Root tone="highlight" background="muted">
	<ComparisonSection.Content>
		<ComparisonSection.Panels>
			<ComparisonSection.Panel variant="without">
				<ComparisonSection.PanelTitle>Traditional hiring</ComparisonSection.PanelTitle>
				<ComparisonSection.PanelList>
					<ComparisonSection.PanelItem>Slow shortlists</ComparisonSection.PanelItem>
				</ComparisonSection.PanelList>
			</ComparisonSection.Panel>
			<ComparisonSection.Panel variant="with">…</ComparisonSection.Panel>
		</ComparisonSection.Panels>
	</ComparisonSection.Content>
	<ComparisonSection.Media><Illustration /></ComparisonSection.Media>
</ComparisonSection.Root>

variant on the panel picks the cross or the tick and the panel's colour, so the two lists are written identically.

API

ComparisonSection.Root

Prop	Type	Default
`background`	`"brand"` \| `"default"` \| `"gradient"` \| `"gradient-brand"` \| `"gradient-primary"` \| `"muted"`	—	Surface behind the section. The three gradients read as brand moments — one per page is usually one enough. `brand` also flips the foreground to `primary-foreground`.
`spacing`	`"lg" \| "md" \| "none" \| "sm" \| "xl"`	`"lg"`	Vertical padding, which grows at `md` and up. `none` when the section supplies its own rhythm.
`tone`	`"brand"` \| `"destructive"` \| `"highlight"` \| `"muted"` \| `"primary"`	`"primary"`	Which brand role colours this section: the tint, the solid fill and any connector line move together. Tokens, so a rebrand reaches them.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus the DOM props of the element it renders. Source: landing/components/comparison-section/root.tsx.

ComparisonSection.Content

Plus every <div> prop. Source: landing/components/comparison-section/content.tsx.

ComparisonSection.Media

Plus every <div> prop. Source: landing/components/comparison-section/media.tsx.

ComparisonSection.Panel

Prop	Type	Default
`variant`	`ComparisonPanelVariant`	required	Which side of the comparison this panel is — the before or the after.

Plus every <div> prop. Source: landing/components/comparison-section/panel.tsx.

ComparisonSection.PanelItem

Prop	Type	Default
`icon`	`ReactNode`	—	Replaces the default XCircle/CheckCircle mark.

Plus every <li> prop. Source: landing/components/comparison-section/panel-item.tsx.

ComparisonSection.PanelList

Plus every <ul> prop. Source: landing/components/comparison-section/panel-list.tsx.

ComparisonSection.PanelTitle

Plus every <p> prop. Source: landing/components/comparison-section/panel-title.tsx.

ComparisonSection.Panels

Plus every <div> prop. Source: landing/components/comparison-section/panels.tsx.

ComparisonSection.Tag

Plus every <span> prop. Source: landing/components/comparison-section/tag.tsx.

ComparisonSection.TagList

Plus every <div> prop. Source: landing/components/comparison-section/tag-list.tsx.