Integrations Logo Grid
Integration logo grid of twelve brand marks in muted cells, each showing an icon and name, beneath a heading and subtext.
@7ovr
Integration logo grid of twelve brand marks in muted cells, each showing an icon and name, beneath a heading and subtext.
@7ovr
registry/blocks/logo-cloud/2/logo-cloud-block.tsx
const logos = [
{ name: "Amazon", Icon: AmazonMark },
{ name: "Microsoft", Icon: MicrosoftMark },
{ name: "Slack", Icon: SlackMark },
{ name: "GitHub", Icon: GithubMark },
{ name: "Notion", Icon: NotionMark },
{ name: "Figma", Icon: FigmaMark },
{ name: "Spotify", Icon: SpotifyMark },
{ name: "Dropbox", Icon: DropboxMark },
{ name: "LinkedIn", Icon: LinkedinBoxMark },
{ name: "Google", Icon: GoogleMark },
{ name: "Discord", Icon: DiscordMark },
{ name: "Dribbble", Icon: DribbbleMark },
]
export default function LogoCloudBlock() {
return (
<section className="flex w-full items-center justify-center bg-background px-6 py-12 text-foreground">
<div className="w-full max-w-4xl">
<div className="mb-10 text-center">
<h2 className="font-heading text-2xl font-bold tracking-tight">
Built to integrate with your stack
</h2>
<p className="mt-2 text-sm text-muted-foreground">
Acme connects with the tools your team already relies on, no extra
setup required.
</p>
</div>
<div className="grid grid-cols-2 gap-px overflow-hidden rounded-xl bg-border sm:grid-cols-3 md:grid-cols-4">
{logos.map(({ name, Icon }) => (
<div
key={name}
className="flex flex-col items-center justify-center gap-3 bg-card px-4 py-8"
>
<Icon
className="size-8 text-muted-foreground"
aria-hidden="true"
/>
<span className="text-xs font-medium text-muted-foreground">
{name}
</span>
</div>
))}
</div>
</div>
</section>
)
}
type MarkProps = React.ComponentProps<"svg"> & { size?: number | string }
function AmazonMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M21.997 18.2294C21.997 18.9572 21.5919 20.3571 20.6823 21.1263C20.5002 21.2667 20.3181 21.187 20.3979 20.983C20.6625 20.3352 21.2694 18.8356 20.985 18.4912C20.7839 18.2294 19.954 18.2485 19.2462 18.3092C18.923 18.3501 18.6393 18.3699 18.4191 18.4136C18.2152 18.4305 18.1736 18.2513 18.3775 18.1109C18.6393 17.926 18.923 17.7855 19.2483 17.6832C20.3979 17.3388 21.7269 17.5461 21.9172 17.7658C21.954 17.8083 21.997 17.926 21.997 18.2294ZM20.0754 19.5244C19.8136 19.7262 19.5299 19.9104 19.2462 20.0734C17.1235 21.3493 14.3748 22.0168 11.9875 22.0168C8.14505 22.0168 4.70765 20.5998 2.10014 18.2294C1.87644 18.0474 2.06133 17.7827 2.32314 17.926C5.13247 19.566 8.6108 20.5582 12.2112 20.5582C14.4772 20.5582 16.9195 20.1341 19.2462 19.2216C19.4085 19.1609 19.5906 19.0784 19.7501 19.0205C20.117 18.8547 20.4395 19.2625 20.0754 19.5244ZM13.9051 8.49485C13.9059 7.45265 13.9472 6.8397 13.6019 6.31359C13.2955 5.88081 12.7691 5.62128 12.0335 5.66194C11.2353 5.70607 10.3784 6.22935 10.1595 7.18824C10.1174 7.40711 9.98855 7.6235 9.72343 7.6714L7.28779 7.36168C7.11352 7.32039 6.84922 7.18824 6.93595 6.8397C7.45875 4.08774 9.81097 3.12884 12.0335 3H12.5563C13.7762 3 15.3438 3.34854 16.3473 4.26448C17.5639 5.40012 17.4342 6.92642 17.4342 8.58487V12.5113C17.4342 13.6891 17.9116 14.211 18.3923 14.8247C18.522 15.0436 18.5666 15.3021 18.3477 15.4797C17.867 15.9149 16.9535 16.6987 16.4307 17.134C16.2565 17.2669 15.9424 17.2811 15.8212 17.1794C15.0514 16.5336 14.8631 16.1759 14.3857 15.5209C13.5565 16.3923 12.8594 16.873 12.0302 17.134C11.5074 17.2669 10.9433 17.3504 10.2462 17.3504C8.15583 17.3504 6.50069 16.0471 6.50069 13.4694C6.50069 11.4211 7.5909 10.0276 9.20062 9.36867C10.8103 8.7097 13.1505 8.49857 13.9051 8.49485ZM13.4277 13.6858C13.9472 12.8144 13.9051 12.0996 13.9051 10.501C13.2534 10.501 12.5985 10.5464 12.0335 10.6786C10.9887 10.9817 10.1595 11.6399 10.1595 13.0341C10.1595 14.1243 10.7269 14.866 11.685 14.866C11.8171 14.866 11.9328 14.8495 12.0335 14.8214C12.7028 14.6346 13.1213 14.2986 13.4277 13.6858Z" />
</svg>
)
}
function DiscordMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M19.3034 5.33716C17.9344 4.71103 16.4805 4.2547 14.9629 4C14.7719 4.32899 14.5596 4.77471 14.411 5.12492C12.7969 4.89144 11.1944 4.89144 9.60255 5.12492C9.45397 4.77471 9.2311 4.32899 9.05068 4C7.52251 4.2547 6.06861 4.71103 4.70915 5.33716C1.96053 9.39111 1.21766 13.3495 1.5891 17.2549C3.41443 18.5815 5.17612 19.388 6.90701 19.9187C7.33151 19.3456 7.71356 18.73 8.04255 18.0827C7.41641 17.8492 6.82211 17.5627 6.24904 17.2231C6.39762 17.117 6.5462 17.0003 6.68416 16.8835C10.1438 18.4648 13.8911 18.4648 17.3082 16.8835C17.4568 17.0003 17.5948 17.117 17.7434 17.2231C17.1703 17.5627 16.576 17.8492 15.9499 18.0827C16.2789 18.73 16.6609 19.3456 17.0854 19.9187C18.8152 19.388 20.5875 18.5815 22.4033 17.2549C22.8596 12.7341 21.6806 8.80747 19.3034 5.33716ZM8.5201 14.8459C7.48007 14.8459 6.63107 13.9014 6.63107 12.7447C6.63107 11.5879 7.45884 10.6434 8.5201 10.6434C9.57071 10.6434 10.4303 11.5879 10.4091 12.7447C10.4091 13.9014 9.57071 14.8459 8.5201 14.8459ZM15.4936 14.8459C14.4535 14.8459 13.6034 13.9014 13.6034 12.7447C13.6034 11.5879 14.4323 10.6434 15.4936 10.6434C16.5442 10.6434 17.4038 11.5879 17.3825 12.7447C17.3825 13.9014 16.5548 14.8459 15.4936 14.8459Z" />
</svg>
)
}
function DribbbleMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M12 2C6.47939 2 2 6.47939 2 12C2 17.5206 6.47939 22 12 22C17.5098 22 22 17.5206 22 12C22 6.47939 17.5098 2 12 2ZM18.6052 6.60954C19.7983 8.06291 20.5141 9.91756 20.5358 11.9241C20.2538 11.8699 17.4338 11.295 14.5922 11.6529C14.5271 11.5119 14.4729 11.3601 14.4078 11.2083C14.2343 10.7961 14.0391 10.3731 13.8438 9.97181C16.9891 8.692 18.4208 6.84816 18.6052 6.60954ZM12 3.47506C14.1692 3.47506 16.154 4.28851 17.6616 5.62256C17.5098 5.83948 16.2191 7.56399 13.1822 8.70281C11.7831 6.13232 10.2321 4.0282 9.9935 3.70282C10.6334 3.55097 11.3059 3.47506 12 3.47506ZM8.36662 4.27766C8.59437 4.58134 10.1128 6.69631 11.5336 9.21256C7.5423 10.2755 4.01736 10.2538 3.63774 10.2538C4.19089 7.60738 5.98047 5.40564 8.36662 4.27766ZM3.45336 12.0109C3.45336 11.9241 3.45336 11.8373 3.45336 11.7506C3.82212 11.7614 7.96529 11.8156 12.2277 10.5358C12.4773 11.013 12.705 11.5011 12.9219 11.9891C12.8134 12.0217 12.6941 12.0542 12.5857 12.0868C8.18221 13.5076 5.83948 17.3904 5.64425 17.7158C4.2885 16.2083 3.45336 14.2017 3.45336 12.0109ZM12 20.5466C10.026 20.5466 8.20391 19.8742 6.76139 18.7462C6.91323 18.4317 8.64856 15.0911 13.4642 13.41C13.4859 13.3991 13.4967 13.3991 13.5184 13.3883C14.7223 16.5011 15.2104 19.1149 15.3406 19.8633C14.3102 20.308 13.1822 20.5466 12 20.5466ZM16.7614 19.0824C16.6746 18.5618 16.2191 16.0672 15.1019 12.9978C17.7809 12.5748 20.1236 13.269 20.4165 13.3666C20.0478 15.7419 18.6811 17.7917 16.7614 19.0824Z" />
</svg>
)
}
function DropboxMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M17.2847 10.6683L22.5 13.9909L17.248 17.3368L12 13.9934L6.75198 17.3368L1.5 13.9909L6.7152 10.6684L1.5 7.34587L6.75206 4L11.9999 7.34335L17.2481 4L22.5 7.34587L17.2847 10.6683ZM17.2112 10.6684L11.9999 7.3484L6.78869 10.6683L12 13.9883L17.2112 10.6684ZM6.78574 18.4456L12.0377 15.1L17.2898 18.4456L12.0377 21.7916L6.78574 18.4456Z" />
</svg>
)
}
function FigmaMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M5.33317 5.33333C5.33317 3.49238 6.82556 2 8.6665 2H11.9997H11.9998H15.333C17.174 2 18.6663 3.49238 18.6663 5.33333C18.6663 7.17428 17.174 8.66667 15.333 8.66667H11.9998H11.9997L11.9997 12L11.9997 15.3333V18.6667C11.9997 20.5076 10.5073 22 8.66634 22C6.82539 22 5.33301 20.5076 5.33301 18.6667C5.33301 16.8257 6.82539 15.3333 8.66634 15.3333C6.82539 15.3333 5.33301 13.841 5.33301 12C5.33301 10.1591 6.82539 8.66667 8.66634 8.66667H8.6665C6.82555 8.66667 5.33317 7.17428 5.33317 5.33333ZM11.9997 12C11.9997 13.841 13.4921 15.3333 15.333 15.3333C17.174 15.3333 18.6663 13.841 18.6663 12C18.6663 10.1591 17.174 8.66667 15.333 8.66667C13.4921 8.66667 11.9997 10.1591 11.9997 12Z" />
</svg>
)
}
function GithubMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z" />
</svg>
)
}
function GoogleMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z" />
</svg>
)
}
function LinkedinBoxMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z" />
</svg>
)
}
function MicrosoftMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M11.501 3V11.5H3.00098V3H11.501ZM11.501 21H3.00098V12.5H11.501V21ZM12.501 3H21.001V11.5H12.501V3ZM21.001 12.5V21H12.501V12.5H21.001Z" />
</svg>
)
}
function NotionMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M6.1039 5.90972C6.68754 6.38386 6.90648 6.34768 8.00238 6.27457L18.3342 5.65418C18.5533 5.65418 18.3711 5.43557 18.2981 5.39924L16.5822 4.15879C16.2534 3.90354 15.8153 3.61122 14.9758 3.68434L4.9715 4.41403C4.60665 4.45021 4.53377 4.63262 4.67909 4.77886L6.1039 5.90972ZM6.72422 8.31752L6.72422 19.1884C6.72422 19.7726 7.01618 19.9912 7.6733 19.955L19.028 19.298C19.6854 19.2619 19.7586 18.86 19.7586 18.3854V7.58753C19.7586 7.1137 19.5764 6.85816 19.1739 6.89464L7.30815 7.58753C6.87027 7.62433 6.72422 7.84337 6.72422 8.31752ZM17.9335 8.90066C18.0063 9.22933 17.9335 9.55767 17.6043 9.5946L17.0571 9.70361V17.7292C16.5822 17.9845 16.1441 18.1304 15.7791 18.1304C15.1947 18.1304 15.0484 17.9479 14.6107 17.401L11.0321 11.783V17.2186L12.1645 17.4741C12.1645 17.4741 12.1645 18.1304 11.2509 18.1304L8.73222 18.2765C8.65905 18.1304 8.73222 17.7659 8.98769 17.6929L9.64494 17.5108V10.324L8.73237 10.2509C8.6592 9.92222 8.84146 9.44837 9.35298 9.41159L12.0549 9.22946L15.7791 14.9205V9.88603L14.8296 9.77704C14.7567 9.37526 15.0484 9.08353 15.4135 9.04735L17.9335 8.90066ZM4.13151 3.4291L14.5376 2.66279C15.8155 2.55318 16.1443 2.6266 16.9475 3.21005L20.2692 5.54473C20.8173 5.9462 21 6.05551 21 6.49316V19.298C21 20.1005 20.7077 20.5751 19.6856 20.6477L7.60101 21.3775C6.83376 21.4141 6.4686 21.3047 6.0668 20.7937L3.6206 17.6199C3.18227 17.0357 3 16.5986 3 16.0873L3 4.70545C3 4.04918 3.29242 3.50177 4.13151 3.4291Z" />
</svg>
)
}
function SlackMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M6.52739 14.5136C6.52739 15.5966 5.64264 16.4814 4.55959 16.4814C3.47654 16.4814 2.5918 15.5966 2.5918 14.5136C2.5918 13.4305 3.47654 12.5458 4.55959 12.5458H6.52739V14.5136ZM7.51892 14.5136C7.51892 13.4305 8.40366 12.5458 9.48671 12.5458C10.5698 12.5458 11.4545 13.4305 11.4545 14.5136V19.4407C11.4545 20.5238 10.5698 21.4085 9.48671 21.4085C8.40366 21.4085 7.51892 20.5238 7.51892 19.4407V14.5136ZM9.48671 6.52715C8.40366 6.52715 7.51892 5.6424 7.51892 4.55935C7.51892 3.4763 8.40366 2.59155 9.48671 2.59155C10.5698 2.59155 11.4545 3.4763 11.4545 4.55935V6.52715H9.48671ZM9.48671 7.51867C10.5698 7.51867 11.4545 8.40342 11.4545 9.48647C11.4545 10.5695 10.5698 11.4543 9.48671 11.4543H4.55959C3.47654 11.4543 2.5918 10.5695 2.5918 9.48647C2.5918 8.40342 3.47654 7.51867 4.55959 7.51867H9.48671ZM17.4732 9.48647C17.4732 8.40342 18.3579 7.51867 19.4409 7.51867C20.524 7.51867 21.4087 8.40342 21.4087 9.48647C21.4087 10.5695 20.524 11.4543 19.4409 11.4543H17.4732V9.48647ZM16.4816 9.48647C16.4816 10.5695 15.5969 11.4543 14.5138 11.4543C13.4308 11.4543 12.546 10.5695 12.546 9.48647V4.55935C12.546 3.4763 13.4308 2.59155 14.5138 2.59155C15.5969 2.59155 16.4816 3.4763 16.4816 4.55935V9.48647ZM14.5138 17.4729C15.5969 17.4729 16.4816 18.3577 16.4816 19.4407C16.4816 20.5238 15.5969 21.4085 14.5138 21.4085C13.4308 21.4085 12.546 20.5238 12.546 19.4407V17.4729H14.5138ZM14.5138 16.4814C13.4308 16.4814 12.546 15.5966 12.546 14.5136C12.546 13.4305 13.4308 12.5458 14.5138 12.5458H19.4409C20.524 12.5458 21.4087 13.4305 21.4087 14.5136C21.4087 15.5966 20.524 16.4814 19.4409 16.4814H14.5138Z" />
</svg>
)
}
function SpotifyMark({ size = 24, ...props }: MarkProps) {
return (
<svg
viewBox="0 0 24 24"
width={size}
height={size}
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M12.001 2C6.50098 2 2.00098 6.5 2.00098 12C2.00098 17.5 6.50098 22 12.001 22C17.501 22 22.001 17.5 22.001 12C22.001 6.5 17.551 2 12.001 2ZM15.751 16.65C13.401 15.2 10.451 14.8992 6.95014 15.6992C6.60181 15.8008 6.30098 15.55 6.20098 15.25C6.10098 14.8992 6.35098 14.6 6.65098 14.5C10.451 13.6492 13.751 14 16.351 15.6C16.701 15.75 16.7501 16.1492 16.6018 16.45C16.4018 16.7492 16.0518 16.85 15.751 16.65ZM16.7501 13.95C14.051 12.3 9.95098 11.8 6.80098 12.8C6.40181 12.9 5.95098 12.7 5.85098 12.3C5.75098 11.9 5.95098 11.4492 6.35098 11.3492C10.001 10.25 14.501 10.8008 17.601 12.7C17.9018 12.8508 18.051 13.35 17.8018 13.7C17.551 14.05 17.101 14.2 16.7501 13.95ZM6.30098 9.75083C5.80098 9.9 5.30098 9.6 5.15098 9.15C5.00098 8.64917 5.30098 8.15 5.75098 7.99917C9.30098 6.94917 15.151 7.14917 18.8518 9.35C19.301 9.6 19.451 10.2 19.201 10.65C18.9518 11.0008 18.351 11.1492 17.9018 10.9C14.701 9 9.35098 8.8 6.30098 9.75083Z" />
</svg>
)
}
