4f: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"] 50: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"] 51:Ta8b6,"use client"; import { motion } from "motion/react"; import { useState, type ReactNode } from "react"; type IconProps = { className?: string }; type TemplateItem = { name: string; icon: (props: IconProps) => ReactNode; active?: boolean }; type Platform = { name: string; icon: (props: IconProps) => ReactNode }; type ShareDestination = { name: string; detail: string; icon: (props: IconProps) => ReactNode; enabled?: boolean }; const memberImages = [ "https://assets.solaceui.com/solaceui-member-five.png", "https://assets.solaceui.com/solaceui-member-one.png", "https://assets.solaceui.com/solaceui-member-four.png", ]; const rawNotes = [ { time: "10:32", speaker: "Alex", text: "So the main thing is speed and ease of use..." }, { time: "10:45", speaker: "Jamie", text: "Yeah and also security, IT is going to ask about SSO..." }, { time: "10:58", speaker: "Alex", text: "Right. And we should probably integrate with Slack + Notion." }, { time: "11:07", speaker: "Jamie", text: "Budget-wise, we're looking at something under 50k." }, ]; const templates: TemplateItem[] = [ { name: "Customer discovery", icon: DocumentIcon, active: true }, { name: "1:1", icon: ChartIcon }, { name: "User interview", icon: UserSquareIcon }, { name: "Standup", icon: UserSquareIcon }, { name: "Project update", icon: FileCheckIcon }, ]; const platforms: Platform[] = [ { name: "Zoom", icon: ZoomLogoPlaceholder }, { name: "Google Meet", icon: GoogleMeetLogoPlaceholder }, { name: "Slack", icon: SlackLogoPlaceholder }, { name: "Microsoft Teams", icon: TeamsLogoPlaceholder }, { name: "Webex", icon: WebexLogoPlaceholder }, { name: "Any app", icon: AnyAppLogoPlaceholder }, ]; const syncItems = [ { label: "Action items", count: 3, active: true }, { label: "Follow-ups", count: 2 }, { label: "Decisions", count: 2 }, { label: "Summary", detail: "We aligned on SSO, Slack + Notion integrations, and keeping the budget under $50K." }, ]; const shareDestinations: ShareDestination[] = [ { name: "Email", detail: "Recipients", icon: MailIcon }, { name: "Slack", detail: "# project-updates", icon: SlackIcon }, { name: "Notion", detail: "Meeting notes", icon: NotionIcon }, { name: "CRM", detail: "Add to deal", icon: NetworkIcon }, { name: "Public link", detail: "Anyone with link", icon: LinkIcon, enabled: true }, ]; const audioWaveBars = [ { x: 0, y: 7.6, height: 14.4 }, { x: 5, y: 2.6, height: 22.0 }, { x: 10, y: 2.1, height: 22.6 }, { x: 15, y: 6.8, height: 15.6 }, { x: 20, y: 12.5, height: 7.9 }, { x: 25, y: 14.9, height: 4.0 }, { x: 30, y: 11.3, height: 9.1 }, { x: 35, y: 5.0, height: 18.5 }, { x: 40, y: 1.9, height: 23.0 }, { x: 45, y: 4.9, height: 18.7 }, { x: 50, y: 11.1, height: 9.3 }, { x: 55, y: 14.8, height: 4.1 }, { x: 60, y: 12.6, height: 7.9 }, { x: 65, y: 6.9, height: 15.5 }, { x: 70, y: 2.2, height: 22.5 }, { x: 75, y: 2.5, height: 22.1 }, { x: 80, y: 7.4, height: 14.7 }, { x: 85, y: 12.9, height: 7.4 }, { x: 90, y: 14.8, height: 4.2 }, { x: 95, y: 10.8, height: 9.8 }, { x: 100, y: 4.7, height: 19.0 }, { x: 105, y: 1.8, height: 23.2 }, { x: 110, y: 5.2, height: 18.2 }, { x: 115, y: 11.5, height: 8.8 }, ]; function cn(...classes: Array) { return classes.filter(Boolean).join(" "); } function BentoCard({ title, description, className, children }: { title: string; description: string; className?: string; children: ReactNode }) { return (

{title}

{description}

{children}

); } function Panel({ children, className }: { children: ReactNode; className?: string }) { return

{children}

; } function TranscribeCard() { return (

Raw notes

{rawNotes.map((note) =>

{note.time}

{note.speaker}

{note.text}

)}

Recording... 22:14

Enhanced notes

Goals

Improve speed and ease of use

Requirements

Enterprise SSO
Integrations with Slack and Notion

Budget

Under $50K

Next steps

); } function TemplatesCard() { const [activeTemplate, setActiveTemplate] = useState("Customer discovery"); return (

{templates.map((template) => { const Icon = template.icon; const isActive = activeTemplate === template.name; return ; })}

Customer discovery

Overview

Understand the customer, their goals, and key challenges.

Customer needs

Improve onboarding experience
Reduce time-to-value for new users

Challenges

Manual processes slowing down the team
Lack of visibility across tools

Range

$40K - $60K

Decision criteria

Security, ease of use, integrations

Next steps

); } function PlatformsCard() { return

{platforms.map((platform) => { const Icon = platform.icon; return {platform.name}; })}

; } function SyncCard() { return

{syncItems.map((item) =>

{item.label}{item.count && {item.count}}

{item.detail &&

{item.detail}

}

)}

Action items

; } function ShareCard() { const [enabledDestinations, setEnabledDestinations] = useState(() => Object.fromEntries(shareDestinations.filter((destination) => destination.enabled !== undefined).map((destination) => [destination.name, Boolean(destination.enabled)]))); return {shareDestinations.map((destination) => { const Icon = destination.icon; const isToggle = destination.enabled !== undefined; const checked = Boolean(enabledDestinations[destination.name]); return

{destination.name}

{destination.detail}{isToggle ? setEnabledDestinations((current) => ({ ...current, [destination.name]: !checked }))} /> : }

; })}

