Integrations Card

// demo.tsx
import { AnimatedIntegrationsCard } from "@/components/ui/integrations-card";
import { Blocks } from "lucide-react"; // Example icon

const IntegrationsDemo = () => {
  const integrations = [
    {
      name: "Dropbox",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAP1BMVEUAYf4AYf4HZf4AYf4AYf4AXP8AV/8ib/0AUf9Phvzg6vN0oPrV4vQ8ffyOsfj//vK+0vX49vLx9fJkl/qhwPcy5G+GAAAABXRSTlPl8vv/8e4/M/sAAAEHSURBVHgBfZMHEsMwCARlExCgHun/bw0p7uMwjWFVbl2cm27LuRlua3aPe/hw0z2cVoi0zAjPkGbP+F3kgQ+QWFQD2ZApaExMGySfi1VNxKm+u+xpgSixlNZaefb+tMa6KLjCajNjUSS2T1dXCATB9qodxj5rKTEAbYEQ07DFaB1IHYlwr8KYx8cF2Y+BvFOxkGrHdmYzeXeJt7R+vNO+XVL9dsOvabt+BVoIPxXttB6bzKW0Kt5LbcVM0i4tY4iaLWgVyGomjBs0F5GPouZZzOn0yqjH9qnY6fo+u36DascLBMb8tCwZGK4QkEWjmP4BrsV+tm03EIjgAP9+mv8+6svv8Fhrci8jzxLVkbdj1wAAAABJRU5ErkJggg==",
    },
    {
      name: "Slack",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAMAAACxiD++AAAAllBMVEVHcEw2xfE2xfA2xfA1xfA2yPItt30utn0utn01xfA1xfA1xfA1xfEttn0utn01xvE2wsUutn02xfEutn03xfAstX0stn02xfDhSUzgHVngHVrgHVrhHVngHVrgHVjssi3ssi7ssi7rsi3gHlrgHlrgHlrgHVrfHljssi3ssi7tsi7gHlrssi3gHFrssi7rsC7rsS/tsS0S3plWAAAAMnRSTlMAc+D/wjlU4P9oSNaHlLWYCM2jriMqevYIUaWzQoUqOJCmTez/Y9QbyP/ndLKM1Shdc67V0pYAAAE1SURBVHgBdI8DEgRBEARrNbbu/v/RtZGBVg4aB1XdtN0YCWWU4AlvRmoxzUdeDNlMKGg2YfCgngXrzCx4PAirEL+E1E5C+BaQRFVV4lVwGwDOf3Dr/rJekaE7CTlST7b9N9qETchzkrf1NtQulDW65oLF9kk9Rwq05/mPrwO9xgiI+jQPCTlOF2Q3CzRjNJTdqBKAXHTJcETrKX7x/x/5UAhZGEAMAgEsY1RwqPv+w73U+xocgl2cJEkqQCSJVIA2dsM4IPbhQYbIH01SoMvqoNaQh0VI57bBVGdaorAKfm472otQbyeIaBPsRSghDvPdu6D7s6CBOM1lwS4wmH6lbDU7m7BFYONdGI0x0/BN2H7RDn+EyvDGVSh5I58Fucah5Y05HrnC1U9h4B2R54kCXFuf3ngHXY83KaRzhbUAAAAASUVORK5CYII=",
    },
    {
      name: "Main",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAY1BMVEUVFBoAAAAAAAsAAAXGxsfc3Nxramzi4uOEhIUJBxA2NTn////l5eWxsLKbm5yXl5ljY2U8PD/Q0NFbWl3y8vK4uLkaGR9GRUihoaIAAAhxcXO+vr99fX8nJyv7+/uQkJHW1td4h7FUAAAAsElEQVR4Ac3RBQKDMBAEQBZNurg7/P+VzdV7LwDiE4933Q8AJPcBBNrCKIzgLE7CyPyrvTGNCOnEjDn+EAXzJ5IlNUasEod+ybrR6LGFIDKaUiEMuye27GONNWNBOzCBRpAQxMhR4zQzfGLKSiMWroHgxha+xp2TJ3gw0+g3PCGIk42vEBmPJ3KHp7HlZgVjLhrd4VJXQ8qF86RwWqNDcKnDE65v8/dkE/D73BZiV/zuQNAJugNKvQoAAAAASUVORK5CYII=",
    },
    {
      name: "Shopify",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAAAAABWESUoAAAA3ElEQVR4Ac2SGQDFMBBE1ylOcYpTner0neK0TnGpU53iFKc6xWl+p+f25D7InZ295Cv0mGjFUOzWDVVVa/WykaBiaBBFfsiyory3JASRjs8mInqxUGRw47CIBIy7Ew0Sh0nED4OXCwkNh8h7GrrgCkVK9a7w6Q2BjoVa6Oo9EZEDVJ7I1M4UeMDXzIEhvoukFxNMaP8o4gpon1l9qnqc7DcPIgpd7Ce0t/fJVO0q0qIsVeuY1XwNYK1gwm8J2GAqvHRF5mD7BcG0Rl6yegjw0BqdakE8Bni0RyjyDf4Y1Y0n0wNT4wAAAABJRU5ErkJggg==",
    },
    {
      name: "Salesforce",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAJ1BMVEXN6PcHndwAndwAndwCndwAndwAndwAndwAndwAndwAndwAndwAndxI7+MwAAAADXRSTlMBDzdMHaHm0YZ3/79m9L0GfgAAAJhJREFUeAFjoAwwKpsIMAjCuapp6S3OoZMEIDzmqlWrsnetWnaQESzgvQoCMqbGKAK5ZqvgoAYofwrBXXYAhbtqI4riVYsZWKKQuCsZOFahcMVWoSj2QuamoHInMIgj8TIcGDjhnPKtRxgYWNpgTjqkAvKC0IkqICe7LFgA6mErILfFBcZj4ClbleqAFDw6nYYowSVAViADABQkfCeMXxKLAAAAAElFTkSuQmCC",
    },
  ];

  const title = (
    <>
      Connect with all tools for{" "}
      <span
        className="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent"
      >
        high experience
      </span>
    </>
  );

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <AnimatedIntegrationsCard
        integrations={integrations}
        title={title}
        description="Explore more links and enjoy Rainbow as soon as possible"
        mainActionLabel="Learn More"
        statusLabel="CONNECTED"
        topIcon={<Blocks className="h-6 w-6 text-muted-foreground" />}
      />
    </div>
  );
};

export default IntegrationsDemo;