Add contact section#39
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughAdds a new client-side ChangesContact Section feature
Footer, hero, and universities spacing adjustments
Sequence Diagram(s)sequenceDiagram
participant User
participant ContactSection
participant Console
User->>ContactSection: type into input (handleChange)
ContactSection->>ContactSection: update formData state
User->>ContactSection: submit form (handleSubmit)
ContactSection->>ContactSection: e.preventDefault()
ContactSection->>Console: log formData
Estimated code review effort🎯 2 (Simple) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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: 2
🧹 Nitpick comments (3)
components/contact/ContactSection.module.css (3)
1-1: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winConsider
next/fontinstead of a CSS@importfor Google Fonts.A render-blocking
@importadds an extra round trip;next/fontself-hosts and optimizes font loading in Next.js apps.🤖 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` at line 1, The ContactSection stylesheet is loading Google Fonts via a render-blocking CSS `@import`, so replace that approach with next/font for the fonts used by ContactSectionModule and its consumers. Move the font setup to the appropriate Next.js entry point or shared layout, then update the ContactSection.module.css and any related class usage to rely on the imported font variables/classes instead of the CSS import.
16-26: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUnused
.sr-onlyrule — JSX uses Tailwind's built-in utility instead.The labels apply the literal
"sr-only"Tailwind class (e.g.components/contact/ContactSection.tsxline 144), notstyles.sr-only, so this CSS-module rule is dead code.🤖 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 16 - 26, The `.sr-only` rule in ContactSection.module.css is unused because ContactSection.tsx applies the Tailwind utility class string rather than the CSS-module class. Remove the dead CSS-module selector or, if the intent was to use the module, update the JSX in ContactSection to reference the module class consistently. Locate this in the `.sr-only` rule and the labels in ContactSection.
1-26: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueStylelint findings to clean up.
Static analysis flags: deprecated
clipproperty (line 23, preferclip-path: inset(50%)), quoted font-family names (lines 8, 412),@importnotation style (line 1), non-kebab-case keyframe namesignalPulse(line 329), and missing empty lines before declarations (487, 496-498) caused by comments embedded mid-value in box-shadow lists.Also applies to: 329-329, 412-412, 487-498
🤖 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 1 - 26, Stylelint is flagging several formatting issues in this stylesheet: update the hidden-text helper in .sr-only to replace the deprecated clip usage with the preferred clipping approach, remove unnecessary quotes around font-family names in .contactSection and elsewhere, and normalize the top-level `@import` syntax to the expected style. Also rename the signalPulse keyframes to kebab-case and fix the box-shadow declarations that have inline comments breaking declaration spacing so there are proper empty lines before those declarations.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.
Inline comments:
In `@components/contact/ContactSection.tsx`:
- Around line 129-131: The Mail icon in ContactSection is using styles.heroIcon,
but that class is not defined in the CSS module, so the icon gets no styling.
Update the ContactSection component to use an existing class or add a matching
heroIcon rule in ContactSection.module.css, and make sure the class name
referenced by Mail aligns with the module export.
- Around line 33-36: The ContactSection form submission currently only calls
preventDefault and logs formData, so it never sends data anywhere. Update
handleSubmit in ContactSection to post the payload to the intended contact
endpoint, or if the endpoint is not available yet, make the form explicitly
placeholder-only and remove the misleading submit behavior. Use the existing
handleSubmit and formData flow to locate the change.
---
Nitpick comments:
In `@components/contact/ContactSection.module.css`:
- Line 1: The ContactSection stylesheet is loading Google Fonts via a
render-blocking CSS `@import`, so replace that approach with next/font for the
fonts used by ContactSectionModule and its consumers. Move the font setup to the
appropriate Next.js entry point or shared layout, then update the
ContactSection.module.css and any related class usage to rely on the imported
font variables/classes instead of the CSS import.
- Around line 16-26: The `.sr-only` rule in ContactSection.module.css is unused
because ContactSection.tsx applies the Tailwind utility class string rather than
the CSS-module class. Remove the dead CSS-module selector or, if the intent was
to use the module, update the JSX in ContactSection to reference the module
class consistently. Locate this in the `.sr-only` rule and the labels in
ContactSection.
- Around line 1-26: Stylelint is flagging several formatting issues in this
stylesheet: update the hidden-text helper in .sr-only to replace the deprecated
clip usage with the preferred clipping approach, remove unnecessary quotes
around font-family names in .contactSection and elsewhere, and normalize the
top-level `@import` syntax to the expected style. Also rename the signalPulse
keyframes to kebab-case and fix the box-shadow declarations that have inline
comments breaking declaration spacing so there are proper empty lines before
those declarations.
🪄 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: c10190a4-f416-48fa-9f13-f3dafc00f0b7
📒 Files selected for processing (8)
app/(public)/contact/page.tsxapp/(public)/page.tsxcomponents/contact/ContactSection.module.csscomponents/contact/ContactSection.tsxcomponents/footer.tsxcomponents/navbar.tsxfeatures/landing/hero.tsxfeatures/landing/universities.tsx
| const handleSubmit = (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| console.log("Form submitted:", formData); | ||
| }; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '== files ==\n'
git ls-files | rg '(^|/)ContactSection\.tsx$|(^|/)contact(\.|/)|(^|/)api/|(^|/)actions/|(^|/)route\.(ts|tsx|js|jsx)$|(^|/)server'
printf '\n== search ContactSection ==\n'
rg -n "handleSubmit|Form submitted:|ContactSection|Add contact section|contact" components src app pages -g '!**/node_modules/**' || trueRepository: imuniqueshiv/HyperLearningTech
Length of output: 2255
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the target file and nearby symbols before reading it.
ast-grep outline components/contact/ContactSection.tsx --view expanded || true
# Read the file with line numbers.
wc -l components/contact/ContactSection.tsx
sed -n '1,220p' components/contact/ContactSection.tsx
# Search for any contact submission backend or action wiring.
rg -n "fetch\(|axios|/api/.*contact|emailjs|formspree|server action|use server|sendMessage|sendMail|contact.*submit|submitted" . -g '!**/node_modules/**' || trueRepository: imuniqueshiv/HyperLearningTech
Length of output: 9248
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Show the repo root structure around likely app/api locations if present.
fd -td . . | sed -n '1,200p'Repository: imuniqueshiv/HyperLearningTech
Length of output: 7773
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the target component and any API route or mail handler relevant to contact submissions.
fd 'ContactSection.tsx|route.ts|route.js|contact' components app src pages -a 2>/dev/null | sed -n '1,200p'Repository: imuniqueshiv/HyperLearningTech
Length of output: 446
Contact form still doesn’t send anything. There’s no contact API route in the repo, and handleSubmit only prevents default and logs the payload. Wire this to the intended endpoint, or make the form explicitly placeholder-only before merge.
🤖 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.tsx` around lines 33 - 36, The
ContactSection form submission currently only calls preventDefault and logs
formData, so it never sends data anywhere. Update handleSubmit in ContactSection
to post the payload to the intended contact endpoint, or if the endpoint is not
available yet, make the form explicitly placeholder-only and remove the
misleading submit behavior. Use the existing handleSubmit and formData flow to
locate the change.
| <div className={styles.mailIconCircle}> | ||
| <Mail className={styles.heroIcon} size={22} strokeWidth={1.5} /> | ||
| </div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
styles.heroIcon is undefined — class not defined in the CSS module.
The CSS module only defines .heroIconWrapper, .mailIconCircle, .signalRing, etc.; no .heroIcon rule exists, so this className resolves to undefined and applies no styling.
Add the missing rule (e.g. in ContactSection.module.css)
.heroIcon {
position: relative;
z-index: 3;
}🤖 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.tsx` around lines 129 - 131, The Mail icon
in ContactSection is using styles.heroIcon, but that class is not defined in the
CSS module, so the icon gets no styling. Update the ContactSection component to
use an existing class or add a matching heroIcon rule in
ContactSection.module.css, and make sure the class name referenced by Mail
aligns with the module export.
🎉 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! 🚀 |
1 participant
Summary
This PR improves the visual hierarchy and overall UI consistency across the Home, University, Contact, and Footer sections to deliver a cleaner, more polished, and responsive user experience. It also cleanly resolves merge conflicts with
main.Related Issue
Closes #
Type of Change
What Changed?
Home
University
Contact
Footer
Other Changes
mainbranch.Screenshots (UI Changes Only)
(Attach any necessary screenshots or recordings here)
Testing
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
None.