const styles = { root: { fontFamily: "'Inter', system-ui, sans-serif", backgroundColor: '#ffffff', minHeight: '100vh', padding: '48px 40px' }, inner: { maxWidth: '800px', margin: '0 auto' }, header: { marginBottom: '48px', paddingBottom: '32px', borderBottom: '1px solid #e5e5e5' }, eyebrow: { fontSize: '11px', fontWeight: '600', color: '#a3a3a3', letterSpacing: '0.08em', textTransform: 'uppercase', margin: '0 0 12px 0' }, title: { fontSize: '22px', fontWeight: '600', color: '#0a0a0a', margin: '0 0 6px 0', letterSpacing: '-0.02em' }, subtitle: { fontSize: '14px', color: '#737373', margin: '0' }, statsGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1px', backgroundColor: '#e5e5e5', border: '1px solid #e5e5e5', borderRadius: '10px', overflow: 'hidden', marginBottom: '40px' }, statCell: { backgroundColor: '#ffffff', padding: '24px' }, statLabel: { fontSize: '12px', color: '#a3a3a3', margin: '0 0 16px 0', fontWeight: '500' }, statValue: { fontSize: '26px', fontWeight: '600', color: '#0a0a0a', margin: '0 0 6px 0', letterSpacing: '-0.03em' }, statMeta: { fontSize: '12px', color: '#525252', margin: '0' }, section: { marginBottom: '40px' }, sectionHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '16px' }, sectionTitle: { fontSize: '14px', fontWeight: '600', color: '#0a0a0a', margin: '0', letterSpacing: '-0.01em' }, btnOutline: { fontSize: '12px', fontWeight: '500', color: '#0a0a0a', backgroundColor: 'transparent', border: '1px solid #d4d4d4', borderRadius: '6px', padding: '5px 12px', cursor: 'pointer' }, table: { border: '1px solid #e5e5e5', borderRadius: '10px', overflow: 'hidden' }, row: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1px solid #f5f5f5' }, rowLast: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px' }, rowName: { fontSize: '14px', fontWeight: '600', color: '#0a0a0a', margin: '0 0 2px 0' }, rowMeta: { fontSize: '12px', color: '#a3a3a3', margin: '0' }, badge: { fontSize: '11px', fontWeight: '500', color: '#525252', backgroundColor: '#f5f5f5', padding: '3px 10px', borderRadius: '4px', minWidth: '90px', textAlign: 'center', display: 'inline-block' }, badgeDark: { fontSize: '11px', fontWeight: '500', color: '#ffffff', backgroundColor: '#0a0a0a', padding: '3px 10px', borderRadius: '4px', minWidth: '90px', textAlign: 'center', display: 'inline-block' }, actions: { display: 'flex', gap: '12px' }, btnPrimary: { flex: 1, padding: '11px 0', backgroundColor: '#0a0a0a', color: '#ffffff', border: 'none', borderRadius: '8px', fontSize: '13px', fontWeight: '500', cursor: 'pointer' }, btnSecondary: { flex: 1, padding: '11px 0', backgroundColor: '#ffffff', color: '#0a0a0a', border: '1px solid #d4d4d4', borderRadius: '8px', fontSize: '13px', fontWeight: '500', cursor: 'pointer' }, }; export default function Dashboard() { return ( <div style={styles.root}> <div style={styles.inner}> <div style={styles.header}> <p style={styles.eyebrow}>Workspace</p> <h1 style={styles.title}>Overview</h1> <p style={styles.subtitle}>May 14, 2026</p> </div> <div style={styles.statsGrid}> <div style={styles.statCell}> <p style={styles.statLabel}>Revenue</p> <p style={styles.statValue}>$48,295</p> <p style={styles.statMeta}>+12.5% this month</p> </div> <div style={styles.statCell}> <p style={styles.statLabel}>Active users</p> <p style={styles.statValue}>3,842</p> <p style={styles.statMeta}>+8.1% this month</p> </div> <div style={styles.statCell}> <p style={styles.statLabel}>Open issues</p> <p style={styles.statValue}>14</p> <p style={styles.statMeta}>3 added yesterday</p> </div> </div> <div style={styles.section}> <div style={styles.sectionHeader}> <h2 style={styles.sectionTitle}>Projects</h2> <button style={styles.btnOutline}>New</button> </div> <div style={styles.table}> <div style={styles.row}> <div> <p style={styles.rowName}>Layers Design System</p> <p style={styles.rowMeta}>Updated 2 hours ago</p> </div> <span style={styles.badge}>In progress</span> </div> <div style={styles.row}> <div> <p style={styles.rowName}>Analytics Dashboard</p> <p style={styles.rowMeta}>Updated yesterday</p> </div> <span style={styles.badgeDark}>Shipped</span> </div> <div style={styles.rowLast}> <div> <p style={styles.rowName}>Brand Refresh</p> <p style={styles.rowMeta}>Updated 3 days ago</p> </div> <span style={styles.badge}>Review</span> </div> </div> </div> <div style={styles.actions}> <button style={styles.btnPrimary}>View all projects</button> <button style={styles.btnSecondary}>Download report</button> </div> </div> </div> ); }