Connect Homepage Featured Events to Sanity

[lucianlavric]

Description

Homepage (app/page.tsx) has hardcoded <Event> components. Need to fetch and display featured events from Sanity dynamically.

Current Behavior

<Event
  title="Recreational Therapy - London, ON"
  description="Join us for..."
  date="Nov 16, 2025"
/>

Expected Behavior

• Fetch events marked as "featured" from Sanity
• Dynamically render featured events section
• Show up to 3 featured events

Acceptance Criteria

• Fetch events using featuredEventsQuery
• Map over results to render <Event> components
• Display event title, description, date from Sanity
• Handle empty state (no featured events)
• Link to full event pages

Technical Details

Files to modify:

• app/page.tsx - Replace hardcoded Event components
• app/_components/Event.tsx - Verify it handles Sanity data structure

Implementation:

const featuredEvents = await client.fetch(featuredEventsQuery);

{featuredEvents.slice(0, 3).map(event => (
  <Event
    key={event._id}
    title={event.title}
    description={event.description}
    date={formatDate(event.date)}
  />
))}

Reference:

• Query: sanity/lib/queries.ts:50