Frontend: Create and Import the "How to Play" Section

[Mkalbani]

📚 Overview

Design the "How to Play" section on the landing page to align with the new Figma design. This update should provide a clearer, step-by-step guide with engaging visual elements, ensuring players understand the game mechanics immediately.

🎯 Objective

• Update the layout based on the Figma design.
• Implement clear, step-by-step instructions for gameplay.
• Integrate visual elements for each gameplay step.

📋 Tasks

1. Update the section layout according to the provided Figma Design.
2. Implement step-by-step gameplay instructions.
3. Add corresponding visual elements for each step.

📝 Acceptance Criteria

• The section's design matches Figma specifications.
• All gameplay steps are clearly displayed and understandable.
• The section is responsive across all screen sizes.

🔧 Technical Considerations

• Ensure compatibility with existing project structure, which integrates React and TailwindCSS.
• Follow accessible design practices for improved user experience.

Let's make this section as engaging and intuitive as possible! 🚀

[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

[vestor-dev]

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

I’m ready to tackle this issues ser. With a solid background in frontend and smart contract development, I’ll deliver a clean, efficient solution that aligns with the project’s standards. I’ve already reviewed the repo and am confident I can resolve this quickly.

Let me know if you'd like me to get started!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @vestor-dev 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.

[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've reviewed the requirements and I'd love to resolve 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

ℹ️ Repo Maintainers: To accept this application, review their application or assign @luighis 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, @vestor-dev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @vestor-dev: 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 🌊