danvics/pdf-quiz-generator
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

Fix landing page mobile responsiveness

Browse source 
- Feature cards: minmax(300px) → minmax(min(100%,280px)) to stack on mobile
- AI Scribe section: hardcoded 1fr 1fr → auto-fit responsive grid
- 6 icon boxes: hardcoded 1fr 1fr → auto-fit with 130px min
- Feature list: add overflow-wrap to prevent text overflow
- Contact form: name/email fields stack on narrow screens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Daniel 2026-04-05 01:26:33 +02:00
parent be7efd73d2
commit c60384d4b1
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/pages/LandingPage.jsx
View file

@ -100,7 +100,7 @@ function ContactForm() {
return (
<form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 200px), 1fr))', gap: 12 }}>
<div>
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, marginBottom: 5, color: 'var(--text-muted)' }}>Name</label>
<input
@ -413,7 +413,7 @@ export default function LandingPage() {
Built specifically for pediatric board prep and clinical learning.
</p>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: 20 }}>
{FEATURES.map((f, i) => (
<div key={i} className="card" style={{ padding: '24px', transition: 'transform 0.2s, box-shadow 0.2s' }}
onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.12)' }}
@ -429,7 +429,7 @@ export default function LandingPage() {
{/* ── AI Scribe section ──────────────────────────────────────────────── */}
<section style={{ background: 'var(--navbar-bg)', color: 'var(--navbar-fg)', padding: '80px 24px' }}>
<div style={{ maxWidth: 1000, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
<div style={{ maxWidth: 1000, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 40, alignItems: 'center' }}>
<div>
<div style={{ display: 'inline-block', background: 'rgba(96,165,250,0.15)', border: '1px solid rgba(96,165,250,0.3)', borderRadius: 20, padding: '4px 14px', fontSize: '0.78rem', fontWeight: 600, color: '#93c5fd', marginBottom: 20, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
Also from PedsHub
@ -442,7 +442,7 @@ export default function LandingPage() {
age-specific well visit workflows, developmental milestones, vaccine schedules,
catch-up planners, and automatic ICD-10 billing codes — all in one tool.
</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32, overflow: 'hidden' }}>
{[
'🩺 Well visit planner from newborn through adolescence',
'📋 Developmental milestone tracking across 4 domains',
@ -450,8 +450,8 @@ export default function LandingPage() {
'🎙 AI scribe — speak, get a structured note',
'💊 Automatic ICD-10 and CPT billing codes',
].map((item, i) => (
<div key={i} style={{ fontSize: '0.88rem', color: '#cbd5e1', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
<span style={{ flexShrink: 0 }}>{item}</span>
<div key={i} style={{ fontSize: '0.88rem', color: '#cbd5e1', display: 'flex', gap: 8, alignItems: 'flex-start', overflowWrap: 'break-word', wordBreak: 'break-word', minWidth: 0 }}>
<span>{item}</span>
</div>
))}
</div>
@ -465,7 +465,7 @@ export default function LandingPage() {
Open AI Scribe ↗
</a>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 130px), 1fr))', gap: 10 }}>
{[
{ icon: '📅', label: 'Well Visits', sub: '2wk → 18yr' },
{ icon: '🧠', label: 'Milestones', sub: '2mo → 5yr' },
@ -477,7 +477,7 @@ export default function LandingPage() {
<div key={i} style={{
background: 'rgba(255,255,255,0.05)',
border: '1px solid rgba(255,255,255,0.08)',
borderRadius: 10, padding: '16px',
borderRadius: 10, padding: '14px',
transition: 'background 0.2s',
}}
onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.09)'}