UI: Refactor Tools mega menu for better architecture and neobrutalist…

[mahakagarwal7]

Description

This PR completely refactors the "TOOLS" Mega Menu to resolve the UI/UX issues outlined in #22.

The previous layout felt heavy, visually crowded, and consumed excessive vertical space. To address this, I've implemented a Dual-Pane Architecture that places the Core Tools and Contest Arsenal side-by-side. Additionally, the component has been upgraded with a strict Neobrutalist aesthetic (hard shadows, sharp borders, and tactile micro-animations) to perfectly match the CodeLens design identity and provide a "wow" factor for users.

Key Improvements

• Dual-Pane Layout: Restructured the UI into two distinct vertical panes, significantly increasing information density and readability while reducing wasted vertical space.
• Premium Neobrutalism: Replaced soft shadows with hard black borders (border-[3px]) and aggressive drop shadows (shadow-[8px_8px_0_0_rgba(0,0,0,1)]) for a highly polished, developer-centric look.
• Silky Micro-Interactions: Implemented satisfying 3D-lift hover effects (-translate-y-1 -translate-x-1), icon inversions, and grayscale-to-color transitions that provide premium tactile feedback.
• Smooth Entry Animations: Injected a custom @keyframes animation (animate-dropdown) to ensure the menu slides down and scales in elegantly on hover.
• Mobile Polish: Stripped away the harsh backgrounds on mobile, utilizing indented sub-lists, clear left-border highlights, and improved tap targets (py-4) for effortless touch navigation.

Fixes

Fixes #22

Verification

• Verified Vite build compiles successfully.
• Tested hover transitions and layout responsiveness on both desktop and mobile viewports.

[vercel]

@mahakagarwal7 is attempting to deploy a commit to the Kunal Verma's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Review limit reached

@mahakagarwal7, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 36 minutes and 13 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9d459910-ba3e-49aa-8692-725124f877bb

📥 Commits

Reviewing files that changed from the base of the PR and between 58213ea and d11d71c.

📒 Files selected for processing (2)

• frontend/src/components/shared/Navbar.jsx
• frontend/src/index.css

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🚀 PR Received Successfully

Hello @mahakagarwal7,

Thank you for taking the initiative to contribute to this project.

Please ensure that your PR follows all project guidelines properly before requesting review.

⚠️ Important Instructions

• Maintain proper code quality and structure
• Do not make unnecessary changes/files
• Ensure responsiveness across devices
• Follow existing project conventions strictly
• Attach screenshots/videos for UI-related changes
• Resolve merge conflicts before requesting review
• Avoid AI-generated low quality PRs or copied implementations

📌 Mandatory for GSSoC'26 Participants

Joining the community group and announcement channel is compulsory for all contributors participating through GSSoC'26.

• Telegram Group: https://t.me/c/3991077814/1
• Telegram Channel: https://t.me/+g4esQdo-DyNlZWE1

Failure to follow contribution guidelines may lead to PR rejection.

We appreciate your effort and wish you a great open-source journey ahead. ✨