Bento Grid 3

"use client";

import { motion, useInView } from "motion/react";
import { useRef, type ReactNode } from "react";

type IconProps = {
  className?: string;
};

type MessagingApp = {
  name: string;
  ring: 1 | 2 | 3;
  slot: number;
  direction: "normal" | "reverse";
  duration: number;
  icon: (props: IconProps) => ReactNode;
};

type ActionItem = {
  label: string;
  icon: (props: IconProps) => ReactNode;
};

type Platform = {
  name: string;
  icon: (props: IconProps) => ReactNode;
  active?: boolean;
};

const messagingApps: MessagingApp[] = [
  { name: "Slack", ring: 3, slot: 0, direction: "normal", duration: 18, icon: SlackPlaceholderIcon },
  { name: "Telegram", ring: 2, slot: 1, direction: "reverse", duration: 16, icon: TelegramPlaceholderIcon },
  { name: "WhatsApp", ring: 3, slot: 2, direction: "normal", duration: 18, icon: WhatsAppPlaceholderIcon },
  { name: "Gmail", ring: 2, slot: 3, direction: "reverse", duration: 16, icon: GmailPlaceholderIcon },
];

const actionItems: ActionItem[] = [
  { label: "Inbox cleanup and summarisation", icon: MailIcon },
  { label: "Calendar scheduling", icon: CalendarIcon },
  { label: "Smart reminders", icon: BellIcon },
  { label: "Tools and workflow automations", icon: SettingsIcon },
];

const platforms: Platform[] = [
  { name: "macOS", icon: AppleIcon, active: true },
  { name: "Windows", icon: WindowsIcon },
  { name: "Linux", icon: LinuxIcon },
  { name: "Docker", icon: DockerIcon },
  { name: "Source", icon: CodeIcon },
];

const installCommands = [
  "$ pipx install openclaw",
  "$ openclaw login",
  "✓ Logged in as michael@acme.com",
  "$ openclaw connect slack",
  "✓ Connected to Slack",
  "$ openclaw start",
  "OpenClaw is ready.",
];

const savingsCharts = [
  {
    label: "Without OpenClaw",
    value: "12.4h",
    note: "weekly admin load",
    color: "#a1a1aa",
    data: [18, 21, 19, 23, 26, 24, 28],
  },
  {
    label: "With OpenClaw",
    value: "3.8h",
    note: "after automation",
    color: "#C62828",
    data: [18, 15, 13, 11, 8, 6, 5],
  },
];

function getRingSize(ring: number) {
  return ring === 1 ? 144 : ring === 2 ? 212 : 284;
}

