Skip to content

feat: Refactor Events Page — Replace Single-Event Layout with Card-Based Grid

Current Behavior

The /events page currently displays a single event in a full-page hero layout (large title, description paragraphs, date/time/location blocks). This layout doesn't scale when multiple events need to be shown.

Expected Behavior

Redesign the Events page to use a card-based grid layout where:

  • Each event is displayed as an individual card
  • Cards show: Event title, short description, date, time, location, and a CTA button (e.g. "Register Interest")
  • The grid should support multiple cards side by side (responsive: 1 col mobile, 2–3 col desktop)
  • New events can be added easily from the backend/CMS without layout changes

Acceptance Criteria

  • Remove the current single-event hero layout
  • Create a reusable EventCard component
  • Events page renders a grid of EventCard components
  • Each card displays: title, category tag, date, time, location, and register button
  • Layout is responsive
  • Existing event data (VISWAM.AI × SFLC.in × FOSS United × Linux Foundation event) is migrated into the new card format
  • Backend/API supports returning a list of events so future events can be added without frontend changes

Design Notes

  • Maintain existing brand colors (blue accent, dark text)
  • Cards should have subtle border or shadow, hover state
  • Category label (e.g. "STAKEHOLDER CONSULTATION EVENT") should appear as a tag/badge on the card

Pages/Files Affected

  • pages/events or equivalent route
  • Event data model / API endpoint
  • Any shared layout or hero components currently tied to the events page