Component

Sticky Feature Section

Two-column editorial layout — headline + intro on the left, a sticky screenshot on the right, with a feature icon list and closing copy below. Background includes a subtle hairline grid. Skinned from Tailwind UI.

Preview

Deploy faster

A better workflow

Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam.

Feature screenshot

1140 × 760

Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est.

Push to deploy. Commit your changes and they go live instantly. Zero config, zero downtime — your workflow stays fast and uninterrupted.
SSL certificates. Every project gets a free SSL certificate, auto-renewed. Your visitors stay secure without any manual configuration.
Database backups. Automated daily snapshots with one-click restore. Your data is always safe, even when things go wrong.

No server? No problem.

Id orci tellus laoreet id ac. Dolor, aenean leo, ac etiam consequat in. Convallis arcu ipsum urna nibh. Pharetra, euismod vitae interdum mauris enim, consequat vulputate nibh.

Without intro

Deploy faster

A better workflow

Feature screenshot

1140 × 760

Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est.

Push to deploy. Commit your changes and they go live instantly. Zero config, zero downtime — your workflow stays fast and uninterrupted.
SSL certificates. Every project gets a free SSL certificate, auto-renewed. Your visitors stay secure without any manual configuration.
Database backups. Automated daily snapshots with one-click restore. Your data is always safe, even when things go wrong.

No server? No problem.

Id orci tellus laoreet id ac. Dolor, aenean leo, ac etiam consequat in. Convallis arcu ipsum urna nibh. Pharetra, euismod vitae interdum mauris enim, consequat vulputate nibh.

Without sub-headline / closing copy

Deploy faster

A better workflow

Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam.

Feature screenshot

1140 × 760

Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est.

Push to deploy. Commit your changes and they go live instantly. Zero config, zero downtime — your workflow stays fast and uninterrupted.
SSL certificates. Every project gets a free SSL certificate, auto-renewed. Your visitors stay secure without any manual configuration.
Database backups. Automated daily snapshots with one-click restore. Your data is always safe, even when things go wrong.

Available icons

upload

lock

server

globe

database

code

zap

shield

chart

star

check

layers

Sanity fields

Prop	Type	Default	Description
eyebrow	string	—	Accent label above headline — Geist Mono uppercase in Electric 600
headline	string	—	Cal Sans section headline, fluid 32–52 px
intro	text	—	Larger opening paragraph below the headline
image	image	—	Feature screenshot — sticky on desktop as you scroll the left column
body	text	—	Opening body copy (left column, below fold)
features	array<Feature>	—	Up to 6 icon + title + description items
subHeadline	string	—	Secondary heading (Cal Sans) above the closing paragraph
body2	text	—	Closing paragraph

Feature item fields

Prop	Type	Default	Description
icon	string (enum)	—	Icon key: upload \| lock \| server \| globe \| database \| code \| zap \| shield \| chart \| star \| check \| layers
title	string	—	Bold inline label
body	string	—	Descriptive copy following the title

Usage

tsx

import { StickyFeatureSection } from '@/components/sections/sticky-feature-section'

<StickyFeatureSection block={{
  _type: 'stickyFeatureSection',
  eyebrow: 'Deploy faster',
  headline: 'A better workflow',
  intro: 'Opening paragraph that sets the scene.',
  image: sanityImageObject,
  body: 'First body paragraph below the fold.',
  features: [
    { icon: 'upload', title: 'Push to deploy', body: 'Zero config deploys.' },
    { icon: 'lock',   title: 'SSL included',   body: 'Auto-renewed certificates.' },
    { icon: 'server', title: 'DB backups',      body: 'Daily snapshots.' },
  ],
  subHeadline: 'No server? No problem.',
  body2: 'Closing paragraph.',
}} />