diff --git a/src/components/tiles/PatientSummaryTile.tsx b/src/components/tiles/PatientSummaryTile.tsx index 9e77767..b9bdaee 100644 --- a/src/components/tiles/PatientSummaryTile.tsx +++ b/src/components/tiles/PatientSummaryTile.tsx @@ -3,7 +3,45 @@ import { Card, CardHeader } from '../Card' import { personalStatement } from '@/data/profile' export function PatientSummaryTile() { - const bodyStyles: React.CSSProperties = { + // Key statistics from CV_v4.md + const highlights = [ + { label: '9+ Years', sublabel: 'Professional Experience' }, + { label: '1.2M', sublabel: 'Population Served' }, + { label: '£220M', sublabel: 'Budget Managed' }, + { label: '£14.6M+', sublabel: 'Savings Identified' }, + ] + + const highlightStripStyles: React.CSSProperties = { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', + gap: '12px', + marginBottom: '20px', + paddingBottom: '20px', + borderBottom: '1px solid var(--border-light)', + } + + const highlightItemStyles: React.CSSProperties = { + display: 'flex', + flexDirection: 'column', + gap: '2px', + } + + const highlightValueStyles: React.CSSProperties = { + fontSize: '18px', + fontWeight: 700, + color: 'var(--accent)', + fontFamily: 'var(--font-ui)', + } + + const highlightLabelStyles: React.CSSProperties = { + fontSize: '11px', + fontWeight: 500, + color: 'var(--text-secondary)', + textTransform: 'uppercase', + letterSpacing: '0.02em', + } + + const profileTextStyles: React.CSSProperties = { fontSize: '13px', lineHeight: '1.6', color: 'var(--text-primary)', @@ -12,7 +50,19 @@ export function PatientSummaryTile() { return ( -
{personalStatement}
+ + {/* Highlight strip with key stats */} +
+ {highlights.map((highlight, idx) => ( +
+
{highlight.label}
+
{highlight.sublabel}
+
+ ))} +
+ + {/* Profile text with improved readability */} +
{personalStatement}
) }