Announcements

[YOGESH-08]

🚀 Feature: Interactive Event Announcement Cards & Top Navbar Banner Carousel

📝 Summary

This PR introduces interactive event announcement features across the application, including full card hover/click-redirect capabilities for Catalogue event cards and a smooth, auto-sliding event banner carousel in the top navbar. It also implements a session-persistent dismissal system with clean instant container collapsing.

---

✨ Key Changes & Features

1. 🎯 Interactive Event Cards (Catalogue Grid)

• Full-Card Click Redirect: Clicking anywhere on an event card redirects directly to the event's registration URL (registrationUrl) in a new tab. Sub-buttons (e.g. "Learn More") continue to handle their specific actions.
• Rich Hover Effects:
  • Theme-matching background surface color transitions on hover (purple, amber, green, rose).
  • Subtle card elevation lift (hover:-translate-y-0.5 hover:shadow-xl).
  • Smooth image/logo zoom-in effect on hover (group-hover:scale-105).
  • Title color highlight transition.
• Minimal Dismiss Button: Replaced the textual "Hide x" button with a clean, minimal X icon button (<X className="h-4 w-4" />).

2. 🎡 Top Navbar Banner Carousel

• Auto-Rotation: Banner automatically cycles through active events (e.g. Clueminati 4.0, CookOff 11) every 5 seconds.
• Pause-on-Hover: Auto-sliding automatically pauses when the user hovers over the banner, allowing comfortable reading and interaction.
• Smooth Glide Transition: Implemented a 700ms ease-in-out horizontal sliding transition (translateX) between event slides.

3. 🛡️ Clean Parent-Level Session Dismissal

• Instant Collapse (0 Empty Space): Dismissing a banner or card triggers parent-level state management (Navbar.tsx and CatalogueContent.tsx), instantly removing the entire banner/card container without leaving empty space or waiting for the next 5-second interval slide.
• Session Persistence: Dismissal preference is stored in sessionStorage (session-only), ensuring announcements automatically reappear when a user opens a new browser tab or session.

---

🛠️ Technical Details & Files Modified

• src/components/ui/announcement/Announcement.tsx

  • Added container onClick handle for card & banner variants with target filtering for action buttons (target.closest("button, a, input, svg")).
  • Added accent-tailored hover background surface colors (hover:bg-[#EFEAFF], etc.).
  • Updated card dismiss button to a clean, minimal X icon.
  • Implemented sessionStorage fallback for dismissal state.

• src/components/Navbar.tsx

  • Added currentBannerIndex auto-rotation state (5000ms timer with hover pause).
  • Wrapped slides in a smooth horizontal sliding track (transition-transform duration-700 ease-in-out).
  • Implemented parent-level isTopBannerDismissed state to instantly collapse the top banner container on dismiss.

• src/components/CatalogueContent.tsx

  • Added parent-level isGridEventsDismissed state to instantly clear all grid event cards when dismissed.

---

🧪 Verification & Testing

• TypeScript Validation: npx tsc --noEmit passed with 0 errors.
• Production Build: Full Next.js production build (npm run build) compiled successfully with ✓ Generating static pages (13/13).
• Cross-Theme & Responsive Check: Verified dark & light theme accent styles and responsive mobile/desktop layouts.