{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "integrations-5",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/integrations-5.tsx",
      "content": "import type { SVGProps } from \"react\";\nimport { FaSlack as SiSlack } from \"react-icons/fa6\";\nconst Cloudflare = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} viewBox=\"0 0 256 116\" preserveAspectRatio=\"xMidYMid\">\n    <path\n      fill=\"currentColor\"\n      d=\"m202.357 49.394-5.311-2.124C172.085 103.434 72.786 69.289 66.81 85.997c-.996 11.286 54.227 2.146 93.706 4.059 12.039.583 18.076 9.671 12.964 24.484l10.069.031c11.615-36.209 48.683-17.73 50.232-29.68-2.545-7.857-42.601 0-31.425-35.497Z\"\n    />\n    <path\n      fill=\"#F4811F\"\n      d=\"M176.332 108.348c1.593-5.31 1.062-10.622-1.593-13.809-2.656-3.187-6.374-5.31-11.154-5.842L71.17 87.634c-.531 0-1.062-.53-1.593-.53-.531-.532-.531-1.063 0-1.594.531-1.062 1.062-1.594 2.124-1.594l92.946-1.062c11.154-.53 22.839-9.56 27.087-20.182l5.312-13.809c0-.532.531-1.063 0-1.594C191.203 20.182 166.772 0 138.091 0 111.535 0 88.697 16.995 80.73 40.896c-5.311-3.718-11.684-5.843-19.12-5.31-12.747 1.061-22.838 11.683-24.432 24.43-.531 3.187 0 6.374.532 9.56C16.996 70.107 0 87.103 0 108.348c0 2.124 0 3.718.531 5.842 0 1.063 1.062 1.594 1.594 1.594h170.489c1.062 0 2.125-.53 2.125-1.594l1.593-5.842Z\"\n    />\n    <path\n      fill=\"#FAAD3F\"\n      d=\"M205.544 48.863h-2.656c-.531 0-1.062.53-1.593 1.062l-3.718 12.747c-1.593 5.31-1.062 10.623 1.594 13.809 2.655 3.187 6.373 5.31 11.153 5.843l19.652 1.062c.53 0 1.062.53 1.593.53.53.532.53 1.063 0 1.594-.531 1.063-1.062 1.594-2.125 1.594l-20.182 1.062c-11.154.53-22.838 9.56-27.087 20.182l-1.063 4.78c-.531.532 0 1.594 1.063 1.594h70.108c1.062 0 1.593-.531 1.593-1.593 1.062-4.25 2.124-9.03 2.124-13.81 0-27.618-22.838-50.456-50.456-50.456\"\n    />\n  </svg>\n);\n\nexport { Cloudflare };\nconst Notion = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} preserveAspectRatio=\"xMidYMid\" viewBox=\"0 0 256 268\">\n    <path\n      d=\"M164.09.608 16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608ZM69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095l-1.819.125Zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921ZM212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585 52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404l35.84-2.087Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport { Notion };\n\nconst Paper = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} viewBox=\"0 0 39 39\" fill=\"none\">\n    <path d=\"M39 24H24V6H6V24H24V39H0V6H6V0H39V24Z\" fill=\"#81ADEC\" />\n  </svg>\n);\n\nexport { Paper };\n\nconst Stripe = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} fill=\"none\" viewBox=\"100 100 312 312\">\n    <path\n      fill=\"#533afd\"\n      fillRule=\"evenodd\"\n      d=\"m120 392 272-57.683V120l-272 58.357z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nexport { Stripe };\n\nconst Dropbox = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} fill=\"none\" viewBox=\"0 0 128 128\">\n    <path fill=\"#0061FE\" d=\"M0 0h128v128H0z\" />\n    <path\n      fill=\"#F7F5F2\"\n      d=\"M43.7 32 23.404 44.75 43.701 57.5 64 44.75 84.3 57.5l20.298-12.75L84.299 32 64.002 44.75 43.7 32Zm0 51L23.404 70.25 43.701 57.5 64 70.25 43.702 83Zm20.302-12.75L84.299 57.5l20.298 12.75L84.299 83 64.002 70.25Zm0 29.75L43.7 87.25 64 74.5l20.3 12.75L64.002 100Z\"\n    />\n  </svg>\n);\n\nexport { Dropbox };\n\nconst Slack = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} viewBox=\"0 0 2447.6 2452.5\">\n    <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n      <path\n        d=\"m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z\"\n        fill=\"#36c5f0\"\n      />\n      <path\n        d=\"m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z\"\n        fill=\"#2eb67d\"\n      />\n      <path\n        d=\"m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z\"\n        fill=\"#ecb22e\"\n      />\n      <path\n        d=\"m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0\"\n        fill=\"#e01e5a\"\n      />\n    </g>\n  </svg>\n);\n\nexport { Slack };\n\nconst Figma = (props: SVGProps<SVGSVGElement>) => (\n  <svg {...props} viewBox=\"0 0 54 80\" fill=\"none\">\n    <g clipPath=\"url(#figma__clip0_912_3)\">\n      <path\n        d=\"M13.3333 80.0002C20.6933 80.0002 26.6667 74.0268 26.6667 66.6668V53.3335H13.3333C5.97333 53.3335 0 59.3068 0 66.6668C0 74.0268 5.97333 80.0002 13.3333 80.0002Z\"\n        fill=\"#0ACF83\"\n      />\n      <path\n        d=\"M0 39.9998C0 32.6398 5.97333 26.6665 13.3333 26.6665H26.6667V53.3332H13.3333C5.97333 53.3332 0 47.3598 0 39.9998Z\"\n        fill=\"#A259FF\"\n      />\n      <path\n        d=\"M0 13.3333C0 5.97333 5.97333 0 13.3333 0H26.6667V26.6667H13.3333C5.97333 26.6667 0 20.6933 0 13.3333Z\"\n        fill=\"#F24E1E\"\n      />\n      <path\n        d=\"M26.6667 0H40.0001C47.3601 0 53.3334 5.97333 53.3334 13.3333C53.3334 20.6933 47.3601 26.6667 40.0001 26.6667H26.6667V0Z\"\n        fill=\"#FF7262\"\n      />\n      <path\n        d=\"M53.3334 39.9998C53.3334 47.3598 47.3601 53.3332 40.0001 53.3332C32.6401 53.3332 26.6667 47.3598 26.6667 39.9998C26.6667 32.6398 32.6401 26.6665 40.0001 26.6665C47.3601 26.6665 53.3334 32.6398 53.3334 39.9998Z\"\n        fill=\"#1ABCFE\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"figma__clip0_912_3\">\n        <rect width=\"53.3333\" height=\"80\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\nexport { Figma };\nconst integrations = [\n  {\n    title: \"Dropbox\",\n    description: \"Sync all files and updates in seconds, always up to date.\",\n    icon: Dropbox,\n  },\n  {\n    title: \"Cloudflare\",\n    description:\n      \"Secure and accelerate your apps with global edge infrastructure.\",\n    icon: Cloudflare,\n  },\n  {\n    title: \"Notion\",\n    description:\n      \"Organize ideas, tasks, and knowledge in one collaborative workspace.\",\n    icon: Notion,\n  },\n  {\n    title: \"Slack\",\n    description:\n      \"Communicate instantly and keep everyone aligned in real time.\",\n    icon: SiSlack,\n  },\n  {\n    title: \"Stripe\",\n    description: \"Accept payments and manage billing with powerful APIs.\",\n    icon: Stripe,\n  },\n  {\n    title: \"Figma\",\n    description:\n      \"Design, prototype, and collaborate on interfaces in real time.\",\n    icon: Figma,\n  },\n];\n\nexport default function Integrations5() {\n  return (\n    <section className=\"bg-background w-full px-4 py-16\">\n      <div className=\" mx-auto max-w-6xl space-y-px \">\n        <div className=\"animate-in fade-in slide-in-from-bottom-4 mx-auto mb-16 flex max-w-2xl flex-col items-center text-center duration-700 md:mb-10\">\n          <h2 className=\"text-foreground mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl\">\n            Seamless integrations, better campaigns\n          </h2>\n          <p className=\"text-muted-foreground text-lg md:text-xl\">\n            Connect with your favorite tools and services to streamline your\n            workflow.\n          </p>\n        </div>\n        <div className=\"bg-border grid grid-cols-2 gap-px md:grid-cols-6 border border-border\">\n          {Array.from({ length: 18 }).map((_, i) => {\n            const isDesktopFilled = (Math.floor(i / 6) + (i % 6)) % 2 === 0;\n            const isMobileFilled = (Math.floor(i / 2) + (i % 2)) % 2 === 0;\n            const item = integrations[i % integrations.length];\n            const Icon = item.icon;\n\n            return (\n              <div\n                key={i}\n                className=\"bg-background flex h-24 items-center justify-center md:h-28\"\n              >\n                <div\n                  className={`items-center gap-3 ${isDesktopFilled ? \"md:flex\" : \"md:hidden\"} ${isMobileFilled ? \"flex\" : \"hidden\"}`}\n                >\n                  <Icon className=\"text-foreground size-10\" />\n                </div>\n                <div\n                  className={`bg-muted bg-[repeating-linear-gradient(180deg,theme(colors.border)_0px,theme(colors.border)_1px,transparent_1px,transparent_20px)] size-full ${!isDesktopFilled ? \"md:block\" : \"md:hidden\"} ${!isMobileFilled ? \"block\" : \"hidden\"}`}\n                ></div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/integrations-5.tsx"
    }
  ],
  "type": "registry:ui"
}