AI 가격표 생성기.

Create a three-tier pricing section with Starter, Growth and Scale as equal-width cards in one row. Raise the Growth card, give it a ring border and a Most Popular badge. Above the cards, a segmented monthly/yearly toggle that swaps the price figure in place and reveals a two-months-free chip when yearly is active; hold the card height constant so nothing reflows on switch. Each card carries a plan name, a one-line note on who it is for, the price with its per-seat per-month unit, a primary button, and six feature rows listed in the same order in every card so the eye can compare across instead of reading down. Collapse to one column on mobile with the highlighted plan first.

Create a pricing comparison matrix: a header row of four plan columns and a left column of feature names grouped into labelled sections such as Core, Collaboration, Security and Support. Use a filled check for included, an em dash for absent, and a short value string wherever a plan has a numeric limit rather than a boolean. Pin the header row so plan names and CTAs stay visible while the reader scrolls the feature list, and highlight the recommended column its full height. Zebra-stripe rows to keep the eye on one line. On mobile, drop the matrix entirely and render one plan per collapsible panel rather than putting a wide table in a horizontal scroller.

Create a single-plan pricing section: one centred card with a max width of about 32rem holding the plan name, a large price figure, a monthly/yearly toggle inside the card, and an everything-included feature list laid out in two columns so the card stays short enough to read without scrolling. Add a primary Get started button, a muted no-credit-card-required line directly beneath it, and a small text link to contact sales for volume pricing. Above the card, one headline naming exactly who the plan is for. Stack the feature columns and keep the toggle full-width on mobile.

Create a usage-based pricing section: a range slider for monthly volume with tick labels at the tier boundaries, a live total that recomputes the price and the effective unit rate as the handle moves, and a plan name that changes as the volume crosses each threshold. Below the slider, a fixed list of what is included at every tier and one line on what happens on overage. Add a primary CTA plus a secondary Talk to sales link for volumes past the top of the range. Announce the computed total in an aria-live region and support arrow-key stepping, so keyboard and screen-reader users get the same feedback as a mouse drag.

Create a pricing section with two self-serve cards, Pro and Team, side by side with Team highlighted, followed by a full-width enterprise band beneath them. The band gets a tinted surface, a short heading, three inline value points covering SSO, audit logs and a named contact, and a Contact sales button where a price would be — so it never reads as a third card competing on price. Each card shows a monthly and yearly price with a per-seat unit, five feature rows in matching order, and a primary button. Stack all three blocks vertically on mobile with the band last.

Create a pricing section with audience tabs above the cards — Individuals, Teams and Education — where switching a tab swaps in a different set of plan names, prices and feature lists rather than filtering rows in place. Keep the monthly/yearly toggle on the same bar as the tabs so the two controls read as one control group, and preserve the toggle state across tab switches. Use real tab semantics with a tablist, arrow-key navigation and managed focus, and reflect the active tab in the URL so a link can point straight at the Teams view. Highlight exactly one plan inside each tab.