function OpenClawMark({ className }: IconProps) {
  return (
    <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M29 4.83334C14.5 4.83334 7.25 16.9167 7.25 26.5833C7.25 36.25 14.5 45.9167 21.75 48.3333V53.1667H26.5833V48.3333C26.5833 48.3333 29 49.3 31.4167 48.3333V53.1667H36.25V48.3333C43.5 45.9167 50.75 36.25 50.75 26.5833C50.75 16.9167 43.5 4.83334 29 4.83334Z" fill="url(#paint0_linear_300_269)" />
      <path d="M9.66663 21.75C2.41663 19.3333 -4.07696e-05 24.1667 2.41663 29C4.83329 33.8333 9.66663 31.4167 12.0833 26.5833C13.5333 23.2 12.0833 21.75 9.66663 21.75Z" fill="url(#paint1_linear_300_269)" />
      <path d="M48.3333 21.75C55.5833 19.3333 58 24.1667 55.5833 29C53.1667 33.8333 48.3333 31.4167 45.9167 26.5833C44.4667 23.2 45.9167 21.75 48.3333 21.75Z" fill="url(#paint2_linear_300_269)" />
      <path d="M21.75 7.24999C18.5278 4.02777 16.1111 2.89999 14.5 3.86666" stroke="#FF4D4D" strokeWidth="3" strokeLinecap="round" />
      <path d="M36.25 7.24999C39.4722 4.02777 41.8889 2.89999 43.5 3.86666" stroke="#FF4D4D" strokeWidth="3" strokeLinecap="round" />
      <path d="M21.75 19.8167C23.3516 19.8167 24.65 18.5183 24.65 16.9167C24.65 15.315 23.3516 14.0167 21.75 14.0167C20.1483 14.0167 18.85 15.315 18.85 16.9167C18.85 18.5183 20.1483 19.8167 21.75 19.8167Z" fill="#050810" />
      <path d="M36.25 19.8167C37.8516 19.8167 39.15 18.5183 39.15 16.9167C39.15 15.315 37.8516 14.0167 36.25 14.0167C34.6483 14.0167 33.35 15.315 33.35 16.9167C33.35 18.5183 34.6483 19.8167 36.25 19.8167Z" fill="#050810" />
      <path d="M22.2334 17.6417C22.9007 17.6417 23.4417 17.1007 23.4417 16.4333C23.4417 15.766 22.9007 15.225 22.2334 15.225C21.566 15.225 21.025 15.766 21.025 16.4333C21.025 17.1007 21.566 17.6417 22.2334 17.6417Z" fill="#00E5CC" />
      <path d="M36.7334 17.6417C37.4007 17.6417 37.9417 17.1007 37.9417 16.4333C37.9417 15.766 37.4007 15.225 36.7334 15.225C36.066 15.225 35.525 15.766 35.525 16.4333C35.525 17.1007 36.066 17.6417 36.7334 17.6417Z" fill="#00E5CC" />
      <defs>
        <linearGradient id="paint0_linear_300_269" x1="7.25" y1="4.83334" x2="55.3163" y2="48.093" gradientUnits="userSpaceOnUse">
          <stop stopColor="#FF4D4D" />
          <stop offset="1" stopColor="#991B1B" />
        </linearGradient>
        <linearGradient id="paint1_linear_300_269" x1="1.51038" y1="21.1072" x2="12.0203" y2="32.2402" gradientUnits="userSpaceOnUse">
          <stop stopColor="#FF4D4D" />
          <stop offset="1" stopColor="#991B1B" />
        </linearGradient>
        <linearGradient id="paint2_linear_300_269" x1="45.3381" y1="21.1072" x2="55.8481" y2="32.2402" gradientUnits="userSpaceOnUse">
          <stop stopColor="#FF4D4D" />
          <stop offset="1" stopColor="#991B1B" />
        </linearGradient>
      </defs>
    </svg>

  );
}

function FingerprintIcon({ className }: IconProps) {
  return (
    <svg viewBox="-30 -30 244 244" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
      <path d="M68.3937 177.655C67.6333 177.655 66.8693 177.382 66.2609 176.831C64.9642 175.651 64.8697 173.646 66.0488 172.348L78.7973 158.323C90.5018 145.451 96.9475 128.777 96.9475 111.378V98.3448C96.9475 96.5943 95.524 95.1722 93.775 95.1722C92.0259 95.1722 90.6024 96.5943 90.6024 98.3448V110.111C90.6024 125.813 84.8183 140.888 74.3144 152.555L61.2361 167.087C60.0652 168.388 58.0574 168.494 56.7561 167.323C55.4534 166.152 55.3481 164.144 56.5207 162.843L69.5991 148.31C79.0514 137.808 84.2576 124.244 84.2576 110.111V98.3444C84.2576 93.0965 88.527 88.8271 93.775 88.8271C99.0229 88.8271 103.292 93.0965 103.292 98.3444V111.378C103.292 130.36 96.2597 148.548 83.4907 162.592L70.7423 176.617C70.1162 177.305 69.257 177.655 68.3937 177.655Z" className="fill-zinc-300 dark:fill-zinc-700" />
      <path d="M79.7762 184C79.0158 184 78.2518 183.727 77.6433 183.176C76.3467 181.995 76.2522 179.991 77.4313 178.693L88.1878 166.862C102.019 151.644 109.637 131.94 109.637 111.379V98.3451C109.637 89.599 102.521 82.483 93.7753 82.483C85.0292 82.483 77.9132 89.599 77.9132 98.3451V110.112C77.9132 122.671 73.2863 134.729 64.883 144.067L55.586 154.399C54.4166 155.703 52.4073 155.805 51.106 154.634C49.8033 153.463 49.698 151.455 50.8706 150.154L60.1677 139.822C67.5194 131.652 71.5685 121.1 71.5685 110.111V98.3447C71.5685 86.1012 81.5303 76.1379 93.7753 76.1379C106.02 76.1379 115.982 86.1012 115.982 98.3447V111.378C115.982 133.52 107.778 154.742 92.883 171.131L82.1251 182.962C81.4987 183.65 80.6391 184 79.7762 184Z" className="fill-zinc-400 dark:fill-zinc-600" />
      <path d="M96.9457 183.978C96.1853 183.978 95.4212 183.705 94.8143 183.154C93.5176 181.977 93.4217 179.969 94.599 178.671L97.5746 175.397C113.536 157.84 122.327 135.103 122.327 111.378V98.3451C122.327 82.6009 109.518 69.7935 93.7749 69.7935C78.0322 69.7935 65.2233 82.6009 65.2233 98.3451V110.112C65.2233 119.53 61.7536 128.573 55.4505 135.578L47.0781 144.881C45.9073 146.185 43.8994 146.288 42.5981 145.117C41.2954 143.946 41.1901 141.938 42.3628 140.637L50.7351 131.333C55.9863 125.496 58.8782 117.962 58.8782 110.111V98.3448C58.8782 79.1027 74.5329 63.4484 93.7746 63.4484C113.016 63.4484 128.671 98.3448 128.671 98.3448V111.378C128.671 136.686 119.295 160.938 102.269 179.666L99.2953 182.94C98.6693 183.628 97.8086 183.978 96.9457 183.978Z" className="fill-zinc-500 dark:fill-zinc-500" />
      <path d="M130.397 155.448C130.008 155.448 129.613 155.377 129.229 155.225C127.601 154.581 126.803 152.734 127.449 151.108C129.044 147.084 130.408 142.92 131.503 138.734C131.944 137.04 133.678 136.039 135.374 136.466C137.069 136.909 138.085 138.644 137.641 140.339C136.482 144.772 135.038 149.181 133.348 153.444C132.854 154.689 131.661 155.448 130.397 155.448Z" className="fill-zinc-400 dark:fill-zinc-600" />
      <path d="M36.2124 136.414C35.4566 136.414 34.6976 136.144 34.0917 135.599C32.789 134.428 32.6837 132.42 33.8563 131.119L41.3022 122.844C44.4529 119.343 46.1876 114.823 46.1876 110.111C46.1876 108.357 47.6082 106.938 49.3601 106.938C51.1121 106.938 52.5327 108.357 52.5327 110.111C52.5327 116.39 50.2183 122.423 46.0172 127.088L38.5713 135.363C37.9457 136.06 37.0817 136.414 36.2124 136.414Z" className="fill-zinc-400 dark:fill-zinc-600" />
      <path d="M137.15 129.771C137.005 129.771 136.859 129.762 136.713 129.74C134.977 129.502 133.764 127.903 134.003 126.165C134.675 121.285 135.016 116.31 135.016 111.378V98.3448C135.016 86.6805 130.021 75.5025 121.316 67.6772C120.013 66.5063 119.906 64.4985 121.077 63.1943C122.248 61.8991 124.255 61.791 125.557 62.9557C135.601 71.9835 141.361 84.8837 141.361 98.3448V111.378C141.361 116.602 141 121.868 140.289 127.033C140.071 128.622 138.71 129.771 137.15 129.771Z" className="fill-zinc-500 dark:fill-zinc-500" />
      <path d="M49.3609 101.517C47.6089 101.517 46.1883 100.099 46.1883 98.3448C46.1883 74.8338 63.7251 54.5844 86.9788 51.2419C88.7059 51.0004 90.3203 52.1992 90.5697 53.9307C90.8191 55.6658 89.6155 57.2736 87.8808 57.5248C67.7296 60.4185 52.5334 77.9689 52.5334 98.3452C52.5334 100.099 51.1128 101.517 49.3609 101.517Z" className="fill-zinc-500 dark:fill-zinc-500" />
      <path d="M112.798 61.3881C112.341 61.3881 111.877 61.2889 111.436 61.0815C107.706 59.3062 103.747 58.1073 99.6683 57.5248C97.9351 57.2739 96.7297 55.669 96.9795 53.9339C97.2275 52.196 98.8198 50.9874 100.57 51.2418C105.282 51.9171 109.855 53.2993 114.163 55.3499C115.746 56.1056 116.417 57.9988 115.664 59.5786C115.12 60.7221 113.983 61.3881 112.798 61.3881Z" className="fill-zinc-400 dark:fill-zinc-600" />
      <path d="M30.5602 123.724C29.8044 123.724 29.0454 123.455 28.4395 122.909C27.1368 121.738 27.0315 119.73 28.2041 118.429L31.8705 114.355C32.9206 113.187 33.4984 111.682 33.4984 110.111V98.3444C33.4984 82.9348 39.3322 68.2593 49.9258 57.0256C51.1279 55.7491 53.134 55.6873 54.4105 56.8923C55.6855 58.0944 55.7441 60.1019 54.542 61.3752C45.0635 71.4312 39.8436 84.5613 39.8436 98.3444V110.111C39.8436 113.253 38.6864 116.267 36.5858 118.6L32.9195 122.673C32.2938 123.371 31.4295 123.724 30.5602 123.724Z" className="fill-zinc-500 dark:fill-zinc-500" />
      <path d="M150.878 114.551C149.126 114.551 147.706 113.132 147.706 111.378V98.3448C147.706 68.6065 123.513 44.4137 93.7746 44.4137C92.763 44.4137 91.7578 44.4446 90.7602 44.4975C89.0316 44.6089 87.5179 43.2461 87.4252 41.4956C87.3325 39.7451 88.6751 38.2519 90.4256 38.1592C91.5346 38.1006 92.6516 38.0693 93.7746 38.0693C127.011 38.0693 154.05 65.1094 154.05 98.3451V111.379C154.051 113.132 152.63 114.551 150.878 114.551Z" className="fill-zinc-500 dark:fill-zinc-500" />
      <path d="M61.2558 54.6031C60.2521 54.6031 59.2653 54.1291 58.6489 53.2428C57.6484 51.8053 58.0028 49.8259 59.4403 48.8247C64.9488 44.9955 71.0039 42.1328 77.4353 40.3176C79.1254 39.8464 80.8774 40.8286 81.3496 42.5108C81.825 44.1963 80.8432 45.9497 79.1578 46.4269C73.4063 48.0474 67.9909 50.6061 63.0649 54.036C62.5122 54.4205 61.8801 54.6031 61.2558 54.6031Z" className="fill-zinc-600 dark:fill-zinc-400" />
      <path d="M24.0558 98.3448C24.0062 98.3448 23.9584 98.3448 23.9103 98.3416C22.1598 98.2643 20.8046 96.7801 20.8833 95.0296C22.6385 55.9723 54.6566 25.3791 93.7746 25.3791C97.2738 25.3791 100.798 25.6299 104.247 26.1259C105.981 26.3767 107.184 27.9849 106.935 29.72C106.684 31.455 105.068 32.6536 103.343 32.4088C100.192 31.9531 96.9716 31.7239 93.7746 31.7239C58.0588 31.7239 28.8237 59.6563 27.2219 95.3145C27.1461 97.0155 25.7413 98.3448 24.0558 98.3448Z" className="fill-zinc-600 dark:fill-zinc-400" />
      <path d="M159.946 79.3073C158.62 79.3073 157.386 78.471 156.94 77.1481C153.955 68.2752 149.207 60.2575 142.831 53.3176C141.647 52.0257 141.732 50.0211 143.02 48.8348C144.314 47.6452 146.318 47.7351 147.503 49.0238C154.485 56.6232 159.683 65.4034 162.953 75.122C163.512 76.7827 162.619 78.5828 160.958 79.1434C160.623 79.2544 160.281 79.3073 159.946 79.3073Z" className="fill-zinc-600 dark:fill-zinc-400" />
      <path d="M135.43 45.554C134.77 45.554 134.104 45.3495 133.536 44.9219C127.97 40.7671 121.831 37.527 115.289 35.287C113.632 34.7199 112.747 32.9141 113.315 31.2566C113.882 29.5992 115.683 28.7256 117.344 29.2829C124.511 31.7368 131.237 35.287 137.331 39.841C138.736 40.8882 139.024 42.877 137.975 44.2804C137.352 45.1141 136.396 45.554 135.43 45.554Z" className="fill-zinc-700 dark:fill-zinc-200" />
      <path d="M28.8007 50.7585C28.1157 50.7585 27.4268 50.5386 26.8457 50.0832C25.4668 49.0051 25.2238 47.0099 26.3038 45.6313C35.4308 33.9735 47.4494 24.8278 61.0596 19.1834C62.6847 18.5114 64.5359 19.2826 65.2065 20.8998C65.8771 22.517 65.1091 24.3728 63.4919 25.0449C50.8875 30.2712 39.7562 38.7446 31.3012 49.5409C30.6752 50.3402 29.7423 50.7585 28.8007 50.7585Z" className="fill-zinc-700 dark:fill-zinc-200" />
      <path d="M153.24 44.4137C152.407 44.4137 151.575 44.0885 150.952 43.4376C135.837 27.7024 115.531 19.0343 93.7746 19.0343C87.6002 19.0343 81.4491 19.7501 75.4928 21.1593C73.784 21.5621 72.0773 20.5117 71.6745 18.8046C71.2698 17.1005 72.3253 15.3906 74.0305 14.9877C80.4655 13.4636 87.1075 12.6891 93.775 12.6891C117.274 12.6891 139.206 22.0487 155.529 39.0443C156.744 40.3086 156.702 42.3157 155.439 43.5304C154.823 44.1194 154.032 44.4137 153.24 44.4137Z" className="fill-zinc-800 dark:fill-white" />
      <path d="M138.189 17.3582C137.688 17.3582 137.18 17.2403 136.708 16.9894C133.78 15.4405 130.752 14.0401 127.707 12.8257C126.079 12.1781 125.284 10.3349 125.931 8.70513C126.58 7.0786 128.427 6.27935 130.052 6.93305C133.31 8.22824 136.547 9.72432 139.676 11.3821C141.225 12.2029 141.816 14.1206 140.996 15.6702C140.425 16.7451 139.325 17.3582 138.189 17.3582Z" className="fill-zinc-700 dark:fill-zinc-200" />
      <path d="M52.5349 15.7507C51.3558 15.7507 50.2237 15.0909 49.6768 13.957C48.9145 12.3801 49.5761 10.484 51.1549 9.72181C64.5179 3.27139 78.8573 0 93.7749 0C101.548 0 109.29 0.913891 116.786 2.71723C118.49 3.12908 119.538 4.84222 119.128 6.54637C118.717 8.25053 117.005 9.29128 115.302 8.88842C108.291 7.20008 101.049 6.34477 93.7749 6.34477C79.8211 6.34477 66.4082 9.40269 53.9123 15.4344C53.4674 15.6483 52.9981 15.7507 52.5349 15.7507Z" className="fill-zinc-800 dark:fill-white" />
    </svg>
  );
}

function WhatsAppPlaceholderIcon({ className }: IconProps) {
  return (
    <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clipPath="url(#clip0_300_265)">
        <path d="M26.35 0H4.65C2.08188 0 0 2.08188 0 4.65V26.35C0 28.9181 2.08188 31 4.65 31H26.35C28.9181 31 31 28.9181 31 26.35V4.65C31 2.08188 28.9181 0 26.35 0Z" fill="#25D366" />
        <path d="M7.44722 23.7949L8.29487 19.8594C7.20539 18.141 6.78037 16.0841 7.09958 14.0746C7.41878 12.0651 8.46026 10.2411 10.0286 8.94489C11.597 7.64867 13.5844 6.96927 15.6181 7.03416C17.6517 7.09905 19.5918 7.90378 21.0743 9.29735C22.5569 10.6909 23.4799 12.5776 23.6704 14.6033C23.8608 16.6291 23.3055 18.6547 22.1087 20.3002C20.9119 21.9456 19.1558 23.0978 17.1698 23.5406C15.1839 23.9834 13.1047 23.6863 11.3222 22.7051L7.44722 23.7949Z" fill="#25D366" stroke="white" />
        <path d="M18.6484 16.5293C18.4668 16.4082 18.2851 16.3477 18.1035 16.5899L17.3769 17.5586C17.1953 17.6797 17.0742 17.7402 16.832 17.6192C15.9238 17.1348 14.6523 16.5899 13.5625 14.7734C13.5019 14.5313 13.623 14.4102 13.7441 14.2891L14.289 13.4414C14.4101 13.3203 14.3496 13.1992 14.289 13.0781L13.5625 11.3223C13.3808 10.8379 13.1992 10.8984 13.0175 10.8984H12.5332C12.4121 10.8984 12.1699 10.959 11.9277 11.2012C10.5957 12.5332 11.1406 14.4102 12.1093 15.6211C12.291 15.8633 13.5019 18.043 16.1054 19.1934C18.0429 20.041 18.4668 19.9199 19.0117 19.7988C19.6777 19.7383 20.3437 19.1934 20.6465 18.6484C20.707 18.4668 21.0097 17.6797 20.7675 17.5586" fill="white" />
      </g>
      <defs>
        <clipPath id="clip0_300_265">
          <rect width="31" height="31" fill="white" />
        </clipPath>
      </defs>
    </svg>

  );
}

function TelegramPlaceholderIcon({ className }: IconProps) {
  return (
    <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clipPath="url(#clip0_300_296)">
        <path d="M13.5 0C6.0441 0 0 6.0441 0 13.5C0 20.9559 6.0441 27 13.5 27C20.9559 27 27 20.9559 27 13.5C27 6.0441 20.9559 0 13.5 0Z" fill="#40B3E0" />
        <path d="M20.0688 7.76574L17.6576 19.9228C17.6576 19.9228 17.3204 20.7659 16.393 20.3612L10.8287 16.0952L8.80542 15.1173L5.39941 13.9707C5.39941 13.9707 4.87671 13.7853 4.82608 13.3806C4.77556 12.9759 5.41628 12.7567 5.41628 12.7567L18.9559 7.44533C18.9559 7.44533 20.0688 6.95638 20.0688 7.76574Z" fill="white" />
        <path d="M10.4011 19.7863C10.4011 19.7863 10.2386 19.7711 10.0362 19.1303C9.83395 18.4896 8.80542 15.1173 8.80542 15.1173L16.9832 9.92404C16.9832 9.92404 17.4553 9.63737 17.4385 9.92404C17.4385 9.92404 17.5227 9.97456 17.2698 10.2106C17.0169 10.4467 10.8456 15.9941 10.8456 15.9941" fill="#D2E5F1" />
        <path d="M12.9623 17.7309L10.7614 19.7376C10.7614 19.7376 10.5894 19.8681 10.4011 19.7863L10.8226 16.0589" fill="#B5CFE4" />
      </g>
      <defs>
        <clipPath id="clip0_300_296">
          <rect width="27" height="27" fill="white" />
        </clipPath>
      </defs>
    </svg>

  );
}

function GmailPlaceholderIcon({ className }: IconProps) {
  return (
    <svg width="40" height="30" viewBox="0 0 40 30" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.94095 29.5128V14.3132L4.22701 10.0006L0 7.60745V26.8305C0 28.3147 1.20256 29.5128 2.68228 29.5128H8.94095Z" fill="#4285F4" />
      <path d="M30.3992 29.5128H36.6578C38.142 29.5128 39.3401 28.3102 39.3401 26.8305V7.60745L34.5524 10.3487L30.3992 14.3132V29.5128Z" fill="#34A853" />
      <path d="M8.94088 14.3131L8.29944 8.37411L8.94088 2.68988L19.67 10.7367L30.3991 2.68988L31.1167 8.06718L30.3991 14.3131L19.67 22.36L8.94088 14.3131Z" fill="#EA4335" />
      <path d="M30.3992 2.68989V14.3131L39.3401 7.60741V4.03103C39.3401 0.713944 35.5536 -1.17707 32.9026 0.812294L30.3992 2.68989Z" fill="#FBBC04" />
      <path d="M0 7.60741L4.11209 10.6915L8.94095 14.3131V2.68989L6.43748 0.812294C3.78202 -1.17707 0 0.713944 0 4.03103V7.60741Z" fill="#C5221F" />
    </svg>

  );
}

function SlackPlaceholderIcon({ className }: IconProps) {
  return (
    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fillRule="evenodd" clipRule="evenodd" d="M9.21372 0C7.82458 0.00102671 6.70033 1.12836 6.70136 2.5175C6.70033 3.90664 7.82561 5.03397 9.21475 5.035H11.7281V2.51853C11.7292 1.12938 10.6039 0.00205343 9.21372 0C9.21475 0 9.21475 0 9.21372 0ZM9.21372 6.7147H2.5134C1.12425 6.71573 -0.00102391 7.84306 2.80588e-06 9.2322C-0.00205062 10.6213 1.12323 11.7487 2.51237 11.7507H9.21372C10.6029 11.7497 11.7281 10.6224 11.7271 9.23323C11.7281 7.84306 10.6029 6.71573 9.21372 6.7147Z" fill="#36C5F0" />
      <path fillRule="evenodd" clipRule="evenodd" d="M25.1298 9.2322C25.1309 7.84306 24.0056 6.71573 22.6164 6.7147C21.2273 6.71573 20.102 7.84306 20.103 9.2322V11.7507H22.6164C24.0056 11.7497 25.1309 10.6224 25.1298 9.2322ZM18.4285 9.2322V2.5175C18.4295 1.12938 17.3052 0.00205343 15.9161 0C14.527 0.00102671 13.4017 1.12836 13.4027 2.5175V9.2322C13.4007 10.6213 14.5259 11.7487 15.9151 11.7507C17.3042 11.7497 18.4295 10.6224 18.4285 9.2322Z" fill="#2EB67D" />
      <path fillRule="evenodd" clipRule="evenodd" d="M15.9151 25.1801C17.3043 25.1791 18.4295 24.0518 18.4285 22.6626C18.4295 21.2735 17.3043 20.1462 15.9151 20.1451H13.4017V22.6626C13.4007 24.0508 14.526 25.1781 15.9151 25.1801ZM15.9151 18.4644H22.6165C24.0056 18.4634 25.1309 17.3361 25.1299 15.9469C25.1319 14.5578 24.0066 13.4304 22.6175 13.4284H15.9162C14.527 13.4294 13.4017 14.5567 13.4028 15.9459C13.4017 17.3361 14.526 18.4634 15.9151 18.4644Z" fill="#ECB22E" />
      <path fillRule="evenodd" clipRule="evenodd" d="M7.02028e-07 15.9469C-0.00102601 17.3361 1.12425 18.4634 2.51339 18.4644C3.90254 18.4634 5.02781 17.3361 5.02679 15.9469V13.4294H2.51339C1.12425 13.4304 -0.00102601 14.5578 7.02028e-07 15.9469ZM6.70136 15.9469V22.6616C6.6993 24.0508 7.82458 25.1781 9.21372 25.1801C10.6029 25.1791 11.7281 24.0518 11.7271 22.6626V15.949C11.7292 14.5598 10.6039 13.4325 9.21475 13.4304C7.82458 13.4304 6.70033 14.5578 6.70136 15.9469Z" fill="#E01E5A" />
    </svg>

  );
}

function MailIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M4 6h16v12H4z" /><path d="m4 7 8 6 8-6" /></svg>;
}

function CalendarIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M4 5h16v15H4z" /><path d="M8 3v4M16 3v4M4 10h16" /><path d="M8 14h.01M12 14h.01M16 14h.01" /></svg>;
}

function BellIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M6 9a6 6 0 0 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9" /><path d="M10 21h4" /></svg>;
}

function SettingsIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" /><path d="M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2 2 0 1 1-2.83 2.83l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1.1 1.66V21a2 2 0 1 1-4 0v-.09A1.8 1.8 0 0 0 8.75 19.25a1.8 1.8 0 0 0-1.98.36l-.04.04a2 2 0 1 1-2.83-2.83l.04-.04A1.8 1.8 0 0 0 4.3 15a1.8 1.8 0 0 0-1.66-1.1H2.5a2 2 0 1 1 0-4h.14A1.8 1.8 0 0 0 4.3 8.75a1.8 1.8 0 0 0-.36-1.98l-.04-.04A2 2 0 1 1 6.73 3.9l.04.04a1.8 1.8 0 0 0 1.98.36A1.8 1.8 0 0 0 9.85 2.64V2.5a2 2 0 1 1 4 0v.14a1.8 1.8 0 0 0 1.1 1.66 1.8 1.8 0 0 0 1.98-.36l.04-.04a2 2 0 1 1 2.83 2.83l-.04.04a1.8 1.8 0 0 0-.36 1.98 1.8 1.8 0 0 0 1.66 1.1h.09a2 2 0 1 1 0 4h-.09A1.8 1.8 0 0 0 19.4 15Z" /></svg>;
}

function LockIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true"><path d="M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6Z" /><path d="M8 11V7a4 4 0 1 1 8 0v4" /><path d="M12 16v1" /></svg>;
}

function AppleIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="currentColor" className={className}><path d="M17.2 13.1c0-2.5 2-3.7 2.1-3.8-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.8-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3-.1 1.8-.8 3.3-.8s2 .8 3.4.8c1.4 0 2.3-1.2 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9-.1-.1-2.8-1.1-2.9-4.1ZM14.7 5.7c.7-.8 1.1-1.9 1-3-.9.1-2 .6-2.7 1.4-.6.7-1.2 1.9-1 2.9 1 .1 2-.5 2.7-1.3Z" /></svg>;
}

function WindowsIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="currentColor" className={className}><path d="M3 5.2 10.8 4v7.3H3V5.2Zm9-1.4L21 2.5v8.8h-9V3.8ZM3 12.7h7.8V20L3 18.8v-6.1Zm9 0h9v8.8l-9-1.3v-7.5Z" /></svg>;
}

function LinuxIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M8 16c-1.5 1-2.5 2-3 4h14c-.5-2-1.5-3-3-4" /><path d="M8 12c0-5 1.5-8 4-8s4 3 4 8" /><path d="M9 12h6l2 5H7l2-5Z" /><path d="M10 8h.01M14 8h.01" /></svg>;
}

function DockerIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M4 13h14c1.5 0 2.8-.6 3.7-1.7.1 3.8-2.7 6.7-7.7 6.7H9c-3 0-5-2-5-5Z" /><path d="M5 10h3v3H5zM8 10h3v3H8zM11 10h3v3h-3zM8 7h3v3H8zM11 7h3v3h-3zM14 10h3v3h-3z" /></svg>;
}

function CodeIcon({ className }: IconProps) {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m8 9-4 3 4 3M16 9l4 3-4 3M13 5l-2 14" /></svg>;
}

function OpenClawOrbit({ isActive }: { isActive: boolean }) {
  return (
    <div className="relative mx-auto flex h-[280px] max-w-[360px] items-center justify-center overflow-hidden">
      <div className="absolute inset-x-0 bottom-0 z-20 h-28 bg-linear-to-t from-white via-white/90 to-transparent dark:from-zinc-950 dark:via-zinc-950/90" />
      {[72, 106, 142].map((size) => (
        <div
          key={size}
          className="absolute rounded-full border border-dashed border-zinc-300/80 dark:border-zinc-800"
          style={{ width: size * 2, height: size * 2 }}
        />
      ))}
      <div className="relative z-10 flex size-20 items-center justify-center rounded-full bg-white shadow-xl shadow-red-900/10 ring-1 ring-black/5 dark:bg-zinc-950 dark:ring-white/10">
        <OpenClawMark className="size-14" />
      </div>
      {messagingApps.map((app, index) => {
        const Icon = app.icon;
        const ringSize = getRingSize(app.ring);
        const initialRotation = app.slot * 90 + (app.ring === 2 ? 28 : -18);
        const travel = app.direction === "normal" ? 360 : -360;

        return (
          <motion.div
            key={app.name}
            className="absolute left-1/2 top-1/2 z-10"
            style={{ width: ringSize, height: ringSize, marginLeft: -ringSize / 2, marginTop: -ringSize / 2 }}
            initial={{ rotate: initialRotation }}
            animate={isActive ? { rotate: initialRotation + travel } : { rotate: initialRotation }}
            transition={isActive ? { duration: app.duration, repeat: Infinity, ease: "linear" } : { duration: 0.2 }}
          >
            <motion.div
              className="absolute left-1/2 top-0 flex size-11 -translate-x-1/2 items-center justify-center rounded-md border border-black/10 bg-white text-sm font-bold shadow-sm dark:border-white/10 dark:bg-zinc-950"
              initial={{ rotate: -initialRotation }}
              animate={isActive ? { rotate: -(initialRotation + travel) } : { rotate: -initialRotation }}
              transition={isActive ? { duration: app.duration, repeat: Infinity, ease: "linear" } : { duration: 0.2 }}
              title={app.name}
            >
              <Icon className="size-7" />
            </motion.div>
          </motion.div>
        );
      })}
    </div>
  );
}

