feat: enhance landing page UI/UX with new components and animations#1
feat: enhance landing page UI/UX with new components and animations#1Lathiya50 wants to merge 1 commit into
Conversation
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 4 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
This is the final PR Bugbot will review for you during this billing cycle
Your free Bugbot reviews will reset on March 24
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| <Play className="mr-2 h-4 w-4" /> | ||
| Watch demo | ||
| </Link> | ||
| </Button> |
There was a problem hiding this comment.
"Watch demo" button misleadingly links to sign-in
Medium Severity
The secondary CTA button displays "Watch demo" with a Play icon, but its href points to /sign-in. Users clicking this button expect to see a product demo, not a sign-in page. This creates a confusing and misleading user experience that undermines trust — the opposite of what a landing page aims for.
| </div> | ||
| </nav> | ||
| </motion.div> | ||
| )} |
There was a problem hiding this comment.
Missing AnimatePresence prevents mobile menu exit animation
Low Severity
The mobile menu's motion.div specifies an exit animation prop, but it's conditionally rendered without an AnimatePresence wrapper. In framer-motion, exit animations only work inside AnimatePresence — without it, the component unmounts instantly with no transition when isMobileMenuOpen becomes false. The exit prop is effectively dead code.
| <Link href="/sign-in">Sign in</Link> | ||
| </Button> | ||
| <Button size="sm" asChild> | ||
| <Link href="/sign-up">Get started</Link> |
There was a problem hiding this comment.
Fixed header obscures anchor-scrolled section content
Medium Severity
The header uses fixed positioning with a height of h-16 (64px), but the anchor-linked sections (#features, #how-it-works, #testimonials) have no scroll-margin-top to compensate. When users click navigation links, the browser scrolls the section flush to the viewport top, causing the section header/content to be hidden behind the fixed navbar.
Additional Locations (1)
| }; | ||
| window.addEventListener("scroll", handleScroll); | ||
| return () => window.removeEventListener("scroll", handleScroll); | ||
| }, []); |
There was a problem hiding this comment.
Missing initial scroll check causes transparent header
Medium Severity
The useEffect registers the scroll listener but never calls handleScroll() on mount. When a user refreshes the page while scrolled down (browser scroll restoration) or navigates back, isScrolled stays false and the header renders as fully transparent (bg-transparent) with no backdrop blur or border. Navigation links become unreadable against non-hero content until the user scrolls and triggers the handler.
Lathiya50
left a comment
Lathiya50
left a comment
There was a problem hiding this comment.
🤖 CodeReviewAI
This pull request introduces a comprehensive redesign of the landing page, enhancing UI/UX with new components, animations, and improved visual hierarchy. It includes the addition of several new components, styles, and animations to create a more engaging user experience. The overall structure of the landing page has been rewritten to incorporate these changes.
2 inline comment(s) posted
| { | ||
| icon: Zap, | ||
| value: "< 30s", | ||
| label: "Avg Review Time", |
There was a problem hiding this comment.
🟡 MEDIUM — bug
The stats displayed may not update dynamically if the data changes.
💡 Suggestion: Consider implementing a state management solution to keep the stats updated.
| author: "Emily Watson", | ||
| role: "CTO", | ||
| company: "BuildIt", | ||
| initials: "EW", |
There was a problem hiding this comment.
🟡 MEDIUM — style
The testimonials section lacks sufficient spacing between items, which may affect readability.
💡 Suggestion: Increase the margin between testimonial items for better visual separation.
Lathiya50
left a comment
Lathiya50
left a comment
There was a problem hiding this comment.
🤖 CodeReviewAI
This pull request introduces a comprehensive redesign of the landing page, enhancing UI/UX with new components, animations, and improved visual hierarchy. It includes the addition of several new components, styles, and animations to create a more engaging user experience. The overall structure of the landing page has been rewritten to incorporate these changes.
2 inline comment(s) posted
| author: "Emily Watson", | ||
| role: "CTO", | ||
| company: "BuildIt", | ||
| initials: "EW", |
There was a problem hiding this comment.
🟡 MEDIUM — style
The testimonials section lacks sufficient spacing between items, which may affect readability.
💡 Suggestion: Increase the margin between testimonial items for better visual separation.
| { | ||
| icon: Zap, | ||
| value: "< 30s", | ||
| label: "Avg Review Time", |
There was a problem hiding this comment.
🟡 MEDIUM — bug
The stats displayed may not update dynamically if the data changes.
💡 Suggestion: Consider implementing a state management solution to keep the stats updated.
Lathiya50
left a comment
Lathiya50
left a comment
There was a problem hiding this comment.
🤖 CodeReviewAI
This pull request introduces a comprehensive redesign of the landing page, enhancing UI/UX with new components, animations, and improved visual hierarchy. It includes the addition of several new components, styles, and animations to create a more engaging user experience. The overall structure of the landing page has been rewritten to incorporate these changes.
4 inline comment(s) posted
|
|
||
| import { motion } from "framer-motion"; | ||
|
|
||
| /** |
There was a problem hiding this comment.
🟡 MEDIUM — performance
The animated background may cause performance issues on lower-end devices due to heavy use of animations.
💡 Suggestion: Consider implementing a fallback or reducing the complexity of animations based on device capabilities.
| <motion.div | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.6 }} |
There was a problem hiding this comment.
🟡 MEDIUM — style
The text gradient animation may not be accessible for users with visual impairments.
💡 Suggestion: Ensure that the text remains readable and consider providing an option to disable animations for users with accessibility needs.
| { label: "Features", href: "#features" }, | ||
| { label: "Pricing", href: "#pricing" }, | ||
| { label: "Changelog", href: "#changelog" }, | ||
| { label: "Documentation", href: "#docs" }, |
There was a problem hiding this comment.
⚪ LOW — style
The footer links should have a hover effect for better user experience.
💡 Suggestion: Add a hover effect to the footer links to enhance interactivity.
| { | ||
| icon: Zap, | ||
| value: "< 30s", | ||
| label: "Avg Review Time", |
There was a problem hiding this comment.
🟡 MEDIUM — bug
The stats displayed may not update dynamically if the data changes.
💡 Suggestion: Consider implementing a state management solution to keep the stats updated.
Lathiya50
left a comment
Lathiya50
left a comment
There was a problem hiding this comment.
🤖 CodeReviewAI
This pull request introduces a comprehensive redesign of the landing page, enhancing UI/UX with new components, animations, and improved visual hierarchy. It includes the addition of several new components, styles, and animations to create a more engaging user experience. The overall structure of the landing page has been rewritten to incorporate these changes.
1 inline comment(s) posted
| @@ -1,237 +1,40 @@ | |||
| import Link from "next/link"; | |||
| import { | |||
There was a problem hiding this comment.
🟠 HIGH — bug
The import statements for the new components are missing, which may lead to runtime errors.
💡 Suggestion: Ensure all new components are imported correctly at the top of the file.
Lathiya50
left a comment
Lathiya50
left a comment
There was a problem hiding this comment.
🤖 CodeReviewAI
This pull request introduces a comprehensive redesign of the landing page, enhancing UI/UX with new components, animations, and improved visual hierarchy. It includes the addition of several new components, styles, and animations to create a more engaging user experience. The overall structure of the landing page has been rewritten to incorporate these changes.
1 inline comment(s) posted
| { | ||
| icon: Zap, | ||
| value: "< 30s", | ||
| label: "Avg Review Time", |
There was a problem hiding this comment.
🟡 MEDIUM — bug
The stats displayed may not update dynamically if the data changes.
💡 Suggestion: Consider implementing a state management solution to keep the stats updated.
Lathiya50
left a comment
Lathiya50
left a comment
There was a problem hiding this comment.
🤖 CodeReviewAI
This pull request introduces a comprehensive redesign of the landing page, enhancing UI/UX with new components, animations, and improved visual hierarchy. It includes the addition of several new components, styles, and animations to create a more engaging user experience. The overall structure of the landing page has been rewritten to incorporate these changes.
4 inline comment(s) posted
| @@ -1,237 +1,40 @@ | |||
| import Link from "next/link"; | |||
| import { | |||
There was a problem hiding this comment.
🟠 HIGH — bug
The import statements for the new components are missing, which may lead to runtime errors.
💡 Suggestion: Ensure all new components are imported correctly at the top of the file.
|
|
||
| import { motion } from "framer-motion"; | ||
|
|
||
| /** |
There was a problem hiding this comment.
🟡 MEDIUM — performance
The animated background may cause performance issues on lower-end devices due to heavy use of animations.
💡 Suggestion: Consider implementing a fallback or reducing the complexity of animations based on device capabilities.
| <motion.div | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.6 }} |
There was a problem hiding this comment.
🟡 MEDIUM — style
The text gradient animation may not be accessible for users with visual impairments.
💡 Suggestion: Ensure that the text remains readable and consider providing an option to disable animations for users with accessibility needs.
| author: "Emily Watson", | ||
| role: "CTO", | ||
| company: "BuildIt", | ||
| initials: "EW", |
There was a problem hiding this comment.
🟡 MEDIUM — style
The testimonials section lacks sufficient spacing between items, which may affect readability.
💡 Suggestion: Increase the margin between testimonial items for better visual separation.
Lathiya50
left a comment
Lathiya50
left a comment
There was a problem hiding this comment.
🤖 CodeReviewAI
The pull request introduces significant UI/UX improvements to the landing page, including new components, animations, and a more polished aesthetic. However, the changes are extensive and may require thorough testing to ensure no bugs or performance issues are introduced.
The pull request introduces new UI/UX components and animations to the landing page, including a hero section, social proof, features, and CTAs. The changes are mostly cosmetic and do not appear to introduce any critical security vulnerabilities or data loss issues. However, there are some minor issues with code style and potential performance problems.
Added two new components to enhance the landing page UI/UX: CodeReviewMockup and CTASection. The components include animations and interactive elements. However, there are some minor issues that need to be addressed.
This pull request introduces a new features section and an enhanced footer to the landing page. The changes include new components, animations, and layout improvements. However, there are some issues that need to be addressed.
The pull request introduces new components for the landing page, including a header and hero section, with various UI/UX enhancements and animations. Overall, the code is well-structured, but there are some potential issues and improvements that can be made.
The pull request enhances the landing page UI/UX with new components and animations. However, there are some minor issues and suggestions for improvement.
The pull request introduces two new components, SocialProof and Testimonials, to enhance the landing page UI/UX. The components utilize framer-motion for animations and lucide-react for icons. Overall, the code is well-structured, but there are some minor issues and suggestions for improvement.
25 inline comment(s) posted
| @@ -19,6 +19,7 @@ | |||
| "better-auth": "^1.4.18", | |||
There was a problem hiding this comment.
⚪ LOW — style
The version of framer-motion is not following the standard versioning format.
💡 Suggestion: Use a standard versioning format for the framer-motion version.
| @@ -32,6 +32,9 @@ importers: | |||
| clsx: | |||
There was a problem hiding this comment.
🟡 MEDIUM — performance
The addition of framer-motion and its dependencies may impact the overall performance of the application.
💡 Suggestion: Monitor the application's performance after the update and consider optimizations if necessary.
| @@ -0,0 +1,164 @@ | |||
| # Home Page UI/UX Improvements | |||
There was a problem hiding this comment.
⚪ LOW — style
The documentation does not follow a standard formatting convention.
💡 Suggestion: Use a standard formatting convention for the documentation.
| - Make the page feel premium and professional | ||
|
|
||
| ## Scope | ||
|
|
There was a problem hiding this comment.
🟡 MEDIUM — bug
The scope of the redesign is not clearly defined, which may lead to misunderstandings or miscommunications.
💡 Suggestion: Clearly define the scope of the redesign and ensure all stakeholders are aware of the changes.
| @@ -119,10 +119,115 @@ | |||
| @layer base { | |||
There was a problem hiding this comment.
⚪ LOW — style
The CSS file has been heavily modified, but there are no major issues. However, some of the new classes and animations could be optimized for better performance.
💡 Suggestion: Consider optimizing the new CSS classes and animations for better performance.
| }, | ||
| { | ||
| icon: Star, | ||
| value: "4.9/5", |
There was a problem hiding this comment.
⚪ LOW — style
Consider adding a unique key to the motion.div element to improve accessibility.
💡 Suggestion: Add a unique key to the motion.div element
| ]; | ||
|
|
||
| /** | ||
| * Social proof section with stats and company logos. |
There was a problem hiding this comment.
⚪ LOW — style
The className 'text-muted-foreground' is used multiple times. Consider defining a constant for it.
💡 Suggestion: Define a constant for the className 'text-muted-foreground'
| author: "Sarah Chen", | ||
| role: "Engineering Lead", | ||
| company: "TechStart", | ||
| initials: "SC", |
There was a problem hiding this comment.
⚪ LOW — style
The testimonials array is quite long. Consider breaking it down into smaller arrays or using a separate data file.
💡 Suggestion: Break down the testimonials array into smaller arrays or use a separate data file
| </motion.div> | ||
|
|
||
| {/* Testimonials grid */} | ||
| <div className="mt-16 grid gap-8 md:grid-cols-3"> |
There was a problem hiding this comment.
⚪ LOW — style
The className 'text-gradient-animated' is not defined in the provided code. Make sure it is defined in the CSS files.
💡 Suggestion: Define the className 'text-gradient-animated' in the CSS files
|
|
||
| {/* Stars */} | ||
| <div className="flex gap-1 mb-4"> | ||
| {[...Array(5)].map((_, i) => ( |
There was a problem hiding this comment.
⚪ LOW — style
The glass-card className is not defined in the provided code. Make sure it is defined in the CSS files.
💡 Suggestion: Define the glass-card className in the CSS files
1 participant
Note
Medium Risk
Large UI rewrite of the public landing page plus new animation dependency; risk is mainly regressions in layout/responsiveness, hydration/scroll behavior, and performance from added motion effects.
Overview
Replaces the inline
src/app/page.tsxlanding page markup with a composablesrc/components/landing/*implementation, adding a new header/nav, animated hero (gradient background + floating code review mock), social-proof stats, redesigned feature cards, a timeline-style “how it works”, a testimonials section, a new CTA block, and an expanded multi-column footer.Adds
framer-motionto power scroll/entrance and looping animations, and extendsglobals.csswith animated gradient text, glassmorphism utilities, and keyframe animations (withprefers-reduced-motionfallbacks). Also adds a design spec doc atdocs/review/home-page-ui-ux-improvements.md.Written by Cursor Bugbot for commit b0d8a97. This will update automatically on new commits. Configure here.