Layout 357

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

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

type Anchor = {
  url: string;
  number: string;
  title: string;
};

type Feature = {
  anchor: Anchor;
  tagline: string;
  heading: string;
  description: string;
  buttons: ButtonProps[];
  image: ImageProps;
};

type Props = {
  features: Feature[];
};

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

export const Layout357 = (props: Layout357Props) => {
  const { features } = {
    ...Layout357Defaults,
    ...props,
  };
  return (
    <section>
      <div className="sticky top-0">
        {features.map((feature, index) => (
          <React.Fragment key={index}>
            <div className="relative -top-32 h-0" />
            <div
              className={clsx(
                "relative border-t border-scheme-border bg-white pb-8 md:pb-14 lg:sticky lg:pb-0",
                { "top-0 lg:mb-48": index === 0 },
                { "lg:top-16 lg:-mt-32 lg:mb-32": index === 1 },
                { "lg:top-32 lg:-mt-16 lg:mb-16": index === 2 },
                { "lg:top-0 lg:mb-16": index === 3 },
              )}
            >
              <FeatureCard {...feature} />
            </div>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
};

const FeatureCard = (feature: Feature) => {
  return (
    <div className="px-[5%]">
      <div className="container">
        <a href={feature.anchor.url} className="flex h-16 w-full items-center underline">
          <span className="mr-5 text-medium font-semibold md:mr-6">{feature.anchor.number}</span>
          <h1 className="text-medium font-semibold">{feature.anchor.title}</h1>
        </a>
        <div className="py-8 md:py-10 lg:py-12">
          <div className="grid grid-cols-1 gap-y-12 md:items-center md:gap-x-12 lg:grid-cols-2 lg:gap-x-20">
            <div>
              <p className="mb-3 font-semibold md:mb-4">{feature.tagline}</p>
              <h2 className="mb-5 text-h2 font-bold md:mb-6">{feature.heading}</h2>
              <p className="text-medium">{feature.description}</p>
              <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
                {feature.buttons.map((button, index) => (
                  <Button key={index} {...button}>
                    {button.title}
                  </Button>
                ))}
              </div>
            </div>
            <div className="relative">
              <img
                src={feature.image.src}
                className="h-[25rem] w-full rounded-image object-cover sm:h-[30rem] lg:h-[60vh]"
                alt={feature.image.alt}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export const Layout357Defaults: Props = {
  features: [
    {
      anchor: {
        url: "#",
        number: "01",
        title: "Feature one",
      },
      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" },
        {
          title: "Button",
          variant: "link",
          size: "link",
          iconRight: <ChevronRight className="text-scheme-text" />,
        },
      ],
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-1.svg",
        alt: "Relume placeholder image 1",
      },
    },
    {
      anchor: {
        url: "#",
        number: "02",
        title: "Feature two",
      },
      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" },
        {
          title: "Button",
          variant: "link",
          size: "link",
          iconRight: <ChevronRight className="text-scheme-text" />,
        },
      ],
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-2.svg",
        alt: "Relume placeholder image 2",
      },
    },
    {
      anchor: {
        url: "#",
        number: "03",
        title: "Feature three",
      },
      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" },
        {
          title: "Button",
          variant: "link",
          size: "link",
          iconRight: <ChevronRight className="text-scheme-text" />,
        },
      ],
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-3.svg",
        alt: "Relume placeholder image 3",
      },
    },
    {
      anchor: {
        url: "#",
        number: "04",
        title: "Feature four",
      },
      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" },
        {
          title: "Button",
          variant: "link",
          size: "link",
          iconRight: <ChevronRight className="text-scheme-text" />,
        },
      ],
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-4.svg",
        alt: "Relume placeholder image 4",
      },
    },
  ],
};