Refactor Home page and replace current index /quests

[fricoben]

Description 📹

Create a new index page following this figma

Rename the current index to /quests and adapt links of the navbar

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]

2. Implement Changes:
   File Structure Changes:

• Create new directory app/quests
• Move current app/page.tsx to app/quests/page.tsx
• Create new app/page.tsx for the landing page

Navigation Updates:

• Update navbar links to point to new /quests route

New Landing Page Implementation:

• Create new components for landing page sections:
  • Hero section
  • Features grid
  • Call-to-action section
• Implement responsive design following Figma specs
• Add animations and transitions as shown in design
• Ensure proper image optimization for new assets

Testing:

• Test all navigation flows
• Verify responsive behavior
• Check accessibility
• Ensure no broken links

3. Run Tests and Commit Changes:
   Make sure your changes don't break existing functionality and commit with a clear message:

   git commit -m "Fix: [Short description of the fix]"

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.
• Timeframe: Complete the task within 3 business days.
• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
• Review Process:
  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.
• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[Yunusabdul38]

@fricoben I'd like to work on this issue to implement the necessary changes and also make sure it is responsive

[martinvibes]

Hey @fricoben I'm an experienced frontend developer and blockchain dev and I would like to work on this issue.

I would make sure to follow the figma design to pixel perfect and responsive on all devices

Please kindly assign :)
You can check my github and onlydust profile as proof https://app.onlydust.com/u/martinvibes

[ShantelPeters]

Hi @fricoben i am a frontend and blockchain developer. Please I will love to work on this issue and be a contributor.

[wheval]

Hello @fricoben, is this issue for ODHack10?

[lauchaves]

Hey, guys @fricoben @Marchand-Nicolas 👋 I'm Lau Chaves from Dojo Coding. I have over five years of experience with JavaScript, ReactJS, React Native, TypeScript, and Ruby. I’m now enthusiastic about Web3 and eager to learn more!

My primary role has been as a front-end developer, and I have a keen eye for detail with a strong focus on mobile-first approaches. I ensure the quality of my work through rigorous self-QA processes. I have solid knowledge of CSS, Sass, and styled-components. So for this one, I'd create the new directory and page, and implement the new design with the components mentioned on the ticket. I'll ensure the new route, design, and animations look and work as expected.

Feel free to check out my OnlyDust profile or my GitHub profile!

Also, I have contributed to Starknet Quest and would love to continue contributing! I have everything set up, so I can start working on it right away! May I work on this one?

[wheval]

Hello @fricoben , I'm Wheval an experienced frontend developer who has worked on several landing pages.

To handle this issue. I would move the current index page to quests, then i would implement the figma design to be the new landing page.
I would ensure the landing page exactly matches the Figma design.
I would build it to be responsive with the specified gradients, animations and transitions. I would also optimize the images using Nextjs <Image/> tag and ensure semantic tags.
I would also create draft PR to keep you posted and I would ensure to test it for responsiveness and broken links.

I would really love to work on this.
ETA is 2 days. Thanks.

[Benjtalkshow]

I'd love to give this a go.

[Emmanex01]

I’d like to work on this.

[blessingbytes]

Hi @fricoben , pls i will like to work on this issue plssss

[Akshola00]

I'd like to handle this task.

[BrunoAmbricca]

I would like to work on this issue

[Supa-mega]

Can I attempt this issue?

[ryzen-xp]

Hi, I am proficient Blockchain developer expert in Cairo , Rust and Solidity and also in web development.
I have contributed many stark net project and more . please /assign this issue .
Thank You

[SYLVIANNORUKA]

Can I take this issue?I am a Front-end and smart contract developer. I am proficient in tailwind css, Next Js, Typescript, JavaScript, Cairo and Rust. I would love to contribute to this project.I will find the current index file, likely named index.jsx or Home.jsx.
Create a new file for the redesigned index page, such as NewIndex.jsx then
add a corresponding stylesheet, e.g., NewIndex.css, or use a CSS-in-JS approach to match the Figma design.tesst the page
Rename the current index.jsx file to Quests.jsx. and update it locate the navigation link and update it
run the application and check for responsiveness

