Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement the Trending in Gaming Section #10

Open
6 tasks
davedumto opened this issue Feb 20, 2025 · 3 comments · May be fixed by #19
Open
6 tasks

Implement the Trending in Gaming Section #10

davedumto opened this issue Feb 20, 2025 · 3 comments · May be fixed by #19
Assignees

Comments

@davedumto
Copy link
Contributor

davedumto commented Feb 20, 2025

Description

Develop and implement the Trending in Gaming Section based on the provided Figma design. This section should showcase popular gaming-related NFT collections, displaying their floor price, total volume, and collection details. The section should support horizontal scrolling with navigation controls.

Image

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

Requirements

Card Design & Content

  • Each gaming NFT collection should be displayed as a card containing:
    • NFT Image
    • Collection Name
    • Floor Price (ETH)
    • Total Volume (ETH)
  • Ensure the cards match the Figma design and are fully responsive.

Carousel Functionality

  • Implement horizontal scrolling for navigating through multiple gaming collections.
  • Include left and right arrow buttons for navigation.
  • Ensure the carousel supports drag/swipe gestures for a smooth user experience.

Acceptance Criteria

  • The NFT collection cards match the Figma design pixel-perfectly.
  • The carousel functions smoothly, supporting both button navigation and swipe gestures.
  • The floor price and total volume are displayed correctly for each NFT collection.
  • The layout is fully responsive across mobile, tablet, and desktop views.
  • Code follows best practices for performance, reusability, and accessibility.

Additional Notes

  • Use Framer Motion or CSS transitions for smooth animations.
  • Ensure accessibility compliance (ARIA attributes, keyboard navigation).
  • Optimize for performance to prevent unnecessary re-renders.
  • Test across different screen sizes and browsers for consistency.

Tasks

  • Implement the Trending in Gaming card design as per Figma
  • Add horizontal scrolling functionality
  • Ensure responsiveness and accessibility compliance
  • Implement smooth animations for transitions
  • Add arrow buttons for navigation
  • Test across multiple devices and browsers
@simplicityf
Copy link

Could I be assigned to this?
I have built a frontend NFT application, i won't have a problem getting this done as indicated considering my experience.

@chiscookeke11
Copy link

Can I work on this, please?

@chiscookeke11
Copy link

Thank you
on the task

@chiscookeke11 chiscookeke11 linked a pull request Feb 22, 2025 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants