Frontend: Set Navbar Links to Scroll to Different Sections of the Home Page

[Mkalbani]

🎯 Objective

Ensure the navbar links smoothly scroll to their respective sections within the Home Page when clicked.

🔍 Context

The navbar should provide an intuitive navigation experience by scrolling users to key sections of the home page, based on the Figma design.

📋 Tasks

• Identify all sections in Home.tsx that require navigation (e.g., About, FAQs, How to Play, etc.).
• Assign unique id attributes to each section.
• Update the navbar links to scroll to these sections using the react-scroll package. (ℹ️ package already installed)
• Ensure smooth scrolling and active link highlighting.

💻 Technical Implementation

1️⃣ Add IDs to Sections in Home.tsx
2️⃣ Update Navbar Links in Navbar.tsx
3️⃣ Use the Link's to property to set the route
4️⃣ Ensure styling matches the Figma design.

📌 Contributor Reminders

✅ Check the Contribution Guidelines: 🔗 CONTRIBUTING.md
✅ Sync with the latest changes from the LogiQuest repository before working on this issue.

📝 Acceptance Criteria

✅ Clicking a navbar link scrolls to the correct section.
✅ Smooth scrolling animation is enabled.
✅ The navbar design matches the Figma layout.
✅ The implementation works on all screen sizes.

💪 Skills Required

• React
• Tailwind CSS
• React Scroll
• Responsive Design

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Nacho1499]

@Nacho1499 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on this issue because smooth in-page navigation greatly improves user experience. I have experience using React, implementing smooth scrolling with packages like react-scroll, and assigning unique IDs to sections for navigation. I’m also comfortable ensuring active link highlighting, responsive behavior, and maintaining design consistency with Figma.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nacho1499 to this issue.

[kimcascante]

@kimcascante has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi 👋
I’d like to work on this task to enable smooth scrolling navigation within the Home page. I have experience using react scroll, assigning section anchors, and implementing active link highlighting while maintaining responsive layouts and matching Figma designs.
I’ll follow the contribution guidelines and ensure the behavior works consistently across all screen sizes.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @kimcascante to this issue.

[Adeswalla]

@Adeswalla has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’m interested in working on this frontend issue due to my experience with React/Next.js and would be happy to help resolve it. Let me know how we can proceed. Thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Adeswalla to this issue.

[luighis]

@luighis has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi 👋, I'm a front-end UI/UX developer with experience in Next.js, TypeScript, Shadcn, Zustand, Tailwind CSS, and more.

I would love to tackle this issue.
I actively contribute to several open-source projects and submit high-quality pull requests. The code will be clean, composable, and follow QuestFront conventions, maintaining responsive designs and compatibility with figma, etc.

I'm in the Telegram group: logicQues

I can resolve this issue within 7 hour.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @luighis to this issue.

[Jayrodri088]

@Jayrodri088 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello @Mkalbani Can I take this issue?

I'm a developer with a solid background in Web3, working across both front-end and back-end. You can check out my profile to see my contributions to the most important projects within the Stellar ecosystem.

Additionally, I have experience working in other ecosystems such as StarkNet, Optimism, Worldcoin, and I have already contributed multiple times to Akkuea, Offer-Hub and kindifi.

My ETA on this issue will be 5 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jayrodri088 to this issue.

[Uchechukwu-Ekezie]

@Uchechukwu-Ekezie has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

You can assign this to me—I’m a Stellar smart contract engineer and also a frontend engineer.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Uchechukwu-Ekezie to this issue.

[asalisu6580]

@asalisu6580 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on this issue because it focuses on improving user experience through clear and smooth navigation, which I believe is very important in any frontend application. Making the navbar scroll smoothly to different sections helps users understand and explore the page more easily.

I have experience working with React and Tailwind CSS, and I’ve implemented smooth scrolling and responsive navigation in previous projects. I’m comfortable working with Figma-based designs, structuring page sections with proper IDs, and using tools like react-scroll to create intuitive interactions. I pay attention to detail and enjoy turning designs into clean, functional interfaces.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @asalisu6580 to this issue.

[okekefrancis112]

@okekefrancis112 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on this issue because it improves user experience and interface quality, especially around responsiveness, clarity, and perceived performance. I enjoy working on UI improvements that make applications feel faster, more intuitive, and more polished.

I have experience building React-based interfaces with component-driven architecture, managing loading and error states, and implementing reusable UI components that align with existing design systems. I’m comfortable working with modern frontend tooling, integrating async data flows, and making changes that are accessible, performant, and consistent with the existing codebase.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @okekefrancis112 to this issue.

[drips-wave]

Congratulations, @Adeswalla! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @Adeswalla: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

⚠️ Important: When opening a PR, please link it to this issue to ensure it gets tracked accurately.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[Adeswalla]

I have already worked on this issue and have made a Pull Request, please review and merge the code.

[Adeswalla]

Hello @Mkalbani please review my pull request and merge it.