Layout 123

import React from "react";
import { Button, type ButtonProps } from "@/components/ui/button";
import { ChevronRight } from "relume-icons";

type SectionProps = {
  tagline: string;
  heading: string;
  description: string;
  buttons: ButtonProps[];
};

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

type Props = {
  sections: SectionProps[];
  image: ImageProps;
};

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

export const Layout123: React.FC<Layout123Props> = (props: Layout123Props) => {
  const { sections, image } = { ...Layout123Defaults, ...props };

  return (
    <section className="relative px-[5%] py-16 md:py-24 lg:py-28">
      <div className="containe relative z-10">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-2 md:gap-x-8 lg:gap-16">
          {sections.map((section, index) => (
            <div key={index}>
              <p className="mb-3 font-semibold text-white md:mb-4">{section.tagline}</p>
              <h3 className="mb-5 text-h3 font-bold text-white md:mb-6">{section.heading}</h3>
              <p className="mb-6 text-regular text-white md:mb-8">{section.description}</p>
              <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
                {section.buttons.map((button, index) => (
                  <Button key={index} {...button}>
                    {button.title}
                  </Button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="absolute inset-0 z-0">
        <img src={image.src} className="size-full object-cover" alt={image.alt} />
        <div className="absolute inset-0 bg-neutral-darkest/50" />
      </div>
    </section>
  );
};

export const Layout123Defaults: Props = {
  sections: [
    {
      tagline: "Tagline",
      heading: "Medium length section 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", variant: "secondary-alt" },
        {
          title: "Button",
          variant: "link-alt",
          size: "link",
          iconRight: <ChevronRight className="text-white" />,
        },
      ],
    },
    {
      tagline: "Tagline",
      heading: "Medium length section 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", variant: "secondary-alt" },
        {
          title: "Button",
          variant: "link-alt",
          size: "link",
          iconRight: <ChevronRight className="text-white" />,
        },
      ],
    },
  ],
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Placeholder image",
  },
};