Studio Contact Page

Contact1: Studio Contact Page

A complete contact page for a studio that answers before you write: a masthead navbar carrying the location and inbox, a contact panel on a tinted surface instead of a hero, an FAQ with a booking card beside it, an inverted band of client quotes about the first conversation, and a four-column footer. Five 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/contact1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/contact1.tsx and everything behind it in one command: the five blocks it composes (navbar52, cta68, faq69, testimonial30, footer102), the button1 and badge6 components they use, and the shadcn/ui button primitive. Eight files, no follow-up installs.

Quick start

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

import { Contact1, contact1Demo } from "@/components/beste/page/contact1";

export default function Page() {
  return <Contact1 {...contact1Demo} />;
}

Each section is a separate prop, so the usual next step is to keep the demo and replace one section at a time rather than writing all five at once.

import { Contact1, contact1Demo } from "@/components/beste/page/contact1";

export default function Page() {
  return (
    <Contact1
      {...contact1Demo}
      navbar={{
        brand: "Halden",
        tagline: "Design and build, two projects at a time",
        locationLabel: "Oslo, 09:40",
        email: "studio@halden.example",
        links: [
          { label: "Work", href: "/work" },
          { label: "Studio", href: "/studio" },
        ],
        cta: { label: "Start a project", href: "/contact" },
      }}
      contact={{
        label: "Contact",
        badge: { label: "Booking from March" },
        heading: "Tell us what is actually wrong.",
        description: "Not the deliverable, the problem. One paragraph is plenty.",
        button: { label: "Write to the studio", href: "mailto:studio@halden.example" },
        secondaryLink: { label: "Or book a call", href: "/call" },
        meta: ["studio@halden.example", "Oslo, Norway", "Reply within two days"],
      }}
    />
  );
}

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 faq removes that section entirely rather than rendering an empty one. A page with only navbar and contact is valid.
• The page sets className="bg-muted/50" on the contact block after spreading contact, so a className passed inside that prop is overridden. Tint that section from the page, not through the prop.
• The quotes sit inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree. The cards, borders and muted labels inside the block follow the switch, which they would not do if the section were merely painted a dark colour.
• Because that band uses dark rather than a fixed colour, it inverts against whatever theme is active: on a dark site it is the light band that would need adding, not the dark one removing.
• The whole page is a client component, since the blocks it composes are. It renders no data fetching of its own and holds no state above the blocks.
• The page is Pro because blocks inside it are. Installing it delivers their real source, which is why the licence parameters are on the command above.
• Nothing here is a form: the contact panel is a heading, a paragraph, two links and a row of metadata. Point button.href at a mailto: link or at your own form route.