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.
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.