feat: Implement client-side page navigation

[dhanaraj02]

Issue 1

Description

This Pull Request introduces client-side multi-page navigation to the DevSync frontend, allowing users to navigate between the Home, Features, and About Us sections as distinct pages. This enhances the user experience by providing a more structured and organized content flow, moving away from a single-page application with scroll-based sections.

Changes Implemented

• frontend/src/App.jsx:

  • Introduced React's useState hook to manage the currentPage state, controlling which main content component is rendered.
  • Implemented a renderPage function to conditionally display Hero (with AdStrip), FeaturesSection, or About based on the currentPage state.
  • Removed id attributes from the main content sections as navigation is now handled via state.
  • Passed handlePageChange function as a prop to the Navbar component.

• frontend/src/Components/Navbar/Navbar.jsx:

  • Modified navItems to use a page property for internal navigation and retain link for external URLs (like GitHub).
  • Updated the rendering logic for navigation items to use a <button> element for internal pages, triggering the onPageChange prop.
  • Prepared floatingNavItems to correctly pass onClick handlers to the FloatingNav component for internal navigation.

• frontend/src/Components/ui/floating-navbar.tsx (or .jsx if converted):

  • Updated the NavItem interface (or object structure in JSX) to include an optional onClick property.
  • Modified the component's rendering logic to conditionally render a <button> element when an onClick handler is present in a navItem, otherwise defaulting to an <a> tag for link-based navigation. This ensures proper click handling for internal routes within the floating navbar.

Benefits

• Improved User Experience: Provides a clearer navigation structure, making it easier for users to find specific information.
• Modularity: Separates concerns by rendering distinct components for each "page," which can simplify future development and maintenance.
• Scalability: Lays the groundwork for adding more complex routing or distinct pages in the future.

[Annanyatiwary4]

Hey please solve these conflicts !!

[Annanyatiwary4]

on clicking any navItem its taking it to Page not found . kindly fix this .

[dhanaraj02]

@Annanyatiwary4 its created by some other contributor who made the 404 not found page.

[dhanaraj02]

i will checkout and resolve this issue.

[dhanaraj02]

hey @Annanyatiwary4 , i hope i resolved the issue this time.

[Annanyatiwary4]

share the screenshots of the changes you made !!

[dhanaraj02]

@Annanyatiwary4 :Here is a short description of the changes I made




:

I refactored the frontend of the DevSync application to create a multi-page user interface. The original single-page design, which displayed all components on one page, was converted into a multi-page application using react-router-dom.

The key changes include:

• File Structure: I created a new frontend/src/Pages/ directory to house individual page components.
• Routing: I configured App.jsx to act as the main router, defining distinct routes for different sections like Home, About, Contact, Features, and Ad.
• Component Separation: The large, monolithic components were broken down and placed into their own dedicated page files (e.g., About.jsx is now rendered on /about via AboutPage.jsx).
• Navigation: I updated the Navbar.jsx component to use Link components from react-router-dom, enabling seamless client-side navigation between the new pages.
• Code Correction: I resolved several import/export errors by ensuring components like Features, Footer, and Loader were properly exported with export default.

[Annanyatiwary4]

please don’t change the overall design of the website. Keep the existing design exactly as it is, and just convert the sections into separate pages as needed. Let me know if anything’s unclear!