Doctor Profile Block
Practitioner profile: portrait, credentials list, treatment philosophy in first person, licence line.
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build a practitioner profile section that reads as a person, not a brochure.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion.
LAYOUT
Layout
5fr portrait / 7fr text on desktop, stacked on mobile. Text column: name (H2) + role line, two short philosophy paragraphs (first person where the doctor is the actor), credentials list with check icons (licence number, training, languages), signature-style quote at the bottom separated by a hairline.
TYPOGRAPHY
Typography
Name: 2.25rem/600 display font. Role: 1rem uppercase tracking wide in accent. Body: 1.05rem leading 1.7. Quote: 1.25rem italic display font.
COLOR TOKENS
Color Tokens
--background: 0 0% 100%; --foreground: 160 25% 12%; --primary: 158 45% 28%; --accent: 38 70% 52%; --muted-foreground: 160 10% 38%; --border: 40 15% 88%.
SPACING
Spacing
Section padding 5rem/3.5rem; paragraph gap 1rem; credentials gap 0.75rem; quote margin-top 2rem.
ANIMATION
Animation
Portrait parallax-free fade-in; credentials stagger in on view (0.05s steps). Reduced motion safe.
RESPONSIVE
Responsive
Portrait aspect 4/3 on mobile, full height on desktop; credentials become one column.
SAMPLE COPY
Sample Copy
Name: "Dr. Sarudha Fan"; Role: "TCM Practitioner · Licence พจ.1714"
Philosophy: "I start every first visit with questions, not needles. The pattern behind the symptom decides the treatment — two people with the same pain rarely get the same points."
Credentials: "Licensed TCM practitioner in Thailand (พจ.1714)"; "Acupuncture & herbal medicine"; "Consultations in Thai, English and Chinese".
Quote: "One person, one formula. Nothing here is copy-paste."