Header 78

import { Button, type ButtonProps } from "@/components/ui/button";

type ImageProps = {
  src: string;
  alt?: string;
};

type Props = {
  heading: string;
  description: string;
  buttons: ButtonProps[];
  image1: ImageProps;
  image2: ImageProps;
  image3: ImageProps;
  image4: ImageProps;
  image5: ImageProps;
  image6: ImageProps;
  image7: ImageProps;
  image8: ImageProps;
  image9: ImageProps;
  image10: ImageProps;
  image11: ImageProps;
  image12: ImageProps;
  image13: ImageProps;
  image14: ImageProps;
  image15: ImageProps;
  image16: ImageProps;
  image17: ImageProps;
  image18: ImageProps;
  image19: ImageProps;
  image20: ImageProps;
  image21: ImageProps;
  image22: ImageProps;
  image23: ImageProps;
  image24: ImageProps;
};

export type Header78Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Header78 = (props: Header78Props) => {
  const {
    heading,
    description,
    buttons,
    image1,
    image2,
    image3,
    image4,
    image5,
    image6,
    image7,
    image8,
    image9,
    image10,
    image11,
    image12,
    image13,
    image14,
    image15,
    image16,
    image17,
    image18,
    image19,
    image20,
    image21,
    image22,
    image23,
    image24,
  } = {
    ...Header78Defaults,
    ...props,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container flex flex-col items-center">
        <div className="mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
          <h1 className="mb-5 text-h1 font-bold md:mb-6">{heading}</h1>
          <p className="text-medium">{description}</p>
          <div className="mt-6 flex items-center justify-center gap-x-4 md:mt-8">
            {buttons.map((button, index) => (
              <Button key={index} {...button}>
                {button.title}
              </Button>
            ))}
          </div>
        </div>

        <div className="flex w-screen justify-start overflow-hidden">
          <div className="grid shrink-0 grid-cols-1 gap-y-4">
            <div className="grid w-full animate-marquee-top auto-cols-fr grid-cols-2 gap-4 self-center">
              <div className="grid w-full grid-flow-col gap-4">
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image1.src}
                    alt={image1.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image2.src}
                    alt={image2.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image3.src}
                    alt={image3.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image4.src}
                    alt={image4.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image5.src}
                    alt={image5.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image6.src}
                    alt={image6.alt}
                  />
                </div>
              </div>
              <div className="grid w-full grid-flow-col gap-4">
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image7.src}
                    alt={image7.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image8.src}
                    alt={image8.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image9.src}
                    alt={image9.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image10.src}
                    alt={image10.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image11.src}
                    alt={image11.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image12.src}
                    alt={image12.alt}
                  />
                </div>
              </div>
            </div>
            <div className="grid w-full animate-marquee-bottom grid-cols-2 gap-4 self-center">
              <div className="grid w-full grid-flow-col gap-4">
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image13.src}
                    alt={image13.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image14.src}
                    alt={image14.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image15.src}
                    alt={image15.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image16.src}
                    alt={image16.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image17.src}
                    alt={image17.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image18.src}
                    alt={image18.alt}
                  />
                </div>
              </div>
              <div className="grid w-full grid-flow-col gap-4">
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image19.src}
                    alt={image19.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image20.src}
                    alt={image20.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image21.src}
                    alt={image21.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image22.src}
                    alt={image22.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image23.src}
                    alt={image23.alt}
                  />
                </div>
                <div className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
                  <img
                    className="absolute inset-0 size-full rounded-image object-cover"
                    src={image24.src}
                    alt={image24.alt}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export const Header78Defaults: Props = {
  heading: "Medium length hero heading goes here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
  buttons: [{ title: "Button" }, { title: "Button", variant: "secondary" }],
  image1: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 1",
  },
  image2: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 2",
  },
  image3: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 3",
  },
  image4: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 4",
  },
  image5: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 5",
  },
  image6: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 6",
  },
  image7: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 7",
  },
  image8: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 8",
  },
  image9: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 9",
  },
  image10: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 10",
  },
  image11: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 11",
  },
  image12: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 12",
  },
  image13: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 13",
  },
  image14: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 14",
  },
  image15: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 15",
  },
  image16: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 16",
  },
  image17: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 17",
  },
  image18: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 18",
  },
  image19: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 19",
  },
  image20: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 20",
  },
  image21: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 21",
  },
  image22: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 22",
  },
  image23: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 23",
  },
  image24: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 24",
  },
};