Clinic Trust Hero
Medical trust hero: one-line promise, dual CTA, licence badge and doctor portrait for a local clinic homepage.
Component code: ClinicHero.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
You are a senior front-end engineer and visual designer building a trust-first hero for a local medical clinic.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion. No other UI libraries.
LAYOUT
Layout
Two-column grid on desktop (7fr copy / 5fr portrait), single column on mobile with portrait after the CTA row. Copy block: eyebrow, H1, one-sentence subhead, CTA row, trust row (licence badge + rating + years). Portrait in a rounded-3xl frame with a soft offset ring.
TYPOGRAPHY
Typography
Font: "Fraunces" for display, "Inter" for body (self-hosted, font-display: swap). H1: clamp(2.4rem, 5vw, 4rem), weight 600, leading 1.05. Subhead: 1.125rem, leading 1.6, muted. Eyebrow: 0.8rem uppercase tracking 0.18em — the eyebrow must never restate the H1.
COLOR TOKENS
Color Tokens
--background: 40 33% 98%; --foreground: 160 25% 12%; --primary: 158 45% 28%; --primary-foreground: 0 0% 100%; --accent: 38 70% 52%; --muted: 40 20% 92%; --muted-foreground: 160 10% 38%; --ring: 158 45% 28%.
SPACING
Spacing
8pt rhythm. Section padding: 6rem desktop / 4rem mobile. Container max-w-6xl, px-6. Gap between copy elements: 1.5rem; trust row gap 2rem.
ANIMATION
Animation
Framer Motion: copy fades/slides up in stagger (0.08s steps, 0.5s, easeOut). Portrait scales from 0.98 with a 0.6s ease. Respect prefers-reduced-motion: no transforms, opacity only.
RESPONSIVE
Responsive
<md: single column, H1 left-aligned, CTA buttons full-width stacked, trust row wraps to two lines, portrait aspect 4/3 crop.
SAMPLE COPY
Sample Copy
Eyebrow: "Traditional Chinese Medicine · Chiang Mai"
H1: "Care that starts with listening."
Subhead: "Acupuncture and herbal medicine, prescribed after a full consultation — never a package sold off a shelf."
Primary CTA: "Book a consultation"; Secondary: "See treatments & prices"
Trust row: "Licensed practitioner พจ.1714" · "★★★★★ 5.0 on Google" · "Since 2023"