/* Pricing page entry */

function App() {
  usePageBoot();
  return (
    <>
      <Nav page="pricing"/>
      <PageHeader
        eyebrow="Pricing"
        title={<>Pay for the tools<br/><span style={{
          background:'linear-gradient(90deg, #7b7af4, #a8a6ff, #ff7fb6)',
          WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text'
        }}>you'll actually use.</span></>}
        sub="Three tiers. Cancel any time. Yearly saves you about two months."
      />
      <Pricing/>
      <Compare/>
      <FinalCTA
        headline={<>Start <span style={{
          background:'linear-gradient(90deg, #7b7af4, #ff7fb6)',
          WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text'
        }}>free</span>.</>}
        sub="No credit card. Upgrade only when the app has paid for itself."
      />
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);