Feature/home header polish#24
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughGlobal CSS gains a Tailwind dark custom variant and ChangesLanding Page UI Overhaul
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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: 5
🧹 Nitpick comments (1)
components/footer.tsx (1)
57-66: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd disclosure semantics to the dropdown toggle.
The button controls a popup menu but only exposes
aria-label. Addingaria-expanded(andaria-haspopup) lets assistive tech announce the open/closed state.♿ Proposed change
<button onClick={(e) => { e.preventDefault(); setIsOpen(!isOpen); }} aria-label={label} + aria-haspopup="menu" + aria-expanded={isOpen} className={btnClasses} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/footer.tsx` around lines 57 - 66, The dropdown toggle in the footer button only exposes an aria-label, so assistive tech cannot tell it controls a menu or whether it is open. Update the button in the footer component to include disclosure semantics by adding aria-haspopup and aria-expanded, driven by the current isOpen state alongside the existing onClick toggle. Keep the existing label and Icon usage, and ensure the button remains the control for opening and closing the popup menu.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/footer.tsx`:
- Around line 11-29: The icon components in GithubIcon, LinkedinIcon,
TwitterIcon, InstagramIcon, and YoutubeIcon currently use an explicit any for
props, which triggers lint errors. Update each icon component’s props type to
React.SVGProps<SVGSVGElement> so the spread attributes are correctly typed and
no `@typescript-eslint/no-explicit-any` violations remain.
- Around line 31-90: The SocialDropdown component is using explicit any for its
props and link items, which triggers no-explicit-any and removes type safety.
Add a typed props interface for SocialDropdown and a specific link type, then
update the component signature and the links.map callback in SocialDropdown so
Icon, label, links, size, and hoverClass are all strongly typed. Keep the fix
localized to SocialDropdown and its link rendering so call sites inherit proper
checking.
In `@components/navbar.tsx`:
- Around line 103-115: The navbar hash-navigation logic is racing the route
change because it uses a fixed 100ms retry after pushing to “/”, which can miss
scrolling and drop the requested hash from the URL. Update the navigation in
navbar.tsx so the click handler pushes the full href directly, or move the
scroll logic into a route-change effect that waits for the target element after
navigation. Keep the scroll behavior and active section updates in the existing
navbar click/scroll flow, but remove the one-shot timeout-based retry.
In `@features/landing/universities.tsx`:
- Around line 147-149: The available university card is styled as clickable but
still uses a non-interactive motion container, so keyboard users can’t activate
it. Update the card rendering in universities.tsx so the available state uses a
semantic interactive element via the existing motion wrapper, such as a Link- or
button-backed component, and keep the non-available state non-interactive. Use
the card’s existing click/navigation logic and the university.status check to
locate the conditional rendering around the motion.div.
- Around line 123-125: The search icon container in the universities landing
component is styled like an interactive control even though it has no behavior
or keyboard support. Update the element in the universities UI around the Search
icon to either become a real button with an accessible aria-label and proper
interaction handling, or remove the cursor/hover/active affordances and keep it
decorative. Use the surrounding search icon wrapper and Search component as the
anchors when refactoring.
---
Nitpick comments:
In `@components/footer.tsx`:
- Around line 57-66: The dropdown toggle in the footer button only exposes an
aria-label, so assistive tech cannot tell it controls a menu or whether it is
open. Update the button in the footer component to include disclosure semantics
by adding aria-haspopup and aria-expanded, driven by the current isOpen state
alongside the existing onClick toggle. Keep the existing label and Icon usage,
and ensure the button remains the control for opening and closing the popup
menu.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1bd36331-3456-48fa-a172-eae5a2372f55
📒 Files selected for processing (5)
app/globals.csscomponents/footer.tsxcomponents/navbar.tsxfeatures/landing/hero.tsxfeatures/landing/universities.tsx
Comment on lines
103
to
115
| // If element not found, navigate to home and then scroll | ||
| router.push("/"); | ||
| setTimeout(() => { | ||
| const el = document.getElementById(targetId); | ||
| if (el) { | ||
| isClickScrolling.current = true; | ||
| setActiveSection(href); | ||
| el.scrollIntoView({ behavior: "smooth", block: "start" }); | ||
| setTimeout(() => { | ||
| isClickScrolling.current = false; | ||
| }, 800); | ||
| } | ||
| }, 100); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the navbar file and nearby navigation logic
ast-grep outline components/navbar.tsx --view expanded || true
# Show the relevant section with line numbers
sed -n '1,220p' components/navbar.tsx | cat -n
# Find any route-change / hash-scroll handling elsewhere in the repo
rg -n "scrollIntoView|hash|router\.push\(|setTimeout\(\(\) => \{[^}]*getElementById|activeSection|isClickScrolling" . -g '!node_modules' -g '!dist' -g '!build'Repository: imuniqueshiv/HyperLearningTech
Length of output: 12936
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the landing page and section mounting around the known scroll targets
sed -n '1,180p' features/landing/hero.tsx | cat -n
# Locate the root page composition to see when Home/Universities exist
fd -a 'page.tsx' . | sed 's#^\./##'
rg -n 'Home|Universities|features/landing/hero|university-hero' app components features -g '!node_modules' -g '!dist' -g '!build'Repository: imuniqueshiv/HyperLearningTech
Length of output: 11031
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,120p' app/(public)/page.tsx | cat -n
sed -n '1,120p' features/landing/universities.tsx | cat -nRepository: imuniqueshiv/HyperLearningTech
Length of output: 221
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,120p' 'app/(public)/page.tsx' | cat -n
sed -n '1,180p' features/landing/universities.tsx | cat -nRepository: imuniqueshiv/HyperLearningTech
Length of output: 10995
Avoid the fixed-delay hash retry. Navigating to / and checking once after 100ms races the route change, so the scroll can be skipped on slower transitions, and the requested hash is dropped from the URL. Push href directly or move the scroll into a route-change effect instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/navbar.tsx` around lines 103 - 115, The navbar hash-navigation
logic is racing the route change because it uses a fixed 100ms retry after
pushing to “/”, which can miss scrolling and drop the requested hash from the
URL. Update the navigation in navbar.tsx so the click handler pushes the full
href directly, or move the scroll logic into a route-change effect that waits
for the target element after navigation. Keep the scroll behavior and active
section updates in the existing navbar click/scroll flow, but remove the
one-shot timeout-based retry.
Comment on lines
+123
to
+125
| <div className="group/lens relative mr-1 flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-border/50 bg-muted/50 text-muted-foreground transition-all duration-500 hover:scale-[1.03] hover:border-border hover:bg-muted hover:text-foreground hover:shadow-sm cursor-pointer active:scale-95 overflow-hidden"> | ||
| <div className="absolute inset-0 rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] pointer-events-none" /> | ||
| <Search className="relative z-10 h-[18px] w-[18px] transition-transform duration-300 group-hover/lens:scale-[1.05]" /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Remove the fake button affordance from the search icon.
Lines 123-125 style this div like a clickable control (cursor-pointer, hover, active state), but it has no action or keyboard support. That makes the search UI misleading. Either convert it to a real button with an aria-label, or drop the interactive styling and keep it purely decorative.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@features/landing/universities.tsx` around lines 123 - 125, The search icon
container in the universities landing component is styled like an interactive
control even though it has no behavior or keyboard support. Update the element
in the universities UI around the Search icon to either become a real button
with an accessible aria-label and proper interaction handling, or remove the
cursor/hover/active affordances and keep it decorative. Use the surrounding
search icon wrapper and Search component as the anchors when refactoring.
Comment on lines
+147
to
149
| className={`group relative flex flex-col overflow-hidden rounded-3xl border border-border/50 dark:border-white/10 bg-card dark:bg-gradient-to-b dark:from-white/5 dark:to-transparent p-5 shadow-lg dark:shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-[5.5px] hover:border-blue-400/30 hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] dark:hover:border-blue-400/30 dark:hover:shadow-[0_0_15px_rgba(59,130,246,0.2)] ${ | ||
| university.status === "Available" ? "cursor-pointer" : "" | ||
| }`} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Use a semantic interactive element for available cards.
Lines 147-149 add a clickable affordance, but the card still navigates via onClick on a motion.div, so keyboard users cannot open an available university. Render available cards as a Link/button-backed motion component instead of styling a non-interactive container as clickable.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@features/landing/universities.tsx` around lines 147 - 149, The available
university card is styled as clickable but still uses a non-interactive motion
container, so keyboard users can’t activate it. Update the card rendering in
universities.tsx so the available state uses a semantic interactive element via
the existing motion wrapper, such as a Link- or button-backed component, and
keep the non-available state non-interactive. Use the card’s existing
click/navigation logic and the university.status check to locate the conditional
rendering around the motion.div.
🎉 Congratulations @nitinmohan18!Thank you for contributing to HyperLearningTech. Your pull request has been successfully merged into main. 📦 Merge Summary
🚀 Keep Contributing
Thank you for helping make HyperLearningTech better. Happy Coding! 🚀 |
This was referenced Jun 28, 2026
Merged
Merged
This was referenced Jul 7, 2026
Merged
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.
Pull Request
Summary
Redesigned the Header and Footer to deliver a cleaner, more modern, and premium user experience while preserving the existing functionality and responsiveness.
Highlights
Related Issue
Closes #
Type of Change
What Changed?
Header
Footer
Checklist
Testing
Screenshots
Updated screenshots of the redesigned Header and Footer have been included.
Notes
This PR contains UI/UX improvements only. No business logic or application functionality has been modified.