Layout 611

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

type ListItem = {
  number: string;
  heading: string;
  description: string;
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  listItems1: ListItem[];
  listItems2: ListItem[];
  buttons: ButtonProps[];
};

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

export const Layout611 = (props: Layout611Props) => {
  const { tagline, heading, description, listItems1, listItems2, buttons } = {
    ...props,
    ...Layout611Defaults,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-12 max-w-lg md:mb-18 lg:mb-20">
          <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
          <h2 className="mb-5 text-h2 font-bold md:mb-6">{heading}</h2>
          <p className="text-medium">{description}</p>
        </div>

        <ListItemGroup items={listItems1} />
        <ListItemGroup items={listItems2} />

        <div className="mt-8 flex flex-wrap gap-4 md:mt-10 lg:mt-12">
          {buttons.map((button, index) => (
            <Button key={index} {...button}>
              {button.title}
            </Button>
          ))}
        </div>
      </div>
    </section>
  );
};

const ListItemGroup = ({ items }: { items: ListItem[] }) => (
  <div className="grid auto-cols-fr grid-cols-1 md:grid-cols-2 md:gap-16 md:border-t md:border-scheme-border md:py-8 lg:py-12">
    {items.map((item, index) => (
      <div
        key={index}
        className="flex w-full gap-6 border-t border-scheme-border py-6 md:gap-8 md:border-none md:py-0"
      >
        <div className="inline-block flex-none self-start">
          <h3 className="text-h2 font-bold">{item.number}</h3>
        </div>
        <div>
          <div className="mb-3 md:mb-4">
            <h3 className="text-h4 font-bold">{item.heading}</h3>
          </div>
          <p>{item.description}</p>
        </div>
      </div>
    ))}
  </div>
);

export const Layout611Defaults: Props = {
  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.",
  listItems1: [
    {
      number: "01",
      heading: "Short 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.",
    },
    {
      number: "02",
      heading: "Short 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.",
    },
  ],
  listItems2: [
    {
      number: "03",
      heading: "Short 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.",
    },
    {
      number: "04",
      heading: "Short 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",
    },
    {
      title: "Button",
      variant: "link",
      size: "link",
      iconRight: <ChevronRight className="text-scheme-text" />,
    },
  ],
};