Skip to content

Commit f60fffe

Browse files
gHashTagona-agent
gHashTag
and
ona-agent
committed
fix(website): improve TheoremsSection card design
- Changed to vertical layout (4 rows, 1 card per row) - Smaller, cleaner number badges (#1, #2, etc.) - Compact verified badges inline with title - Better text overflow handling - Consistent styling with other landing page cards Co-authored-by: Ona <no-reply@ona.com>
1 parent 1cfc94e commit f60fffe

1 file changed

Lines changed: 118 additions & 61 deletions

File tree

‎website/src/components/sections/TheoremsSection.tsx‎

Lines changed: 118 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { motion } from 'framer-motion'
12
import { useI18n } from '../../i18n/context'
23
import Section from '../Section'
34

@@ -30,127 +31,183 @@ export default function TheoremsSection() {
3031

3132
return (
3233
<Section id="theorems">
34+
<div className="radial-glow" style={{ opacity: 0.2 }} />
3335
<div className="tight fade">
3436
<div className="badge" style={{ marginBottom: '1rem' }}>MATHEMATICAL FOUNDATION</div>
3537
<h2 dangerouslySetInnerHTML={{ __html: theorems.title }} />
3638
<p style={{ maxWidth: '700px', margin: '0 auto', opacity: 0.9 }}>{theorems.sub}</p>
3739
</div>
3840

39-
<div className="grid fade" style={{
41+
{/* Vertical layout - 4 rows */}
42+
<div className="fade" style={{
4043
marginTop: '3rem',
41-
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
42-
gap: '1.5rem',
43-
maxWidth: '1200px',
44-
margin: '3rem auto 0'
44+
display: 'flex',
45+
flexDirection: 'column',
46+
gap: '1.2rem',
47+
maxWidth: '850px',
48+
margin: '3rem auto 0',
49+
padding: '0 1rem'
4550
}}>
4651
{theorems.cards?.map((card: TheoremCard, i: number) => (
47-
<div key={i} className="premium-card" style={{
48-
padding: '2rem',
49-
display: 'flex',
50-
flexDirection: 'column',
51-
gap: '1rem'
52-
}}>
53-
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
52+
<motion.div
53+
key={i}
54+
className="premium-card"
55+
initial={{ opacity: 0, y: 20 }}
56+
whileInView={{ opacity: 1, y: 0 }}
57+
transition={{ delay: i * 0.1, duration: 0.4 }}
58+
viewport={{ once: true }}
59+
style={{
60+
padding: '1.5rem',
61+
display: 'flex',
62+
flexDirection: 'column',
63+
gap: '1rem'
64+
}}
65+
>
66+
{/* Header row: Number + Title + Verified */}
67+
<div style={{
68+
display: 'flex',
69+
alignItems: 'center',
70+
gap: '1rem',
71+
flexWrap: 'wrap'
72+
}}>
73+
{/* Number badge - smaller, cleaner */}
5474
<div style={{
55-
width: '48px',
56-
height: '48px',
57-
borderRadius: '50%',
58-
background: 'linear-gradient(135deg, var(--accent), #8b5cf6)',
75+
width: '36px',
76+
height: '36px',
77+
borderRadius: '8px',
78+
background: 'var(--accent)',
5979
display: 'flex',
6080
alignItems: 'center',
6181
justifyContent: 'center',
62-
fontSize: '1.5rem',
82+
fontSize: '1rem',
6383
fontWeight: 700,
64-
color: '#fff'
84+
color: '#000',
85+
flexShrink: 0
86+
}}>
87+
#{card.number}
88+
</div>
89+
90+
{/* Title */}
91+
<h3 style={{
92+
margin: 0,
93+
fontSize: '1.1rem',
94+
color: 'var(--text)',
95+
fontWeight: 600,
96+
flex: 1,
97+
minWidth: '150px'
98+
}}>
99+
{card.title}
100+
</h3>
101+
102+
{/* Verified badge - compact */}
103+
<div style={{
104+
padding: '0.4rem 0.8rem',
105+
background: 'rgba(34, 197, 94, 0.15)',
106+
borderRadius: '4px',
107+
display: 'flex',
108+
alignItems: 'center',
109+
gap: '0.4rem',
110+
flexShrink: 0
65111
}}>
66-
{card.number}
112+
<span style={{ color: '#22c55e', fontSize: '0.75rem' }}>✓</span>
113+
<span style={{
114+
fontSize: '0.75rem',
115+
color: '#22c55e',
116+
fontWeight: 600
117+
}}>
118+
{card.verified.metric}
119+
</span>
67120
</div>
68-
<h3 style={{ margin: 0, fontSize: '1.2rem', color: 'var(--text)' }}>{card.title}</h3>
69121
</div>
70122

123+
{/* Formula */}
71124
<div style={{
72-
background: 'rgba(99, 102, 241, 0.1)',
73-
padding: '1rem',
74-
borderRadius: '8px',
75-
fontFamily: 'monospace',
76-
fontSize: '1.1rem',
125+
background: 'rgba(99, 102, 241, 0.08)',
126+
padding: '0.8rem 1rem',
127+
borderRadius: '6px',
128+
fontFamily: 'ui-monospace, monospace',
129+
fontSize: '1rem',
77130
color: 'var(--accent)',
78-
textAlign: 'center'
131+
textAlign: 'center',
132+
letterSpacing: '0.02em'
79133
}}>
80134
{card.formula}
81135
</div>
82136

83-
<p style={{ fontSize: '0.9rem', color: 'var(--muted)', margin: 0 }}>
84-
<strong style={{ color: 'var(--text)' }}>Proof:</strong> {card.proof}
85-
</p>
86-
87-
<p style={{ fontSize: '0.9rem', color: 'var(--text)', margin: 0 }}>
88-
<strong>Result:</strong> {card.result}
137+
{/* Result */}
138+
<p style={{
139+
fontSize: '0.9rem',
140+
color: 'var(--text)',
141+
margin: 0,
142+
lineHeight: 1.5
143+
}}>
144+
{card.result}
89145
</p>
90146

91-
<div style={{
92-
marginTop: 'auto',
93-
padding: '1rem',
94-
background: 'rgba(34, 197, 94, 0.1)',
95-
borderRadius: '8px',
96-
borderLeft: '3px solid #22c55e'
147+
{/* Source - subtle */}
148+
<p style={{
149+
fontSize: '0.75rem',
150+
color: 'var(--muted)',
151+
margin: 0,
152+
opacity: 0.6
97153
}}>
98-
<div style={{ fontSize: '0.8rem', color: '#22c55e', fontWeight: 600, marginBottom: '0.3rem' }}>
99-
✓ VERIFIED: {card.verified.metric}
100-
</div>
101-
<div style={{ fontSize: '0.85rem', color: 'var(--text)' }}>
102-
{card.verified.value}
103-
</div>
104-
</div>
105-
106-
<div style={{ fontSize: '0.75rem', color: 'var(--muted)', fontStyle: 'italic' }}>
107-
Source: {card.source}
108-
</div>
109-
</div>
154+
{card.source}
155+
</p>
156+
</motion.div>
110157
))}
111158
</div>
112159

160+
{/* Reports links */}
113161
{theorems.reports && (
114-
<div className="fade" style={{ marginTop: '3rem', textAlign: 'center' }}>
115-
<h3 style={{ marginBottom: '1.5rem', color: 'var(--text)' }}>{theorems.reportsTitle}</h3>
162+
<div className="fade" style={{ marginTop: '2.5rem', textAlign: 'center' }}>
163+
<h4 style={{
164+
marginBottom: '1rem',
165+
color: 'var(--muted)',
166+
fontSize: '0.8rem',
167+
textTransform: 'uppercase',
168+
letterSpacing: '0.1em'
169+
}}>
170+
{theorems.reportsTitle}
171+
</h4>
116172
<div style={{
117173
display: 'flex',
118174
flexWrap: 'wrap',
119175
justifyContent: 'center',
120-
gap: '1rem'
176+
gap: '0.6rem'
121177
}}>
122178
{theorems.reports.map((report: Report, i: number) => (
123179
<a
124180
key={i}
125181
href={report.url}
126182
target="_blank"
127183
rel="noopener noreferrer"
184+
className="premium-card"
128185
style={{
129-
padding: '0.8rem 1.5rem',
130-
background: 'rgba(99, 102, 241, 0.1)',
131-
border: '1px solid var(--border)',
132-
borderRadius: '8px',
186+
padding: '0.5rem 1rem',
133187
color: 'var(--text)',
134188
textDecoration: 'none',
135-
fontSize: '0.9rem',
136-
transition: 'all 0.2s'
189+
fontSize: '0.8rem',
190+
display: 'inline-flex',
191+
alignItems: 'center',
192+
gap: '0.5rem'
137193
}}
138194
>
139-
{report.name} <span style={{ color: 'var(--accent)' }}>({report.highlight})</span>
195+
{report.name}
196+
<span style={{ color: 'var(--accent)', fontWeight: 600 }}>{report.highlight}</span>
140197
</a>
141198
))}
142199
</div>
143200
</div>
144201
)}
145202

203+
{/* CTA Button */}
146204
{theorems.cta && (
147205
<div className="fade" style={{ marginTop: '2rem', textAlign: 'center' }}>
148206
<a
149207
href={theorems.ctaUrl}
150208
target="_blank"
151209
rel="noopener noreferrer"
152210
className="btn"
153-
style={{ display: 'inline-block' }}
154211
>
155212
{theorems.cta} →
156213
</a>

0 commit comments

Comments
 (0)