Bento Grid 4

"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<string | false | undefined>) {
  return classes.filter(Boolean).join(" ");
}

function BentoCard({ title, description, className, children }: { title: string; description: string; className?: string; children: ReactNode }) {
  return (
    <motion.article
      initial={{ opacity: 0, y: 18 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-80px" }}
      transition={{ duration: 0.55, ease: [0.21, 0.58, 0.36, 1] }}
      className={cn(
        "relative overflow-hidden rounded-[1.25rem] border border-zinc-200 bg-white p-6 shadow-[0_24px_80px_rgba(0,0,0,0.06)] dark:border-white/10 dark:bg-[#0b100d] dark:shadow-[0_28px_90px_rgba(0,0,0,0.55)]",
        className
      )}
    >
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_18%_8%,rgba(132,157,70,0.13),transparent_30%),linear-gradient(135deg,rgba(255,255,255,0.88),rgba(255,255,255,0.38))] dark:bg-[radial-gradient(circle_at_18%_8%,rgba(166,194,95,0.075),transparent_32%),linear-gradient(135deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012))]" />
      <div className="pointer-events-none absolute inset-0 opacity-[0.08] dark:opacity-[0.07]" style={{ backgroundImage: "repeating-radial-gradient(circle at 30% 60%, currentColor 0 1px, transparent 1px 5px)" }} />
      <div className="relative z-10 flex h-full flex-col">
        <div>
          <h3 className="text-[1.7rem] font-medium leading-none tracking-[-0.035em] text-zinc-950 dark:text-zinc-50 sm:text-[2rem]">{title}</h3>
          <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400 sm:text-base">{description}</p>
        </div>
        <div className="flex-1">{children}</div>
      </div>
    </motion.article>
  );
}

function Panel({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("rounded-[1rem] border border-zinc-200 bg-white/82 shadow-[0_18px_60px_rgba(0,0,0,0.07)] backdrop-blur dark:border-white/10 dark:bg-white/[0.045] dark:shadow-black/35", className)}>{children}</div>;
}

