Header 77

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;
};

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

export const Header77 = (props: Header77Props) => {
  const {
    heading,
    description,
    buttons,
    image1,
    image2,
    image3,
    image4,
    image5,
    image6,
    image7,
    image8,
    image9,
    image10,
    image11,
    image12,
  } = {
    ...Header77Defaults,
    ...props,
  };
  return (
    <section className="grid grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:grid-cols-2 lg:pt-0">
      <div className="mx-[5%] sm:max-w-md md:justify-self-start lg:mr-20 lg:ml-[5vw] lg:justify-self-end">
        <h1 className="mb-5 text-h1 font-bold md:mb-6">{heading}</h1>
        <p className="text-medium">{description}</p>
        <div className="mt-6 flex flex-wrap gap-4 md:mt-8">
          {buttons.map((button, index) => (
            <Button key={index} {...button}>
              {button.title}
            </Button>
          ))}
        </div>
      </div>
      <div className="flex items-center gap-4 overflow-hidden bg-scheme-foreground py-8 md:py-16 lg:h-screen">
        <div className="grid shrink-0 grid-cols-1 gap-y-4">
          <div className="ml-[-8.5%] grid w-full animate-marquee-horizontally 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>
            <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={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>
          <div className="grid w-full animate-marquee-horizontally 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={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>
            <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={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>
      </div>
    </section>
  );
};

export const Header77Defaults: 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",
  },
};