Components•Marketing hero with product shot
Components•Marketing hero with product shot
Marketing hero with product shot
A landing-page hero with a product shot that is actually alive. The header, announcement, headline and calls to action sit over an app window playing a real agent trace, with recent runs and health metrics around it. It reads its own width, so it works full-bleed or inside a column, and folds to a single column on phones.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/marketing-hero-productHow to use
import { MarketingHeroProduct, MARKETING_HERO_SAMPLE,} from "@/components/bjork-ui/blocks/marketing-hero-product";export default function Home() { return ( <MarketingHeroProduct {...MARKETING_HERO_SAMPLE} title="See every step your agents take." primaryCta={{ label: "Start tracing free", href: "/signup" }} // Swap the built-in window for your own screenshot: // media={<img src="/product.png" alt="The Tracewell run view" />} /> );}
Full width
Open the block on its own pageKeep in mind
Copy is all props. Leave out `nav` (or pass an empty array) to drop the header when your site already has one, and set `headingLevel` to h2 when the hero is not the first heading on the page. Under reduced motion the window and text fade in without moving.See every step
your agents take.
Tracewell records each tool call, retry and handoff as a live trace, so you find the slow step before your users do.
- No card required
- SOC 2 Type II
- Two lines to install
northbay/support-agent/run_8f2c41
Live- runningthinkRead refund request
- pendingtoolLook up order #4471
- pending2 matches: Returns policy section 4.2, Carrier claims playbooksearchSearch policy: "damaged on arrival"
- pendingtoolIssue partial refund, $38.00
- pendingthinkDraft reply to customer
- pendingtoolSend reply and close ticket