Layout 367

import { ChevronRight, RelumeIcon } from "relume-icons";

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

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

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

type CardBaseProps = BaseProps & {
  tagline: string;
  image: ImageProps;
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  card: CardBaseProps;
  sections: BaseProps[];
};

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

export const Layout367 = (props: Layout367Props) => {
  const { tagline, heading, description, card, sections } = {
    ...Layout367Defaults,
    ...props,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-12 md:mb-18 lg:mb-20">
          <div className="mx-auto max-w-lg text-center">
            <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>
        </div>
        <div className="grid grid-cols-1 gap-6 md:gap-8">
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8">
            {sections.map((section, index) => (
              <Card key={index} className="flex flex-col">
                <div className="flex flex-col justify-center p-6 md:p-8 lg:p-12">
                  <div>
                    <div className="mb-5 md:mb-6">
                      <RelumeIcon className="size-12 text-scheme-text" />
                    </div>
                    <h3 className="mb-5 text-h3 font-bold md:mb-6">{section.heading}</h3>
                    <p>{section.description}</p>
                  </div>
                  <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>
              </Card>
            ))}
            <Card className="flex flex-col md:col-span-2 md:row-span-2 lg:col-start-2 lg:col-end-3 lg:row-start-1 lg:row-end-3">
              <div className="flex flex-1 flex-col justify-center p-6 md:p-8 lg:p-12">
                <div>
                  <p className="mb-2 text-small font-semibold">{card.tagline}</p>
                  <h3 className="mb-5 text-h3 font-bold md:mb-6">{card.heading}</h3>
                  <p>{card.description}</p>
                </div>
                <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
                  {card.buttons.map((button, index) => (
                    <Button key={index} {...button}>
                      {button.title}
                    </Button>
                  ))}
                </div>
              </div>
              <div>
                <img src={card.image.src} alt={card.image.alt} className="size-full object-cover" />
              </div>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
};

export const Layout367Defaults: Props = {
  tagline: "Tagline",
  heading: "Short heading goes here",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  card: {
    tagline: "Tagline",
    image: {
      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
      alt: "Relume placeholder image",
    },
    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" },
      {
        title: "Button",
        variant: "link",
        size: "link",
        iconRight: <ChevronRight className="text-scheme-text" />,
      },
    ],
  },
  sections: [
    {
      heading: "Short heading here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
      buttons: [
        { title: "Button", variant: "secondary" },
        {
          title: "Button",
          variant: "link",
          size: "link",
          iconRight: <ChevronRight className="text-scheme-text" />,
        },
      ],
    },
    {
      heading: "Short heading here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
      buttons: [
        { title: "Button", variant: "secondary" },
        {
          title: "Button",
          variant: "link",
          size: "link",
          iconRight: <ChevronRight className="text-scheme-text" />,
        },
      ],
    },
  ],
};