hanzo.ai/components/marketing/Explainer.tsx

'use client'

import { YStack } from '@hanzo/gui'
import { Cta, Line, PageHeader, Section, Steps, TextLink } from '@hanzo/ui/marketing'
import { track } from '@hanzo/app/lib/tags'

/**
 * A product page in four short parts: what it is, who it is for, how it works
 * and what it costs. The one way in is the closing call the layout draws below
 * the page; the long version is a page of its own, linked once. The plan prices
 * are the catalog's and are never written here (scripts/audit-price-literals.mjs);
 * `price` says how the product is sold.
 */
export type ExplainerProps = {
  name: string
  title: string
  lede: string
  who: string
  steps: readonly { title: string; body: string }[]
  price: string
  more: { label: string; href: string }
  /** Whether a line to the plans follows the price. */
  plans?: boolean
}

const measure = 680

export default function Explainer({ name, title, lede, who, steps, price, more, plans }: ExplainerProps) {
  return (
    <YStack width="100%" pb={32}>
      <PageHeader
        eyebrow={name}
        title={title}
        lede={lede}
        actions={
          <Cta href="/login" onPress={() => track('cta_clicked', { page: name, cta: 'try_hanzo' })}>
            Try Hanzo
          </Cta>
        }
      />
      <Section title="Who it is for" measure={measure}>
        <Line render="p" m={0} tone="muted" size="lg">
          {who}
        </Line>
      </Section>
      <Section title="How it works" measure={measure}>
        <Steps steps={steps} />
      </Section>
      <Section title="Price" measure={measure}>
        <Line render="p" m={0} tone="muted" size="lg">
          {price}
        </Line>
        <Line render="p" m={0}>
          {plans ? (
            <>
              <TextLink href="/pricing">See the plans and rates</TextLink>
              {' · '}
            </>
          ) : null}
          <TextLink href={more.href}>{more.label}</TextLink>
        </Line>
      </Section>
    </YStack>
  )
}