Features 06

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

import { Features06 } from '@/components/features-06/features-06'

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

What the command adds to your project, and where.

• components/features-06/features-06.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: Button.

The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.

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 02Three alternating rows, text one side and a small piece of the product on the other, then swapped, then back.
• 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 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