import { Heading } from "@/components/typography";

export default function Headings() {
  return (
    <div className="flex flex-col gap-4">
      <Heading as="h1" size="hero">
        Video ads that sell.
      </Heading>
      <Heading size="headline">Section headline</Heading>
      <Heading as="h3" size="title-3">
        Block title
      </Heading>
      <Heading as="h4" size="title-5">
        Card title
      </Heading>
    </div>
  );
}

import { Text } from "@/components/typography";

export default function TextTones() {
  return (
    <div className="flex max-w-xl flex-col gap-3">
      <Text size="intro">An intro paragraph under a headline.</Text>
      <Text>Body text in the default label color.</Text>
      <Text tone="secondary">Secondary text for supporting copy.</Text>
      <Text size="footnote" tone="tertiary">
        Footnotes and reassurances · No contracts · Cancel anytime
      </Text>
    </div>
  );
}

import { IconWord } from "@/components/media/headline-icon";
import { HeadlineMuted, SectionHeader } from "@/components/shared/section-header";

export default function SectionHeaderExample() {
  return (
    <SectionHeader
      eyebrow="Pricing"
      description="One plan, every format. Pause or cancel anytime."
      className="mb-0 md:mb-0"
    >
      <HeadlineMuted block>
        One flat <IconWord icon={{ emoji: "receipt" }} after="fee." />
      </HeadlineMuted>{" "}
      Unlimited requests.
    </SectionHeader>
  );
}