Build a Stripe-style pricing page for a payments product called "Checkout".
STYLE
- #f6f9fc canvas, white cards, hairline #e6ebf1 borders, 10px radii
- Blurple (#635bff) active nav + blurred gradient blobs; near-black #0a2540 type
- Clean sans, tabular numerals for fees
LAYOUT
- Nav: "Ledgerline" wordmark; links Pricing (on) / Docs / Support; "Sign in"
- Hero with two blurred gradient blobs (blurple + cyan): "Pricing built for businesses of any size"
- "Pay as you go" card: big "2.9% + 30¢ per transaction" with the line "Integrated per-transaction pricing with no hidden fees."
- Fee table rows: Payments 2.9% + 30¢ (Standard), International cards +1.5% (Add-on); tall adds Invoicing 0.4% (Per paid invoice), Volume discounts Custom (Contact sales)
COMPONENTS
- Nav: wordmark, three links, Sign in
- Hero: headline over two blurred gradient blobs
- Rate card: 2.9% + 30¢ per transaction with a one-line explanation
- Fee table: per-product rows with fees and tags
INTERACTION
- Blobs drift slowly; fees are real selectable text; rows highlight on hover.
TECHNICAL
- React, Tailwind CSS, shadcn/ui