Powerful Features section improvised #405
Open
Lalitya31 wants to merge 3 commits into
Open
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThe PR redesigns the Features section with terminal-style aesthetics by adding VT323 font support, defining CSS animations for cursor and typewriter effects, introducing TerminalHeading and TerminalCard components, and refactoring the Features rendering to use these new components with a gradient background and terminal-styled card layout. ChangesTerminal-Style Features UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @Lalitya31 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/Features.tsx`:
- Line 40: The style prop cast uses React.CSSProperties but the module only
imports ReactNode; update the import from 'react' to include CSSProperties (or
import type { CSSProperties }) and change the cast to use CSSProperties instead
of React.CSSProperties in the Features component where style={animated ? ({
'--terminal-chars': chars } as React.CSSProperties) : undefined} so the type
reference is valid.
In `@src/index.css`:
- Around line 27-36: Add a prefers-reduced-motion override that disables or
simplifies the animations for motion-sensitive users: target the
.terminal-typewriter and .terminal-card-cursor selectors (and the keyframe
animations terminal-typewriter and terminal-blink if present) inside an `@media`
(prefers-reduced-motion: reduce) block and set animation: none (or a very
short/non-moving fallback) and remove step-based typewriter playback (e.g.,
ensure no steps() timing is applied) so the content remains readable without
motion.
🪄 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: f54d88c3-2cd5-47e9-810d-9e435e80bd75
📒 Files selected for processing (3)
index.htmlsrc/components/Features.tsxsrc/index.css
Comment on lines
+27
to
+36
| .terminal-typewriter { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| vertical-align: bottom; | ||
| animation: terminal-typewriter 1.2s steps(var(--terminal-chars, 18), end) both; | ||
| } | ||
|
|
||
| .terminal-card-cursor { | ||
| animation: terminal-blink 1s steps(1, end) infinite; | ||
| } |
Contributor
There was a problem hiding this comment.
Add reduced-motion fallback for terminal animations.
These animations run by default and can be uncomfortable for motion-sensitive users. Add a prefers-reduced-motion override to disable or simplify them.
Suggested patch
.terminal-card-cursor {
animation: terminal-blink 1s steps(1, end) infinite;
}
+@media (prefers-reduced-motion: reduce) {
+ .terminal-typewriter,
+ .terminal-card-cursor {
+ animation: none;
+ }
+}📝 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
| .terminal-typewriter { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| vertical-align: bottom; | |
| animation: terminal-typewriter 1.2s steps(var(--terminal-chars, 18), end) both; | |
| } | |
| .terminal-card-cursor { | |
| animation: terminal-blink 1s steps(1, end) infinite; | |
| } | |
| .terminal-typewriter { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| vertical-align: bottom; | |
| animation: terminal-typewriter 1.2s steps(var(--terminal-chars, 18), end) both; | |
| } | |
| .terminal-card-cursor { | |
| animation: terminal-blink 1s steps(1, end) infinite; | |
| } | |
| `@media` (prefers-reduced-motion: reduce) { | |
| .terminal-typewriter, | |
| .terminal-card-cursor { | |
| animation: none; | |
| } | |
| } |
🤖 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/index.css` around lines 27 - 36, Add a prefers-reduced-motion override
that disables or simplifies the animations for motion-sensitive users: target
the .terminal-typewriter and .terminal-card-cursor selectors (and the keyframe
animations terminal-typewriter and terminal-blink if present) inside an `@media`
(prefers-reduced-motion: reduce) block and set animation: none (or a very
short/non-moving fallback) and remove step-based typewriter playback (e.g.,
ensure no steps() timing is applied) so the content remains readable without
motion.
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/Features.tsx (1)
91-146: ⚡ Quick winConsider removing unused color properties from features array.
The
bgColor,iconColor,hoverColor, andborderColorproperties are defined but never used in the terminal-styled rendering. Onlyicon,title, anddescriptionare referenced in the render logic. Removing these unused properties would improve code clarity and prevent confusion about which properties actually affect the UI.♻️ Proposed cleanup
const features = [ { icon: BarChart3, title: 'Activity Analytics', - description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.', - bgColor: 'bg-blue-100', - iconColor: 'text-blue-600', - hoverColor: 'hover:bg-blue-400/50 dark:hover:bg-blue-900/30', - borderColor: 'hover:border-blue-200 dark:hover:border-blue-700' + description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.' }, // ... apply same pattern to remaining 5 features🤖 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/Features.tsx` around lines 91 - 146, The features array in the Features component contains unused styling properties (bgColor, iconColor, hoverColor, borderColor); remove these properties from each feature object and any related type/interface so only icon, title, and description remain; update the features constant (symbol: features) and ensure the render logic in the Features component continues to reference only icon, title, description (no other property accessors left), and run a quick build/TS check to remove any lingering type errors.
🤖 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 `@src/components/Features.tsx`:
- Around line 91-146: The features array in the Features component contains
unused styling properties (bgColor, iconColor, hoverColor, borderColor); remove
these properties from each feature object and any related type/interface so only
icon, title, and description remain; update the features constant (symbol:
features) and ensure the render logic in the Features component continues to
reference only icon, title, description (no other property accessors left), and
run a quick build/TS check to remove any lingering type errors.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d393063e-4cdb-48e5-8899-9e0bda7e482f
📒 Files selected for processing (1)
src/components/Features.tsx
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
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.
Related Issue
Description
Convert generic looking powerful features box to beautiful terminal like catchy design that highlights user intrest deeply.
How Has This Been Tested?
npm install
npm run dev
npm run build
Screenshots (if applicable)
Before
After:
Type of Change
Summary by CodeRabbit
New Features
Style