Feature Section 1

components/pro-blocks/landing-page/feature-sections/feature-section-1.tsx

import { buttonVariants } from "@/components/ui/button"
import { Media, type MediaProps } from "@/components/ui/media"
import Link from "next/link"

type Cta = { label: string; href: string }

const defaultProps = {
  taglineText: "Feature section 1",
  title: "Show your solution's impact on user success",
  description:
    "Explain in one or two concise sentences how your solution transforms users' challenges into positive outcomes. Keep it clear and compelling.",
  primaryCta: { label: "Get access", href: "#" },
  secondaryCta: { label: "Learn more", href: "#" },
  media: {
    type: "image",
    src: "/image.png",
    alt: "Feature section image",
    width: 1200,
    height: 900,
  },
} satisfies {
  taglineText: string
  title: string
  description: string
  primaryCta: Cta
  secondaryCta: Cta
  media: MediaProps
}

type Props = {
  taglineText?: string
  title?: string
  description?: string
  primaryCta?: Cta
  secondaryCta?: Cta
  media?: MediaProps
}

export function FeatureSection1({
  taglineText = defaultProps.taglineText,
  title = defaultProps.title,
  description = defaultProps.description,
  primaryCta = defaultProps.primaryCta,
  secondaryCta = defaultProps.secondaryCta,
  media = defaultProps.media,
}: Props) {
  return (
    <section className="bg-background">
      <div className="wrapper grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
        <div className="flex flex-1 flex-col gap-8">
          <div className="flex flex-col">
            <div className="tagline">{taglineText}</div>
            <h2 className="heading-lg">{title}</h2>
            <p className="paragraph">{description}</p>
          </div>
          <div className="flex w-full gap-2 md:w-auto">
            <Link
              href={primaryCta.href}
              className={buttonVariants()}
              data-slot="button"
              data-variant="default"
            >
              {primaryCta.label}
            </Link>
            <Link
              href={secondaryCta.href}
              className={buttonVariants({ variant: "outline" })}
              data-slot="button"
              data-variant="outline"
            >
              {secondaryCta.label}
            </Link>
          </div>
        </div>
        <Media
          {...media}
          className="aspect-[4/3] w-full rounded-2xl object-cover"
        />
      </div>
    </section>
  )
}