feat: Featured Upcoming Event card(issue#28)

[IshimweIsaac]

Overview

This PR implements the Featured Upcoming Event card component for the /events page as outlined in Issue #28. It closely adheres to the provided screenshots (events_2.png, event_3.png) and design guidelines.

Closes #28

What was done

• Component Created: Built components/events/featured-event-card.tsx.
• Figma Alignment:
  • Implemented a two-column layout: a large main event card on the left and a smaller "Next Workshop" sidebar card on the right.
  • Applied the bg-neutral-950 date stamp overlay (OCT 24, 2024) in top-left of the cover image using font-mono white text, matching the spec exactly.
  • Styled the event title in font-black uppercase at 32px to match the editorial-tech typography guidelines.
  • Used MapPin, Calendar, and Clock icons from lucide-react for location and time details.
• Attendee Avatar Stack:
  • Rendered 3 overlapping attendee avatars (32×32) sourced from i.pravatar.cc with a border-2 border-white separator and -space-x-2.5 negative spacing.
  • Added the +42 cyan pill using bg-[#38BDF8] with font-bold white text.
  • Applied style={{ borderRadius: '10px' }} inline to bypass the global border-radius: 0 reset (as intended avatars are a documented exception in design-style-guide.md).
• Responsive Layout:
  • Used flex-col lg:flex-row to stack the two cards vertically on mobile and side-by-side on desktop.
  • The sidebar card (lg:w-[340px]) collapses to full-width on smaller screens.
• Design System Compliance:
  • Zero dark: classes the project does not support dark mode.
  • All colors use design system tokens (neutral-*, primary-*).
  • All corners are sharp (0px) except the avatar stack which uses inline styles per the spec exception.

Notes for Reviewer

• The component was tested locally within app/(public)/events/page.tsx to verify layout and sizing, but page.tsx has been kept clean in this branch to avoid conflicts with Issues ISSUE-026 — Compose landing page (app/(public)/page.tsx) #26 and ISSUE-027 — Events Hub header with filter tag pills #27.
• Avatar images are fetched from i.pravatar.cc as placeholder data. The i.pravatar.cc hostname must be added to next.config.ts under images.remotePatterns (or swapped for real attendee data when available).