Enterprise security & access controlsLearn more

; } function CheckLine({ label, right }: { label: string; right?: string }) { return

{label}{right && {right}}

; } function Divider() { return

; } function InfoBox({ title, children }: { title: string; children: ReactNode }) { return

{title}

{children}

; } function Timeline() { return

Discovery callMay 6

Solution reviewMay 9

Technical deep diveMay 13

; } function Dot() { return ; } function CaptureStatus() { return

Live capture22:14 recording

; } function BeamConnector() { return

; } function AvatarStack() { return

{memberImages.map((image, index) => Team member

)}+2

; } function Task({ label, meta }: { label: string; meta: string }) { return

{label}

{meta}

; } function ActionButton({ label }: { label: string }) { return ; } function SecurityRibbon() { return

Enterprise security & privacy by default

; } function Toggle({ checked, onCheckedChange }: { checked: boolean; onCheckedChange: () => void }) { return ; } function IconBase({ children, className }: { children: ReactNode; className?: string }) { return ; } function WaveIcon(props: IconProps) { return ; } function SearchIcon(props: IconProps) { return ; } function DotsIcon(props: IconProps) { return ; } function SparkleIcon(props: IconProps) { return ; } function StopIcon(props: IconProps) { return ; } function AudioWave(props: IconProps) { return ; } function CopyIcon(props: IconProps) { return ; } function CheckboxIcon(props: IconProps) { return ; } function PlusIcon(props: IconProps) { return ; } function DocumentIcon(props: IconProps) { return ; } function ChartIcon(props: IconProps) { return ; } function UserSquareIcon(props: IconProps) { return ; } function FileCheckIcon(props: IconProps) { return ; } function PlatformLogoPlaceholder(props: IconProps) { return ( ); } function ZoomLogoPlaceholder(props: IconProps) { // Replace this component with the Zoom SVG/logo. return ( ); } function GoogleMeetLogoPlaceholder(props: IconProps) { // Replace this component with the Google Meet SVG/logo. return ( ); } function SlackLogoPlaceholder(props: IconProps) { // Replace this component with the Slack SVG/logo. return ; } function TeamsLogoPlaceholder(props: IconProps) { // Replace this component with the Microsoft Teams SVG/logo. return ( ); } function WebexLogoPlaceholder(props: IconProps) { // Replace this component with the Webex SVG/logo. return ( ); } function AnyAppLogoPlaceholder(props: IconProps) { // Replace this component with your generic app SVG/logo. return ; } function SlackIcon(props: IconProps) { return ; } function MailIcon(props: IconProps) { return ; } function NotionIcon(props: IconProps) { return ( ); } function NetworkIcon(props: IconProps) { return ; } function LinkIcon(props: IconProps) { return (); } function ChevronIcon(props: IconProps) { return ; } function LockIcon(props: IconProps) { return ; } export default function BentoGridFour() { return (

); } 4e:["$","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","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@solaceui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/bento-grid/four/index.tsx","content":"$51","type":"registry:component","target":"components/bento-grid-4.tsx"}],"className":"h-[70svh] min-h-80"}]]}]