Home2: Design Studio Home

A monochrome studio home page: a sticky navbar carrying availability and contact details, a split-screen statement hero with a full-height photograph, a ruled project index, an oversized client quote, a booking panel with the engagement details, and an oversized wordmark 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/home2?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/home2.tsx and everything behind it: the six blocks it composes (navbar65, hero156, portfolio112, testimonial35, cta78, footer108) and the badge7 and button12 components they use. Nine files, no follow-up installs.

Quick start

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

import { Home2, home2Demo } from "@/components/beste/page/home2";

export default function Page() {
  return <Home2 {...home2Demo} />;
}

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

import { Home2, home2Demo } from "@/components/beste/page/home2";

export default function Page() {
  return (
    <Home2
      {...home2Demo}
      work={{
        label: "Selected",
        heading: "Nine projects a year, and every one shipped.",
        projects: [
          { title: "Halden Reserve", category: "Identity", year: "2026" },
          { title: "Norrland Ferries", category: "Wayfinding", year: "2025" },
          { title: "Fold Quarterly", category: "Editorial", year: "2025" },
        ],
      }}
    />
  );
}

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 testimonial removes that section entirely rather than rendering an empty one.
• The navbar is given sticky top-0 z-50 by the page, so it follows the reader down the whole document. It works here because the block carries its own opaque band; a transparent navbar would collide with the headings passing underneath.
• The booking panel sits inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree. The cards and borders inside the block follow the switch, which they would not do if the section were merely painted a dark colour.
• The page adds no bg-muted tint anywhere. The rhythm comes from the hero's photo half and the inverted booking band, which is why an extra tinted section tends to muddy it.
• 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.