AI product sitePro

A full marketing site for a fictional AI product, assembled from the Marketing family: a sticky nav, the live chat hero, a customer row, use cases with running demos, the pipeline, an API sample that streams, the usage price calculator, questions and a footer.

Markdown

On this page

ProThe whole site in a scrolling frame: a sticky nav, the live chat hero, use cases with running demos, the pipeline, an API sample that streams, the price calculator and questions.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/ai-product-site

The template installs as a folder under components/chatcn/pro/ai-product-site/: the page, the nav, the customer row, questions, the footer, the use case demos and one content file.

Usage

tsx

import { AiProductSite } from "@/components/chatcn/pro/ai-product-site/ai-product-site"

<AiProductSite onAction={(action) => router.push(routes[action])} />

Every word, script, plan and question lives in site-content.tsx: replace it with your product and the sections follow. Calls to action come back through onAction (start, sign-in, demo, sales, or plan:<id>). Put the site in anything that scrolls; the nav sticks to that scroller and its links move to each section without changing the URL.

Examples

On a phone

The site lays out by its own width with container queries, so in a phone frame it is the phone site: links fold into a menu, use cases stack, the pipeline turns vertical and every target is 44 px.

ProThe same site at phone width, laid out by its own width: links fold into a menu, use cases stack and the pipeline turns vertical.

What is inside

A sticky nav, solid with a hairline once content passes under it. The link of the section in view is marked current; below 768 px of site width the links fold into a menu that closes on Escape.
HeroLiveChat playing a question that searches docs, queries the warehouse and answers with sources. Typing takes the demo over.
A customer row of type and simple marks, so no real brand is borrowed.
UseCaseSwitcher with three running demos: a support reply, a warehouse query with a table, and an on call runbook.
PipelineDiagram, ApiSnippet with a reply that streams on Run, and UsagePriceCalculator priced by answers and seats.
Questions as plain disclosures, several open at once and reachable by find in page while closed, and a footer with the closing call to action, link columns and status.

Props

Prop	Type	Notes
`product`	`string`	Wordmark and copy. Default "Fieldnote"
`onAction`	`(action: SiteAction) => void`	`start`, `sign-in`, `demo`, `sales`, or `plan:<id>` from the calculator
`className`	`string`	On the root

Keyboard

Key	Action
`Tab`	Nav links, then each section in order
`Enter` on a nav link	Move to the section and focus it
`Escape`	Close the mobile menu, back to its button
`Enter` or `Space` on a question	Open or close the answer
Arrows	Move between use cases and between API languages

Accessibility

One heading level 1 in the hero, a level 2 per section. The nav and each footer column are named navigation landmarks, and the current section link has aria-current.
The menu button says Open menu or Close menu and controls its panel with aria-expanded.
Every composed section keeps its own semantics: the hero chat is a log, use cases are tabs, the pipeline and the calculator describe themselves.

Motion

Sections keep their own motion and only play while on screen.
The site adds a smooth scroll to a section, instant under reduced motion, and the mobile menu dropping 4 px into place in 180 ms. Opening a question turns its plus into a cross; the answer appears without a slide.