[Amarjeet325]

Hi , I am a proficient MERN stack developer with experience in full-stack development. I believe I can contribute effectively to this project. Could you kindly assign this issue/task to me?

[austineblaise]

I'm Augustine Oguche, a JavaScript + TypeScript developer, and I'm very good at what I do! This is my first time working on an OnlyDust open-source project, and I'm excited to contribute.

To complete this task, I will:

• Fork the repository and create a new branch named fix-[issue-number].
• Move the current page.tsx to app/quests/page.tsx and create a new app/page.tsx for the landing page.
• Update the navbar links to point to the new /quests route.
• Implement the new landing page following the Figma design, including sections like the Hero, Features grid, and Call-to-action. I'll ensure it's responsive, with animations and transitions as shown in the design.
• Optimize images and ensure the page functions well on all screen sizes.
• Test all navigation, responsiveness, and accessibility.
• Commit my changes with a clear message and test locally before pushing.
• Complete the task within 3 business days and close the issue in the PR description.

I look forward to contributing to the project and delivering great work!

[vestor-dev]

hey sir I'd like to handle this task.
i'm a frontend developer and a blockchain dev
i would really love to contribute to your project
please kindly assign :)

[Emmanex01]

May I handle this issue?

[0xdevcollins]

Can I take care of this issue?

[DioChuks]

Can I try solving this issue? How I'd be going bout it is to use an object-oriented approach with a class of TextAnimatorto handle the state of the animation and words, I'll also be adding GSAP. From what I can tell that is in the codepen shared, it seems to be carefully pieced fragments in figma put together to form the words in one piece, here's my approach to solving the issue of text animation though: my codepen link, also somethings were missing like where the @import compass link from the codepen you shared was supposed to be for testing purposes!

I can wrap up the landing page design with responsiveness in a day, ensuring the application file structure is aligned with what's needed! and updating the route of the navbar links.

[mimisavage]

Could I try solving this?

[baitcode]

Background: https://www.linkedin.com/in/batiyiv/
I have experience creating pixel perfect adaptive pages in single page applications with react. Would love to contribute.

[OWK50GA]

I'm Wilfrid, a Frontend Web Developer, and I will like to take this on as a challenge
Can I handle this task?
I have checked the figma, and the new design is sophisiticated, but at the same time not difficult to handle. I can deliver this within 3 days, with the UI and functionality.

After doing the file migration mentioned, I will create a new page.tsx on the app root and start putting the new UI together while making sure no logic breaks

[web3normad]

Hi, I am experienced in React/Next.js, TypeScript & responsive design. I've implemented complex landing pages from Figma before amd can deliver this within 3 days while following all requirements.

[caxtonacollins]

I'd be happy to do this.

[GideonBature]

Can I try solving this issue?

My name Gideon Bature, a Software Engineer. I have experience working with ReactJS using JavaScript/TypeScript. If assigned this task, I will be able to send a PR within 48 hrs.

Thank you!

[abdegenius]

May I try my hand at this?

[Pvsaint]

Hi I'm Victor, a first time contributor, mind if I take this issue?

[baitcode]

@fricoben Hello!

I've spent 3 hours doing research on dependency resolution problems in the project. Here is what I've found:

• get-starknet-core: dependency name has changed. It should be installed via @starknet-io/get-starknet-core dependency and version needs to be bumped to v4.0.0, this will add additional (mobile) browser keys into WalletProvider object (the objects structure and logic is unchanged so should not cause any compatibility issues, I've checked usages).
• "eslint-config-next": "^14.0.1": needs to be moved under devDependencies and bumped to 15-th version. Should also not cause any issues.

After fixing those things I finally bumped into serious one. My Apple M1 laptop can't run 14th version of nextjs project as it requires installation of special compiler that only exists for next.js version 15. Unfortunately to me this is a scary update that requires a full project testing. To procceed with the issue, I need support on that. I can upgrade and finalize the task, but I would need you to help me test the rest of the project. If this is fine with you, I'll go on. If not then, please, remove from the task, so I would continue contributions to other projects.

[baitcode]

@fricoben Thank you! Issues resolved, proceed to implementation.