Bento Features

"use client"

import { BatteryFullIcon, CpuIcon } from "@phosphor-icons/react"

const photo = (id: string, width: number) =>
  `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop`

export function BentoFeatures() {
  return (
    <section className="flex flex-col gap-5 bg-muted p-5 md:p-8">
      <h2 className="text-4xl font-semibold tracking-tight md:text-5xl">
        Why Phone Pro?
      </h2>
      <div className="grid gap-4 md:grid-cols-4 md:grid-rows-[repeat(2,minmax(15.5rem,auto))]">
        <div className="flex min-h-96 flex-col overflow-hidden rounded-3xl bg-background md:col-span-2 md:row-span-2">
          <div className="flex flex-col gap-1.5 p-6.5">

A bento grid of feature tiles under a Why Phone Pro heading: a large camera photo tile, two stat tiles with gradient figures and a wide tile pairing copy with an image. Tiles stack in one column on mobile and form a four-column grid on desktop. It is static markup with no state, suited to marketing pages that summarize a product's highlights.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/bento-features

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks bento-features

Manual

1. Install the dependencies:

$ pnpm add @phosphor-icons/react

2. Copy the source into components/blocks/bento-features.tsx:

"use client"

import { BatteryFullIcon, CpuIcon } from "@phosphor-icons/react"

const photo = (id: string, width: number) =>
  `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop`

export function BentoFeatures() {
  return (
    <section className="flex flex-col gap-5 bg-muted p-5 md:p-8">
      <h2 className="text-4xl font-semibold tracking-tight md:text-5xl">
        Why Phone Pro?
      </h2>
      <div className="grid gap-4 md:grid-cols-4 md:grid-rows-[repeat(2,minmax(15.5rem,auto))]">
        <div className="flex min-h-96 flex-col overflow-hidden rounded-3xl bg-background md:col-span-2 md:row-span-2">
          <div className="flex flex-col gap-1.5 p-6.5">

3. Update the import paths to match your project.

Usage

import { BentoFeatures } from "@/components/blocks/bento-features"

<BentoFeatures />

All copy, figures and gradient colors are inline in the JSX, so edit them in place. Images come from the photo helper, which takes an Unsplash photo ID and a width; swap it for your own image source.

Notes

Both images are Unsplash placeholders with descriptive alt text.