Integration 2

"use client";

import Image from "next/image";
import { Button } from "@/components/ui/button";

const logos = [
  "digital",
  "docker",
  "",
  "gcp",
  "",
  "gitlab",
  "",
  "google",
  "kubernetes",
  "",
  "",
  "meta",
  "",
  "pack",
  "",
  "slack",
  "terraform",
];

export default function Component() {
  return (
    <section className="relative w-full overflow-hidden bg-gray-50 py-12 md:py-24 dark:bg-background">
      <div className="relative z-10 mx-auto max-w-5xl px-6 lg:px-0">
        <div className="mb-8 flex flex-col items-center">
          <h1 className="mb-4 text-center font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
            Tailor Beam with
            <br />
            Endless Integrations
          </h1>

          <p className="mb-6 text-center text-neutral-600 dark:text-neutral-400">
            Real stories from teams transforming workflows with Beam.
          </p>

          <Button className="rounded-lg border-blue-600 bg-blue-700 px-6 py-2 font-medium text-white hover:bg-blue-600">
            Explore Integrations
          </Button>
        </div>

        <div className="grid grid-cols-4 grid-rows-2 gap-4 sm:grid-cols-9">
          {logos.map((logo, index) => {
            const k = `integration_ico${index}`;
            if (logo === "") {
              return <div key={k} />;
            }
            return (
              <div className="rounded-lg p-4 dark:bg-neutral-800" key={k}>
                <Image
                  alt=""
                  className={"size-16 object-cover"}
                  height={720}
                  src={`https://res.cloudinary.com/dvwtcsh5v/image/upload/v1771329695/${logo}.png`}
                  width={1080}
                />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}