Implement NFT Category Filter & Featured Collection Section

[davedumto]

Description

Develop and implement the NFT Category Filter & Featured Collection Section based on the provided Figma design. This section should allow users to filter NFTs by category and display a featured NFT collection with an engaging visual layout.

this is the figma link https://www.figma.com/design/Hwb5p9tkv6n3kfixqKYPk3/StarkBid?node-id=0-1&p=f&t=sGFreoGfNL2FRaY1-0

Requirements

Category Filter

• Implement category filter buttons (e.g., All, Art, PFPs, Gaming, Memberships, Photography).
• Ensure filtering functionality updates the displayed NFTs accordingly.
• Maintain a selected state for the active filter.
• Ensure smooth transition effects when switching between categories.

Featured Collection Section

• Display a highlighted NFT collection with:
  • Large preview image
  • Title & short description
  • "View NFT Collection" button
• Ensure text and button placement match the Figma design.
• Optimize for responsiveness across all screen sizes.
• Implement smooth hover effects and animations.

Acceptance Criteria

• The category filter buttons function correctly and visually indicate the active selection.
• Clicking a category dynamically updates the NFT display.
• The featured NFT collection is visually engaging and responsive.
• The "View NFT Collection" button functions as intended.
• The layout matches the Figma design pixel-perfectly.
• Code is optimized, accessible, and follows project best practices.

Additional Notes

• Consider using Framer Motion or CSS transitions for animations.
• Ensure accessibility compliance (ARIA attributes, keyboard navigation).
• Test across multiple devices and browsers to maintain consistency.

Tasks

• Implement the NFT category filter buttons
• Add filtering functionality for NFT collections
• Implement the featured NFT collection section as per Figma
• Ensure responsiveness and smooth animations
• Add hover effects and accessibility compliance
• Test for performance and usability

[ebubechi-ihediwa]

Hi, I'm Ebubechi, a frontend developer specializing in React.js & Next.js. I'll implement the NFT Category Filter & Featured Collection per the Figma design.

Tasks & Features
1.Category Filter: Dynamic buttons (All, Art, PFPs, etc.) with smooth transitions
2. Featured Collection: Large preview, title, description, and CTA button
3.Responsiveness & Animations: Pixel-perfect, smooth effects, and accessibility compliance
✅ Acceptance Criteria

1. Functional filters with active states
2. Dynamic NFT updates
3. Fully responsive & engaging UI.

⏳ ETA: 6 hours
Looking forward to delivering this! 🚀