Clinic Services Grid
Six-service card grid for a clinic: icon, name, one-line outcome, starting price, deep link per card.
Component code: ServicesGrid.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build a scannable services grid for a medical clinic where every card answers: what is it, who is it for, what does it cost.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion.
LAYOUT
Layout
Section header (eyebrow + H2 + one-line intro), then a 3-column card grid (2 on tablet, 1 on mobile). Card: line icon top, service name, one-line description, divider, footer row with "from ฿XXX" and a text link with arrow. Whole card is the link target.
TYPOGRAPHY
Typography
H2: 2rem/600. Card title: 1.125rem/600. Body: 0.95rem muted, leading 1.55. Price: 1rem/600 in primary.
COLOR TOKENS
Color Tokens
--background: 40 33% 98%; --card: 0 0% 100%; --foreground: 160 25% 12%; --primary: 158 45% 28%; --muted-foreground: 160 10% 38%; --border: 40 15% 88%; --accent: 38 70% 52%.
SPACING
Spacing
Grid gap 1.5rem. Card padding 1.75rem. Section padding 5rem/3.5rem.
ANIMATION
Animation
Cards fade-up on scroll into view (whileInView, once, stagger 0.06s). Hover: translateY(-4px), border picks up primary at 40%, arrow slides 2px right. Reduced motion: no transform.
RESPONSIVE
Responsive
<lg 2 cols, <sm 1 col; price footer never wraps.
SAMPLE COPY
Sample Copy
Cards: "Acupuncture — For pain, tension and internal balance — from ฿550"; "Facial acupuncture — Glow and lift, LED included — from ฿590"; "Cupping — Release deep back tension — from ฿350"; "Gua sha — Neck, shoulders and facial drainage — from ฿500"; "Herbal powder — A formula mixed for one person — from ฿650/wk"; "Ear seeds — Gentle, needle-free pressure points — ฿250".