# Saas — Page Template for React

> A full SaaS / product landing page for the fictional observability platform "Kelvin": sticky nav, a hero over one soft WebGL mesh with an Anneal word-reveal subhead, a logo-cloud strip, a tilting Facet feature grid, a bento "how it works" section with faux telemetry art, a Tally count-up metrics band, a Rostrum testimonial rotator, a three-tier pricing teaser, a closing CTA band, and a multi-column footer — every string a prop, one cool azure accent knob, fully reduced-motion-safe.

- Page: https://crucibleui.com/components/templates/saas
- Category: [templates](https://crucibleui.com/components/templates)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: ogl
- npm dependencies: motion, ogl

## Install

```bash
npx shadcn@latest add @crucible/saas
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/saas`.

## Props (`SaasTemplateProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `product?` | `string` | `"Kelvin"` | Product name, shown in the nav wordmark and footer. |
| `logo?` | `React.ReactNode` | `a degree monogram` | Inline logo mark (a 1em-scalable SVG using currentColor). |
| `announcement?` | `string` | `"New · Anomaly forecasting"` | Small pill above the hero headline. |
| `headline?` | `string` | — | Hero headline. Line breaks in the string are preserved. |
| `subhead?` | `string` | — | Hero sub-headline, revealed word by word. |
| `nav?` | `SaasNavItem[]` | — | Top navigation links. |
| `primaryCta?` | `SaasAction` | `"Start free"` | Primary hero CTA (accent-filled). |
| `secondaryCta?` | `SaasAction` | `"Book a demo"` | Secondary hero CTA (brushed-metal Sheen). |
| `navCta?` | `SaasAction` | `"Start free"` | Compact nav CTA shown in the header. |
| `heroNote?` | `string` | — | Small reassurance line under the hero CTAs. |
| `logoCloudLabel?` | `string` | `"Trusted by product teams at"` | Label above the logo-cloud strip. |
| `logos?` | `string[]` | — | Wordmarks shown in the social-proof strip (plain strings). |
| `featuresEyebrow?` | `string` | `"Everything in one pane"` | Eyebrow above the feature grid. |
| `featuresHeading?` | `string` | — | Heading for the feature grid. |
| `features?` | `SaasFeature[]` | — | The feature cards. |
| `bentoEyebrow?` | `string` | `"How it works"` | Eyebrow above the bento detail section. |
| `bentoHeading?` | `string` | — | Heading for the bento detail section. |
| `bento?` | `SaasBentoTile[]` | — | The bento detail tiles. |
| `metrics?` | `SaasMetric[]` | — | Headline metrics shown as a count-up band. |
| `testimonials?` | `RostrumTestimonial[]` | — | Testimonials rotated in the social-proof section. |
| `pricingEyebrow?` | `string` | `"Simple pricing"` | Eyebrow above the pricing teaser. |
| `pricingHeading?` | `string` | — | Heading for the pricing teaser. |
| `pricing?` | `SaasPricingTier[]` | — | The pricing tiers (2–3). |
| `pricingFootnote?` | `SaasAction` | — | Link under the pricing tiers, e.g. to a full comparison. |
| `ctaHeading?` | `string` | — | Heading for the closing CTA band. |
| `ctaSubhead?` | `string` | — | Supporting copy in the closing CTA band. |
| `ctaPrimary?` | `SaasAction` | `"Start free"` | Primary button in the closing CTA band. |
| `ctaSecondary?` | `SaasAction` | `"Talk to sales"` | Secondary button in the closing CTA band. |
| `footerColumns?` | `SaasFooterColumn[]` | — | Footer link columns. |
| `footerNote?` | `string` | — | Closing footer line. |
| `accent?` | `string` | `"#38bdf8"` | The single cool signature hue (azure by default) used for the accent fill, rules, chips, glows, focus rings, and the hero mesh tint. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"div">, "children">`.

## Usage example

```tsx
import { SaasTemplate } from "@/components/crucible/saas";

export default function SaasTemplateDemo() {
  return (
    <div className="relative isolate h-[560px] w-full overflow-hidden rounded-xl bg-neutral-950">
      <SaasTemplate className="h-full overflow-y-auto overflow-x-hidden overscroll-contain" />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.