Create Onboarding Screens ( carousel-like ) Component

[yunho7687]

Basic Information

Create an onboarding screens component. These screens should be displayed when the user first opens the app, providing a carousel-like introduction to the app's key features and benefits.

Requirements:

• Create a React component for the onboarding screens.
• Implement a carousel to navigate through the different onboarding slides. -Navigation ("Prev/Next", progress step)
• Include a skip button to allow users to bypass the onboarding process.
• Ensure smooth transitions between onboarding slides.
• Ensure a smooth transition from the onboarding screens to the main app interface.
• from each picture ensure colour change of time and battery according to image background -note that after each next, there are consecutive dots at front bottom placement of the image that change shape when specifying which image the user is currently at

Figma design

[github-actions[bot]]

Branch issue-13-Create_Onboarding_Screens_carousel-like_Component created!

[keyman015]

The bulk of it has been completed as seen in a sample picture: (ignore the tanstack icon - I can't seem to get rid of it)

However, I am unsure as to the nature of "smooth transitions". Does this mean like a sliding animation or something?

[Julie-Salazar]

The bulk of it has been completed as seen in a sample picture: (ignore the tanstack icon - I can't seem to get rid of it)

However, I am unsure as to the nature of "smooth transitions". Does this mean like a sliding animation or something?

hello! please see issue https://github.com/codersforcauses/penni/issues/30 yes sliding images to left uppon clicking "Next"

[keyman015]

@Julie-Salazar are we allowed to use external packages to provide the basic carousel base then build the component around it? As we already use button from shadcn ui, would it then be possible to use https://ui.shadcn.com/docs/components/carousel? As this has a transition built into it from what I can see.

Edit: Yunho has permitted it.