function AssistantChat() {
  return (
    <div className="relative mx-auto w-full max-w-[330px] pt-4">
      <div className="absolute left-4 top-12 h-[86px] border-l border-dashed border-zinc-300/70 dark:border-zinc-700/70" />
      <motion.div
        className="flex gap-3"
        initial={{ opacity: 0, y: 10, filter: "blur(4px)" }}
        whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
        viewport={{ once: true }}
        transition={{ duration: 0.45 }}
      >
        <div className="relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">H</div>
        <div className="space-y-2">
          <div className="flex items-center gap-3 text-xs text-zinc-500">
            <span className="font-medium text-zinc-900 dark:text-zinc-100">Harshitlog</span>
            <span>10:30 AM</span>
          </div>
          <div className="rounded-md bg-zinc-100 p-3 text-xs leading-4 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100">
            Hey OpenClaw, clean up my inbox, flag urgent messages, and schedule a 30-minute sync with Sam tomorrow.
          </div>
        </div>
      </motion.div>
      <motion.div
        className="mt-8 flex gap-3"
        initial={{ opacity: 0, y: 10, filter: "blur(4px)" }}
        whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
        viewport={{ once: true }}
        transition={{ duration: 0.45, delay: 0.55 }}
      >
        <div className="relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full bg-white ring-1 ring-black/5 dark:bg-zinc-950 dark:ring-white/10">
          <OpenClawMark className="size-7" />
        </div>
        <div className="space-y-2">
          <div className="flex items-center gap-3 text-xs text-zinc-500">
            <span className="font-medium text-zinc-900 dark:text-zinc-100">OpenClaw</span>
            <span>10:30 AM</span>
          </div>
          <div className="rounded-md bg-[#C62828] p-3 text-xs leading-4 text-white shadow-sm">
            Done. I cleaned your inbox, flagged 5 urgent emails, and scheduled the sync for 10:00 AM.
          </div>
        </div>
      </motion.div>
    </div>
  );
}

function SecurityPanel({ isActive }: { isActive: boolean }) {
  const securitySlots = [
    { id: "slot-1", row: "top" },
    { id: "slot-2", row: "top" },
    { id: "slot-3", row: "top" },
    { id: "slot-4", row: "top" },
    { id: "slot-5", row: "bottom" },
    { id: "slot-6", row: "bottom" },
    { id: "slot-7", row: "bottom" },
    { id: "slot-8", row: "bottom" },
  ];
  const fingerprintSlots = [1, 6, 4, 3];
  const lockSlots = [6, 0, 7, 2];

  return (
    <div className="relative overflow-hidden pt-5">
      <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-14 bg-linear-to-r from-white to-transparent dark:from-zinc-950" />
      <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-14 bg-linear-to-l from-white to-transparent dark:from-zinc-950" />
      <div className="relative mx-auto grid w-fit grid-cols-4 justify-center gap-2 sm:gap-3">
        {securitySlots.map((slot, index) => (
          <motion.div
            key={slot.id}
            className="relative flex h-20 w-20 items-center justify-center rounded-md border border-zinc-200 bg-white/70 dark:border-zinc-800 dark:bg-zinc-950/70"
            initial={{ opacity: 0, y: 8, scale: 0.96 }}
            whileInView={{ opacity: 1, y: 0, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.4, delay: index * 0.09 }}
          >
            {fingerprintSlots.includes(index) && (
              <motion.span
                className="absolute inset-0 flex items-center justify-center"
                animate={isActive ? { opacity: [0, 1, 1, 0] } : { opacity: 0 }}
                transition={isActive ? {
                  duration: 1.6,
                  delay: fingerprintSlots.indexOf(index) * 1.85,
                  repeat: Infinity,
                  repeatDelay: 5.55,
                  times: [0, 0.25, 0.72, 1],
                } : { duration: 0.2 }}
              >
                <FingerprintIcon className="size-15 text-zinc-950 dark:text-zinc-50" />
              </motion.span>
            )}
            {lockSlots.includes(index) && (
              <motion.span
                className="absolute inset-0 flex items-center justify-center"
                animate={isActive ? { opacity: [0, 1, 1, 0] } : { opacity: 0 }}
                transition={isActive ? {
                  duration: 1.6,
                  delay: lockSlots.indexOf(index) * 1.85 + 0.9,
                  repeat: Infinity,
                  repeatDelay: 5.55,
                  times: [0, 0.25, 0.72, 1],
                } : { duration: 0.2 }}
              >
                <LockIcon className="size-12 text-zinc-400 dark:text-zinc-50" />
              </motion.span>
            )}
          </motion.div>
        ))}
      </div>
    </div>
  );
}

function ActionBeam({ index }: { index: number }) {
  return (
    <motion.span
      className="absolute left-[1.35rem] top-8 h-10 w-px overflow-hidden bg-zinc-200 dark:bg-zinc-800"
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.5 + 0.25 }}
    >
      <motion.span
        className="absolute inset-x-0 top-0 h-4 bg-linear-to-b from-transparent via-[#C62828] to-transparent"
        initial={{ y: -18 }}
        whileInView={{ y: 42 }}
        viewport={{ once: true }}
        transition={{ duration: 0.75, delay: index * 0.5 + 0.45, ease: "easeInOut" }}
      />
    </motion.span>
  );
}

function ActionList() {
  return (
    <div className="mx-auto flex w-full max-w-[280px] flex-col gap-3 pt-8">
      {actionItems.map((item, index) => {
        const Icon = item.icon;
        return (
          <motion.div
            key={item.label}
            className="relative flex items-center gap-3 rounded-md border border-zinc-200 bg-white px-3 py-2.5 text-sm text-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200"
            initial={{ opacity: 0, x: -8 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.45, delay: index * 0.5 }}
          >
            {index < actionItems.length - 1 && <ActionBeam index={index} />}
            <span className="relative z-10 flex size-5 items-center justify-center rounded-sm bg-white dark:bg-zinc-950">
              <Icon className="size-4 text-[#C62828]" />
            </span>
            <span className="relative z-10">{item.label}</span>
          </motion.div>
        );
      })}
    </div>
  );
}

