Enhance home and university sections and remove sticky contact header#40
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR restyles the contact section with a new divider, restructured feature cards, availability badge, redesigned form inputs, and a full-width gradient submit button, plus comprehensive light-mode overrides. It also makes smaller styling adjustments to navbar, footer, hero, and universities components. ChangesContact Section Redesign
Navbar, Footer, and Hero/Universities Styling Tweaks
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 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 |
🎉 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! 🚀 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (4)
components/contact/ContactSection.module.css (4)
506-517: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUnquote the font-family value.
Stylelint flags
font-family: "Inter", sans-serif;— quotes around simple font names should be omitted perfont-family-name-quotes.🔧 Suggested fix
font-family: "Inter", sans-serif; + font-family: Inter, sans-serif;🤖 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/contact/ContactSection.module.css` around lines 506 - 517, Update the .input rule in ContactSection.module.css to satisfy the font-family-name-quotes lint rule by removing the quotes around the simple font name in the font-family declaration. Keep the fallback sans-serif and adjust only the font-family value so the .input style remains otherwise unchanged.Source: Linters/SAST tools
696-1033: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winStylelint config likely missing CSS Modules support for
:global().Static analysis flags
selector-pseudo-class-no-unknownon every:global(html:not(.dark))selector (50+ occurrences). This is valid CSS Modules syntax, so the fix belongs in stylelint config (e.g.stylelint-config-css-modules, or addingglobaltoselector-pseudo-class-no-unknown'signorePseudoClasses), not in this file.🔧 Suggested stylelint config fix
+ // .stylelintrc + { + "rules": { + "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }] + } + }🤖 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/contact/ContactSection.module.css` around lines 696 - 1033, The repeated selector warnings come from Stylelint not recognizing CSS Modules’ :global() syntax, not from the ContactSection.module.css styles themselves. Update the Stylelint configuration to support CSS Modules by either adding the CSS Modules config/plugin or ignoring the global pseudo-class in selector-pseudo-class-no-unknown, so selectors like :global(html:not(.dark)) in ContactSection.module.css are no longer flagged.Source: Linters/SAST tools
918-921: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueSeveral light-mode overrides are no-op duplicates of the base rules.
.form { gap: 12px },.messageGroup { margin-bottom: 0 },.textarea { min-height: 48px }, and most of.submitRow's base properties in the light-mode block (lines 987-992) already match the dark-mode values verbatim (lines 452-459, 519-522, 567-573). These can likely be dropped since the base rule already applies when not overridden.Also applies to: 979-985, 987-992
🤖 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/contact/ContactSection.module.css` around lines 918 - 921, Several light-mode overrides in ContactSection.module.css are redundant duplicates of the base styles, so remove the no-op declarations in the light-mode block for .form, .messageGroup, .textarea, and the shared base properties in .submitRow. Keep only the light-mode rules that actually differ from the base/dark-mode definitions, and use the existing selectors (:global(html:not(.dark)) .form, .messageGroup, .textarea, .submitRow) to trim the duplicated declarations.
1015-1033: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winKeyframe name should be kebab-case; hover fly animation only exists in light mode.
sendIconFlyshould besend-icon-flyperkeyframes-name-pattern. Separately, this fly animation on.submitBtn:hover .btnIconis only wired up in the light-mode override block — the dark-mode.submitBtn:hover(lines 597-602) doesn't trigger any icon animation. Confirm this asymmetry between themes is intentional.🔧 Suggested rename
-:global(html:not(.dark)) .submitBtn:hover .btnIcon { - animation: sendIconFly 1s ease-in-out infinite alternate; +:global(html:not(.dark)) .submitBtn:hover .btnIcon { + animation: send-icon-fly 1s ease-in-out infinite alternate; } -@keyframes sendIconFly { +@keyframes send-icon-fly { 0% { transform: translate(0, 0); } 100% { transform: translate(2px, -2px); } }🤖 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/contact/ContactSection.module.css` around lines 1015 - 1033, Rename the `@keyframes sendIconFly` definition in `ContactSection.module.css` to kebab-case and update the `.submitBtn:hover .btnIcon` animation reference to match. Also review the theme-specific hover behavior for `.submitBtn:hover` so the icon fly animation is either intentionally light-mode only or added consistently alongside the dark-mode hover styles; use the `.submitBtn:hover` and `.btnIcon` selectors to locate the related rules.Source: Linters/SAST tools
🤖 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.
Nitpick comments:
In `@components/contact/ContactSection.module.css`:
- Around line 506-517: Update the .input rule in ContactSection.module.css to
satisfy the font-family-name-quotes lint rule by removing the quotes around the
simple font name in the font-family declaration. Keep the fallback sans-serif
and adjust only the font-family value so the .input style remains otherwise
unchanged.
- Around line 696-1033: The repeated selector warnings come from Stylelint not
recognizing CSS Modules’ :global() syntax, not from the
ContactSection.module.css styles themselves. Update the Stylelint configuration
to support CSS Modules by either adding the CSS Modules config/plugin or
ignoring the global pseudo-class in selector-pseudo-class-no-unknown, so
selectors like :global(html:not(.dark)) in ContactSection.module.css are no
longer flagged.
- Around line 918-921: Several light-mode overrides in ContactSection.module.css
are redundant duplicates of the base styles, so remove the no-op declarations in
the light-mode block for .form, .messageGroup, .textarea, and the shared base
properties in .submitRow. Keep only the light-mode rules that actually differ
from the base/dark-mode definitions, and use the existing selectors
(:global(html:not(.dark)) .form, .messageGroup, .textarea, .submitRow) to trim
the duplicated declarations.
- Around line 1015-1033: Rename the `@keyframes sendIconFly` definition in
`ContactSection.module.css` to kebab-case and update the `.submitBtn:hover
.btnIcon` animation reference to match. Also review the theme-specific hover
behavior for `.submitBtn:hover` so the icon fly animation is either
intentionally light-mode only or added consistently alongside the dark-mode
hover styles; use the `.submitBtn:hover` and `.btnIcon` selectors to locate the
related rules.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2690a105-d6a4-4083-a46b-f9e6d8ee159f
📒 Files selected for processing (6)
components/contact/ContactSection.module.csscomponents/contact/ContactSection.tsxcomponents/footer.tsxcomponents/navbar.tsxfeatures/landing/hero.tsxfeatures/landing/universities.tsx
2 participants
Pull Request
Summary
This PR completely overhauls the Contact Section UI/UX, transitioning it from a standard layout to a highly polished, premium side-by-side design that feels deeply integrated, luxurious, and professional in both light and dark modes.
Related Issue
Closes #
Type of Change
What Changed?
Screenshots (UI Changes Only)
(Attach screenshots of the new premium light mode and dark mode layouts here)
Testing
Tested the visual refinements thoroughly across different states.
Checklist
Before requesting a review, confirm the following:
main.npx prettier --write <file>).npm run format:checkpasses.npm run lintpasses.npm run typecheckpasses.npm run buildpasses.Additional Notes
These microscopic styling upgrades significantly enhance user trust and engagement by providing a tactile, high-end experience that matches the modern quality of the rest of the application.