Add arrow icons for improved navigation flow between resource cards #392
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for fossc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Requesting @JiyaGupta-cs for a review. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds animated arrow icons to improve navigation flow between resource cards on various resource pages.
- Introduces LuArrowRight and LuArrowDown from react-icons to display directional arrows.
- Implements responsive and animated arrow components across Web3, Frontend, Backend, App, and AI resource pages.
- Makes minor formatting and styling adjustments to support the new navigation elements.
Reviewed Changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/resources/web3/page.tsx | Added responsive right and bottom arrow components with framer-motion animations. |
| src/app/resources/page.tsx | Integrated arrow icons in the main resources grid with responsive adjustments and gradient split logic. |
| src/app/resources/frontend/page.tsx | Added arrow icons between frontend resource cards and refactored dynamic link generation. |
| src/app/resources/backend/page.tsx | Introduced arrow icons on the backend resource page with updated text formatting. |
| src/app/resources/app/page.tsx | Implemented arrow icons for enhanced visual cues on the App development page. |
| src/app/resources/ai/page.tsx | Added arrow icons and refined text formatting for the AI and ML resource page. |
Files not reviewed (1)
- package.json: Language not supported
Comments suppressed due to low confidence (1)
src/app/resources/page.tsx:92
- The use of category.color.split(" ") assumes the color string always contains exactly two parts separated by a space. Consider validating the split output or refactoring to ensure it handles potential unexpected formats.
backgroundImage: `linear-gradient(to right, ${ category.color.split(" ")[0] }, ${ category.color.split(" ")[1] })`,
|
@naitikhoriya1 Currently, the Web3 and some other sections are empty, still resource section displays navigation arrows (left/right and down), For now, consider removing or disabling the navigation controls for sections with no available content. |
|
@naitikhoriya1 |
|
@JiyaGupta-cs I will consider that in today evening after my collage timing please |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Let me help you fill out the PR template:
Fixes
Fixes #382 by @naitik
Description
Added arrow icons between resource cards on the Resources page and individual resource category pages to improve visual clarity and navigation flow.
Technical details
Tests
Screenshots
Before:
After:
Checklist
Update index.md).mainormaster).Note: You'll need to add actual screenshots for the "Before" and "After" sections to help reviewers visualize the changes.