Feature/refine home#27
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughForces dark mode as the app default by updating the ChangesDark-mode-first theme and landing visual refresh
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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.
Actionable comments posted: 3
🤖 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 `@app/layout.tsx`:
- Around line 112-115: The ThemeProvider configuration currently disables OS
theme preference syncing by setting enableSystem to false, which overrides
users’ system light/dark choice. Update the ThemeProvider in app/layout.tsx to
keep defaultTheme set to dark while leaving enableSystem enabled, using the
ThemeProvider props shown in this diff.
In `@features/landing/hero.tsx`:
- Around line 346-393: The hero mockup elements are styled like interactive
controls without any actual behavior. In features/landing/hero.tsx, update the
row blocks and the send affordance in the hero section so they no longer use
pointer/hover interaction styling unless they are wired to real handlers or
navigation; alternatively, add the missing click behavior for these mock
elements. Keep the relevant divs around the timeline rows and input box visually
non-clickable if they remain static.
- Around line 199-220: The CTA row in the hero component is forced into a single
horizontal line, which breaks on narrow screens. Update the CTA container in
hero.tsx (the motion.div wrapping the Start Learning and Explore platform links)
so it stacks vertically on small viewports and only switches to a row at a
larger breakpoint, while keeping the existing desktop spacing and alignment.
🪄 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: 3a2d9c34-43ea-411f-a22d-0148e3b09c73
📒 Files selected for processing (6)
app/globals.cssapp/layout.tsxcomponents/footer.tsxcomponents/navbar.tsxfeatures/landing/hero.tsxfeatures/landing/universities.tsx
Comment on lines
112
to
+115
| <ThemeProvider | ||
| attribute="class" | ||
| defaultTheme="system" | ||
| enableSystem | ||
| defaultTheme="dark" | ||
| enableSystem={false} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the relevant files first, then inspect the small slices around the cited lines.
for f in app/layout.tsx components/theme-provider.tsx components/navbar.tsx; do
echo "== $f =="
ast-grep outline "$f" --view expanded || true
echo
done
echo "== app/layout.tsx excerpt =="
sed -n '90,140p' app/layout.tsx
echo "== components/theme-provider.tsx excerpt =="
sed -n '1,120p' components/theme-provider.tsx
echo "== components/navbar.tsx excerpt =="
sed -n '1,220p' components/navbar.tsxRepository: imuniqueshiv/HyperLearningTech
Length of output: 10837
Keep system-theme syncing on. Line 115 disables OS theme preference handling, so users who follow system light/dark no longer match their device. Keep defaultTheme="dark" and leave enableSystem enabled.
Suggested fix
<ThemeProvider
attribute="class"
defaultTheme="dark"
- enableSystem={false}
+ enableSystem
disableTransitionOnChange
>📝 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
| <ThemeProvider | |
| attribute="class" | |
| defaultTheme="system" | |
| enableSystem | |
| defaultTheme="dark" | |
| enableSystem={false} | |
| <ThemeProvider | |
| attribute="class" | |
| defaultTheme="dark" | |
| enableSystem |
🤖 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 `@app/layout.tsx` around lines 112 - 115, The ThemeProvider configuration
currently disables OS theme preference syncing by setting enableSystem to false,
which overrides users’ system light/dark choice. Update the ThemeProvider in
app/layout.tsx to keep defaultTheme set to dark while leaving enableSystem
enabled, using the ThemeProvider props shown in this diff.
Comment on lines
+199
to
220
| {/* CTA buttons row */} | ||
| <motion.div | ||
| variants={itemVariants} | ||
| className="mt-10 flex flex-col gap-4 sm:flex-row" | ||
| className="mt-8 mb-4 flex flex-row gap-[16px]" | ||
| > | ||
| <a | ||
| href="#Universities" | ||
| onClick={scrollToUniversities} | ||
| className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-xl bg-[#1D4ED8] px-8 py-3.5 font-semibold text-white shadow-lg shadow-blue-500/25 transition-all duration-300 hover:bg-[#1E40AF] hover:shadow-blue-500/40 hover:-translate-y-0.5 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 focus-visible:ring-offset-background" | ||
| className="group flex cursor-pointer items-center gap-2 rounded-[12px] bg-gradient-to-br from-[#4f46e5] to-[#6366f1] px-[32px] py-[18px] text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98]" | ||
| > | ||
| Start Learning | ||
| <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" /> | ||
| <div className="flex h-[22px] w-[22px] items-center justify-center rounded-[6px] bg-white/15"> | ||
| <ArrowRight className="h-3.5 w-3.5" /> | ||
| </div> | ||
| </a> | ||
|
|
||
| <Link | ||
| href="/about" | ||
| className="inline-flex items-center justify-center rounded-xl border border-border bg-background/50 px-8 py-3.5 font-semibold text-foreground backdrop-blur-sm transition-all duration-300 hover:border-[#1D4ED8]/50 hover:bg-background hover:text-[#1D4ED8] active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 focus-visible:ring-offset-background" | ||
| className="flex cursor-pointer items-center gap-2 rounded-[12px] border border-[#D8E2F0] bg-transparent px-[28px] py-[15px] text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[#C4D2E5] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[#94a3b8] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[#e2e8f0]" | ||
| > | ||
| Explore Platform | ||
| Explore platform ↗ | ||
| </Link> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Stack these CTAs on narrow screens.
Line 202 hard-codes a single-row CTA layout, but the two buttons’ fixed horizontal padding makes this block wider than a typical mobile content column. That will overflow or compress the primary action on smaller screens, which contradicts the “preserved responsive behavior” goal.
Proposed fix
- className="mt-8 mb-4 flex flex-row gap-[16px]"
+ className="mt-8 mb-4 flex flex-col gap-4 sm:flex-row"
...
- className="group flex cursor-pointer items-center gap-2 rounded-[12px] bg-gradient-to-br from-[`#4f46e5`] to-[`#6366f1`] px-[32px] py-[18px] text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98]"
+ className="group flex w-full items-center justify-center gap-2 rounded-[12px] bg-gradient-to-br from-[`#4f46e5`] to-[`#6366f1`] px-[32px] py-[18px] text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98] sm:w-auto"
...
- className="flex cursor-pointer items-center gap-2 rounded-[12px] border border-[`#D8E2F0`] bg-transparent px-[28px] py-[15px] text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[`#C4D2E5`] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[`#94a3b8`] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[`#e2e8f0`]"
+ className="flex w-full items-center justify-center gap-2 rounded-[12px] border border-[`#D8E2F0`] bg-transparent px-[28px] py-[15px] text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[`#C4D2E5`] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[`#94a3b8`] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[`#e2e8f0`] sm:w-auto"📝 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
| {/* CTA buttons row */} | |
| <motion.div | |
| variants={itemVariants} | |
| className="mt-10 flex flex-col gap-4 sm:flex-row" | |
| className="mt-8 mb-4 flex flex-row gap-[16px]" | |
| > | |
| <a | |
| href="#Universities" | |
| onClick={scrollToUniversities} | |
| className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-xl bg-[#1D4ED8] px-8 py-3.5 font-semibold text-white shadow-lg shadow-blue-500/25 transition-all duration-300 hover:bg-[#1E40AF] hover:shadow-blue-500/40 hover:-translate-y-0.5 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 focus-visible:ring-offset-background" | |
| className="group flex cursor-pointer items-center gap-2 rounded-[12px] bg-gradient-to-br from-[#4f46e5] to-[#6366f1] px-[32px] py-[18px] text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98]" | |
| > | |
| Start Learning | |
| <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" /> | |
| <div className="flex h-[22px] w-[22px] items-center justify-center rounded-[6px] bg-white/15"> | |
| <ArrowRight className="h-3.5 w-3.5" /> | |
| </div> | |
| </a> | |
| <Link | |
| href="/about" | |
| className="inline-flex items-center justify-center rounded-xl border border-border bg-background/50 px-8 py-3.5 font-semibold text-foreground backdrop-blur-sm transition-all duration-300 hover:border-[#1D4ED8]/50 hover:bg-background hover:text-[#1D4ED8] active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 focus-visible:ring-offset-background" | |
| className="flex cursor-pointer items-center gap-2 rounded-[12px] border border-[#D8E2F0] bg-transparent px-[28px] py-[15px] text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[#C4D2E5] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[#94a3b8] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[#e2e8f0]" | |
| > | |
| Explore Platform | |
| Explore platform ↗ | |
| </Link> | |
| {/* CTA buttons row */} | |
| <motion.div | |
| variants={itemVariants} | |
| className="mt-8 mb-4 flex flex-col gap-4 sm:flex-row" | |
| > | |
| <a | |
| href="`#Universities`" | |
| onClick={scrollToUniversities} | |
| className="group flex w-full items-center justify-center gap-2 rounded-[12px] bg-gradient-to-br from-[`#4f46e5`] to-[`#6366f1`] px-[32px] py-[18px] text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98] sm:w-auto" | |
| > | |
| Start Learning | |
| <div className="flex h-[22px] w-[22px] items-center justify-center rounded-[6px] bg-white/15"> | |
| <ArrowRight className="h-3.5 w-3.5" /> | |
| </div> | |
| </a> | |
| <Link | |
| href="/about" | |
| className="flex w-full items-center justify-center gap-2 rounded-[12px] border border-[`#D8E2F0`] bg-transparent px-[28px] py-[15px] text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[`#C4D2E5`] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[`#94a3b8`] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[`#e2e8f0`] sm:w-auto" | |
| > | |
| Explore platform ↗ | |
| </Link> |
🤖 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/hero.tsx` around lines 199 - 220, The CTA row in the hero
component is forced into a single horizontal line, which breaks on narrow
screens. Update the CTA container in hero.tsx (the motion.div wrapping the Start
Learning and Explore platform links) so it stacks vertically on small viewports
and only switches to a row at a larger breakpoint, while keeping the existing
desktop spacing and alignment.
Comment on lines
+346
to
+393
| <div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-white/[0.02]"> | ||
| <div className="flex items-center gap-3"> | ||
| <CheckCircle2 | ||
| className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]" | ||
| strokeWidth={2.5} | ||
| /> | ||
| <span className="text-[13px] font-medium text-[#d1d5db]"> | ||
| Dec 2025 — Q1(b) | ||
| </span> | ||
| </div> | ||
| <ArrowRight className="h-4 w-4 text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" /> | ||
| </div> | ||
|
|
||
| <div className="group flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 transition-colors hover:bg-foreground/5 -mx-2.5"> | ||
| <CheckCircle2 className="h-4 w-4 text-emerald-500 transition-transform group-hover:scale-110" /> | ||
| Jun 2025 — Q3(a) | ||
| <div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-white/[0.02]"> | ||
| <div className="flex items-center gap-3"> | ||
| <CheckCircle2 | ||
| className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]" | ||
| strokeWidth={2.5} | ||
| /> | ||
| <span className="text-[13px] font-medium text-[#d1d5db]"> | ||
| Jun 2025 — Q3(a) | ||
| </span> | ||
| </div> | ||
| <ArrowRight className="h-4 w-4 text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" /> | ||
| </div> | ||
|
|
||
| <div className="group flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 transition-colors hover:bg-foreground/5 -mx-2.5"> | ||
| <CheckCircle2 className="h-4 w-4 text-emerald-500 transition-transform group-hover:scale-110" /> | ||
| Dec 2024 — Q2 | ||
| <div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-white/[0.02]"> | ||
| <div className="flex items-center gap-3"> | ||
| <CheckCircle2 | ||
| className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]" | ||
| strokeWidth={2.5} | ||
| /> | ||
| <span className="text-[13px] font-medium text-[#d1d5db]"> | ||
| Dec 2024 — Q2 | ||
| </span> | ||
| </div> | ||
| <ArrowRight className="h-4 w-4 text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Input Box */} | ||
| <div className="rounded-2xl border border-border/50 bg-muted/30 px-5 py-3.5 transition-all focus-within:border-primary/50 focus-within:ring-4 focus-within:ring-primary/10 hover:border-border cursor-text"> | ||
| <div className="flex items-center justify-between"> | ||
| <span className="text-sm text-muted-foreground"> | ||
| Ask Hyper AI anything... | ||
| </span> | ||
|
|
||
| <ArrowRight className="h-4 w-4 text-muted-foreground" /> | ||
| </div> | ||
| {/* Input Box */} | ||
| <div className="group mt-3 flex items-center justify-between rounded-[16px] border border-transparent bg-white/[0.04] px-4 py-3.5 shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)] transition-all duration-300 hover:border-indigo-500/50 hover:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_0_15px_rgba(99,102,241,0.2)]"> | ||
| <span className="text-[13px] font-medium text-[#6b7280]"> | ||
| Ask Hyper AI anything... | ||
| </span> | ||
| <div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-[10px] bg-gradient-to-r from-indigo-500 to-purple-500 shadow-[0_4px_12px_rgba(168,85,247,0.25)] transition-transform hover:scale-105"> | ||
| <ArrowRight className="h-4 w-4 text-white" /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Don’t style static mockup elements as clickable.
These rows and the send affordance use cursor-pointer plus hover motion, but there’s no link or handler behind them. In the live hero this reads as interactive UI that immediately dead-ends. Either wire them up or make the mockup clearly non-interactive.
🤖 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/hero.tsx` around lines 346 - 393, The hero mockup elements
are styled like interactive controls without any actual behavior. In
features/landing/hero.tsx, update the row blocks and the send affordance in the
hero section so they no longer use pointer/hover interaction styling unless they
are wired to real handlers or navigation; alternatively, add the missing click
behavior for these mock elements. Keep the relevant divs around the timeline
rows and input box visually non-clickable if they remain static.
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
1 participant
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
This PR improves the landing page UI by refining the Hero section, enhancing the light mode experience, and polishing the overall visual design while preserving the existing functionality and responsiveness.
Related Issue
Closes #
Type of Change
Changes Made
Testing
Screenshots
Add before/after screenshots if applicable.
Checklist
Summary by CodeRabbit