function TranscribeCard() {
  return (
    <BentoCard title="Transcribe & enhance notes" description="From raw conversation to clear, polished notes." className="min-h-[560px] xl:col-span-6">
      <CaptureStatus />
      <div className="relative mt-8 grid items-center gap-5 xl:grid-cols-[1fr_0.22fr_1fr]">
        <Panel className="overflow-hidden">
          <div className="flex items-center justify-between border-b border-zinc-200 px-5 py-4 dark:border-white/10"><div className="flex items-center gap-3 text-sm font-medium"><WaveIcon className="size-4 text-[#91ad49]" /> Raw notes</div><div className="flex items-center gap-2 text-zinc-500"><SearchIcon className="size-4" /><DotsIcon className="size-4" /></div></div>
          <div className="space-y-5 px-5 py-5 text-sm">{rawNotes.map((note) => <div key={note.time} className="grid grid-cols-[3rem_1fr] gap-3"><span className="text-zinc-500">{note.time}</span><div><p className="text-zinc-600 dark:text-zinc-300">{note.speaker}</p><p className="mt-1 leading-5 text-zinc-950 dark:text-zinc-100">{note.text}</p></div></div>)}</div>
          <div className="flex items-center justify-between border-t border-zinc-200 px-5 py-4 text-sm dark:border-white/10"><div className="flex items-center gap-2 text-zinc-500"><span className="size-2 rounded-full bg-[#91ad49]" /> Recording... <span>22:14</span></div><div className="flex items-center gap-4"><AudioWave className="h-8 w-24 text-[#91ad49]" /><span className="grid size-9 place-items-center rounded-full bg-[#91ad49] text-white"><StopIcon className="size-4" /></span></div></div>
        </Panel>
        <BeamConnector />
        <Panel className="overflow-hidden">
          <div className="flex items-center justify-between border-b border-zinc-200 px-5 py-4 dark:border-white/10"><div className="flex items-center gap-3 text-sm font-medium"><SparkleIcon className="size-4 text-[#91ad49]" /> Enhanced notes</div><DotsIcon className="size-4 text-zinc-500" /></div>
          <div className="space-y-5 px-5 py-5 text-sm leading-5"><div><p className="font-medium">Goals</p><ul className="mt-2 list-disc space-y-1 pl-5 text-zinc-700 dark:text-zinc-300"><li>Improve speed and ease of use</li></ul></div><div><p className="font-medium">Requirements</p><ul className="mt-2 list-disc space-y-1 pl-5 text-zinc-700 dark:text-zinc-300"><li>Enterprise SSO</li><li>Integrations with Slack and Notion</li></ul></div><div><p className="font-medium">Budget</p><ul className="mt-2 list-disc pl-5 text-zinc-700 dark:text-zinc-300"><li>Under $50K</li></ul></div><div><p className="font-medium">Next steps</p><div className="mt-2 space-y-2 text-zinc-700 dark:text-zinc-300"><CheckLine label="Share security overview" right="Jamie" /><CheckLine label="Send integration capabilities" right="Alex" /></div></div></div>
          <div className="px-5 pb-5"><button className="flex h-11 w-full items-center justify-center gap-2 rounded-md border border-zinc-200 bg-zinc-50 text-sm text-zinc-700 dark:border-white/10 dark:bg-white/[0.04] dark:text-zinc-200"><CopyIcon className="size-4" /> Copy enhanced notes</button></div>
        </Panel>
      </div>
    </BentoCard>
  );
}

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

  return (
    <BentoCard title="Get notes in the format your team needs" description="Use templates or build your own." className="min-h-[560px] xl:col-span-6">
      <div className="mt-8 grid gap-5 xl:grid-cols-[0.32fr_0.68fr]"><Panel className="flex min-h-[405px] flex-col justify-between p-4"><div className="space-y-3">{templates.map((template) => { const Icon = template.icon; const isActive = activeTemplate === template.name; return <button key={template.name} type="button" onClick={() => setActiveTemplate(template.name)} className={cn("flex w-full items-center gap-3 rounded-md px-3 py-3 text-left text-sm transition-colors", isActive ? "bg-[#eef2df] text-[#455323] dark:bg-[#2a331c] dark:text-[#dcebb4]" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-white/[0.06]")}><Icon className="size-4" />{template.name}</button>; })}</div><div className="border-t border-zinc-200 pt-4 text-sm dark:border-white/10"><button className="flex items-center gap-3 text-zinc-700 dark:text-zinc-300"><PlusIcon className="size-4" /> New template</button></div></Panel><Panel className="p-5"><div className="flex justify-between gap-4"><h4 className="text-lg font-medium">Customer discovery</h4><div className="flex items-center gap-1"><AvatarStack /><button className="grid size-8 place-items-center rounded-md border border-zinc-200 dark:border-white/10"><DotsIcon className="size-4" /></button></div></div><div className="mt-4 space-y-4 text-sm leading-5"><div><p className="font-medium">Overview</p><p className="mt-1 text-zinc-600 dark:text-zinc-400">Understand the customer, their goals, and key challenges.</p></div><Divider /><div><p className="font-medium">Customer needs</p><ul className="mt-1 list-disc space-y-1 pl-5 text-zinc-700 dark:text-zinc-300"><li>Improve onboarding experience</li><li>Reduce time-to-value for new users</li></ul></div><Divider /><div><p className="font-medium">Challenges</p><ul className="mt-1 list-disc space-y-1 pl-5 text-zinc-700 dark:text-zinc-300"><li>Manual processes slowing down the team</li><li>Lack of visibility across tools</li></ul></div><div className="grid gap-4 sm:grid-cols-2"><InfoBox title="Timeline"><Timeline /></InfoBox><InfoBox title="Budget"><p className="text-xs text-zinc-500">Range</p><p className="font-medium text-[#6f8a36]">$40K - $60K</p><p className="mt-3 text-xs text-zinc-500">Decision criteria</p><p className="text-xs">Security, ease of use, integrations</p></InfoBox></div><div><p className="font-medium">Next steps</p><CheckLine label="Share security documentation" right="Jamie     May 6" /></div></div></Panel></div>
    </BentoCard>
  );
}

function PlatformsCard() { return <BentoCard title="Works on all platforms" description="Transcribe any meeting. No bots required." className="min-h-[390px] xl:col-span-3"><div className="relative mt-6 grid grid-cols-3 gap-4"><div className="pointer-events-none absolute inset-6 rounded-full border border-dashed border-[#91ad49]/20" />{platforms.map((platform) => { const Icon = platform.icon; return <Panel key={platform.name} className="relative z-10 grid aspect-square place-items-center p-3 text-center"><Icon className="mb-3 size-9" /><span className="text-sm">{platform.name}</span></Panel>; })}</div><SecurityRibbon /></BentoCard>; }

function SyncCard() { return <BentoCard title="Put your meeting work to sync" description="Turn conversations into action." className="min-h-[390px] xl:col-span-4"><div className="mt-6 grid gap-4 2xl:grid-cols-[0.9fr_1fr]"><Panel className="p-4 text-sm"><div className="space-y-2">{syncItems.map((item) => <div key={item.label} className={cn("rounded-md px-3 py-3", item.active ? "bg-[#eef2df] dark:bg-[#26301b]" : "border-b border-zinc-200 dark:border-white/10")}><div className="flex items-center justify-between"><span className="flex items-center gap-3"><CheckboxIcon className="size-4" />{item.label}</span>{item.count && <span className="rounded-md bg-[#dfe8c7] px-2 py-0.5 text-xs text-[#607436] dark:bg-[#3b4924] dark:text-[#dcebb4]">{item.count}</span>}</div>{item.detail && <p className="mt-2 pl-7 text-xs text-zinc-500">{item.detail}</p>}</div>)}</div></Panel><Panel className="p-4 text-sm"><h4 className="font-medium">Action items</h4><Divider /><div className="space-y-4"><Task label="Share security overview" meta="Jamie · May 6" /><Task label="Send integration capabilities" meta="Alex · May 7" /><Task label="Prepare technical requirements" meta="You · May 8" /></div></Panel></div><div className="mt-4 grid gap-3 sm:grid-cols-3"><ActionButton label="Write follow-up" /><ActionButton label="Summarize decisions" /><ActionButton label="Create action items" /></div></BentoCard>; }

function ShareCard() { const [enabledDestinations, setEnabledDestinations] = useState(() => Object.fromEntries(shareDestinations.filter((destination) => destination.enabled !== undefined).map((destination) => [destination.name, Boolean(destination.enabled)]))); return <BentoCard title="Share your notes with one click" description="Send notes where your team works." className="min-h-[390px] xl:col-span-5"><Panel className="mt-6 overflow-hidden">{shareDestinations.map((destination) => { const Icon = destination.icon; const isToggle = destination.enabled !== undefined; const checked = Boolean(enabledDestinations[destination.name]); return <div key={destination.name} className="flex items-center justify-between border-b border-zinc-200 px-5 py-4 last:border-b-0 dark:border-white/10"><div className="flex items-center gap-4"><Icon className="size-5" /><span>{destination.name}</span></div><div className="flex items-center gap-4 text-sm text-zinc-500">{destination.detail}{isToggle ? <Toggle checked={checked} onCheckedChange={() => setEnabledDestinations((current) => ({ ...current, [destination.name]: !checked }))} /> : <ChevronIcon className="size-4" />}</div></div>; })}</Panel><div className="mt-4 flex items-center justify-between rounded-md border border-[#dfe8c7] bg-[#f4f7eb] px-4 py-3 text-sm text-[#5f7334] dark:border-[#2f3d1d] dark:bg-[#182011] dark:text-[#dcebb4]"><span className="flex items-center gap-3"><LockIcon className="size-4" /> Enterprise security & access controls</span><span>Learn more</span></div></BentoCard>; }

function CheckLine({ label, right }: { label: string; right?: string }) { return <div className="flex items-center justify-between gap-3 text-sm"><span className="flex items-center gap-2"><CheckboxIcon className="size-4 text-[#6f8a36]" />{label}</span>{right && <span className="text-xs text-zinc-500">{right}</span>}</div>; }
function Divider() { return <div className="h-px bg-zinc-200 dark:bg-white/10" />; }
function InfoBox({ title, children }: { title: string; children: ReactNode }) { return <div className="rounded-md border border-zinc-200 bg-zinc-50/60 p-3 dark:border-white/10 dark:bg-white/[0.03]"><p className="mb-2 text-sm font-medium">{title}</p>{children}</div>; }
function Timeline() { return <div className="space-y-2 text-xs"><p className="flex justify-between"><span className="flex items-center gap-2"><Dot />Discovery call</span><span>May 6</span></p><p className="flex justify-between"><span className="flex items-center gap-2"><Dot />Solution review</span><span>May 9</span></p><p className="flex justify-between"><span className="flex items-center gap-2"><Dot />Technical deep dive</span><span>May 13</span></p></div>; }
function Dot() { return <span className="size-1.5 rounded-full bg-[#91ad49]" />; }
function CaptureStatus() { return <div className="absolute right-7 top-7 hidden items-center gap-3 rounded-xl border border-[#dbe8bd] bg-white/90 px-3 py-2 text-sm text-zinc-800 shadow-[0_14px_40px_rgba(77,95,42,0.14)] backdrop-blur dark:border-[#3a4a23] dark:bg-[#10170d]/90 dark:text-zinc-100 sm:flex"><span className="relative grid size-8 place-items-center rounded-lg bg-[#eef5db] dark:bg-[#1d2815]"><span className="absolute size-3 animate-ping rounded-full bg-[#91ad49] opacity-30" /><span className="relative size-2 rounded-full bg-[#91ad49] shadow-[0_0_14px_rgba(145,173,73,0.9)]" /></span><span className="leading-tight"><span className="block font-medium">Live capture</span><span className="text-xs text-zinc-500 dark:text-zinc-400">22:14 recording</span></span><AudioWave className="h-6 w-16 text-[#91ad49]" /></div>; }
function BeamConnector() { return <div className="relative hidden h-full min-h-[220px] items-center justify-center xl:flex"><svg viewBox="0 0 128 40" className="w-full max-w-[112px] overflow-visible text-[#91ad49]" aria-hidden="true"><path d="M8 20H114" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" opacity="0.28" /><path d="M108 14L116 20L108 26" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" opacity="0.48" /><motion.path d="M8 20H114" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeDasharray="18 104" initial={{ strokeDashoffset: 122 }} animate={{ strokeDashoffset: 0 }} transition={{ duration: 1.45, repeat: Infinity, ease: "linear" }} /></svg></div>; }
function AvatarStack() { return <div className="flex -space-x-2">{memberImages.map((image, index) => <img key={image} src={image} alt="Team member" className="size-7 rounded-full object-cover ring-2 ring-white dark:ring-[#11160f]" style={{ zIndex: memberImages.length - index }} />)}<span className="grid size-7 place-items-center rounded-full bg-zinc-100 text-xs ring-2 ring-white dark:bg-white/10 dark:ring-[#11160f]">+2</span></div>; }
function Task({ label, meta }: { label: string; meta: string }) { return <div className="flex gap-3"><CheckboxIcon className="mt-0.5 size-4 text-[#6f8a36]" /><div><p>{label}</p><p className="mt-1 text-xs text-zinc-500">{meta}</p></div></div>; }
function ActionButton({ label }: { label: string }) { return <button className="flex h-11 min-w-0 items-center justify-center whitespace-nowrap rounded-md border border-[#d7e5b5] bg-white px-3 text-xs font-medium text-zinc-800 shadow-sm dark:border-[#34451f] dark:bg-white/[0.09] dark:text-zinc-100 2xl:text-sm">{label}</button>; }
function SecurityRibbon() { return <div className="mt-6 flex items-center justify-center gap-3 rounded-md border border-[#dfe8c7] bg-[#f4f7eb] px-4 py-3 text-sm text-[#5f7334] dark:border-[#2f3d1d] dark:bg-[#182011] dark:text-[#dcebb4]"><LockIcon className="size-4" /> Enterprise security & privacy by default</div>; }
function Toggle({ checked, onCheckedChange }: { checked: boolean; onCheckedChange: () => void }) { return <button type="button" onClick={onCheckedChange} aria-pressed={checked} className={cn("relative h-6 w-10 rounded-full transition-colors", checked ? "bg-[#91ad49]" : "bg-zinc-200 dark:bg-white/15")}><span className={cn("absolute left-1 top-1 size-4 rounded-full bg-white shadow-sm transition-transform", checked ? "translate-x-4" : "translate-x-0")} /></button>; }
function IconBase({ children, className }: { children: ReactNode; className?: string }) { return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">{children}</svg>; }
function WaveIcon(props: IconProps) { return <IconBase {...props}><path d="M4 12v.01M7 9v6M10 7v10M13 9v6M16 11v2M19 8v8" /></IconBase>; }
function SearchIcon(props: IconProps) { return <IconBase {...props}><circle cx="11" cy="11" r="6" /><path d="m16 16 4 4" /></IconBase>; }
function DotsIcon(props: IconProps) { return <IconBase {...props}><path d="M5 12h.01M12 12h.01M19 12h.01" /></IconBase>; }
function SparkleIcon(props: IconProps) { return <IconBase {...props}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z" /><path d="M19 17l.7 2.3L22 20l-2.3.7L19 23l-.7-2.3L16 20l2.3-.7L19 17Z" /></IconBase>; }
function StopIcon(props: IconProps) { return <IconBase {...props}><rect x="8" y="8" width="8" height="8" rx="1" /></IconBase>; }
function AudioWave(props: IconProps) { return <svg viewBox="0 0 120 32" fill="none" className={props.className} aria-hidden="true">{audioWaveBars.map((bar) => <rect key={bar.x} x={bar.x} y={bar.y} width="2" height={bar.height} rx="1" fill="currentColor" />)}</svg>; }
function CopyIcon(props: IconProps) { return <IconBase {...props}><path d="M9 9h10v10H9z" /><path d="M5 15V5h10" /></IconBase>; }
function CheckboxIcon(props: IconProps) { return <IconBase {...props}><rect x="4" y="4" width="16" height="16" rx="2" /><path d="m8 12 3 3 5-6" /></IconBase>; }
function PlusIcon(props: IconProps) { return <IconBase {...props}><path d="M12 5v14M5 12h14" /></IconBase>; }
function DocumentIcon(props: IconProps) { return <IconBase {...props}><path d="M7 3h7l4 4v14H7z" /><path d="M14 3v5h5" /><path d="M9 13h6M9 17h4" /></IconBase>; }
function ChartIcon(props: IconProps) { return <IconBase {...props}><path d="M4 19V5" /><path d="M4 19h16" /><path d="m7 15 4-4 3 3 5-7" /></IconBase>; }
function UserSquareIcon(props: IconProps) { return <IconBase {...props}><rect x="4" y="4" width="16" height="16" rx="2" /><circle cx="12" cy="10" r="2.5" /><path d="M8 17c.9-2 2.3-3 4-3s3.1 1 4 3" /></IconBase>; }
function FileCheckIcon(props: IconProps) { return <IconBase {...props}><path d="M7 3h7l4 4v14H7z" /><path d="M14 3v5h5" /><path d="m9 15 2 2 4-5" /></IconBase>; }
function PlatformLogoPlaceholder(props: IconProps) {
  return (
    <svg viewBox="0 0 32 32" className={props.className} aria-hidden="true">
      <rect x="2" y="2" width="28" height="28" rx="9" fill="currentColor" opacity="0.08" />
      <rect x="8" y="9" width="16" height="14" rx="3" fill="none" stroke="currentColor" strokeWidth="1.8" strokeDasharray="3 3" opacity="0.55" />
      <path d="M11 19 15 15l3 3 3-4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" opacity="0.55" />
    </svg>
  );
}

function ZoomLogoPlaceholder(props: IconProps) {
  // Replace this component with the Zoom SVG/logo.
  return (
    <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={props.className} aria-hidden="true">
      <path d="M2 11.6C2 8.23969 2 6.55953 2.65396 5.27606C3.2292 4.14708 4.14708 3.2292 5.27606 2.65396C6.55953 2 8.23969 2 11.6 2H20.4C23.7603 2 25.4405 2 26.7239 2.65396C27.8529 3.2292 28.7708 4.14708 29.346 5.27606C30 6.55953 30 8.23969 30 11.6V20.4C30 23.7603 30 25.4405 29.346 26.7239C28.7708 27.8529 27.8529 28.7708 26.7239 29.346C25.4405 30 23.7603 30 20.4 30H11.6C8.23969 30 6.55953 30 5.27606 29.346C4.14708 28.7708 3.2292 27.8529 2.65396 26.7239C2 25.4405 2 23.7603 2 20.4V11.6Z" fill="#4087FC" />
      <path d="M8.26667 10C7.56711 10 7 10.6396 7 11.4286V18.3571C7 20.369 8.44612 22 10.23 22L17.7333 21.9286C18.4329 21.9286 19 21.289 19 20.5V13.5C19 11.4881 17.2839 10 15.5 10L8.26667 10Z" fill="white" />
      <path d="M20.7122 12.7276C20.2596 13.1752 20 13.8211 20 14.5V17.3993C20 18.0782 20.2596 18.7242 20.7122 19.1717L23.5288 21.6525C24.1019 22.2191 25 21.7601 25 20.9005V11.1352C25 10.2755 24.1019 9.81654 23.5288 10.3832L20.7122 12.7276Z" fill="white" />
    </svg>
  );
}

function GoogleMeetLogoPlaceholder(props: IconProps) {
  // Replace this component with the Google Meet SVG/logo.
  return (<svg viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg" className={props.className} aria-hidden="true">
    <path d="M42.75 38.2078V44.5312C42.7472 45.4752 42.371 46.3798 41.7035 47.0473C41.036 47.7148 40.1315 48.091 39.1875 48.0938H16.0312V37.4062H32.0625V28.5L42.75 38.2078Z" fill="#00AC47" />
    <path d="M42.75 19.5938V38.2078L32.0625 28.5V19.5938H42.75Z" fill="#31A950" />
    <path d="M16.0312 8.90625V19.5938H5.34375L16.0312 8.90625Z" fill="#EA4435" />
    <path d="M16.0312 19.5938H5.34375V39.1875H16.0312V19.5938Z" fill="#4285F4" />
    <path d="M42.75 12.4688V19.5938H41.8594L32.0625 28.5V19.5938H16.0312V8.90625H39.1875C40.1315 8.90902 41.036 9.28525 41.7035 9.95274C42.371 10.6202 42.7472 11.5248 42.75 12.4688Z" fill="#FFBA00" />
    <path d="M16.0312 37.4062V48.0938H8.90625C7.96227 48.091 7.05774 47.7148 6.39024 47.0473C5.72275 46.3798 5.34652 45.4752 5.34375 44.5312V37.4062H16.0312Z" fill="#0066DA" />
    <path d="M51.6562 14.7131V42.2868C51.6563 42.6314 51.5563 42.9685 51.3684 43.2574C51.1805 43.5462 50.9128 43.7742 50.5978 43.9138C50.2828 44.0534 49.934 44.0985 49.5939 44.0437C49.2537 43.9889 48.9368 43.8365 48.6816 43.605L42.75 38.2078L32.0625 28.5L41.8594 19.5937L42.75 18.7922L48.6816 13.395C48.9368 13.1635 49.2537 13.0111 49.5939 12.9563C49.934 12.9014 50.2828 12.9466 50.5978 13.0861C50.9128 13.2257 51.1805 13.4538 51.3684 13.7426C51.5563 14.0314 51.6563 14.3685 51.6562 14.7131Z" fill="#00AC47" />
    <path d="M42.75 18.7922V38.2078L32.0625 28.5L41.8594 19.5937L42.75 18.7922Z" fill="#188038" />
  </svg>
  );
}

function SlackLogoPlaceholder(props: IconProps) {
  // Replace this component with the Slack SVG/logo.
  return <SlackIcon {...props} />;
}

function TeamsLogoPlaceholder(props: IconProps) {
  // Replace this component with the Microsoft Teams SVG/logo.
  return (
    <svg viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg" className={props.className} aria-hidden="true">
      <path d="M49.7881 31.7969H66.5121C68.0939 31.7969 69.375 33.0734 69.375 34.6505V49.8575C69.3738 51.2374 69.1008 52.6036 68.5716 53.878C68.0424 55.1525 67.2674 56.3102 66.2907 57.2851C65.3141 58.26 64.155 59.033 62.8797 59.5599C61.6043 60.0869 60.2377 60.3575 58.8577 60.3563H58.8115C57.4316 60.3575 56.0649 60.0869 54.7896 59.5599C53.5142 59.033 52.3551 58.26 51.3785 57.2851C50.4019 56.3102 49.6269 55.1525 49.0977 53.878C48.5685 52.6036 48.2955 51.2374 48.2943 49.8575V33.2954C48.2943 32.4675 48.9649 31.7969 49.7881 31.7969ZM61.0962 28.7906C64.8332 28.7906 67.8672 25.7613 67.8672 22.0289C67.8672 18.2919 64.8332 15.2625 61.0916 15.2625C57.35 15.2625 54.316 18.2919 54.316 22.0289C54.316 25.7613 57.35 28.7906 61.0916 28.7906H61.0962Z" fill="#5059C9" />
      <path d="M40.0109 28.7906C41.2952 28.7925 42.5673 28.5412 43.7546 28.0513C44.9418 27.5613 46.0209 26.8422 46.9301 25.9351C47.8394 25.028 48.561 23.9507 49.0538 22.7646C49.5465 21.5785 49.8008 20.307 49.802 19.0226C49.8014 17.7375 49.5474 16.4651 49.0546 15.2782C48.5619 14.0913 47.8399 13.0132 46.9301 12.1055C46.0203 11.1979 44.9405 10.4785 43.7524 9.98851C42.5644 9.49853 41.2914 9.24759 40.0062 9.25002C38.7223 9.2488 37.4506 9.5005 36.2639 9.99073C35.0772 10.481 33.9987 11.2001 33.09 12.1072C32.1812 13.0142 31.46 14.0914 30.9675 15.2771C30.475 16.4629 30.2209 17.7341 30.2197 19.018C30.2197 24.4154 34.5996 28.7906 40.0062 28.7906H40.0109ZM53.0626 31.7969H25.4514C24.7026 31.8151 23.9918 32.1297 23.4749 32.6718C22.958 33.2138 22.6775 33.9388 22.6949 34.6875V52.0313C22.5943 56.5266 24.2821 60.878 27.3874 64.1299C30.4928 67.3818 34.7618 69.2683 39.257 69.375C43.753 69.2695 48.0232 67.3836 51.1295 64.1315C54.2359 60.8795 55.9243 56.5274 55.8237 52.0313V34.6875C55.8323 34.3164 55.7677 33.9472 55.6336 33.6011C55.4995 33.2549 55.2985 32.9386 55.0421 32.6701C54.7856 32.4017 54.4789 32.1864 54.1392 32.0366C53.7996 31.8867 53.4337 31.8053 53.0626 31.7969Z" fill="#7B83EB" />
      <path opacity="0.1" d="M40.7648 31.7969V56.1013C40.7611 56.8308 40.4694 57.5293 39.9531 58.0447C39.4368 58.5601 38.7378 58.8507 38.0083 58.8531H24.0176C23.1423 56.6836 22.6917 54.3661 22.6903 52.0266V34.6875C22.6817 34.3166 22.7463 33.9477 22.8805 33.6018C23.0147 33.2559 23.2158 32.9399 23.4722 32.6718C23.7287 32.4037 24.0355 32.1889 24.3751 32.0395C24.7147 31.8902 25.0805 31.8093 25.4514 31.8015H40.7601L40.7648 31.7969Z" fill="black" />
      <path opacity="0.2" d="M39.257 31.7969V57.6044C39.2509 58.3331 38.9584 59.0303 38.4427 59.5452C37.9269 60.0601 37.2293 60.3514 36.5005 60.3562H24.7299C24.2098 59.4022 23.7957 58.3941 23.495 57.35C22.969 55.626 22.7009 53.8337 22.6995 52.0312V34.6782C22.6909 34.3077 22.7554 33.9391 22.8893 33.5936C23.0232 33.248 23.2238 32.9321 23.4798 32.6641C23.7358 32.3961 24.0421 32.1812 24.3812 32.0316C24.7202 31.882 25.0855 31.8006 25.456 31.7922H39.2616L39.257 31.7969Z" fill="black" />
      <path opacity="0.2" d="M39.257 31.7969V54.5981C39.2509 55.3269 38.9584 56.024 38.4427 56.5389C37.9269 57.0538 37.2293 57.3451 36.5005 57.35H23.495C22.969 55.626 22.7009 53.8337 22.6995 52.0312V34.6782C22.6909 34.3077 22.7554 33.9391 22.8893 33.5936C23.0232 33.248 23.2238 32.9321 23.4798 32.6641C23.7358 32.3961 24.0421 32.1812 24.3812 32.0316C24.7202 31.882 25.0855 31.8006 25.456 31.7922H39.2616L39.257 31.7969Z" fill="black" />
      <path opacity="0.2" d="M37.7538 31.7969V54.5981C37.7478 55.3269 37.4553 56.024 36.9395 56.5389C36.4238 57.0538 35.7261 57.3451 34.9973 57.35H23.4904C22.9643 55.626 22.6963 53.8337 22.6949 52.0312V34.6782C22.6863 34.3077 22.7507 33.9391 22.8846 33.5936C23.0185 33.248 23.2192 32.9321 23.4752 32.6641C23.7312 32.3961 24.0374 32.1812 24.3765 32.0316C24.7156 31.882 25.0808 31.8006 25.4514 31.7922L37.7538 31.7969Z" fill="black" />
      <path opacity="0.1" d="M40.7647 24.0269V28.7629C40.5104 28.7768 40.2699 28.7906 40.0109 28.7906C39.7565 28.7906 39.516 28.7768 39.257 28.7629C37.1914 28.6037 35.2297 27.7928 33.6546 26.4471C32.0795 25.1014 30.9723 23.2904 30.4926 21.275H38.0082C38.737 21.2774 39.4353 21.5674 39.9514 22.0818C40.4676 22.5962 40.7599 23.2936 40.7647 24.0223V24.0269Z" fill="black" />
      <path opacity="0.2" d="M39.257 25.53V28.7629C37.4601 28.6254 35.7361 27.9943 34.2753 26.939C32.8144 25.8838 31.6734 24.4454 30.9783 22.7828H36.5051C37.2331 22.7864 37.9302 23.0769 38.4454 23.5912C38.9605 24.1055 39.2522 24.8021 39.257 25.53Z" fill="black" />
      <path opacity="0.2" d="M39.257 25.53V28.7629C37.4601 28.6254 35.7361 27.9943 34.2753 26.939C32.8144 25.8838 31.6734 24.4454 30.9783 22.7828H36.5051C37.2331 22.7864 37.9302 23.0769 38.4454 23.5912C38.9605 24.1055 39.2522 24.8021 39.257 25.53Z" fill="black" />
      <path opacity="0.2" d="M37.7539 25.53V28.5224C36.2513 28.1676 34.8541 27.4621 33.6765 26.4637C32.4988 25.4653 31.5742 24.2024 30.9783 22.7781H35.002C35.7307 22.7818 36.4286 23.0729 36.9439 23.5882C37.4592 24.1035 37.7503 24.8013 37.7539 25.53Z" fill="black" />
      <path d="M7.38613 22.7781H34.9928C36.519 22.7781 37.7539 24.013 37.7539 25.5346V53.0904C37.7539 53.4528 37.6824 53.8116 37.5436 54.1463C37.4048 54.4811 37.2013 54.7851 36.9449 55.0412C36.6884 55.2972 36.384 55.5001 36.049 55.6384C35.7141 55.7766 35.3551 55.8475 34.9928 55.8469H7.3815C7.01951 55.8469 6.66107 55.7756 6.32663 55.6371C5.9922 55.4985 5.68832 55.2955 5.43236 55.0395C5.1764 54.7836 4.97335 54.4797 4.83483 54.1453C4.6963 53.8108 4.625 53.4524 4.625 53.0904V25.5346C4.625 24.0084 5.85987 22.7781 7.38613 22.7781Z" fill="url(#paint0_linear_300_11)" />
      <path d="M28.453 33.2676H22.9354V48.2665H19.4204V33.2676H13.9213V30.3539H28.4484L28.453 33.2676Z" fill="white" />
      <defs>
        <linearGradient id="paint0_linear_300_11" x1="10.3785" y1="20.6275" x2="31.9402" y2="58.0345" gradientUnits="userSpaceOnUse">
          <stop stopColor="#5A62C3" />
          <stop offset="0.5" stopColor="#4D55BD" />
          <stop offset="1" stopColor="#3940AB" />
        </linearGradient>
      </defs>
    </svg>
  );
}

function WebexLogoPlaceholder(props: IconProps) {
  // Replace this component with the Webex SVG/logo.
  return (
    <svg viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg" className={props.className} aria-hidden="true">
      <path d="M18.9081 21.3915L17.0828 25.3245C16.3744 26.2105 15.4545 26.9263 14.4103 27.4008C13.3661 27.897 12.227 28.1662 11.066 28.1944C6.24721 28.2868 4.00575 24.0774 4.00575 24.0774C1.28212 19.7191 0.471892 13.9716 0.281931 12.1221C0.230803 11.9095 0.194229 11.6899 0.187138 11.4701C0.179674 10.9032 0.340524 10.3363 0.668943 9.85418C0.946233 9.35793 1.36982 8.95405 1.88111 8.67767C2.4286 8.42266 3.03468 8.29516 3.64822 8.30929C4.21773 8.33066 4.77978 8.48642 5.26904 8.77004C5.6415 8.98991 5.96283 9.27317 6.22556 9.60642C6.61967 10.2512 6.82418 10.9883 6.83165 11.7396C7.02161 13.3837 7.35749 15.0065 7.83183 16.601C8.19682 17.8695 8.70811 19.0957 9.35786 20.2577C9.59895 20.7891 9.9785 21.2498 10.4532 21.5972L10.7454 21.7388C11.512 21.8805 11.9356 21.2712 12.2278 20.7681C12.6073 19.8893 12.9432 18.9964 13.228 18.0822C13.2716 17.8978 13.3228 17.7562 13.3739 17.5718C13.4687 17.253 13.5493 16.927 13.6075 16.601L15.141 12.6111L18.9081 21.3915Z" fill="url(#paint0_linear_321_11)" />
      <path d="M23.0078 4.76672C21.8367 4.77469 20.6808 5.02753 19.6198 5.50784C18.5648 6.01967 17.6493 6.76513 16.9466 7.6841L14.8007 13.2848L19.0011 21.1151L20.4315 16.6673L20.5711 15.9729C20.8529 14.8008 21.2362 13.6536 21.7169 12.543C21.8688 12.0851 22.1505 11.6769 22.5289 11.3665L22.5771 11.3198C22.9223 11.1546 23.3366 11.2086 23.6254 11.4552C23.8042 11.5759 23.952 11.7345 24.0554 11.92C24.2005 12.1022 24.292 12.2905 24.4371 12.4727C24.6685 12.8498 24.8708 13.2432 25.0432 13.6492C25.2026 13.9789 25.3907 14.2933 25.6068 14.5903C25.6336 14.5903 25.6549 14.6117 25.6549 14.637C25.9815 14.9793 26.3696 15.2601 26.8006 15.4662C27.2242 15.6886 27.7008 15.8005 28.183 15.79C28.6241 15.7864 29.0607 15.7092 29.4739 15.5604C29.887 15.4093 30.2617 15.1728 30.5715 14.866C30.8518 14.5392 31.0921 14.1821 31.2869 13.8007C31.4321 13.3975 31.5119 12.9744 31.5235 12.5477C31.5243 12.0862 31.4272 11.6298 31.2388 11.206C31.2388 11.206 29.9479 7.96446 27.7049 6.34096C26.3651 5.3231 24.7114 4.76817 23.0078 4.76672Z" fill="url(#paint1_radial_321_11)" />
      <path d="M10.455 4.76672C10.1681 4.78085 9.8833 4.812 9.60079 4.8609C7.42576 5.28833 5.52802 6.56445 4.35168 8.3908C4.67152 8.46505 4.9768 8.59075 5.25484 8.76135C5.62804 8.97615 5.95273 9.25942 6.21285 9.59701C6.60695 10.2418 6.81594 10.9767 6.81893 11.7265C7.01897 13.3352 7.33955 14.9275 7.77694 16.4916C8.23337 14.774 8.99209 13.1461 10.0191 11.6798C10.1389 11.5056 10.3017 11.3618 10.4916 11.2625C10.5931 11.2046 10.7077 11.172 10.8253 11.1683C11.0268 11.1647 11.2253 11.2136 11.4015 11.3093C11.4496 11.3093 11.4496 11.356 11.4985 11.356C11.6519 11.4983 11.7934 11.6516 11.9229 11.8146C12.1763 12.2652 12.4009 12.731 12.5954 13.2084C12.9772 14.2259 13.3108 15.5201 13.3108 15.5201L14.2621 19.2264C14.595 20.5069 15.0264 21.7613 15.553 22.9795C17.0324 26.2678 19.2746 27.1918 19.2746 27.1918C20.3823 27.7511 21.603 28.0662 22.851 28.1151C24.0389 28.1698 25.2212 27.9307 26.2878 27.4207C27.4582 26.8531 28.4908 26.0508 29.3186 25.0681C29.8172 24.4077 30.2628 23.7115 30.6517 22.9853C31.5462 21.2752 32.2356 19.4709 32.7062 17.6084C33.0331 16.4474 33.288 15.2691 33.4697 14.0785C33.5668 13.4902 33.6575 12.902 33.7063 12.3137C33.8116 11.7617 33.7948 11.1941 33.6582 10.6489C33.616 10.5547 33.616 10.4606 33.5668 10.3667C33.276 9.68068 32.7547 9.1109 32.0874 8.74868C31.6078 8.43607 31.0402 8.27452 30.4628 8.28394C30.1897 8.28901 29.9176 8.32089 29.6507 8.37812C30.2677 9.25181 30.795 10.1816 31.2264 11.1546C31.4149 11.5784 31.5119 12.0348 31.5112 12.4963C31.4996 12.9237 31.4197 13.3461 31.2746 13.7492C31.0797 14.1299 30.8402 14.4878 30.5591 14.8145C30.2643 15.1376 29.8851 15.3771 29.4615 15.5089C29.0484 15.6592 28.6118 15.7386 28.1706 15.7444C27.5798 15.7549 26.9988 15.5926 26.5035 15.2796L26.1639 16.5268C25.909 17.4856 25.5578 18.4176 25.1156 19.309C24.879 19.856 24.5935 20.3819 24.2613 20.8793C24.0437 21.2223 23.7284 21.4965 23.3522 21.6675C23.2126 21.7066 23.0667 21.7222 22.9223 21.7142C22.7674 21.7106 22.617 21.661 22.4923 21.5733C22.2404 21.3686 22.0344 21.1162 21.8863 20.8322C21.6933 20.5268 21.5198 20.2106 21.3649 19.8853C21.0801 19.1909 20.6013 17.4794 20.6013 17.4794L20.1531 15.6495L19.6743 13.8438L19.3406 12.6375C18.9391 10.9814 18.2263 9.41228 17.2369 8.00792C16.2744 6.67783 14.9077 5.6741 13.3276 5.13692C12.7062 4.91922 12.0542 4.79389 11.394 4.76636C11.3948 4.76672 10.455 4.76672 10.455 4.76672Z" fill="url(#paint2_linear_321_11)" />
      <defs>
        <linearGradient id="paint0_linear_321_11" x1="18.0779" y1="18.2523" x2="-0.057609" y2="18.2523" gradientUnits="userSpaceOnUse">
          <stop stopColor="#187A90" />
          <stop offset="0.5187" stopColor="#50E6FF" />
        </linearGradient>
        <radialGradient id="paint1_radial_321_11" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.7347 15.4702) scale(15.9272 17.3993)">
          <stop stopColor="#15382F" />
          <stop offset="0.661" stopColor="#30DC80" />
          <stop offset="1" stopColor="#59E368" />
        </radialGradient>
        <linearGradient id="paint2_linear_321_11" x1="4.35176" y1="16.4449" x2="33.775" y2="16.4449" gradientUnits="userSpaceOnUse">
          <stop stopColor="#1C3EA0" />
          <stop offset="0.3122" stopColor="#2F64F7" />
          <stop offset="0.6497" stopColor="#3169FF" />
          <stop offset="0.9893" stopColor="#11408B" />
        </linearGradient>
      </defs>
    </svg>
  );
}

function AnyAppLogoPlaceholder(props: IconProps) {
  // Replace this component with your generic app SVG/logo.
  return <PlatformLogoPlaceholder {...props} />;
}
function SlackIcon(props: IconProps) { return <svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg" className={props.className} aria-hidden="true"><path fillRule="evenodd" clipRule="evenodd" d="M23.8492 0C20.2633 0.00265036 17.3612 2.91274 17.3638 6.49867C17.3612 10.0846 20.266 12.9947 23.8519 12.9973H30.34V6.50133C30.3426 2.91539 27.4378 0.00530071 23.8492 0C23.8519 0 23.8519 0 23.8492 0ZM23.8492 17.3333H6.55302C2.96709 17.336 0.0622983 20.2461 0.0649486 23.832C0.0596479 27.4179 2.96444 30.328 6.55037 30.3333H23.8492C27.4352 30.3307 30.34 27.4206 30.3373 23.8347C30.34 20.2461 27.4352 17.336 23.8492 17.3333Z" fill="#36C5F0" /><path fillRule="evenodd" clipRule="evenodd" d="M64.9351 23.832C64.9378 20.2461 62.033 17.336 58.447 17.3333C54.8611 17.336 51.9563 20.2461 51.959 23.832V30.3333H58.447C62.033 30.3307 64.9378 27.4206 64.9351 23.832ZM47.6362 23.832V6.49867C47.6389 2.91539 44.7367 0.00530071 41.1508 0C37.5649 0.00265036 34.6601 2.91274 34.6627 6.49867V23.832C34.6574 27.4179 37.5622 30.328 41.1481 30.3333C44.7341 30.3307 47.6389 27.4206 47.6362 23.832Z" fill="#2EB67D" /><path fillRule="evenodd" clipRule="evenodd" d="M41.1482 65C44.7341 64.9973 47.6389 62.0872 47.6362 58.5013C47.6389 54.9154 44.7341 52.0053 41.1482 52.0026H34.6601V58.5013C34.6574 62.0846 37.5622 64.9947 41.1482 65ZM41.1482 47.664H58.447C62.033 47.6614 64.9378 44.7513 64.9351 41.1653C64.9404 37.5794 62.0356 34.6693 58.4497 34.664H41.1508C37.5649 34.6667 34.6601 37.5767 34.6627 41.1627C34.6601 44.7513 37.5622 47.6614 41.1482 47.664Z" fill="#ECB22E" /><path fillRule="evenodd" clipRule="evenodd" d="M0.0649432 41.1654C0.0622929 44.7513 2.96708 47.6614 6.55302 47.664C10.1389 47.6614 13.0437 44.7513 13.0411 41.1654V34.6667H6.55302C2.96708 34.6693 0.0622929 37.5794 0.0649432 41.1654ZM17.3638 41.1654V58.4987C17.3585 62.0846 20.2633 64.9947 23.8492 65C27.4352 64.9974 30.34 62.0873 30.3373 58.5013V41.1707C30.3426 37.5847 27.4378 34.6746 23.8519 34.6693C20.2633 34.6693 17.3612 37.5794 17.3638 41.1654Z" fill="#E01E5A" /></svg>; }
function MailIcon(props: IconProps) { return <IconBase {...props}><path d="M4 6h16v12H4z" /><path d="m4 7 8 6 8-6" /></IconBase>; }
function NotionIcon(props: IconProps) {
  return (<svg viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg" className={props.className} aria-hidden="true">
    <path fillRule="evenodd" clipRule="evenodd" d="M10.1816 52.0442L4.05526 44.4121C2.58126 42.576 1.78125 40.3179 1.78125 37.9939V10.358C1.78125 6.87677 4.56639 3.98817 8.15939 3.74286L36.5728 1.80295C38.6371 1.66202 40.6887 2.2107 42.3845 3.35713L52.3673 10.1067C54.1545 11.3148 55.2188 13.2899 55.2188 15.3976V46.817C55.2188 50.2238 52.4803 53.0444 48.9623 53.261L17.4266 55.2022C14.6193 55.375 11.9059 54.1922 10.1816 52.0442Z" fill="white" />
    <path d="M20.0357 24.187V23.8253C20.0357 22.9081 20.7703 22.1475 21.717 22.0843L28.6128 21.6238L38.149 35.6668V23.3417L35.6945 23.0144V22.8427C35.6945 21.9147 36.4458 21.1491 37.4047 21.1L43.6791 20.7786V21.6815C43.6791 22.1053 43.3638 22.468 42.9319 22.541L41.4219 22.7964V42.7566L39.527 43.4082C37.9438 43.9527 36.1815 43.3699 35.2752 42.0024L26.0171 28.0319V41.366L28.8666 41.9112L28.827 42.1755C28.7025 43.0035 27.9877 43.6297 27.1231 43.6682L20.0357 43.9837C19.942 43.0932 20.6093 42.2968 21.5298 42.2001L22.4621 42.1021V24.3233L20.0357 24.187Z" fill="black" />
    <path fillRule="evenodd" clipRule="evenodd" d="M36.8272 5.28456L8.41369 7.22447C6.71174 7.34068 5.39246 8.70896 5.39246 10.3579V37.9939C5.39246 39.5432 5.9258 41.0485 6.90846 42.2728L13.0348 49.9047C14.0254 51.1386 15.5841 51.8182 17.1968 51.7189L48.7325 49.7777C50.3488 49.6782 51.6071 48.3821 51.6071 46.8169V15.3976C51.6071 14.4292 51.1181 13.5217 50.297 12.9666L40.3141 6.21707C39.2967 5.52922 38.0657 5.20001 36.8272 5.28456ZM9.82266 10.789C9.42747 10.4964 9.61555 9.8869 10.112 9.8513L37.0183 7.9214C37.8756 7.85991 38.7274 8.09598 39.4207 8.58718L44.8193 12.412C45.0241 12.5572 44.9281 12.8706 44.6743 12.8844L16.1807 14.4341C15.3183 14.481 14.4672 14.2277 13.7816 13.7201L9.82266 10.789ZM14.8442 19.2922C14.8442 18.3665 15.592 17.6019 16.5483 17.5498L46.6741 15.9091C47.6062 15.8584 48.3907 16.5751 48.3907 17.4773V44.6832C48.3907 45.6071 47.6456 46.3709 46.6912 46.4252L16.756 48.1285C15.7188 48.1876 14.8442 47.3905 14.8442 46.3864V19.2922Z" fill="black" />
  </svg>
  );
}
function NetworkIcon(props: IconProps) { return <IconBase {...props}><circle cx="6" cy="7" r="2" /><circle cx="18" cy="7" r="2" /><circle cx="12" cy="17" r="2" /><path d="M8 8.5 11 15M16 8.5 13 15M8 7h8" /></IconBase>; }
function LinkIcon(props: IconProps) { return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={props.className} aria-hidden="true"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>); }
function ChevronIcon(props: IconProps) { return <IconBase {...props}><path d="m9 6 6 6-6 6" /></IconBase>; }
function LockIcon(props: IconProps) { return <IconBase {...props}><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></IconBase>; }

export default function BentoGridFour() {
  return (
    <section className="min-h-screen px-4 py-6 text-zinc-950 dark:text-zinc-50 sm:px-6 lg:px-8">
      <div className="mx-auto grid max-w-[1840px] gap-4 xl:grid-cols-12">
        <TranscribeCard />
        <TemplatesCard />
        <PlatformsCard />
        <SyncCard />
        <ShareCard />
      </div>
    </section>
  );
}