DurianPy Upcoming Events Section

[ArJSarmiento]

The DurianPy website requires an Upcoming Events section to display featured events, countdown timers, and event previews. This section should be interactive, visually appealing, and responsive, allowing users to view and register for events dynamically.

---

Requirements:

1. Layout & Design

✅ Section Title & Primary Event

• Heading: "Upcoming Events"
  • "Upcoming" in white, "Events" in DurianPy’s yellow/gold branding.
• Primary Event Card (Featured Event)
  • Includes:
    • Event Title (e.g., PyCon Mini Davao)
    • Date & Location (e.g., June 20, 2025 – Mugna Tech, Davao City)
    • Register Button ("Register Here") (should link to /404 for now).
  • Gradient background effect for a premium visual appeal.

✅ Countdown Timer (For Primary Event Only)

• Live countdown displaying:
  • Days, Hours, Minutes, and Seconds
  • Use dynamic updates with real-time countdown logic.
  • Styled in bold green typography for visibility.

✅ Other Event Previews (Grid Format)

• Display additional upcoming events in a 3-column grid (desktop) or stacked layout (mobile).
• Each event card should contain:
  • Event Name
  • Date & Location
• Cards should have subtle hover effects (glow or scale-up).

✅ "See More Events" Button

• A yellow button centered below the grid.
• Clicking should expand the section or redirect to an events page (currently /404).

---

2. Responsiveness & Adaptability

✅ Desktop View:

• Primary Event (Featured) should be on top with the countdown timer aligned to the right.
• The other event cards should be displayed in a grid layout below.

✅ Mobile View:

• The primary event should stack with the countdown below it.
• Other events should be in a vertical stacked layout.
• "See More Events" should remain centered below the list.

---

3. Functionality & Technical Details

✅ Real-Time Countdown Logic

• Use Next.js built-in state management (useState & useEffect) to update the countdown every second.
• Calculate the remaining time dynamically based on event date.

✅ Performance Optimizations

• Use lazy loading for images to improve load speed.
• Implement optimized Tailwind CSS flex/grid utilities for responsive adjustments.

---

Implementation Details

• Framework: Next.js
• Styling: Tailwind CSS
• State Management: useState, useEffect for countdown updates
• Dynamic Components:
  • <EventCard /> (Reusable event display component)
  • <CountdownTimer /> (Dynamically updates time)

---

Acceptance Criteria:

• Primary Event is visually distinct with a working countdown timer.
• Register button directs to /404 for now.
• Other events appear in a structured layout (grid for desktop, stacked for mobile).
• Countdown timer updates in real-time.
• "See More Events" button functions properly (expands or redirects).
• Design is fully responsive and optimized for performance.

---

References & Design Mockups:

https://www.figma.com/design/fWTw453j5xKUk0Nf6nnQYb/DurianPy?node-id=402-696&m=dev

[ArJSarmiento]

Hi @Samshh . Please review. Thanks!

[ArJSarmiento]

New PR Link @Samshh from @jnvillamor and @csjodes :

#68