Premium Redesign of Share Card: Added glassmorphism, dynamic typography, avatars, and tech grid

src/app/api/og/dashboard/route.tsx

@@ -20,9 +20,13 @@ export async function GET(req: NextRequest) {
 
     // Load logo from disk and convert to base64
     const logoPath = join(process.cwd(), 'public', 'PragatiVeer_Logo', 'PNG_Logos', 'Rectangular_dark_background.png');
+    let logoUrl = '';
+    try {
       const logoData = readFileSync(logoPath);
-    const logoBase64 = logoData.toString('base64');
+      logoUrl = `data:image/png;base64,${logoData.toString('base64')}`;
-    const logoUrl = `data:image/png;base64,${logoBase64}`;
+    } catch (e) {
+      console.error('Failed to load logo', e);
+    }
 
     return new ImageResponse(
       (
@@ -34,53 +38,92 @@ export async function GET(req: NextRequest) {
             flexDirection: 'column',
             justifyContent: 'space-between',
             alignItems: 'center',
-            background: 'linear-gradient(135deg, #09090b 0%, #171717 100%)',
+            background: 'linear-gradient(145deg, #050505 0%, #111111 50%, #0a0a0a 100%)',
             color: '#ffffff',
-            fontFamily: 'sans-serif',
+            fontFamily: '"Inter", sans-serif',
-            padding: '80px 0',
+            padding: '70px 0',
-            border: '12px solid #27272a',
           }}
         >
+          {/* Subtle grid background overlay */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundImage: 'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0)',
+              backgroundSize: '40px 40px',
+              zIndex: 0,
+            }}
+          />
+
+          <div style={{ display: 'flex', flexDirection: 'column', width: '880px', height: '100%', justifyContent: 'space-between', zIndex: 10 }}>
             {/* Header */}
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', width: '840px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
-            <img src={logoUrl} width={400} height={100} style={{ objectFit: 'contain', marginLeft: '-20px' }} />
+              <img src={logoUrl} width={340} height={85} style={{ objectFit: 'contain', marginLeft: '-24px' }} />
-            <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
+              <div style={{ display: 'flex', alignItems: 'center', background: 'linear-gradient(90deg, rgba(6,182,212,0.15) 0%, rgba(6,182,212,0.05) 100%)', padding: '12px 28px', borderRadius: 100, border: '1px solid rgba(6,182,212,0.3)' }}>
+                <div style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: '#06b6d4', marginRight: 12 }} />
+                <span style={{ fontSize: 22, fontWeight: 700, color: '#22d3ee', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
+                  Performance Report
+                </span>
               </div>
             </div>
 
-          {/* Main Content */}
+            {/* Main Content - 2x2 Grid */}
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '840px' }}>
+            <div style={{ display: 'flex', flexWrap: 'wrap', width: '880px', justifyContent: 'space-between', gap: '32px', marginTop: 20 }}>
-            {/* 2x2 Grid */}
+              
-            <div style={{ display: 'flex', flexWrap: 'wrap', width: '840px', justifyContent: 'space-between', gap: '40px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
-              <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: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Today's Score</span>
-                <span style={{ fontSize: 72, fontWeight: 900, color: '#f59e0b', marginBottom: 16 }}>{score}</span>
+                <span style={{ fontSize: 76, fontWeight: 900, color: '#facc15', letterSpacing: '-0.02em' }}>{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: '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>
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
-                <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.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Accuracy</span>
+                <span style={{ fontSize: 76, fontWeight: 900, color: '#34d399', letterSpacing: '-0.02em' }}>{accuracy}</span>
               </div>
-              <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>
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
-                <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.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Qs Attempted</span>
-              </div>
+                <span style={{ fontSize: 76, fontWeight: 900, color: '#38bdf8', letterSpacing: '-0.02em' }}>{qs}</span>
-              <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: 20, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.1em' }}>City Rank</span>
               </div>
+              
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
+                <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>City Rank</span>
+                <span style={{ fontSize: 76, fontWeight: 900, color: '#a78bfa', letterSpacing: '-0.02em' }}>{rank}</span>
               </div>
+              
             </div>
             
             {/* Footer */}
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: '840px' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', width: '100%', marginTop: 20 }}>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {/* Divider */}
-              <div style={{ fontSize: 42, fontWeight: 900, color: '#ffffff' }}>{name}</div>
+              <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255,255,255,0.1)', marginBottom: 40 }} />
-              <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={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  {/* User Avatar Placeholder */}
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 80, height: 80, borderRadius: 40, background: 'linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)', marginRight: 24 }}>
+                    <span style={{ fontSize: 36, fontWeight: 800, color: '#ffffff' }}>{name.charAt(0).toUpperCase()}</span>
+                  </div>
+                  
+                  <div style={{ display: 'flex', flexDirection: 'column' }}>
+                    <div style={{ fontSize: 44, fontWeight: 900, color: '#ffffff', letterSpacing: '-0.02em' }}>{name}</div>
+                    <div style={{ display: 'flex', marginTop: 8 }}>
+                      <div style={{ fontSize: 22, color: '#06b6d4', fontWeight: 700, marginRight: 16 }}>{`${target} Aspirant`}</div>
+                      <div style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>•</div>
+                      <div style={{ fontSize: 22, color: 'rgba(255,255,255,0.7)', fontWeight: 600, marginLeft: 16 }}>{`${plan} Plan`}</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+                  <div style={{ fontSize: 22, color: 'rgba(255,255,255,0.4)', fontWeight: 600, letterSpacing: '0.05em' }}>
+                    pragativeer.com
+                  </div>
+                </div>
               </div>
-            <div style={{ fontSize: 24, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.05em', marginBottom: 8 }}>
-              contact@pragativeer.com
             </div>
           </div>
         </div>