Studio Services PagePRO

Services1: Studio Services Page

A services page that prices the work in the fold: a reel hero, four principles beside a studio photograph, a nine-week timeline with an owner on every stage, two engagement plans, a two-column FAQ, a contact panel, and a CTA footer. 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/services1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/services1.tsx and everything behind it: the eight blocks it composes (navbar47, hero113, agency13, workflow36, pricing63, faq70, cta67, footer103), the button1 and badge6 components they use, and the shadcn/ui button primitive. Eleven files, no follow-up installs.

Quick start

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

import { Services1, services1Demo } from "@/components/beste/page/services1";

export default function Page() {
  return <Services1 {...services1Demo} />;
}

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

import { Services1, services1Demo } from "@/components/beste/page/services1";

export default function Page() {
  return (
    <Services1
      {...services1Demo}
      plans={{
        label: "Engagements",
        heading: "Two ways to work with us.",
        plans: [
          { name: "Project", price: "From €40,000", description: "Fixed scope, fixed figure, nine weeks." },
          { name: "Retained", price: "€9,000 a month", description: "Two days a week, minimum three months." },
        ],
      }}
    />
  );
}

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 plans removes that section entirely rather than rendering an empty one. The page is built so the price is visible without a conversation, which is the reason plans sits above the FAQ rather than below it.
• The navbar is given sticky top-0 z-50 by the page, which works because the block carries its own opaque band.
• The page sets className="bg-muted/50" on both the process and FAQ sections after spreading their props, so a className passed inside those props is overridden.
• There is no dark band on this page. The reel hero is already the loudest thing on it, and an inverted section further down would fight it rather than close the page.
• agency13 lays out four principles; passing three leaves a hole in the row, and passing five wraps one onto its own line.
• 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.