Context

We just added 12 social impact personas (neighboring farmer, local resident, public health advocate, etc.) to the letter generation system. Currently the frontend uses a simple dropdown.

Task

Replace the dropdown with a visual card-grid selector that shows each persona with:

• An icon (Lucide icon names are defined in backend/personaConfig.js)
• The persona label and short description
• Visual grouping by category

Files to modify

• frontend/src/app/page.tsx — replace the persona <select> with a card grid

API

• GET /api/personas returns: id, label, description, icon, category, categoryLabel
• Selected persona sent as persona in POST /api/generate-letter

Design

• Match existing emerald/slate/white theme
• Responsive: 2-3 columns desktop, 1 mobile
• Selected card: emerald border highlight
• Categories as section headers

Good first issue for React + Tailwind contributors.