naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Share Card alignment by forcing Header, Grid, and Footer to identical widths

Browse Source
This commit is contained in:
ectasy663
2026-09-22 19:27:04 +05:30
parent 41de440df3
commit 25bdffaa11
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/api/og/dashboard/route.tsx
View File

@@ -33,38 +33,39 @@ export async function GET(req: NextRequest) {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center',
background: 'linear-gradient(135deg, #09090b 0%, #171717 100%)', background: 'linear-gradient(135deg, #09090b 0%, #171717 100%)',
color: '#ffffff', color: '#ffffff',
fontFamily: 'sans-serif', fontFamily: 'sans-serif',
padding: '80px', padding: '80px 0',
border: '12px solid #27272a', border: '12px solid #27272a',
}} }}
> >
{/* Header */} {/* Header */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', width: '100%' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', width: '840px' }}>
<img src={logoUrl} width={400} height={100} style={{ objectFit: 'contain' }} /> <img src={logoUrl} width={400} height={100} style={{ objectFit: 'contain', marginLeft: '-20px' }} />
<div style={{ fontSize: 24, fontWeight: 700, color: '#06b6d4', backgroundColor: 'rgba(6,182,212,0.1)', padding: '12px 24px', borderRadius: 30, border: '1px solid rgba(6,182,212,0.2)' }}> <div style={{ fontSize: 24, fontWeight: 700, color: '#06b6d4', backgroundColor: 'rgba(6,182,212,0.1)', padding: '12px 24px', borderRadius: 30, border: '1px solid rgba(6,182,212,0.2)', marginTop: 24 }}>
Performance Overview Performance Overview
</div> </div>
</div> </div>
{/* Main Content */} {/* Main Content */}
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', marginTop: 20 }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '840px' }}>
{/* 2x2 Grid */} {/* 2x2 Grid */}
<div style={{ display: 'flex', flexWrap: 'wrap', width: '820px', justifyContent: 'center', gap: '40px' }}> <div style={{ display: 'flex', flexWrap: 'wrap', width: '840px', justifyContent: 'space-between', gap: '40px' }}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '380px', height: '240px', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: 32, border: '2px solid rgba(255,255,255,0.05)' }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '400px', height: '240px', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: 32, border: '2px solid rgba(255,255,255,0.05)' }}>
<span style={{ fontSize: 72, fontWeight: 900, color: '#f59e0b', marginBottom: 16 }}>{score}</span> <span style={{ fontSize: 72, fontWeight: 900, color: '#f59e0b', marginBottom: 16 }}>{score}</span>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>Today's Score</span> <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>Today's Score</span>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '380px', height: '240px', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: 32, border: '2px solid rgba(255,255,255,0.05)' }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '400px', height: '240px', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: 32, border: '2px solid rgba(255,255,255,0.05)' }}>
<span style={{ fontSize: 72, fontWeight: 900, color: '#4ade80', marginBottom: 16 }}>{accuracy}</span> <span style={{ fontSize: 72, fontWeight: 900, color: '#4ade80', marginBottom: 16 }}>{accuracy}</span>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>Accuracy</span> <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>Accuracy</span>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '380px', height: '240px', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: 32, border: '2px solid rgba(255,255,255,0.05)' }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '400px', height: '240px', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: 32, border: '2px solid rgba(255,255,255,0.05)' }}>
<span style={{ fontSize: 72, fontWeight: 900, color: '#22d3ee', marginBottom: 16 }}>{qs}</span> <span style={{ fontSize: 72, fontWeight: 900, color: '#22d3ee', marginBottom: 16 }}>{qs}</span>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>Qs Attempted</span> <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>Qs Attempted</span>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '380px', height: '240px', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: 32, border: '2px solid rgba(255,255,255,0.05)' }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '400px', height: '240px', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: 32, border: '2px solid rgba(255,255,255,0.05)' }}>
<span style={{ fontSize: 72, fontWeight: 900, color: '#c084fc', marginBottom: 16 }}>{rank}</span> <span style={{ fontSize: 72, fontWeight: 900, color: '#c084fc', marginBottom: 16 }}>{rank}</span>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>City Rank</span> <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>City Rank</span>
</div> </div>
@@ -72,13 +73,13 @@ export async function GET(req: NextRequest) {
</div> </div>
{/* Footer */} {/* Footer */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: '100%', marginTop: 20 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: '840px' }}>
<div style={{ display: 'flex', flexDirection: 'column' }}> <div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ fontSize: 42, fontWeight: 900, color: '#ffffff' }}>{name}</div> <div style={{ fontSize: 42, fontWeight: 900, color: '#ffffff' }}>{name}</div>
<div style={{ fontSize: 24, color: 'rgba(255,255,255,0.7)', marginTop: 12 }}>{`${plan} Plan`}</div> <div style={{ fontSize: 24, color: 'rgba(255,255,255,0.7)', marginTop: 12 }}>{`${plan} Plan`}</div>
<div style={{ fontSize: 24, color: '#06b6d4', marginTop: 8 }}>{`${target} Aspirant`}</div> <div style={{ fontSize: 24, color: '#06b6d4', marginTop: 8 }}>{`${target} Aspirant`}</div>
</div> </div>
<div style={{ fontSize: 24, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.05em' }}> <div style={{ fontSize: 24, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.05em', marginBottom: 8 }}>
contact@pragativeer.com contact@pragativeer.com
</div> </div>
</div> </div>