Studio Work IndexPRO

Work1: Studio Work Index

A portfolio index page: a floating pill navbar overlaid on a full-bleed hero whose photographs cross-fade on a timer, a featured project above a project grid, a client engagement grid, a dark contact band, and a big-logotype newsletter footer. Six blocks, one install.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

npx shadcn add "https://ui.beste.co/page/r/work1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/work1.tsx and everything behind it: the six blocks it composes (navbar63, hero153, portfolio110, showcase44, cta79, footer113) and the button12 and badge7 components they use. Nine files, no follow-up installs.

Quick start

The installed file exports work1Demo alongside the page: the exact props behind the preview above. Spread it to get a working page in one line.

import { Work1, work1Demo } from "@/components/beste/page/work1";

export default function Page() {
  return <Work1 {...work1Demo} />;
}

Each section is a separate prop, so the usual next step is to keep the demo and replace one section at a time.

import { Work1, work1Demo } from "@/components/beste/page/work1";

export default function Page() {
  return (
    <Work1
      {...work1Demo}
      clients={{
        label: "Clients",
        heading: "Who we did it with.",
        items: [
          { name: "Norrland Ferries", detail: "Wayfinding, 2025" },
          { name: "Halden Press", detail: "Identity, 2025" },
          { name: "Atlas Coffee", detail: "Packaging, 2024" },
        ],
      }}
    />
  );
}

Props

Every prop is the full prop object of the block that renders that section, so anything the block accepts is accepted here.

Sections

Behavior notes

• Every section is conditional on its own prop, so omitting clients removes that section entirely rather than rendering an empty one.
• The navbar overlays the hero through a grid overlap rather than a negative margin: the page root is the grid, and the navbar and hero both sit in col-start-1 row-start-1 while later sections auto-place into the rows below. No magic height number is involved, so changing the hero's height cannot break the alignment.
• The page root has to be the grid for the sticky navbar to survive the whole document. A sticky element only lives as long as its parent, so wrapping just the navbar and hero would unstick it the moment the hero ended.
• This overlay only suits a hero whose content is bottom-aligned or full-bleed, which hero153 is. A hero whose copy starts at the top would run under the bar.
• The page sets className="bg-muted/50" on the work section after spreading work, so a className passed inside that prop is overridden.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks.
• The page is Pro because blocks inside it are, which is why the licence parameters are on the command above.