Portfolio 17

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

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

type Project = {
  heading: string;
  description: string;
  image: ImageProps;
  button: ButtonProps;
};

type Props = {
  projects: Project[];
};

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

export const Portfolio17 = (props: Portfolio17Props) => {
  const { projects } = {
    ...Portfolio17Defaults,
    ...props,
  };

  return (
    <section>
      {projects.map((project, index) => (
        <div key={index} className="sticky top-0 flex h-screen items-center justify-center px-[5%]">
          <div className="absolute inset-0">
            <img
              src={project.image.src}
              alt={project.image.alt}
              className="size-full object-cover"
            />
            <span className="absolute inset-0 z-10 bg-neutral-darkest/50" />
          </div>
          <div className="relative z-20 mx-auto flex max-w-lg flex-col items-center text-center text-medium">
            <h2 className="text-h2 font-bold text-white">{project.heading}</h2>
            <p className="mt-5 text-white md:mt-6">{project.description}</p>
            <Button
              variant={project.button.variant}
              className="mt-6 h-12 text-regular text-white md:mt-8"
            >
              {project.button.title}
            </Button>
          </div>
        </div>
      ))}
    </section>
  );
};

export const Portfolio17Defaults: Props = {
  projects: [
    {
      heading: "Project name here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-1.svg",
        alt: "Relume placeholder image 1",
      },
      button: {
        title: "View project",
        variant: "secondary-alt",
      },
    },
    {
      heading: "Project name here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-2.svg",
        alt: "Relume placeholder image 2",
      },
      button: {
        title: "View project",
        variant: "secondary-alt",
      },
    },
    {
      heading: "Project name here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-3.svg",
        alt: "Relume placeholder image 3",
      },
      button: {
        title: "View project",
        variant: "secondary-alt",
      },
    },
  ],
};