UI overhaul #71
UI overhaul #71
Conversation
…d key features hover
…d key features hover
WalkthroughThe changes introduce significant enhancements to the landing page, including a new animated hero section, interactive feature cards, and a visually rich "Creator Features" section. Animations and responsive layouts are implemented using Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HomePage
participant CreatorFeatures
participant AnimatedSection
participant Onboarding
User->>HomePage: Visits landing page
HomePage->>AnimatedSection: Render hero section with animations
HomePage->>CreatorFeatures: Render creator features section
CreatorFeatures->>AnimatedSection: Animate feature cards and images
HomePage->>Onboarding: Render onboarding section with gradient background
Assessment against linked issues
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (4)
Frontend/src/components/AnimatedSection.tsx (1)
21-32: Consider making animation values configurable.The animation variants are hardcoded, which limits reusability. Consider making the initial/final positions and transition properties configurable through props.
+interface AnimatedSectionProps { + children: React.ReactNode; + className?: string; + delay?: number; + initialY?: number; + duration?: number; +} const variants = { - initial: { opacity: 0, y: 50 }, + initial: { opacity: 0, y: initialY ?? 50 }, animate: { opacity: 1, y: 0, transition: { - duration: 0.8, + duration: duration ?? 0.8, ease: "easeOut", delay: delay } } }Frontend/src/pages/CreatorFeatures.tsx (1)
1-15: Remove unused imports to improve code cleanliness.Several imported icons appear to be unused in this component.
import { useEffect, useRef, useState } from "react"; import { Link } from "react-router-dom"; import { DollarSign, - Handshake, - Layers, - MessageSquare, Rocket, Search, TrendingUp, - Users, } from "lucide-react"; import { Button } from "../components/ui/button"; -import { motion, useAnimation, useInView } from 'framer-motion' +import { motion } from 'framer-motion' import AnimatedSection from "@/components/AnimatedSection";Frontend/src/pages/HomePage.tsx (2)
351-368: Excessive animations might impact performance and accessibility.The combination of whileHover scaling, icon rotation, and multiple animated elements could cause performance issues and accessibility concerns.
Consider reducing animation complexity or adding performance optimizations:
<motion.div key={idx} - whileHover={{ scale: 1.03 }} + whileHover={{ scale: 1.02 }} className="flex hover:shadow-md flex-col items-center text-center p-6 bg-gradient-to-br from-gray-50 via-gray-100 to-gray-100 rounded-xl " > <motion.div - whileHover={{ scale: 1.1, rotate: 5 }} - transition={{ type: "spring", stiffness: 300 }} + whileHover={{ scale: 1.05 }} + transition={{ type: "spring", stiffness: 200, damping: 15 }} className="flex items-center justify-center h-20 w-20 rounded-full bg-purple-100 mb-4" >
143-324: Consider performance impact of complex hero section animations.The hero section has multiple simultaneous animations that could impact performance on lower-end devices. Consider staggering animations or reducing complexity.
You might want to:
- Use
will-changeCSS property for animated elements- Consider
transform3dfor hardware acceleration- Add loading states for better perceived performance
- Test on various devices for performance impact
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
Frontend/src/components/AnimatedSection.tsx(1 hunks)Frontend/src/components/Onboarding.tsx(1 hunks)Frontend/src/pages/CreatorFeatures.tsx(1 hunks)Frontend/src/pages/HomePage.tsx(2 hunks)
🔇 Additional comments (2)
Frontend/src/components/Onboarding.tsx (1)
8-8: LGTM! Gradient background enhances visual consistency.The gradient background change aligns well with the overall UI redesign and provides a more modern, polished appearance compared to the solid background.
Frontend/src/pages/HomePage.tsx (1)
23-25: LGTM! Good modular approach with new imports.The addition of framer-motion, AnimatedSection, and CreatorFeatures components shows good component composition and separation of concerns.
| import { useEffect, useRef } from "react"; | ||
| import { motion } from 'framer-motion' | ||
|
|
||
| export default function AnimatedSection({ children, className = "", delay = 0 }: { children: React.ReactNode, className?: string, delay?: number }) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Define a proper TypeScript interface for component props.
The props are currently defined inline which reduces type safety and reusability. Consider extracting them into a proper interface.
+interface AnimatedSectionProps {
+ children: React.ReactNode;
+ className?: string;
+ delay?: number;
+}
+
-export default function AnimatedSection({ children, className = "", delay = 0 }: { children: React.ReactNode, className?: string, delay?: number }) {
+export default function AnimatedSection({ children, className = "", delay = 0 }: AnimatedSectionProps) {🤖 Prompt for AI Agents
In Frontend/src/components/AnimatedSection.tsx at line 5, the component props
are defined inline, which limits type safety and reusability. Extract the props
definition into a separate TypeScript interface named something like
AnimatedSectionProps, defining children, className, and delay with their
respective types. Then update the function signature to use this interface for
its props parameter.
| <Button className="bg-purple-600 text-white hover:bg-purple-700"> | ||
| <Rocket className="h-6 w-6 text-white" /> | ||
| <Link to="/signup">Join as Influencer</Link> | ||
| </Button> | ||
| </motion.div> |
There was a problem hiding this comment.
Fix nested interactive elements accessibility issue.
Having a Button wrapping a Link creates nested interactive elements, which can confuse screen readers and keyboard navigation.
-<Button className="bg-purple-600 text-white hover:bg-purple-700">
- <Rocket className="h-6 w-6 text-white" />
- <Link to="/signup">Join as Influencer</Link>
-</Button>
+<Link to="/signup">
+ <Button className="bg-purple-600 text-white hover:bg-purple-700">
+ <Rocket className="h-6 w-6 text-white mr-2" />
+ Join as Influencer
+ </Button>
+</Link>📝 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.
| <Button className="bg-purple-600 text-white hover:bg-purple-700"> | |
| <Rocket className="h-6 w-6 text-white" /> | |
| <Link to="/signup">Join as Influencer</Link> | |
| </Button> | |
| </motion.div> | |
| <Link to="/signup"> | |
| <Button className="bg-purple-600 text-white hover:bg-purple-700"> | |
| <Rocket className="h-6 w-6 text-white mr-2" /> | |
| Join as Influencer | |
| </Button> | |
| </Link> | |
| </motion.div> |
🤖 Prompt for AI Agents
In Frontend/src/pages/CreatorFeatures.tsx around lines 118 to 122, there is a
nested interactive elements issue where a Button component wraps a Link
component. To fix this, remove the Link inside the Button and instead make the
Button itself handle the navigation, for example by using the Link component as
the Button or by adding an onClick handler that performs navigation. This will
eliminate nested interactive elements and improve accessibility.
| <motion.img | ||
| src="https://images.unsplash.com/photo-1551836022-deb4988cc6c0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" | ||
| alt="Female content creator editing video" | ||
| className="rounded-xl shadow-lg w-full h-auto" | ||
| whileHover={{ scale: 1.05 }} | ||
| transition={{ duration: 0.3 }} | ||
| /> | ||
| <motion.img | ||
| src="https://images.unsplash.com/photo-1611224923853-80b023f02d71?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" | ||
| alt="Male influencer filming content" | ||
| className="rounded-xl shadow-lg w-full h-auto" | ||
| whileHover={{ scale: 1.05 }} | ||
| transition={{ duration: 0.3 }} | ||
| /> | ||
| </div> | ||
| <div className="space-y-4 pt-8"> | ||
| <motion.img | ||
| src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" | ||
| alt="Creative team brainstorming content" | ||
| className="rounded-xl shadow-lg w-full h-auto" | ||
| whileHover={{ scale: 1.05 }} | ||
| transition={{ duration: 0.3 }} | ||
| /> | ||
| <motion.img | ||
| src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" | ||
| alt="Podcast recording setup" | ||
| className="rounded-xl shadow-lg w-full h-auto" | ||
| whileHover={{ scale: 1.05 }} | ||
| transition={{ duration: 0.3 }} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using local images instead of external Unsplash URLs.
Hardcoded external image URLs can break over time and may cause loading issues or content policy violations.
Consider moving these images to your assets folder:
-src="https://images.unsplash.com/photo-1551836022-deb4988cc6c0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300"
+src="/assets/images/creator-editing.jpg"
-alt="Female content creator editing video"
+alt="Content creator working on video editing"This approach provides better reliability, performance, and control over your assets.
📝 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.
| <motion.img | |
| src="https://images.unsplash.com/photo-1551836022-deb4988cc6c0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" | |
| alt="Female content creator editing video" | |
| className="rounded-xl shadow-lg w-full h-auto" | |
| whileHover={{ scale: 1.05 }} | |
| transition={{ duration: 0.3 }} | |
| /> | |
| <motion.img | |
| src="https://images.unsplash.com/photo-1611224923853-80b023f02d71?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" | |
| alt="Male influencer filming content" | |
| className="rounded-xl shadow-lg w-full h-auto" | |
| whileHover={{ scale: 1.05 }} | |
| transition={{ duration: 0.3 }} | |
| /> | |
| </div> | |
| <div className="space-y-4 pt-8"> | |
| <motion.img | |
| src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" | |
| alt="Creative team brainstorming content" | |
| className="rounded-xl shadow-lg w-full h-auto" | |
| whileHover={{ scale: 1.05 }} | |
| transition={{ duration: 0.3 }} | |
| /> | |
| <motion.img | |
| src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" | |
| alt="Podcast recording setup" | |
| className="rounded-xl shadow-lg w-full h-auto" | |
| whileHover={{ scale: 1.05 }} | |
| transition={{ duration: 0.3 }} | |
| /> | |
| </div> | |
| <motion.img | |
| src="/assets/images/creator-editing.jpg" | |
| alt="Content creator working on video editing" | |
| className="rounded-xl shadow-lg w-full h-auto" | |
| whileHover={{ scale: 1.05 }} | |
| transition={{ duration: 0.3 }} | |
| /> |
🤖 Prompt for AI Agents
In Frontend/src/pages/CreatorFeatures.tsx between lines 25 and 55, replace the
hardcoded external Unsplash image URLs with local image files stored in the
project's assets folder. Download the images currently referenced by the URLs,
add them to the assets directory, and update the src attributes of the
motion.img components to point to these local files. This change will improve
reliability, loading performance, and asset control.
| <motion.div | ||
| className="w-2 h-2 bg-green-400 rounded-full mr-2" | ||
| animate={{ scale: [1, 1.2, 1] }} | ||
| transition={{ duration: 2, repeat: Infinity }} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider accessibility implications of pulsing animation.
The infinite pulsing animation might be distracting for users with attention disorders or vestibular issues. Consider adding a prefers-reduced-motion check.
<motion.div
className="w-2 h-2 bg-green-400 rounded-full mr-2"
- animate={{ scale: [1, 1.2, 1] }}
- transition={{ duration: 2, repeat: Infinity }}
+ animate={{ scale: [1, 1.2, 1] }}
+ transition={{
+ duration: 2,
+ repeat: Infinity,
+ // Respect user's motion preferences
+ ...(window.matchMedia('(prefers-reduced-motion: reduce)').matches && { repeat: 0 })
+ }}
/>📝 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.
| <motion.div | |
| className="w-2 h-2 bg-green-400 rounded-full mr-2" | |
| animate={{ scale: [1, 1.2, 1] }} | |
| transition={{ duration: 2, repeat: Infinity }} | |
| /> | |
| <motion.div | |
| className="w-2 h-2 bg-green-400 rounded-full mr-2" | |
| animate={{ scale: [1, 1.2, 1] }} | |
| transition={{ | |
| duration: 2, | |
| repeat: Infinity, | |
| // Respect user's motion preferences | |
| ...(window.matchMedia('(prefers-reduced-motion: reduce)').matches && { repeat: 0 }) | |
| }} | |
| /> |
🤖 Prompt for AI Agents
In Frontend/src/pages/HomePage.tsx around lines 157 to 161, the infinite pulsing
animation on the motion.div can be distracting for users with motion
sensitivity. To fix this, add a check for the user's `prefers-reduced-motion`
media query and disable or simplify the animation if the user prefers reduced
motion, ensuring better accessibility.
| <Button className="px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white rounded-xl font-semibold hover:shadow-xl transform hover:scale-105 transition-all duration-300"> | ||
| <Rocket className="mr-2 h-5 w-5" /> | ||
| <Link to={"/login"}>Start Matching Now</Link> | ||
| </Button> |
There was a problem hiding this comment.
Fix nested interactive elements accessibility issue.
Similar to the CreatorFeatures component, this Button > Link pattern creates accessibility problems.
-<Button className="px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white rounded-xl font-semibold hover:shadow-xl transform hover:scale-105 transition-all duration-300">
- <Rocket className="mr-2 h-5 w-5" />
- <Link to={"/login"}>Start Matching Now</Link>
-</Button>
+<Link to="/login">
+ <Button className="px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white rounded-xl font-semibold hover:shadow-xl transform hover:scale-105 transition-all duration-300">
+ <Rocket className="mr-2 h-5 w-5" />
+ Start Matching Now
+ </Button>
+</Link>📝 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.
| <Button className="px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white rounded-xl font-semibold hover:shadow-xl transform hover:scale-105 transition-all duration-300"> | |
| <Rocket className="mr-2 h-5 w-5" /> | |
| <Link to={"/login"}>Start Matching Now</Link> | |
| </Button> | |
| <Link to="/login"> | |
| <Button className="px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white rounded-xl font-semibold hover:shadow-xl transform hover:scale-105 transition-all duration-300"> | |
| <Rocket className="mr-2 h-5 w-5" /> | |
| Start Matching Now | |
| </Button> | |
| </Link> |
🤖 Prompt for AI Agents
In Frontend/src/pages/HomePage.tsx around lines 194 to 197, the Button component
contains a nested Link component, causing accessibility issues due to nested
interactive elements. To fix this, remove the Link inside the Button and instead
make the Button itself handle navigation by using the Link component as the
Button's root element or by adding an onClick handler that performs navigation.
This ensures only one interactive element is present and improves accessibility.
|
LGTM! |
| className={`container flex flex-col md:flex-row items-center justify-between text-gray-600 transition-all duration-1000 transform ${isFooterVisible | ||
| ? "opacity-100 translate-y-0" | ||
| : "opacity-0 translate-y-10" | ||
| }`} | ||
| > | ||
| <p>© 2024 Inpact. All rights reserved.</p> |
There was a problem hiding this comment.
just a simple change...make this 2025
|
@chandansgowda we can merge this |
Closes #70
📝 Description
This pull request introduces a complete UI overhaul of the landing page and improve features to improve responsiveness, clarity of messaging, and overall design consistency. especially on smaller screens, and the call-to-action lacked clear intent or functionality. This PR addresses those concerns with a more modern and responsive layout.
🔧 Changes Made
-> Implemented a fully responsive layout for mobile, tablet, and desktop.
-> Refactored hero section with improved heading, subtext, and animations.
-> Enhanced the primary call-to-action ("Start Matching Now") with interactivity and clear purpose.
-> Improved visual hierarchy with updated typography, spacing, and colors.
-> Added new animated creator collaboration cards.
-> Adjusted layout to improve content flow and user experience.
📷 Screenshots or Visual Changes (if applicable)
Screen.Recording.2025-06-19.at.18.22.13.mov
🤝 Collaboration
Collaborated with: N/A
✅ Checklist
[✅] I have read the contributing guidelines.
[✅] I have added tests that prove my fix is effective or that my feature works. (N/A for UI only)
[✅] I have added necessary documentation (if applicable).
[✅] Any dependent changes have been merged and published in downstream modules.
Summary by CodeRabbit
New Features
Enhancements