CTA 39

<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
  <div class="container">
    <div class="grid auto-cols-fr grid-cols-1 border border-border-primary lg:grid-cols-2">
      <div class="flex flex-col justify-center p-8 md:p-12">
        <h2 class="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
          Medium length heading goes here
        </h2>
        <p class="md:text-md">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
          elementum tristique.
        </p>
        <div class="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
          <button
            class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary bg-background-alternative text-text-alternative px-6 py-3"
            title="Button"
          >
            Button</button
          ><button
            class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3"
            title="Button"
          >
            Button
          </button>
        </div>
      </div>
      <div class="flex items-center justify-center">
        <img
          src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape4x3.svg"
          class="w-full object-cover"
          alt="Relume placeholder image"
        />
      </div>
    </div>
  </div>
</section>

import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";

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

type Props = {
  heading: string;
  description: string;
  buttons: ButtonProps[];
  image: ImageProps;
};

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

export const Cta39 = (props: Cta39Props) => {
  const { heading, description, buttons, image } = {
    ...Cta39Defaults,
    ...props,
  };
  return (
    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="grid auto-cols-fr grid-cols-1 border border-border-primary lg:grid-cols-2">
          <div className="flex flex-col justify-center p-8 md:p-12">
            <h2 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h2>
            <p className="md:text-md">{description}</p>
            <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
              {buttons.map((button, index) => (
                <Button key={index} {...button}>
                  {button.title}
                </Button>
              ))}
            </div>
          </div>
          <div className="flex items-center justify-center">
            <img src={image.src} className="w-full object-cover" alt={image.alt} />
          </div>
        </div>
      </div>
    </section>
  );
};

export const Cta39Defaults: Props = {
  heading: "Medium length heading goes here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
  buttons: [
    { title: "Button", variant: "primary" },
    { title: "Button", variant: "secondary" },
  ],
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape4x3.svg",
    alt: "Relume placeholder image",
  },
};