Enhance OG images with optimal information density

Add GitHub-style enhancements to social preview cards:

NEW FEATURES:
- Project logo display (80px, rounded, white background)
- License badge (blue pill next to language)
- India Connection badge (orange, shows founder/org/community/contributors)
- Full location (City, State instead of just city)
- Good first issues count (green badge, shows if > 0)

INFORMATION NOW DISPLAYED (13+ data points):
✓ Project logo (visual identity)
✓ Project name (large, prominent)
✓ Primary language (TypeScript, Python, etc.)
✓ License (MIT, Apache-2.0, etc.) - NEW
✓ Location (Kolkata, West Bengal) - ENHANCED
✓ Verified badge (blue, conditional)
✓ India Connection (🇮🇳 Founder/Organization/etc.) - NEW
✓ Looking for contributors (green, conditional)
✓ Good first issues count (conditional) - NEW
✓ Short description (readable, gray)
✓ Tags (first 4 + counter)
✓ Stars count (yellow badge with emoji)
✓ Footer branding

DESIGN IMPROVEMENTS:
- Better visual hierarchy with logo
- More semantic color coding
- Richer metadata for developers
- Unique India-focused value proposition
- GitHub-style information density

This makes FOSSRadar OG images more informative than GitHub's
while maintaining clean, professional design.

Author: wbfossadmin

app/projects/[slug]/opengraph-image.tsx

@@ -46,7 +46,7 @@ export default async function Image({ params }: { params: Promise<{ slug: string
           padding: "60px 80px",
         }}
       >
-        {/* Project Name + Badges */}
+        {/* Header with Logo + Project Name + Badges */}
         <div
           style={{
             display: "flex",
@@ -55,10 +55,34 @@ export default async function Image({ params }: { params: Promise<{ slug: string
             marginBottom: "24px",
           }}
         >
-          <div style={{ fontSize: 64, fontWeight: 700, color: "#fff", maxWidth: "700px" }}>
-            {project.name}
+          <div style={{ display: "flex", gap: "20px", alignItems: "center", flex: 1, minWidth: 0 }}>
+            {project.logo && (
+              <div
+                style={{
+                  width: "80px",
+                  height: "80px",
+                  borderRadius: "12px",
+                  backgroundColor: "#fff",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                  padding: "12px",
+                }}
+              >
+                <img
+                  src={`https://fossradar.in${project.logo}`}
+                  width="56"
+                  height="56"
+                  style={{ objectFit: "contain" }}
+                />
+              </div>
+            )}
+            <div style={{ fontSize: 64, fontWeight: 700, color: "#fff", flex: 1, minWidth: 0 }}>
+              {project.name}
+            </div>
           </div>
-          <div style={{ display: "flex", gap: "10px", flexShrink: 0 }}>
+          <div style={{ display: "flex", gap: "10px", flexShrink: 0, flexWrap: "wrap", maxWidth: "400px", justifyContent: "flex-end" }}>
             {project.verified && (
               <div
                 style={{
@@ -74,6 +98,25 @@ export default async function Image({ params }: { params: Promise<{ slug: string
                 ✓ Verified
               </div>
             )}
+            {project.india_connection && (
+              <div
+                style={{
+                  padding: "8px 16px",
+                  backgroundColor: "#f97316",
+                  borderRadius: "8px",
+                  fontSize: 18,
+                  color: "#fff",
+                  fontWeight: 600,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                }}
+              >
+                🇮🇳 {project.india_connection === "founder" ? "Founder" :
+                     project.india_connection === "organization" ? "Organization" :
+                     project.india_connection === "community" ? "Community" : "Contributors"}
+              </div>
+            )}
             {project.looking_for_contributors && (
               <div
                 style={{
@@ -93,7 +136,7 @@ export default async function Image({ params }: { params: Promise<{ slug: string
         </div>
 
         {/* Meta Info */}
-        <div style={{ display: "flex", gap: "20px", marginBottom: "24px", flexWrap: "wrap" }}>
+        <div style={{ display: "flex", gap: "20px", marginBottom: "24px", flexWrap: "wrap", alignItems: "center" }}>
           <div
             style={{
               padding: "6px 12px",
@@ -106,9 +149,39 @@ export default async function Image({ params }: { params: Promise<{ slug: string
           >
             {project.primary_lang}
           </div>
-          <div style={{ fontSize: 16, color: "#94a3b8", display: "flex", alignItems: "center" }}>
-            📍 {project.location_city}
+          <div
+            style={{
+              padding: "6px 12px",
+              backgroundColor: "#1e3a8a",
+              borderRadius: "6px",
+              fontSize: 16,
+              color: "#93c5fd",
+              display: "flex",
+              fontWeight: 600,
+            }}
+          >
+            {project.license}
+          </div>
+          <div style={{ fontSize: 16, color: "#94a3b8", display: "flex", alignItems: "center", fontWeight: 500 }}>
+            📍 {project.location_city}, {project.location_indian_state}
           </div>
+          {project.good_first_issues && project.good_first_issues > 0 && (
+            <div
+              style={{
+                padding: "6px 12px",
+                backgroundColor: "#065f46",
+                borderRadius: "6px",
+                fontSize: 16,
+                color: "#6ee7b7",
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                fontWeight: 600,
+              }}
+            >
+              ✨ {project.good_first_issues} good first issues
+            </div>
+          )}
         </div>
 
         {/* Description */}