Feature/added nav links landing page - #167
Merged
aviralsaxena16 merged 2 commits intoApr 9, 2026
Merged
Conversation
🎉 Thanks for Your Contribution to CanonForces!
|
|
@hansikareddy29 is attempting to deploy a commit to the aviralsaxena16's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughTwo page files are modified to restructure UI and navigation. The footer's social links are updated with new external URLs and different icon set. The homepage removes a call-to-action section and integrates navigation links to a signup flow. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
🚥 Pre-merge checks | ❌ 3❌ Failed checks (3 warnings)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/common/components/Footer/Footer.tsx (1)
28-42: Consider rendering social links from a config array.The repeated anchor/icon blocks are maintainable now, but this is a good candidate for a small map-based render to reduce duplication and make future link updates safer.
♻️ Example refactor
+ const socialLinks = [ + { href: 'https://x.com/OpenLakeClub', label: 'OpenLake on X', Icon: AiFillTwitterCircle, size: '1.8em' }, + { href: 'https://www.linkedin.com/company/openlake/', label: 'OpenLake on LinkedIn', Icon: AiFillLinkedin, size: '1.7em' }, + { href: 'https://github.com/OpenLake', label: 'OpenLake on GitHub', Icon: AiFillGithub, size: '1.7em' }, + { href: 'https://www.instagram.com/openlake_iitbhilai/', label: 'OpenLake on Instagram', Icon: BsInstagram, size: '1.6em' }, + { href: 'https://discord.gg/eDYPDK2y', label: 'OpenLake on Discord', Icon: BsDiscord, size: '1.6em' }, + ]; - <a href='...' target='_blank' rel='noopener noreferrer'>...</a> - ... + {socialLinks.map(({ href, label, Icon, size }) => ( + <a key={href} href={href} target='_blank' rel='noopener noreferrer' aria-label={`${label} (opens in a new tab)`}> + <Icon aria-hidden='true' focusable='false' size={size} /> + </a> + ))}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/common/components/Footer/Footer.tsx` around lines 28 - 42, The Footer component repeats multiple anchor/icon blocks (AiFillTwitterCircle, AiFillLinkedin, AiFillGithub, BsInstagram, BsDiscord); refactor by creating a config array of social link objects (e.g., { id, href, Icon, size }) and map over it to render each <a> with proper key, target='_blank' and rel='noopener noreferrer' and Icon rendered with the configured size; update Footer.tsx to import the same icon components and replace the repeated JSX with the map-rendered output to reduce duplication and make future updates safer.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/common/components/Footer/Footer.tsx`:
- Around line 28-42: The Footer component contains icon-only anchor links
(AiFillTwitterCircle, AiFillLinkedin, AiFillGithub, BsInstagram, BsDiscord) that
lack accessible names; update each <a> in Footer.tsx to include an appropriate
aria-label (e.g., "OpenLake on X/Twitter", "OpenLake on LinkedIn", etc.) and
mark the inline icon SVGs as decorative by adding aria-hidden="true" (and
focusable="false") to the icon elements so screen readers get the link purpose
but not duplicate icon content.
In `@src/pages/index.tsx`:
- Around line 48-52: The JSX nests a <button> inside a Link which creates
invalid interactive nesting and breaks accessibility; remove the inner <button>
and apply the button classes directly to the Link (e.g., replace Link
href="/signup"><button className={`${styles.button_blue}
...`}>Explore</button></Link> with Link href="/signup"
className={`${styles.button_blue} px-8 py-3 rounded-xl shadow-lg transition-all
duration-200 hover:scale-105`}>Explore</Link>), and do the same change for the
second occurrence so both Link elements use the button styling directly.
---
Nitpick comments:
In `@src/common/components/Footer/Footer.tsx`:
- Around line 28-42: The Footer component repeats multiple anchor/icon blocks
(AiFillTwitterCircle, AiFillLinkedin, AiFillGithub, BsInstagram, BsDiscord);
refactor by creating a config array of social link objects (e.g., { id, href,
Icon, size }) and map over it to render each <a> with proper key,
target='_blank' and rel='noopener noreferrer' and Icon rendered with the
configured size; update Footer.tsx to import the same icon components and
replace the repeated JSX with the map-rendered output to reduce duplication and
make future updates safer.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 871e14fb-dfe3-4662-8694-3873fa5c9589
📒 Files selected for processing (2)
src/common/components/Footer/Footer.tsxsrc/pages/index.tsx
Comment on lines
+28
to
+42
| <a href='https://x.com/OpenLakeClub' target='_blank' rel='noopener noreferrer'> | ||
| <AiFillTwitterCircle size={'1.8em'} /> | ||
| </a> | ||
| <a href='https://www.linkedin.com/company/openlake/' target='_blank' rel='noopener noreferrer'> | ||
| <AiFillLinkedin size={'1.7em'} /> | ||
| </a> | ||
| <a href='https://github.com/OpenLake' target='_blank' rel='noopener noreferrer'> | ||
| <AiFillGithub size={'1.7em'} /> | ||
| </a> | ||
| <a href='https://www.instagram.com/openlake_iitbhilai/' target='_blank' rel='noopener noreferrer'> | ||
| <BsInstagram size={'1.6em'} /> | ||
| </a> | ||
| <a href='https://discord.gg/eDYPDK2y' target='_blank' rel='noopener noreferrer'> | ||
| <BsDiscord size={'1.6em'} /> | ||
| </a> |
There was a problem hiding this comment.
Add accessible names to icon-only links.
These anchors are icon-only, so assistive tech gets little/no destination context. Please add aria-label (and mark icons decorative) so users can identify each social link.
♿ Proposed fix
- <a href='https://x.com/OpenLakeClub' target='_blank' rel='noopener noreferrer'>
- <AiFillTwitterCircle size={'1.8em'} />
+ <a
+ href='https://x.com/OpenLakeClub'
+ target='_blank'
+ rel='noopener noreferrer'
+ aria-label='OpenLake on X (opens in a new tab)'
+ >
+ <AiFillTwitterCircle aria-hidden='true' focusable='false' size={'1.8em'} />
</a>Apply the same pattern to the LinkedIn, GitHub, Instagram, and Discord links.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <a href='https://x.com/OpenLakeClub' target='_blank' rel='noopener noreferrer'> | |
| <AiFillTwitterCircle size={'1.8em'} /> | |
| </a> | |
| <a href='https://www.linkedin.com/company/openlake/' target='_blank' rel='noopener noreferrer'> | |
| <AiFillLinkedin size={'1.7em'} /> | |
| </a> | |
| <a href='https://github.com/OpenLake' target='_blank' rel='noopener noreferrer'> | |
| <AiFillGithub size={'1.7em'} /> | |
| </a> | |
| <a href='https://www.instagram.com/openlake_iitbhilai/' target='_blank' rel='noopener noreferrer'> | |
| <BsInstagram size={'1.6em'} /> | |
| </a> | |
| <a href='https://discord.gg/eDYPDK2y' target='_blank' rel='noopener noreferrer'> | |
| <BsDiscord size={'1.6em'} /> | |
| </a> | |
| <a | |
| href='https://x.com/OpenLakeClub' | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| aria-label='OpenLake on X (opens in a new tab)' | |
| > | |
| <AiFillTwitterCircle aria-hidden='true' focusable='false' size={'1.8em'} /> | |
| </a> | |
| <a | |
| href='https://www.linkedin.com/company/openlake/' | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| aria-label='OpenLake on LinkedIn (opens in a new tab)' | |
| > | |
| <AiFillLinkedin aria-hidden='true' focusable='false' size={'1.7em'} /> | |
| </a> | |
| <a | |
| href='https://github.com/OpenLake' | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| aria-label='OpenLake on GitHub (opens in a new tab)' | |
| > | |
| <AiFillGithub aria-hidden='true' focusable='false' size={'1.7em'} /> | |
| </a> | |
| <a | |
| href='https://www.instagram.com/openlake_iitbhilai/' | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| aria-label='OpenLake on Instagram (opens in a new tab)' | |
| > | |
| <BsInstagram aria-hidden='true' focusable='false' size={'1.6em'} /> | |
| </a> | |
| <a | |
| href='https://discord.gg/eDYPDK2y' | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| aria-label='OpenLake on Discord (opens in a new tab)' | |
| > | |
| <BsDiscord aria-hidden='true' focusable='false' size={'1.6em'} /> | |
| </a> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/common/components/Footer/Footer.tsx` around lines 28 - 42, The Footer
component contains icon-only anchor links (AiFillTwitterCircle, AiFillLinkedin,
AiFillGithub, BsInstagram, BsDiscord) that lack accessible names; update each
<a> in Footer.tsx to include an appropriate aria-label (e.g., "OpenLake on
X/Twitter", "OpenLake on LinkedIn", etc.) and mark the inline icon SVGs as
decorative by adding aria-hidden="true" (and focusable="false") to the icon
elements so screen readers get the link purpose but not duplicate icon content.
Comment on lines
+48
to
+52
| <Link href="/signup"> | ||
| <button className={`${styles.button_blue} px-8 py-3 rounded-xl shadow-lg transition-all duration-200 hover:scale-105`}> | ||
| Explore | ||
| </button> | ||
| </Link> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -nP --type=tsx -C2 '<Link[^>]*>\s*(?:\n|\r|\s)*<button\b'Repository: OpenLake/canonforces
Length of output: 91
🏁 Script executed:
#!/bin/bash
# First, check if the file exists and read the specific lines
if [ -f "src/pages/index.tsx" ]; then
echo "=== Lines 48-52 ==="
sed -n '48,52p' src/pages/index.tsx
echo ""
echo "=== Lines 55-60 ==="
sed -n '55,60p' src/pages/index.tsx
else
echo "File not found: src/pages/index.tsx"
fiRepository: OpenLake/canonforces
Length of output: 845
🏁 Script executed:
#!/bin/bash
# Search for Link wrapping button patterns using corrected approach
# Using regex that works with rg, searching all tsx/jsx files
rg -n --type-list | head -20Repository: OpenLake/canonforces
Length of output: 623
🏁 Script executed:
#!/bin/bash
# Search for the specific pattern in JSX/TSX files - using looser pattern
find . -name "*.tsx" -o -name "*.jsx" | head -20Repository: OpenLake/canonforces
Length of output: 1053
🏁 Script executed:
#!/bin/bash
# Search for Link wrapping button in tsx files using basic pattern matching
rg -n 'Link.*href.*>.*<button' --multiline --max-count=20Repository: OpenLake/canonforces
Length of output: 46
🏁 Script executed:
#!/bin/bash
# Alternative search - look for Link elements containing button elements
rg -A5 '<Link' src/pages/index.tsx | rg -B5 '<button'Repository: OpenLake/canonforces
Length of output: 581
🏁 Script executed:
#!/bin/bash
# Search all tsx files for this pattern
find . -name "*.tsx" -type f -exec grep -l '<Link' {} \; | head -10Repository: OpenLake/canonforces
Length of output: 504
🏁 Script executed:
#!/bin/bash
# Check Header, NavigationMenu, and other components for Link+button nesting
for file in "./src/common/components/Header/Header.tsx" "./src/common/components/NavigationMenu/NavigationMenu.tsx" "./src/pages/login.tsx" "./src/pages/signup/index.tsx"; do
if [ -f "$file" ]; then
echo "=== $file ==="
grep -A3 '<Link' "$file" | grep -B2 '<button' | head -10
fi
doneRepository: OpenLake/canonforces
Length of output: 246
🏁 Script executed:
#!/bin/bash
# Get full context around Link+button in index.tsx to verify complete picture
cat -n src/pages/index.tsx | sed -n '40,65p'Repository: OpenLake/canonforces
Length of output: 1731
Remove nested <button> inside Link elements.
Link renders anchor semantics (<a>), so <a><button> is invalid interactive nesting that breaks accessibility and keyboard navigation. Style the Link directly as the button using className.
This occurs at two locations in src/pages/index.tsx (lines 48-52 and 55-60).
Proposed fix
- <Link href="/signup">
- <button className={`${styles.button_blue} px-8 py-3 rounded-xl shadow-lg transition-all duration-200 hover:scale-105`}>
- Explore
- </button>
- </Link>
+ <Link
+ href="/signup"
+ className={`${styles.button_blue} px-8 py-3 rounded-xl shadow-lg transition-all duration-200 hover:scale-105 inline-flex items-center justify-center`}
+ >
+ Explore
+ </Link>
- <Link href="/signup" className="w-1/2">
- <button className="w-full bg-white hover:bg-gray-50 text-gray-900 border border-gray-100 font-bold px-8 py-3 rounded-xl shadow-sm transition-all duration-200 hover:scale-105 flex items-center justify-center gap-3 group">
- Dashboard
- <BsArrowRightCircle size={"1.3em"} className="transition-transform duration-200 group-hover:translate-x-1" />
- </button>
- </Link>
+ <Link
+ href="/signup"
+ className="w-1/2 bg-white hover:bg-gray-50 text-gray-900 border border-gray-100 font-bold px-8 py-3 rounded-xl shadow-sm transition-all duration-200 hover:scale-105 inline-flex items-center justify-center gap-3 group"
+ >
+ Dashboard
+ <BsArrowRightCircle size={"1.3em"} className="transition-transform duration-200 group-hover:translate-x-1" />
+ </Link>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Link href="/signup"> | |
| <button className={`${styles.button_blue} px-8 py-3 rounded-xl shadow-lg transition-all duration-200 hover:scale-105`}> | |
| Explore | |
| </button> | |
| </Link> | |
| <Link | |
| href="/signup" | |
| className={`${styles.button_blue} px-8 py-3 rounded-xl shadow-lg transition-all duration-200 hover:scale-105 inline-flex items-center justify-center`} | |
| > | |
| Explore | |
| </Link> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/index.tsx` around lines 48 - 52, The JSX nests a <button> inside a
Link which creates invalid interactive nesting and breaks accessibility; remove
the inner <button> and apply the button classes directly to the Link (e.g.,
replace Link href="/signup"><button className={`${styles.button_blue}
...`}>Explore</button></Link> with Link href="/signup"
className={`${styles.button_blue} px-8 py-3 rounded-xl shadow-lg transition-all
duration-200 hover:scale-105`}>Explore</Link>), and do the same change for the
second occurrence so both Link elements use the button styling directly.
aviralsaxena16
approved these changes
Apr 9, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Added links to the social icons in landing page in the footer
Now they get redirected to the respective social link
Links added for
Summary by CodeRabbit
New Features
UI/UX Changes