feat: revamp landing page UI with modern branding and enhanced UX#131
feat: revamp landing page UI with modern branding and enhanced UX#131Pratyush2240 wants to merge 2 commits intoOpenLake:mainfrom
Conversation
|
@Pratyush2240 is attempting to deploy a commit to the aviralsaxena16's projects Team on Vercel. A member of the Team first needs to authorize it. |
🎉 Thanks for Your Contribution to CanonForces!
|
WalkthroughRebrands site to "CanonForces"; redesigns homepage hero with centered logo, tagline, mascot, and GitHub link; adds animated, staggered feature cards; updates Header layout; and updates Footer CSS/content with a new attribution block and copyright © 2025. Changes
Sequence Diagram(s)(omitted — changes are UI/content/layout-focused and do not introduce a multi-component sequential flow requiring visualization) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![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
🤖 Fix all issues with AI agents
In @src/pages/index.tsx:
- Around line 59-64: Update the branding text in the JSX paragraph so
"canonforces" matches the app's consistent branding "CanonForces": locate the
span with className "font-medium text-yellow-300" inside the paragraph in
src/pages/index.tsx and change its inner text from "canonforces" to
"CanonForces" (preserving the existing markup and styling).
- Around line 168-179: Update the GitHub link in the anchor element that renders
the repo button (the <a> with className starting "flex items-center..." and the
href currently "https://github.com/Pratyush2240/canonforces") to point to the
main repository "https://github.com/OpenLake/canonforces" so the BsGithub button
and "View on GitHub" span direct users to the correct OpenLake/canonforces repo.
🧹 Nitpick comments (1)
src/common/components/Footer/Footer.tsx (1)
47-47: Consider removing the trailing semicolon.The semicolon after the function closing brace is valid JavaScript but unconventional for function declarations in React/Next.js. Typically, semicolons are used after function expressions, not declarations.
♻️ Suggested cleanup
-}; +}
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/mascot.pngis excluded by!**/*.png
📒 Files selected for processing (4)
src/common/components/Footer/Footer.module.csssrc/common/components/Footer/Footer.tsxsrc/pages/index.tsxsrc/styles/Home.module.css
🔇 Additional comments (6)
src/styles/Home.module.css (1)
47-88: LGTM! Well-implemented staggered animation.The fadeInUp animation with staggered delays creates a smooth, progressive reveal effect for the feature cards. The implementation is clean and follows CSS animation best practices.
src/common/components/Footer/Footer.module.css (1)
62-80: LGTM! Clean CSS structure for footer sections.The new footer classes are well-organized and use appropriate flexbox properties for layout and alignment.
src/common/components/Footer/Footer.tsx (2)
10-14: LGTM! Good branding consistency and typo fix.The branding update to "CanonForces" and the typo correction ("paltform" → "platform") improve the professional appearance of the footer.
36-44: LGTM! Copyright updated and attribution added.The copyright year update and maintainer attribution are appropriate additions. The use of both module CSS and Tailwind classes is a common pattern in Next.js projects.
src/pages/index.tsx (2)
31-79: LGTM! Well-structured hero section with good accessibility.The centered hero layout is clean and modern. Good use of:
- Priority loading for above-the-fold images
- Descriptive alt text for accessibility
- Responsive design with Tailwind's flex utilities
- Hover effects for visual feedback
94-166: LGTM! Feature cards are well-implemented with smooth animations.The feature cards use consistent styling and the animation class is properly applied. Good use of:
- Staggered fade-in animations via CSS module
- Hover effects for interactivity
- Color-coded icon backgrounds for visual distinction
- Responsive grid layout
Pratyush2240
force-pushed
the
feat/landing-page-ui-revamp
branch
from
f25f01a to
2758f41
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/pages/index.tsx:
- Line 70: Remove the non-functional Tailwind classes from the image's
className: replace or delete "w-85 h-85" used on the Image element (the JSX
element with className="w-85 h-85 object-contain transition-transform
duration-300 hover:scale-105"); either remove those classes entirely since
width={420} height={420} already control sizing, or swap them for valid Tailwind
utilities or arbitrary values (e.g., w-[420px] h-[420px]) to match the explicit
dimensions and keep the remaining utilities (object-contain transition-transform
duration-300 hover:scale-105).
🧹 Nitpick comments (1)
src/pages/index.tsx (1)
94-165: Consider refactoring duplicate feature card code.All six feature cards share identical structure with only icon, colors, title, and description varying. This creates significant code duplication that reduces maintainability.
♻️ Proposed refactor using a data-driven approach
Create a features data array and map over it:
// Define features data const features = [ { Icon: BsController, bgColor: "bg-blue-100", iconColor: "text-blue-600", title: "1v1 Matches", description: "Challenge friends or random coders in real-time competitive programming battles." }, { Icon: BsGraphUp, bgColor: "bg-green-100", iconColor: "text-green-600", title: "Track Your CF Rating", description: "Monitor your Codeforces progress with detailed analytics and beautiful visualizations." }, { Icon: BsCalendar3, bgColor: "bg-purple-100", iconColor: "text-purple-600", title: "Daily Challenges", description: "Solve curated problems every day to maintain your coding streak and skills." }, { Icon: BsTrophy, bgColor: "bg-yellow-100", iconColor: "text-yellow-600", title: "Leaderboards", description: "Compete for the top spots in monthly and weekly competitive programming rankings." }, { Icon: BsAward, bgColor: "bg-red-100", iconColor: "text-red-600", title: "Practice Rooms", description: "Join topic-specific practice sessions with other coders to improve together." }, { Icon: BsGraphUp, bgColor: "bg-indigo-100", iconColor: "text-indigo-600", title: "Progress Analytics", description: "Detailed insights into your coding patterns, strengths, and areas for improvement." } ]; // Render features <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8"> {features.map((feature, index) => ( <div key={index} className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`} > <div className="flex items-center gap-3 mb-4"> <div className={`p-2 ${feature.bgColor} rounded-lg`}> <feature.Icon className={feature.iconColor} size="1.5em" /> </div> <h3 className="text-lg font-semibold fc-black">{feature.title}</h3> </div> <p className="text-gray-600 leading-relaxed"> {feature.description} </p> </div> ))} </div>This approach:
- Eliminates ~70 lines of duplicate code
- Makes it easier to add/remove/reorder features
- Centralizes feature data for easier maintenance
- Maintains the same visual output and functionality
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/mascot.pngis excluded by!**/*.png
📒 Files selected for processing (4)
src/common/components/Footer/Footer.module.csssrc/common/components/Footer/Footer.tsxsrc/pages/index.tsxsrc/styles/Home.module.css
🚧 Files skipped from review as they are similar to previous changes (3)
- src/common/components/Footer/Footer.tsx
- src/styles/Home.module.css
- src/common/components/Footer/Footer.module.css
🔇 Additional comments (5)
src/pages/index.tsx (5)
11-12: LGTM! New icon imports are properly utilized.The BsController and BsGithub icons are correctly imported and used throughout the component.
85-91: Nice visual enhancement with the gradient divider!The gradient divider below the section title adds a modern touch and improves visual hierarchy. The implementation is clean and uses appropriate spacing.
168-179: LGTM! GitHub link button is properly implemented.The external link includes appropriate security attributes (
rel="noopener noreferrer"), accessibility considerations, and smooth hover animations. Implementation follows best practices.
94-165: Staggered animations are properly implemented in the CSS module.The
styles.feature_cardclass inHome.module.cssincludes thefadeInUpanimation with staggered delays applied via nth-child pseudo-selectors (0.1s through 0.6s for the six feature cards). No action needed.
36-42: Both required image assets are present in the repository and properly committed:
public/images/logo.png(313K) — referenced at line 36public/images/mascot.png(384K) — referenced at line 69The mascot image regeneration is confirmed by the matching timestamp with the logo file.
- Replace 'LEARN & CODE' heading with 'CanonForces' brand name and tagline - Center-align hero section with logo, heading, and high-quality mascot - Remove non-functional Explore/Dashboard buttons from hero - Add gradient divider below 'Why Choose CanonForces?' section title - Enhance feature cards with hover animations (shadow, scale, translate) - Implement staggered fade-in animations for feature cards - Add GitHub repository link button in features section - Update footer with corrected branding and 2025 copyright - Add 'Maintained by Aviral Saxena' attribution in footer - Fix typo: 'paltform' -> 'platform' in footer description - Replace mascot image with AI-regenerated high-quality version Resolves #[ISSUE_NUMBER]
Pratyush2240
force-pushed
the
feat/landing-page-ui-revamp
branch
from
2758f41 to
e226508
Compare
|
Deployment failed with the following error: |
aviralsaxena16
left a comment
aviralsaxena16
left a comment
There was a problem hiding this comment.
Hi @Pratyush2240, thanks for the PR 🙌
I would suggest some small refinements
- Please do not change the mascot character. Only improve the image quality/sharpness (you can regenerate it in higher quality, but keep the same character and pose).
- Remove Dashboard and Users button from the landing page (users are unauthenticated here).
- Move the CanonForces logo to the left in the header (where Dashboard/Users currently are), and adjust it in the header layout with Login/Signup accordingly, as the logo currently takes too much space at the center.
Once these changes are done, I’ll re-review the PR. Thanks for the contribution!
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/index.tsx (1)
95-165: Refactor to eliminate repetitive card structure.All six feature cards share identical structure with only content differences (icon, color, title, description). This repetition makes the code harder to maintain and violates DRY principles.
♻️ Proposed refactor using an array-driven approach
+const features = [ + { + icon: BsController, + iconColor: "text-blue-600", + bgColor: "bg-blue-100", + title: "1v1 Matches", + description: "Challenge friends or random coders in real-time competitive programming battles." + }, + { + icon: BsGraphUp, + iconColor: "text-green-600", + bgColor: "bg-green-100", + title: "Track Your CF Rating", + description: "Monitor your Codeforces progress with detailed analytics and beautiful visualizations." + }, + { + icon: BsCalendar3, + iconColor: "text-purple-600", + bgColor: "bg-purple-100", + title: "Daily Challenges", + description: "Solve curated problems every day to maintain your coding streak and skills." + }, + { + icon: BsTrophy, + iconColor: "text-yellow-600", + bgColor: "bg-yellow-100", + title: "Leaderboards", + description: "Compete for the top spots in monthly and weekly competitive programming rankings." + }, + { + icon: BsAward, + iconColor: "text-red-600", + bgColor: "bg-red-100", + title: "Practice Rooms", + description: "Join topic-specific practice sessions with other coders to improve together." + }, + { + icon: BsGraphUp, + iconColor: "text-indigo-600", + bgColor: "bg-indigo-100", + title: "Progress Analytics", + description: "Detailed insights into your coding patterns, strengths, and areas for improvement." + } +]; + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8"> - {/* Feature Cards with enhanced animations */} - <div className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`}> - <div className="flex items-center gap-3 mb-4"> - <div className="p-2 bg-blue-100 rounded-lg"> - <BsController className="text-blue-600" size="1.5em" /> - </div> - <h3 className="text-lg font-semibold fc-black">1v1 Matches</h3> - </div> - <p className="text-gray-600 leading-relaxed"> - Challenge friends or random coders in real-time competitive programming battles. - </p> - </div> - - {/* ... repeat 5 more times ... */} + {features.map((feature, index) => { + const Icon = feature.icon; + return ( + <div + key={index} + className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`} + > + <div className="flex items-center gap-3 mb-4"> + <div className={`p-2 ${feature.bgColor} rounded-lg`}> + <Icon className={feature.iconColor} size="1.5em" /> + </div> + <h3 className="text-lg font-semibold fc-black">{feature.title}</h3> + </div> + <p className="text-gray-600 leading-relaxed"> + {feature.description} + </p> + </div> + ); + })} </div>
🧹 Nitpick comments (1)
src/common/components/Footer/Footer.module.css (1)
26-28: Consider preserving spaces around child combinators for readability.The spaces around the
>combinator were removed (e.g.,.playerTwo>h4instead of.playerTwo > h4). While functionally equivalent, most CSS style guides recommend keeping spaces for improved readability.📖 Optional formatting suggestion
-.playerTwo>h4, -.company>h4, -.social>h4 { +.playerTwo > h4, +.company > h4, +.social > h4 { font-size: 25px; font-family: poppins; color: #ffffff; cursor: pointer; } -.playerTwo>p { +.playerTwo > p { margin-top: 10px; line-height: 1.6; font-weight: 500; cursor: pointer; } -.company>ul { +.company > ul { list-style-type: none; } -.company>ul>li { +.company > ul > li { margin-top: 10px; font-weight: 600; cursor: pointer; }Also applies to: 35-35, 42-42, 46-46
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/mascot.pngis excluded by!**/*.png
📒 Files selected for processing (4)
src/common/components/Footer/Footer.module.csssrc/common/components/Footer/Footer.tsxsrc/pages/index.tsxsrc/styles/Home.module.css
🚧 Files skipped from review as they are similar to previous changes (2)
- src/common/components/Footer/Footer.tsx
- src/styles/Home.module.css
🔇 Additional comments (8)
src/common/components/Footer/Footer.module.css (2)
62-65: LGTM! Clean addition for rights text.The new
.footer__rightsclass provides appropriate centering and spacing for the copyright text. The naming follows good conventions and the styles are well-scoped.
67-80: LGTM! Well-structured attribution styles.The new
.footer__attributionclass and its nested paragraph styles provide clean, centered layout for the attribution block. The flexbox approach is modern and appropriate, and the styling values are consistent with the rest of the footer.src/pages/index.tsx (6)
11-12: LGTM!The new icon imports are correctly added and used in the features section and GitHub link button.
31-51: LGTM! Clean hero branding implementation.The centered layout with logo, heading, and tagline effectively establishes the CanonForces brand. The
priorityprop on the logo image ensures optimal loading performance for above-the-fold content.
56-78: LGTM! Well-structured hero content layout.The responsive two-column layout with the description box and mascot image is well-implemented. The
priorityprop on the mascot image is appropriate for above-the-fold content, and accessibility is maintained with proper alt text.
85-91: LGTM! Nice visual enhancement.The gradient divider adds a polished touch below the section title and complements the modern design refresh.
169-179: LGTM! Secure external link implementation.The GitHub link button is properly implemented with
rel="noopener noreferrer"to prevent security vulnerabilities when usingtarget="_blank". The hover effects enhance interactivity.
95-165: The feature cards correctly usestyles.feature_cardwith proper staggered fade-in animations. The CSS module implements the animations via afadeInUpkeyframe animation with nth-child selectors applying incremental delays (0.1s through 0.6s) for each card.
- Remove NotificationBell from landing page header (unauthenticated users) - Improve mascot image quality and sharpness - Maintain exact character design and pose (mirrored orientation) Addresses reviewer feedback from @aviralsaxena16
2 participants
🎨 Landing Page UI Revamp – CanonForces Branding
📌 Description
This PR implements a comprehensive UI revamp of the landing page to align with modern design standards and strengthen the CanonForces brand identity. The changes focus on visual hierarchy, user engagement, and overall polish.
🔗 Related Issue
Closes #[ISSUE_NUMBER]
✨ Changes Made
Hero Section
Features Grid
hover:shadow-xl)hover:-translate-y-1)Footer
📁 Files Modified
🖼️ Screenshots
✅ Checklist
🎯 Testing
Tested on:
Note: As requested by @aviralsaxena16, this PR focuses on refining the current design with modern aesthetics while maintaining the existing structure.
Summary by CodeRabbit
New Features
Style & Refactor
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.