Transparent Pricing Table
Clinic price list grouped by category: service, what's included free, price — no hidden fees framing.
Component code: PricingTable.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build a price list a patient can fully understand in 20 seconds; transparency is the design goal.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion (entrance only).
LAYOUT
Layout
Grouped tables by category (Consultation / Acupuncture / Bodywork / Herbs). Each group: small caps heading, rows of service name + inclusion note left, price right-aligned tabular numbers, hairline separators. A footnote row states what is always free and that prices are in THB. On mobile the table stays a table — never collapse into cards.
TYPOGRAPHY
Typography
Group heading: 0.85rem uppercase tracking 0.14em muted. Row: 1rem; inclusion note 0.875rem muted on second line. Price: 1rem/600 tabular-nums.
COLOR TOKENS
Color Tokens
--background: 0 0% 100%; --foreground: 160 25% 12%; --muted-foreground: 160 10% 38%; --border: 40 15% 88%; --primary: 158 45% 28%.
SPACING
Spacing
Group margin-top 2.5rem; row padding 0.9rem 0; container max-w-3xl (narrower than page grid for readability).
ANIMATION
Animation
Groups fade-up staggered on view. No hover effects on rows except a faint background tint. Reduced motion safe.
RESPONSIVE
Responsive
Table holds at 360px: name column flexible, price column fixed; inclusion note may wrap to two lines.
SAMPLE COPY
Sample Copy
"Consultation — ฿150"; "Balance acupuncture (per side) — includes electroacupuncture + infrared — ฿550"; "Facial acupuncture — includes LED therapy — ฿590"; "Herbal powder, personalised — per week — ฿650–950". Footnote: "All prices in Thai baht. First consultation fee is waived when treatment starts the same day."