Enhanced Catalogue Browser

[JunHammy]

What was done in this PR

1. Improved Content Sliding Animation
   Refined the animation logic for smoother and more consistent content transitions.

2. Image Loading Experience
   Integrated the <Skeleton> component to display a placeholder while images are loading, enhancing perceived performance.

3. Keyboard Navigation Enhancements

   • Enabled left/right arrow key navigation for CatalogueItemView.
   • Resolved issue where arrow key input unintentionally scrolled the background Section.

4. Mobile Experience Improvements

   • Removed chevron buttons on mobile view.
   • Enabled natural swipe gestures for horizontal scrolling on touch devices.

5. Arrow Overlay Optimization
   Removed the arrow overlay component from mobile view to reduce visual clutter and improve UX.

6. Chevron Double-Click Bug Fix
   Fixed a bug where double-clicking chevrons in CatalogueItemView caused it to skip two items instead of one.

[Prakhar896]

This is very well-written, the user experience is much improved as well. Just a few things to look at for my comments. Can you also do me a favour and, in a comment under this PR, describe and document all the different things going on when it comes to responsiveness, arrow keys, skeleton placeholders, and all the other features in detail?

[JunHammy]

Component Summary

Catalogue.jsx

• Manages main catalogue state and toggles detailed sections.
• Responsive toggling of expanded section with height/opacity animation (motion.div).
• Renders MMSection and multiple Sections dynamically.

---

MMSection.jsx

• Horizontally scrollable meeting cards in a table layout.
• Shows left/right scroll arrows (ArrowOverlay) on desktop only.
• Tracks scroll position to enable/disable arrows.
• Responsive: arrows hidden on mobile (useBreakpointValue).

---

Section.jsx

• Scrollable image cards section with dynamic length.
• Uses scroll arrows (ArrowOverlay) with edge detection.
• Opens modal (CatalogueItemView) on card click.
• Responsive arrow visibility with useBreakpointValue.
• Scroll animation via scrollBy.

---

ArrowOverlay.jsx

• Scroll arrow button with gradient background.
• Disabled and faded at scroll edges.
• Hover scale animation on desktop.
• Positioned absolutely on left/right edges.

---

CardItem.jsx

• Card with image and text, showing hover preview on desktop only.
• Hover preview floats using Framer Motion and dynamically positioned to stay within viewport.
• Hover delayed 1s, canceled on mobile.
• Skeleton placeholders for image and text loading.
• Responsive: disables hover logic on mobile (useBreakpointValue).

---

CardComponent.jsx

• Displays image and text with Chakra UI Skeleton placeholders.
• Lazy loads image and triggers loading state.
• Supports expanded description view.
• Box shadow and border highlight for selected state.

---

CatalogueItemView.jsx

• Fullscreen modal viewer rendered in a Portal.
• Responsive layouts:
  • Mobile: swipeable horizontal scroll with scroll snapping.
  • Desktop: animated sliding transitions between items.
• Keyboard navigation with Arrow keys.
• Chevron navigation buttons on desktop.
• Blocks background scroll when open.
• Smooth fade and slide animations with Framer Motion.

[JunHammy]

Summary Table

Component	Responsiveness	Animation / Interaction
Catalogue	Dynamic sections toggle; mobile-friendly	Height/opacity transitions with Framer Motion
MMSection	Horizontal scroll; arrows hidden on mobile	Arrow enable/disable on scroll edges
Section	Scrollable cards; arrows responsive	Scroll by buttons; opens modal on click
ArrowOverlay	Desktop-only arrows with fade and hover	Scale on hover; disabled states
CardItem	Hover preview desktop only; mobile-safe	Floating preview animation; delayed hover
CardComponent	Skeleton loading for images and text	Fade-in on image load
CatalogueItemView	Fullscreen modal; swipe on mobile; slide on desktop	Keyboard nav; modal open/close animations

[Prakhar896]

LGTM