function InstallPanel() {
  return (
    <div className="mx-auto w-full max-w-[320px] pt-8">
      <div className="mb-5 flex justify-center gap-4">
        {platforms.map((platform) => {
          const Icon = platform.icon;
          return (
            <div key={platform.name} className={`flex size-9 items-center justify-center rounded-md border text-zinc-950 dark:text-zinc-50 ${platform.active ? "border-[#C62828] bg-white dark:bg-zinc-950" : "border-zinc-200 bg-white/70 dark:border-zinc-800 dark:bg-zinc-950/70"}`} title={platform.name}>
              <Icon className="size-4" />
            </div>
          );
        })}
      </div>
      <div className="rounded-md border border-zinc-200 bg-white p-4 font-mono text-xs leading-6 shadow-[0_18px_60px_rgba(0,0,0,0.08)] dark:border-zinc-800 dark:bg-zinc-950">
        {installCommands.map((line, index) => (
          <motion.div
            key={line}
            className={line.startsWith("✓") || line.startsWith("OpenClaw") ? "text-emerald-600" : "text-zinc-700 dark:text-zinc-300"}
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.15, delay: index * 0.35 }}
          >
            <motion.span
              className="inline-block overflow-hidden whitespace-nowrap align-bottom"
              initial={{ width: 0 }}
              whileInView={{ width: "100%" }}
              viewport={{ once: true }}
              transition={{ duration: Math.min(0.9, 0.18 + line.length * 0.018), delay: index * 0.35, ease: "linear" }}
            >
              {line}
            </motion.span>
          </motion.div>
        ))}
      </div>
    </div>
  );
}

function MiniAreaChart({ chart, index }: { chart: (typeof savingsCharts)[number]; index: number }) {
  const max = Math.max(...chart.data);
  const min = Math.min(...chart.data);
  const range = Math.max(max - min, 1);
  const points = chart.data.map((value, pointIndex) => {
    const x = (pointIndex / (chart.data.length - 1)) * 100;
    const y = 72 - ((value - min) / range) * 46;

    return { x, y };
  });
  const linePath = points.map((point, pointIndex) => `${pointIndex === 0 ? "M" : "L"}${point.x},${point.y}`).join(" ");
  const areaPath = `${linePath} L100,82 L0,82 Z`;
  const gradientId = `openclaw-savings-gradient-${index}`;

  return (
    <div className="overflow-hidden rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
      <div className="flex items-start justify-between gap-3 px-3 pt-3">
        <div>
          <p className="text-[11px] font-medium text-zinc-500 dark:text-zinc-400">{chart.label}</p>
          <p className="mt-1 text-lg font-semibold tracking-tight text-zinc-950 dark:text-zinc-50">{chart.value}</p>
        </div>
        <span className="rounded-md border border-black/10 px-2 py-1 text-[10px] font-medium text-zinc-500 dark:border-white/10 dark:text-zinc-400">
          {chart.note}
        </span>
      </div>
      <svg viewBox="0 0 100 86" preserveAspectRatio="none" className="mt-1 h-[86px] w-full">
        <defs>
          <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={chart.color} stopOpacity="0.32" />
            <stop offset="100%" stopColor={chart.color} stopOpacity="0" />
          </linearGradient>
        </defs>
        {[18, 34, 50, 66].map((y) => (
          <line key={y} x1="0" x2="100" y1={y} y2={y} stroke="currentColor" strokeOpacity="0.08" strokeWidth="1" />
        ))}
        <motion.path
          d={areaPath}
          fill={`url(#${gradientId})`}
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: index * 0.1 }}
        />
        <motion.path
          d={linePath}
          fill="none"
          stroke={chart.color}
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          initial={{ pathLength: 0 }}
          whileInView={{ pathLength: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.75, delay: index * 0.1 }}
        />
      </svg>
    </div>
  );
}

function SavingsPanel() {
  return (
    <div className="mx-auto grid w-full max-w-[340px] gap-3 pt-3">
      {savingsCharts.map((chart, index) => (
        <MiniAreaChart key={chart.label} chart={chart} index={index} />
      ))}
    </div>
  );
}

const featureCards = [
  {
    title: "Works in the apps you already use",
    description: "Chat with OpenClaw in WhatsApp, Telegram, Slack, or over email.",
    visual: (isActive: boolean) => <OpenClawOrbit isActive={isActive} />,
  },
  {
    title: "Personal assistant that takes actions",
    description: "Ask in natural language. OpenClaw gets things done across your apps and tools.",
    visual: () => <AssistantChat />,
  },
  {
    title: "Private and secure",
    description: "Local-first by default, with clear permissions and audit trails you can review.",
    visual: (isActive: boolean) => <SecurityPanel isActive={isActive} />,
  },
  {
    title: "Automate busywork",
    description: "Let OpenClaw handle repetitive tasks so you can focus on what matters.",
    visual: () => <ActionList />,
  },
  {
    title: "Get started with one command",
    description: "Install in seconds and connect your apps.",
    visual: () => <InstallPanel />,
  },
  {
    title: "Save hours every week",
    description: "OpenClaw handles the noise so you can get more done, every day.",
    visual: () => <SavingsPanel />,
  },
];

export default function BentoGridThree() {
  const sectionRef = useRef<HTMLElement>(null);
  const isInView = useInView(sectionRef, { amount: 0.2 });

  return (
    <section ref={sectionRef} className="bg-background px-4 py-16 text-foreground sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <h1 className="mb-10 text-4xl font-medium tracking-tight sm:text-5xl">
          OpenClaw at a glance
        </h1>
        <div className="grid overflow-hidden rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950 lg:grid-cols-3">
          {featureCards.map((card, index) => (
            <motion.article
              key={card.title}
              initial={{ opacity: 0, y: 18 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.28 }}
              className="flex min-h-[390px] flex-col justify-between border-b border-zinc-200 p-7 last:border-b-0 dark:border-zinc-800 lg:min-h-[430px] lg:border-r lg:border-b [&:nth-child(3n)]:lg:border-r-0 [&:nth-child(n+4)]:lg:border-b-0"
            >
              <div className="min-h-[220px] pb-8 lg:min-h-[260px] lg:pb-10">{card.visual(isInView)}</div>
              <div>
                <h2 className="text-xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50">
                  {card.title}
                </h2>
                <p className="mt-2 max-w-sm text-sm leading-5 text-zinc-500 dark:text-zinc-400">
                  {card.description}
                </p>
              </div>
            </motion.article>
          ))}
        </div>
      </div>
    </section>
  );
}