Improve hero section UI with dark and light mode#316
Conversation
Signed-off-by: yuvraj-k-singh <yuvrajstudentbussiness@gmail.com>
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughThe Hero component is redesigned from a minimal centered layout to a rich two-column animated interface. Extended icon imports and a MATRIX_CELLS constant enable a new contribution grid visualization. The JSX restructures with cyber-grid background effects, left-side typography and CTA, and a right-side dashboard mockup featuring the animated contribution matrix and floating Git icon nodes. ChangesHero Section Visual Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the 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: 3
🧹 Nitpick comments (1)
src/components/Hero.tsx (1)
79-80: ⚡ Quick winMove constant arrays outside the map function.
The
intensitiesDarkandintensitiesLightarrays are recreated on every iteration (21 times per render). Since these are constant values, declare them once outside the.map()callback or at module level to avoid unnecessary allocations.♻️ Proposed refactor
Move the arrays outside the map callback:
{/* Simulated GitHub Contribution Grid */} <div className="bg-slate-100/80 dark:bg-slate-950/80 p-4 rounded-xl border border-slate-200/60 dark:border-slate-800/40"> <div className="text-xs text-slate-500 uppercase tracking-wider font-semibold mb-2">Contribution Matrix</div> <div className="grid grid-cols-7 gap-1.5 w-max"> + {(() => { + const intensitiesDark = ['bg-slate-800', 'bg-emerald-900/60', 'bg-emerald-700', 'bg-emerald-500', 'bg-emerald-400']; + const intensitiesLight = ['bg-slate-200', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-500', 'bg-emerald-600']; + return MATRIX_CELLS.map((cellIndex) => { - {MATRIX_CELLS.map((cellIndex) => { - // Stable indexing pattern to avoid flashing visual layouts on state updates - const intensitiesDark = ['bg-slate-800', 'bg-emerald-900/60', 'bg-emerald-700', 'bg-emerald-500', 'bg-emerald-400']; - const intensitiesLight = ['bg-slate-200', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-500', 'bg-emerald-600']; - return ( <div key={cellIndex} className={`w-3 h-3 rounded-[2px] transition-all duration-300 hover:scale-125 ${intensitiesLight[cellIndex % intensitiesLight.length]} dark:${intensitiesDark[cellIndex % intensitiesDark.length]}`} /> ); - })} + }); + })()} </div> </div>Alternatively, define them at module level alongside
MATRIX_CELLS.🤖 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 `@src/components/Hero.tsx` around lines 79 - 80, The intensitiesDark and intensitiesLight arrays are being recreated inside the .map() in the Hero component; move these constant arrays out of the map callback (e.g., declare them once at the top of the Hero component or at module level alongside MATRIX_CELLS) so they are allocated once per module/render rather than on every iteration; update references inside the map to use the moved intensitiesDark and intensitiesLight identifiers.
🤖 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 `@src/components/Hero.tsx`:
- Around line 25-27: The span in Hero.tsx that renders "Like Never Before" uses
bg-clip-text and text-transparent so the drop-shadow in its className is
ineffective; remove the drop-shadow utility from that span's className (or
instead move the glow to a wrapper element by applying a box-shadow on a
parent/container or creating a pseudo-element to render a blurred gradient glow)
and update the JSX for the span (the element with className including
"bg-clip-text text-transparent") accordingly.
- Around line 85-87: The current className builds a dynamic dark: prefix
("dark:${intensitiesDark[cellIndex % intensitiesDark.length]}"), which Tailwind
cannot purge; instead ensure the dark variant is a complete literal by changing
how classes are selected: stop concatenating "dark:" at render time and either
(a) store dark variants already prefixed (e.g., intensitiesDark contains strings
like "dark:bg-..." as literals) and use className={`...
${intensitiesLight[cellIndex % intensitiesLight.length]}
${intensitiesDark[cellIndex % intensitiesDark.length]}`}, or (b) map the index
to a fixed pair of literal classes and pick both light and dark strings together
(use variables intensitiesLight, intensitiesDark and cellIndex to index them) so
no runtime string builds produce the dark: prefix.
- Around line 97-107: The staggered delays on the three icon containers are
using non-functional arbitrary classes like [animation-delay:1s] alongside
animate-bounce (see the divs that include animate-bounce and the
GitBranch/GitCommit/GitPullRequest icons); replace those arbitrary delay classes
with a supported approach such as adding a style prop with animationDelay (e.g.
style={{ animationDelay: '1s' }}) on the specific containers, or use a single
Tailwind arbitrary animate shorthand like
animate-[bounce_1s_ease-in-out_1s_infinite] to embed the delay into the class;
update the three divs that currently include [animation-delay:...] to one of
these supported patterns so the staggered timing is actually applied.
---
Nitpick comments:
In `@src/components/Hero.tsx`:
- Around line 79-80: The intensitiesDark and intensitiesLight arrays are being
recreated inside the .map() in the Hero component; move these constant arrays
out of the map callback (e.g., declare them once at the top of the Hero
component or at module level alongside MATRIX_CELLS) so they are allocated once
per module/render rather than on every iteration; update references inside the
map to use the moved intensitiesDark and intensitiesLight identifiers.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
1 participant
Related Issue
Description
Upgraded the landing page Hero section to a modern, responsive design that supports dynamic Day/Night themes.
Key changes include:
lg:grid-cols-12).<Link>component was incorrectly wrapped inside a<button>element.GitBranch,GitCommit,GitPullRequest) utilizing native CSS bounce animations and staggered delays to drastically improve visual appeal.How Has This Been Tested?
transition-colors duration-500) and readable contrast ratios for text and background UI assets.Screenshots (if applicable)
Before:
After:
Type of Change
Summary by CodeRabbit