Redesign Share Card to a perfect 1080x1080 square with official dark logo and proper spacing
This commit is contained in:
@@ -18,6 +18,11 @@ export async function GET(req: NextRequest) {
|
||||
const target = searchParams.get('target') || 'JEE';
|
||||
const plan = searchParams.get('plan') || 'Free';
|
||||
|
||||
// Build absolute URL for the logo
|
||||
const protocol = req.headers.get('x-forwarded-proto') || 'http';
|
||||
const host = req.headers.get('host') || 'localhost:3000';
|
||||
const logoUrl = `${protocol}://${host}/PragatiVeer_Logo/PNG_Logos/Rectangular_dark_background.png`;
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
@@ -27,45 +32,40 @@ export async function GET(req: NextRequest) {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#0a0a0a',
|
||||
background: 'linear-gradient(135deg, #09090b 0%, #171717 100%)',
|
||||
color: '#ffffff',
|
||||
fontFamily: 'sans-serif',
|
||||
padding: '60px',
|
||||
border: '8px solid #222',
|
||||
padding: '80px',
|
||||
border: '12px solid #27272a',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', width: '100%' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 40, height: 40, backgroundColor: '#06b6d4', borderRadius: 8, marginRight: 16 }} />
|
||||
<span style={{ fontSize: 32, fontWeight: 900, letterSpacing: '0.05em' }}>PRAGATIVEER</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 700, color: '#06b6d4', backgroundColor: 'rgba(6,182,212,0.1)', padding: '8px 16px', borderRadius: 20, border: '1px solid rgba(6,182,212,0.2)' }}>
|
||||
<img src={logoUrl} width="400" height="100" style={{ objectFit: 'contain' }} />
|
||||
<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)' }}>
|
||||
Performance Overview
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', marginTop: 20 }}>
|
||||
<h3 style={{ fontSize: 48, fontWeight: 900, marginBottom: 40 }}>Dashboard Stats</h3>
|
||||
|
||||
{/* 2x2 Grid */}
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', width: '600px', justifyContent: 'center', gap: '24px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '280px', height: '160px', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 24, border: '1px solid rgba(255,255,255,0.1)' }}>
|
||||
<span style={{ fontSize: 48, fontWeight: 900, color: '#f59e0b', marginBottom: 8 }}>{score}</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.05em' }}>Today's Score</span>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', width: '820px', justifyContent: 'center', 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)' }}>
|
||||
<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>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '280px', height: '160px', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 24, border: '1px solid rgba(255,255,255,0.1)' }}>
|
||||
<span style={{ fontSize: 48, fontWeight: 900, color: '#4ade80', marginBottom: 8 }}>{accuracy}</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.05em' }}>Accuracy</span>
|
||||
<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)' }}>
|
||||
<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>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '280px', height: '160px', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 24, border: '1px solid rgba(255,255,255,0.1)' }}>
|
||||
<span style={{ fontSize: 48, fontWeight: 900, color: '#22d3ee', marginBottom: 8 }}>{qs}</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.05em' }}>Qs Attempted</span>
|
||||
<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)' }}>
|
||||
<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>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '280px', height: '160px', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 24, border: '1px solid rgba(255,255,255,0.1)' }}>
|
||||
<span style={{ fontSize: 48, fontWeight: 900, color: '#c084fc', marginBottom: 8 }}>{rank}</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.05em' }}>City Rank</span>
|
||||
<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)' }}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,19 +73,19 @@ export async function GET(req: NextRequest) {
|
||||
{/* Footer */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: '100%', marginTop: 20 }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: 24, fontWeight: 800 }}>{name}</div>
|
||||
<div style={{ fontSize: 18, color: 'rgba(255,255,255,0.7)', marginTop: 8 }}>{`${plan} Plan`}</div>
|
||||
<div style={{ fontSize: 18, color: '#06b6d4', marginTop: 4 }}>{`${target} Aspirant`}</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: '#06b6d4', marginTop: 8 }}>{`${target} Aspirant`}</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 18, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.05em' }}>
|
||||
<div style={{ fontSize: 24, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.05em' }}>
|
||||
contact@pragativeer.com
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
width: 1080,
|
||||
height: 1080,
|
||||
}
|
||||
);
|
||||
} catch (e: any) {
|
||||
|
||||
Reference in New Issue
Block a user