improve text-clarity #412
improve text-clarity #412
Conversation
|
@Samridha0305 is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
There was a problem hiding this comment.
Pull Request Overview
This PR improves the text clarity and visual design of the get-started page by enhancing button styling, hero banner appearance, and typing animation effects. The changes focus on better hover states, improved color schemes, and enhanced readability.
- Updated button styles with new colors, glow effects, and improved hover states
- Enhanced hero banner design with new gradient backgrounds and overlay effects
- Redesigned typing animation with improved layout and visual effects
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 9 comments.
| File | Description |
|---|---|
| src/pages/get-started/styles.module.css | Updated styling with new color schemes, button animations, hero banner improvements, and redesigned typing animation |
| src/pages/get-started/index.tsx | Simplified typing animation structure and added CSS class bindings for hero elements |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| backdrop-filter: blur(8px); | ||
| border-image:linear-gradient(to right, #4CC9F0,#60a5fa)1; | ||
| } | ||
| .buttonPrimary{ |
There was a problem hiding this comment.
The .buttonPrimary selector is duplicated. The animation rule on line 92 should be merged with the main .buttonPrimary rule starting at line 85 to avoid redundancy.
Copilot uses AI. Check for mistakes.
| } | ||
| @keyframes pulse-glow { | ||
| 0%{ box-shadow: 0 0 0 0 rgba(76,201,240,0.3); } | ||
| 70% { box-shadow: 0 0 0 15px rgba(76,201,240 ,0); } 100% { box-shadow: 0 0 0 0 rgba(76 ,201 ,240,0); } } |
There was a problem hiding this comment.
Multiple keyframe rules are placed on a single line, making the code difficult to read. Each keyframe percentage should be on its own line for better maintainability.
| 70% { box-shadow: 0 0 0 15px rgba(76,201,240 ,0); } 100% { box-shadow: 0 0 0 0 rgba(76 ,201 ,240,0); } } | |
| 70% { box-shadow: 0 0 0 15px rgba(76,201,240 ,0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(76 ,201 ,240,0); } |
Copilot uses AI. Check for mistakes.
| } | ||
| transform: translateY(-3px); | ||
| background: #4CC9F0; | ||
| box-shadow: 0 8px 24px rgba(76,201,240,0.4); border-color: rgba(255, 255, 255, 0.3); color: #0a0a0a !important; |
There was a problem hiding this comment.
Multiple CSS properties are placed on a single line, making the code difficult to read and maintain. Each property should be on its own line.
| box-shadow: 0 8px 24px rgba(76,201,240,0.4); border-color: rgba(255, 255, 255, 0.3); color: #0a0a0a !important; | |
| box-shadow: 0 8px 24px rgba(76,201,240,0.4); | |
| border-color: rgba(255, 255, 255, 0.3); | |
| color: #0a0a0a !important; |
Copilot uses AI. Check for mistakes.
| position: relative; | ||
| display: inline-block; | ||
| } | ||
| .highlight { color: #4CC9F0; font-weight: 700; position: relative; display: inline-block; } |
There was a problem hiding this comment.
Multiple CSS properties are placed on a single line. For better readability and maintainability, each property should be on its own line.
| .highlight { color: #4CC9F0; font-weight: 700; position: relative; display: inline-block; } | |
| .highlight { | |
| color: #4CC9F0; | |
| font-weight: 700; | |
| position: relative; | |
| display: inline-block; | |
| } |
Copilot uses AI. Check for mistakes.
| } | ||
|
|
||
| .heroContent{ position: relative; z-index: 2; } |
There was a problem hiding this comment.
Multiple CSS properties are placed on a single line and there's a missing space after the selector. The rule should be formatted with each property on its own line and proper spacing.
| .heroContent{ position: relative; z-index: 2; } | |
| .heroContent { | |
| position: relative; | |
| z-index: 2; | |
| } |
Copilot uses AI. Check for mistakes.
| padding: 0 1rem; | ||
| text-shadow: 0 2px 5px rgba(0,0,0,0.5) |
There was a problem hiding this comment.
Missing semicolon at the end of the CSS property declaration. This could cause parsing issues.
| text-shadow: 0 2px 5px rgba(0,0,0,0.5) | |
| text-shadow: 0 2px 5px rgba(0,0,0,0.5); |
Copilot uses AI. Check for mistakes.
| @@ -468,6 +487,10 @@ | |||
| background: linear-gradient(90deg, var(--feature-color, #3b82f6), rgba(59, 130, 246, 0.8)); | |||
| } | |||
|
|
|||
| .feature:hover .featureTitle::after { | |||
| width: 60px; | |||
| background: linear-gradient(90deg, var(--feature-color, #3b82f6), rgba(59, 130, 246, 0.8)); } | |||
There was a problem hiding this comment.
Multiple CSS properties are placed on a single line. Each property should be on its own line for better readability.
| background: linear-gradient(90deg, var(--feature-color, #3b82f6), rgba(59, 130, 246, 0.8)); } | |
| background: linear-gradient(90deg, var(--feature-color, #3b82f6), rgba(59, 130, 246, 0.8)); | |
| } |
Copilot uses AI. Check for mistakes.
| .staticText { font-size: 1.6rem; } | ||
| .dynamicText { font-size: 1.6rem; height: 2rem; } | ||
| .typingWord { font-size: 1.6rem; line-height: 2rem; } | ||
| .dynamicText::after { font-size: 1.6rem; line-height: 2rem; } |
There was a problem hiding this comment.
This media query rule duplicates the .typingContainer selector that appears just above it (lines 938-942). The properties should be merged into a single rule to avoid redundancy.
| .dynamicText::after { font-size: 1.6rem; line-height: 2rem; } | |
| gap: 0.5rem; | |
| padding: 1rem 1.5rem; | |
| } | |
| .staticText { font-size: 1.6rem; } | |
| .dynamicText { font-size: 1.6rem; height: 2rem; } | |
| .typingWord { font-size: 1.6rem; line-height: 2rem; } | |
| .dynamicText::after { font-size: 1.6rem; line-height: 2rem; } |
Copilot uses AI. Check for mistakes.
| ))} | ||
| </div> | ||
| <span className={styles.staticText}>Today</span> | ||
| <div className={styles.staticText}> |
There was a problem hiding this comment.
The outer div has the same CSS class (staticText) as its first child span element. This creates redundant class application and could lead to unintended styling conflicts.
| <div className={styles.staticText}> | |
| <div> |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Nice bold makeover from the previous design @Samridha0305
LGTM !
@sanjay-kv Ready for merge.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Description
Text clarity of get started page was not looking good when hovered..
Fixes #391
Type of Change
Screenshot
Before:
After:
Checklist
npm run buildand attached scrrenshot in this PR.