Pricing pages
Whole pricing pages: plans or a comparison table, features, questions and customer logos, between a header and a footer.
Last updated
Each example is a whole pricing page stacked from blocks: a header navigation, plans or a comparison table from Pricing sections whose heading is the page’s h1, then features, questions, customer quotes or logos and a call to action before the footer. The billing switches work without JS. Adding a page copies its blocks too. The page renders its own header, <main> and footer, so give it a layout without a <main>.
npx @ava-ui/apogee add pricing/pricing-page-01---
// src/pages/pricing.astro
import Layout from '../layouts/Layout.astro'
import Page from '../components/apogee/pages/pricing/PricingPage01.astro'
---
<Layout title="Pricing">
<Page />
</Layout>
Pricing page 01A large heading over three plan cards with two actions each, the first marked most popular. Then features with icons on grey, questions in a grid, a call to action with customer logos on the brand colour and a footer.
Pricing page 02A heading and annual switch on a tinted band over three plan cards on a striped ground. Then a call to action card, features with icons, customer logos, questions in a grid, a call to action on grey and a footer.
Pricing page 03A heading and billing switch on a brand band, with three plan cards overlapping it. Then features with icons on grey, questions in an accordion, a call to action with customer logos on grey and a footer.
Pricing page 04A centred heading and billing switch over three plan cards with two actions and a features panel. Then questions in an accordion, customer quotes, a call to action card and a footer on dark.
Pricing page 05A centred heading over a plan comparison table with grouped features and tooltips. Then questions in an accordion, customer logos, a call to action card and a footer on the brand colour.
Pricing page 06A banner on the brand colour, a heading over a plan comparison table with plan icons and the middle plan highlighted, a call to action with a screenshot, a call to action on grey and a footer on dark.
Pricing page 07A centred heading and billing switch over two wide plan cards with features in two columns. Then questions in an accordion, customer quotes, a call to action on the brand colour and a footer on dark.
Pricing page 08A centred heading and billing switch over three plan cards, the middle one with a banner. Then features under a screenshot, features beside a photo, questions in a grid, a call to action card on the brand colour and a footer.
Pricing page 09A banner on grey, a heading over three tinted plan panels with filled checks, questions in an accordion, a call to action with images, a call to action card and a footer on dark.
Pricing page 10A centred heading with actions over three grey plan cards with icons on their top edge. Then questions in a grid, a call to action with a screenshot and a footer.