Features 02

This block is a section, not a page. Import it where you want it, alongside your other sections.

import { Features02 } from '@/components/features-02/features-02'

export default function Page() {
  return (
    <main>
      <Features02 />
    </main>
  )
}

What the command adds to your project, and where.

• components/features-02/features-02.tsx

  The section. Import it into any page and render it; it fills the width of its parent.

It also installs the components it is built from, unless you already have them: Badge, Button, Checkbox, Progress.

Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.

• Features 01Six features in a hairline grid, each with a small picture built from the components themselves.
• Features 03A bento grid of five cells in different sizes, one large, each holding a small piece of the product; one column on a phone.
• Features 04Four features behind a vertical tab list with a picture and a paragraph for each; the same content becomes an accordion on a phone.
• Features 05A before-and-after table that sets the old way against the product, row by row, followed by three headline numbers on a dark band.
• Features 06A numbered how-it-works section: four steps along a horizontal line (vertical on a phone), each with a small drawn illustration and a short caption.
• Features 07An integrations grid of twelve tiles with drawn glyphs, category filter chips and a link to request a missing integration.
• Features 08A checklist table that sets the product against spreadsheets and other tools across eight capabilities, using check, half and dash marks with text alternatives.
• Features 09A scroll-linked feature story: a sticky picture crossfades as each of four chapters scrolls past, with a progress indicator; inline pictures on a phone and no crossfade with reduced motion.

See all 9 Features blocks