Trust and Security PagePRO

Security1: Trust and Security Page

A trust page that answers the review before it is sent: an inverted hero floating a live uptime record, the hosting and retention facts in plain rows, a full security questionnaire with partial answers marked as partial, a public ask-and-answer panel, a booking panel for the engineer who wrote it, and a minimal footer. 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/security1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/security1.tsx and everything behind it: the seven blocks it composes (navbar72, hero160, about72, faq90, faq91, cta86, footer121), the five components they use (indicator14, location8, card31, button21, badge23) and the shadcn/ui input, textarea and button primitives. Thirteen files.

Quick start

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

import { Security1, security1Demo } from "@/components/beste/page/security1";

export default function Page() {
  return <Security1 {...security1Demo} />;
}

Each section is a separate prop, so the usual next step is to keep the demo and replace one section at a time. On this page the facts are what change.

import { Security1, security1Demo } from "@/components/beste/page/security1";

export default function Page() {
  return (
    <Security1
      {...security1Demo}
      facts={{
        label: "The facts",
        heading: "Where your data lives, and for how long.",
        facts: [
          { term: "Hosting", detail: "Frankfurt and Dublin, both in the EU." },
          { term: "Retention", detail: "Deleted records are gone from backups within 30 days." },
          { term: "Sub-processors", detail: "Four, listed with what each one sees." },
        ],
      }}
    />
  );
}

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 questions removes that section entirely rather than rendering an empty one.
• There is no dark wrapper on this page even though it opens dark: hero160 is already inverted inside the block, so wrapping it would invert an inversion and hand back a light hero.
• 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/40" on both the facts and questions sections after spreading their props, so a className passed inside those props is overridden.
• faq90 lays its groups out in a two-column grid, so an odd number of control groups leaves one cell empty on the last row. Three groups is the count that shows it most.
• Answers marked as partial are written that way in the content, not flagged by a prop. The block renders what it is given, so a half-true answer has to be worded as one.
• The only fields on the page are in the ask-and-answer panel (faq91), which is where the input and textarea dependencies come from. The booking panel below it is links, not a form.
• 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.