Home3: Creative Agency Home

A high-contrast agency home page: a masthead navbar with status and location, a hero built from twin scrolling image reels, a four-phase process flow, a project showcase grid, a rotating client quote, a statement call to action, and a footer that opens with its own CTA. Seven 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/home3?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/home3.tsx and everything behind it: the seven blocks it composes (navbar41, hero116, workflow26, portfolio101, testimonial27, cta64, footer103), the button1 and badge6 components they use, and the shadcn/ui button primitive. Ten files, no follow-up installs.

Quick start

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

import { Home3, home3Demo } from "@/components/beste/page/home3";

export default function Page() {
  return <Home3 {...home3Demo} />;
}

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

import { Home3, home3Demo } from "@/components/beste/page/home3";

export default function Page() {
  return (
    <Home3
      {...home3Demo}
      process={{
        label: "Process",
        heading: "Four phases, and you see the work in all of them.",
        steps: [
          { title: "Read the room", description: "Two weeks with your team, your data and your customers." },
          { title: "Decide the argument", description: "One sentence the whole brand has to defend." },
          { title: "Make it", description: "Identity, packaging and the campaign that carries them." },
          { title: "Hand it over", description: "A system your team runs without calling us." },
        ],
      }}
    />
  );
}

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 process removes that section entirely rather than rendering an empty one.
• The page sets className="bg-muted/50" on both the process and quote sections after spreading their props, so a className passed inside those props is overridden. Tint from the page, not through the prop.
• There is no dark wrapper on this page: cta64 is already dark inside the block, so wrapping it would invert an inversion and hand back a light band.
• The navbar is deliberately not sticky. The hero's reels move on their own, and a bar pinned over them competes with the only motion on the page.
• Two adjacent tinted bands are intentional, with the project grid between them holding the page open; dropping the grid puts two identical surfaces next to each other.
• 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.