Header Section 1

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

type Props = {
  taglineText?: string
  title?: string
  description?: string
}

const defaultProps = {
  taglineText: "Header section 1",
  title: "Header section title",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum hendrerit ex vitae sodales.",
}

export function HeaderSection1({
  taglineText = defaultProps.taglineText,
  title = defaultProps.title,
  description = defaultProps.description,
}: Props) {
  return (
    <section
      className="bg-background"
      aria-labelledby="header-section-1-heading"
    >
      <div className="wrapper">
        <div className="mx-auto flex max-w-xl flex-col items-center text-center">
          <div className="tagline">{taglineText}</div>
          <h1
            id="header-section-1-heading"
            className="heading-xl"
            aria-describedby="header-section-1-description"
          >
            {title}
          </h1>
          <p id="header-section-1-description" className="paragraph max-w-none">
            {description}
          </p>
        </div>
      </div>
    </section>
  )
}