ui: add competition logo/image to grid card layout

[AnayDhawan]

Problem

Competition cards in grid view are text-only. No visual identity for each competition.

Task

Add an image/logo to each competition card in the grid layout, displayed in the top half of the card.

Implementation

1. Add an image field to the Competition type in src/lib/types.ts:

   image?: string; // URL to competition logo or banner

2. Source images for all 50 existing competitions:

   • Use each competition's official logo or a representative banner
   • Store as URLs pointing to the competition's own CDN/website (hotlinking their logo), OR
   • Download and store in public/competitions/ as optimized PNGs/WebPs (preferred for reliability)
   • Naming: public/competitions/{competition-id}.png
   • Target size: 400x200px or similar 2:1 aspect ratio

3. Update the grid card in src/components/competitions/competition-card.tsx:

   • When variant="grid", show the image in the top half of the card
   • Use Next.js <Image> with fill or fixed dimensions
   • Rounded top corners to match card radius
   • Fallback: show a colored gradient or category icon when no image exists
   • The image should link to the competition's official_url (external link)

4. Add image field to each competition in data/competitions/*.json

Reference

Look at how product cards with images work on e-commerce sites: image top half, text content bottom half. Keep it clean.

Not in scope

• List view stays text-only (no image)
• Don't add images to the detail page (separate issue if needed)

[shauryagangrade]

Done in #223