/* Features page entry */

function App() {
  usePageBoot();
  return (
    <>
      <Nav page="features"/>
      <PageHeader
        eyebrow="Features"
        title={<>Every feature.<br/><span style={{
          background:'linear-gradient(90deg, #7b7af4, #a8a6ff, #ff7fb6)',
          WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text'
        }}>Tagged by tier.</span></>}
        sub="The whole product, broken down. Pick a filter to see what's in your tier — or browse the lot."
      />
      <FeaturesCatalog/>
      <FinalCTA
        headline={<>Free to start. <span style={{
          background:'linear-gradient(90deg, #7b7af4, #ff7fb6)',
          WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text'
        }}>Forever.</span></>}
        sub="Download free, try the calculator, upgrade only if it earns its keep."
      />
      <Footer/>
    </>
  );
}

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