Develop recent events, podcast and comming soon section

[mrbhanukab]

This PR adds the new Recent Events, Podcast, and Coming Soon sections to the homepage. This is all based on the Figma designs. This PR addresses and will close issue #7 when merged.

Here is how it looks:

Large Devices

Small Devices

New Home Page Sections

I've introduced three main sections to the homepage:

• Recent Events (src/components/home/RecentEvents.tsx)

  Shows past events in a horizontally scrollable, draggable carousel. This uses the new EventCard (src/components/event/EventCard.tsx) component.

• Podcast (src/components/home/Podcast.tsx)

  The new section for our podcast. I have created an image of a phone displaying our podcast on YouTube (public/home/quackcast.webp). I also made a few edits, such as replacing my profile picture with the SLIIT FOSS YouTube channel profile picture.

• Coming Soon (src/components/home/ComingSoon.tsx)

  Displays upcoming events in an interactive, responsive layout with hover effects. This uses the new ComingSoonCard (src/components/home/ComingSoonCard.tsx).

New Reusable Components

This PR also adds a few other components that are used in the sections above:

• src/components/layout/HomeSectionLayout.tsx: This is a layout wrapper to keep the spacing and title consistent for all homepage sections. It makes maintenance way easier since it's common to the whole page.
• src/components/GradTitle.tsx: This is the gradient title component. I've used this inside the layout, but it can be reused anywhere.
• src/components/IconButton.tsx: This is the icon button that we're using everywhere. I've made it accept a style prop so anyone can override the style if needed.

Data & Logic

I've introduced a new data file: src/data/events.ts. This data is used by both RecentEvents & ComingSoon.
The code automatically filters the events:

• Any event before today will be shown in RecentEvents.
• Any event on or after today will be shown in ComingSoon.

Note

Fallback Image: In RecentEvents, if an image isn't available for any reason (like an accidental deletion), our FOSS logo on a black background will be visible instead. You can see this in the video ("Cloud Native Day" & "Frontend Meetup").

Other Changes

• Added react-icons to package.json for icon support.

• Optimizations

  I spent a good amount of time optimizing these new components to make sure they run smoothly. Here's a quick rundown:

  General Performance:

  • Wrapped most components (EventCard, ComingSoon, RecentEvents, etc.) in memo() to prevent unnecessary re-renders.
  • Memoized event handlers (like handleMouseDown, handleMouseEnter) with useCallback to prevent them from being recreated on every render.
  • Memoized data (like filtered event lists and computed styles) with useMemo so these calculations only run when the data actually changes.
  • Used proper key props (like event.topic) instead of array indexes for better list rendering.

  Images

  • I have used the WebP image format for all images to ensure optimal loading performance.
  • Added loading="lazy" and fetchPriority="low" to images in EventCard and Podcast so they don't block the rest of the page from loading.
  • Added draggable={false} to some images to prevent weird mouse dragging.

AI Usage Acknowledgement

I used the following models from time to time for code generation (depending on the context). But all generated code was reviewed and verified before being used: Gemini 2.5 Flash, Gemini 2.5 Pro, Claude Thinking 3.5, Claude Haiku 4.5, Claude Sonnet 4.5

Important

I'm not that knowledgeable when it comes to Next.js & React (I've used it before, but not in over a year), so I'm looking forward to any suggestions for changes or optimizations you might have!

[mrbhanukab]

It seems like .webm files aren't supported for direct embedding here, but you can still click the links to view the demos.