Studio Story PagePRO

Story1: Studio Story Page

A monochrome about page in eight sections: a studio bar navbar, a fact-led statement hero, a studio split with a photograph, a team grid on a soft band, a decade of milestones, an inverted client quote ledger, a two-path closing panel, and a footer listing the studio's addresses. Eight 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/story1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/story1.tsx and everything behind it: the eight blocks it composes (navbar59, hero148, about63, about60, about62, testimonial45, cta80, footer116) and the button12 and badge7 components they use. Eleven files, no follow-up installs.

Quick start

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

import { Story1, story1Demo } from "@/components/beste/page/story1";

export default function Page() {
  return <Story1 {...story1Demo} />;
}

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

import { Story1, story1Demo } from "@/components/beste/page/story1";

export default function Page() {
  return (
    <Story1
      {...story1Demo}
      milestones={{
        label: "Ten years",
        heading: "What happened, in order.",
        items: [
          { year: "2016", title: "Two people and a rented desk" },
          { year: "2019", title: "First packaging line, first factory visit" },
          { year: "2023", title: "The studio buys the building" },
        ],
      }}
    />
  );
}

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 milestones removes that section entirely rather than rendering an empty one. Three of the eight blocks are about* variants, so dropping one still leaves a coherent page.
• The navbar is given sticky top-0 z-50 by the page and stays for the whole document, which works because the block carries its own opaque band.
• The quote ledger sits inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree, so the block's own cards, rules and muted labels follow the switch rather than staying light on a dark rectangle.
• The page sets className="bg-muted/50" on the team section after spreading team, so a className passed inside that prop is overridden.
• The team grid and the milestone ledger are the two sections whose item count shows: a half-empty row of portraits is the most visible way to make this page look unfinished.
• 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.