A developer-focused hero section with an interactive environment switcher, build telemetry, and live status badge. Useful for SaaS landing pages and DevTools.
"use client";
import * as React from "react";
import ProductPreviewHero from "@/components/ui/product-preview-hero";
const defaultPreviews = [
{
id: "production",
label: "Production",
status: "Healthy",
branch: "main · 8f32c1a",
buildTime: "24s",
},
{
id: "preview",
label: "Preview",
status: "Review ready",
branch: "feat/new-dashboard · 42b8e0f",
buildTime: "19s",
},
{
id: "staging",
label: "Staging",
status: "Tests passing",
branch: "release/2.8 · 94cafe2",
buildTime: "22s",
},
];
export default function ProductPreviewHeroDemo() {
const [notice, setNotice] = React.useState("");
return (
<div className="w-full bg-background min-h-[540px] flex flex-col items-center justify-center p-4 sm:p-6">
<ProductPreviewHero
title="Ship something worth opening."
description="A clear view of what changed, who reviewed it, and what is ready to go live across every deployment environment."
actionLabel="Open environment"
previews={defaultPreviews.map((p, i) => ({
...p,
content: (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between">
<strong className="text-sm font-semibold text-foreground">
Workspace overview
</strong>
<span className="text-xs text-muted-foreground">
Last 7 days
</span>
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
{["Requests", "Latency", "Uptime"].map((label, j) => (
<div
key={label}
className="border border-border rounded-lg p-3.5 bg-background/60"
>
<p className="text-xs text-muted-foreground mb-1">
{label}
</p>
<strong className="text-xl font-bold text-foreground tracking-tight">
{[["128.4k", "42ms", "99.98%"], ["14.2k", "38ms", "100%"], ["64.1k", "40ms", "99.95%"]][i][j]}
</strong>
</div>
))}
</div>
<svg
role="img"
aria-label="Sample activity over seven days"
viewBox="0 0 500 80"
className="w-full h-20 text-primary"
>
<path
d={`M0 65L70 ${45 + i * 6}L140 52L210 25L280 38L350 12L420 20L500 5`}
fill="none"
stroke="currentColor"
strokeWidth="2.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p className="text-xs text-muted-foreground">
Real-time telemetry · {p.label} environment
</p>
</div>
),
}))}
onAction={(id) =>
setNotice(`Opened ${id} environment preview.`)
}
/>
{notice && (
<p role="status" className="text-xs text-muted-foreground mt-2">
{notice}
</p>
)}
</div>
);
}