Hero Section 1

components/pro-blocks/landing-page/hero-sections/hero-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 }

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

const defaultProps = {
  taglineText: "Hero section 1",
  title: "Solve your user's main problem",
  description:
    "Follow with one or two sentences that expand on your value proposition and focus on key benefits.",
  primaryCta: { label: "Get started", href: "#" },
  secondaryCta: { label: "Learn more", href: "#" },
  media: {
    type: "image",
    src: "/image.png",
    alt: "Hero section visual",
    aspectRatio: 1 / 1,
    sizes: "(min-width: 1024px) 512px, 100vw",
  },
} satisfies {
  taglineText: string
  title: string
  description: string
  primaryCta: Cta
  secondaryCta: Cta
  media: MediaProps
}

export function HeroSection1({
  taglineText = defaultProps.taglineText,
  title = defaultProps.title,
  description = defaultProps.description,
  primaryCta = defaultProps.primaryCta,
  secondaryCta = defaultProps.secondaryCta,
  media = defaultProps.media,
}: Props) {
  return (
    <section aria-labelledby="hero-section-1-heading" className="bg-background">
      <div className="wrapper">
        <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
          <div className="flex flex-col">
            <div className="tagline">{taglineText}</div>
            <h1 id="hero-section-1-heading" className="heading-xl">
              {title}
            </h1>
            <p className="paragraph mb-6 sm:mb-8">{description}</p>
            <div className="flex gap-2">
              <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="w-full rounded-2xl" />
        </div>
      </div>
    </section>
  )
}