50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2232,"use client"; import { useId, useState, type ComponentProps } from "react"; import * as TabsPrimitive from "@radix-ui/react-tabs"; import { motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; export type InteractiveFeature = { id: string; title: string; summary: string; detail: string; points?: string[]; stat?: { value: string; label: string }; }; export type FeatureInteractiveCardsProps = { eyebrow?: string; title?: string; description?: string; features?: InteractiveFeature[]; /** Controlled active feature id. */ value?: string; /** Initially active feature id when uncontrolled. Defaults to the first feature. */ defaultValue?: string; onValueChange?: (value: string) => void; } & Omit, "defaultValue" | "onChange">; const DEFAULT_FEATURES: InteractiveFeature[] = [ { id: "routing", title: "Routing that reads the ticket", summary: "Sends each conversation to the person who closed the last similar one.", detail: "Kestrel looks at the customer's plan, the product area and the language, then routes to whoever resolved the closest match in the past 90 days. If that person is offline, it falls back to the team queue instead of guessing.", points: [ "Rules editor for the cases you want to pin by hand", "Round-robin fallback per team", "Every routing decision shows its reason", ], stat: { value: "38%", label: "fewer reassignments in the first month" }, }, { id: "drafts", title: "Replies drafted from your docs", summary: "Suggests an answer citing your help center, never the open web.", detail: "Drafts are built only from articles and macros you've published. Each one lists the sources it used, and agents edit before sending. Nothing goes out on its own.", points: [ "Sources linked inline under every draft", "Per-team tone settings", "Turn it off for any queue", ], stat: { value: "4m 12s", label: "median first response, down from 11m" }, }, { id: "handoff", title: "Handoffs without re-explaining", summary: "A six-line brief travels with the ticket when it changes hands.", detail: "When a ticket moves from support to engineering, Kestrel writes a short brief: what the customer tried, what was ruled out, and the exact error text. The engineer reads six lines instead of forty messages.", points: [ "Linked to the Linear or Jira issue it creates", "Customer is notified when status changes", ], stat: { value: "2.1×", label: "faster escalations, measured over Q2 2026" }, }, { id: "reporting", title: "Reports the CFO can read", summary: "Cost per resolved ticket, by team and by product area.", detail: "Weekly reports land in your inbox every Monday at 08:00 with cost per resolution, backlog age and the three topics that grew fastest. Export any chart to CSV.", points: [ "Scheduled email or Slack digest", "Raw data via the reporting API", ], stat: { value: "Mon 08:00", label: "weekly digest, in your team's time zone" }, }, ]; const DEFAULTS = { eyebrow: "Kestrel for support teams", title: "Four things your queue does differently on Kestrel.", description: "Pick one to see how it works. Numbers come from 212 teams that switched between January and June 2026.", }; export function FeatureInteractiveCards({ eyebrow = DEFAULTS.eyebrow, title = DEFAULTS.title, description = DEFAULTS.description, features = DEFAULT_FEATURES, value, defaultValue, onValueChange, className, ...props }: FeatureInteractiveCardsProps) { const headingId = useId(); const reduceMotion = useReducedMotion(); const [uncontrolled, setUncontrolled] = useState( defaultValue ?? features[0]?.id ?? "" ); const current = value ?? uncontrolled; const handleChange = (next: string) => { if (value === undefined) setUncontrolled(next); onValueChange?.(next); }; return (

{eyebrow}

{title}

{description}

{features.map((feature, i) => ( ))} {features.map((feature, i) => (

{String(i + 1).padStart(2, "0")} / {String(features.length).padStart(2, "0")}

{feature.title}

{feature.detail}

{feature.points && feature.points.length > 0 && (

)} {feature.stat && (

{feature.stat.value} {feature.stat.label}

)} ))}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-tabs",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-tabs","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-tabs"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/blocks/feature-interactive-cards.tsx","content":"$52","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]