Hero

import { Heading } from "@/components/heading/heading"
import {
  Hero,
  HeroActions,
  HeroContainer,
  HeroContent,
} from "@/components/hero/hero"
import { Text } from "@/components/text/text"
import { buttonVariants } from "@/components/ui/button"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Pages that start finished.",
  description:
    "Heroes, pricing, features and footers built on the same parts, so the first draft already looks like the last.",
  primary: "Browse the blocks",
  secondary: "Read the docs",
} as const

/** Hero in its stacked form: headline, description and two actions. */
export default function HeroDemo() {
  return (
    <Hero className="min-h-0 w-full py-16">
      <HeroContainer>
        <HeroContent>
          <Heading>{COPY.title}</Heading>
          <Text size="lg">{COPY.description}</Text>
          <HeroActions>
            <a href="#" className={buttonVariants({ size: "lg" })}>
              {COPY.primary}
            </a>
            <a
              href="#"
              className={buttonVariants({ variant: "outline", size: "lg" })}
            >
              {COPY.secondary}
            </a>
          </HeroActions>
        </HeroContent>
      </HeroContainer>
    </Hero>
  )
}

Hero
└─ HeroContainer
   └─ HeroContent
      └─ HeroActions