Step 4 Carousel

[thaninbew]

Overview

Implement a responsive carousel component using Tailwind CSS and shadcn UI that matches the provided Figma hi-fi design and animation. The carousel should replicate the slide stacking, scale, and motion shown. View the animation by clicking “Present” in Figma.

Tasks

• Review the Figma file (hi-fi) and click Present to understand:
  • Card sizing, spacing.
  • Carousel animation (slide transition, scaling, z-index layering, arrow key behavior)
• Set up a reusable Carousel component using shadcn primitives (e.g. button, card) and Tailwind utility classes.
• Implement:
  • Center “active” card, partially visible previous/next cards
  • Left/right navigation arrows
  • Smooth animated transitions for slide change (translate, scale, opacity) to match Figma.
• Make the carousel responsive:
  • Desktop: layout and spacing per Figma
  • Tablet/mobile: ensure cards and arrows are usable and visually consistent

Acceptance Criteria

• Carousel visually matches Figma hi-fi (colors, typography, card shapes, arrow style, and spacing).
• Animation on slide change closely matches Figma Present mode (if you have suggestions, reach out to Matt Chavez)
  • Active card centered and scaled
  • Adjacent cards partially visible with correct depth/opacity
• Works correctly on desktop, tablet, mobile.
• Arrows move the carousel one card at a time and disable during animation according to design.
• Component accepts a list of slide objects and renders them dynamically (no hardcoded content).
• Code uses Tailwind utility classes and shadcn components consistently with existing project conventions.

Notes

• Coordinate with design if any behavior is unclear

Reference