About

This app is designed to guide users through a structured process in three distinct steps: Discover, Connect, and Succeed. Each step is presented with a title, subtitle, detailed description, and an accompanying image, making it visually engaging and easy to understand. To use the app, users can navigate through the steps using a sidebar navigation component that highlights the current step and allows users to click on any step to view its content. Additionally, users can manually advance through the steps using "Next" and "Previous" buttons, or they can let the app automatically transition between steps every five seconds. The automatic transition pauses when the user hovers over or focuses on the component, allowing for a more interactive experience. The app is built using TypeScript and React, leveraging Next.js for server-side rendering and image optimization. It utilizes a combination of functional components, hooks, and CSS for styling and layout. Key features include a responsive design that adapts to different screen sizes, smooth transitions between steps, and a clear visual hierarchy that enhances user comprehension. Overall, this app provides a straightforward and engaging way for users to understand and navigate a process, making it suitable for various applications where step-by-step guidance is beneficial.