feat: Redesign landing page hero dashboard with advanced animations and widgets#126
Open
Khushi1310-nayak wants to merge 1 commit into
Open
Conversation
|
@Khushi1310-nayak is attempting to deploy a commit to the Akash Santra 's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe PR adds a public landing page with authentication-aware routing, responsive marketing sections, an interactive dashboard hero, new navigation behavior, and supporting CSS, Tailwind animations, and ESLint rules. ChangesLanding experience
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant App
participant LandingPage
participant LandingNavbar
participant HeroSection
participant HeroDashboard
Browser->>App: request /
App->>LandingPage: render landing route
LandingPage->>LandingNavbar: render navigation
LandingPage->>HeroSection: render hero section
HeroSection->>HeroDashboard: render interactive dashboard
LandingNavbar->>Browser: navigate or scroll to landing sections
Possibly related issues
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
Author
|
Hi @Akash504-ai! I am done with the PR, could you please review it? |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (8)
frontend/src/components/landing/hero-dashboard/HeroDashboard.jsx (1)
13-56: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winOptimize 3D tilt performance by bypassing React state on mousemove.
Updating React state on every
mousemoveevent triggers a continuous re-render of the entire dashboard tree, which can cause jitter or elevated CPU usage on the landing page. Consider updating thetransformstyle directly via arefto bypass the React render cycle entirely.⚡ Proposed performance optimization
- const [tilt, setTilt] = useState({ x: 0, y: 0 }); + const dashboardRef = useRef(null); const handleMouseMove = (e) => { - if (!containerRef.current) return; + if (!containerRef.current || !dashboardRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Calculate tilt between -5 and 5 degrees const xPct = (x / rect.width - 0.5) * 2; const yPct = (y / rect.height - 0.5) * 2; - setTilt({ - x: -yPct * 6, // max 6 degrees - y: xPct * 6 - }); + const rotateX = -yPct * 6; + const rotateY = xPct * 6; + dashboardRef.current.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; }; const handleMouseLeave = () => { - setTilt({ x: 0, y: 0 }); + if (dashboardRef.current) { + dashboardRef.current.style.transform = `rotateX(0deg) rotateY(0deg)`; + } }; return ( <div ref={containerRef} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} className="relative w-full aspect-square max-w-[580px] mx-auto perspective-1200 h-[500px] sm:h-[600px] flex items-center justify-center" > {/* Background Decorative Mesh / Glows */} <div className="absolute inset-0 z-0 flex items-center justify-center pointer-events-none"> <div className="absolute w-[90%] h-[90%] bg-primary/20 rounded-full blur-[100px] animate-spin-slow"></div> <div className="absolute w-[70%] h-[70%] bg-secondary/15 rounded-full blur-[80px] animate-spin-slow" style={{ animationDirection: 'reverse', animationDuration: '15s' }}></div> </div> {/* Main Dashboard Container with Interactive Tilt */} <div + ref={dashboardRef} className="relative w-full h-full max-w-[380px] sm:max-w-[480px] mx-auto transition-transform duration-300 ease-out z-10 flex items-center justify-center" style={{ - transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`, + transform: `rotateX(0deg) rotateY(0deg)`, transformStyle: 'preserve-3d' }} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/landing/hero-dashboard/HeroDashboard.jsx` around lines 13 - 56, Update the HeroDashboard tilt interaction around handleMouseMove and the main dashboard container to use a ref for the transform element instead of React tilt state. Apply the calculated rotateX/rotateY values directly to the element style during mouse movement, reset them in handleMouseLeave, and remove the per-event setTilt updates while preserving the existing visual angles and transition behavior.frontend/eslint.config.js (1)
33-34: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove redundant
react/jsx-uses-reactrule.Since
react/react-in-jsx-scopeis explicitly turned off (line 31), which is the standard configuration for the new JSX transform introduced in React 17, thereact/jsx-uses-reactrule is redundant. Its sole purpose was to preventReactimports from being incorrectly marked as unused when JSX was present, but you no longer need to import React into scope anyway.♻️ Proposed fix
- "react/jsx-uses-vars": "warn", - "react/jsx-uses-react": "warn", + "react/jsx-uses-vars": "warn",🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/eslint.config.js` around lines 33 - 34, Remove the redundant "react/jsx-uses-react" entry from the ESLint configuration, leaving "react/jsx-uses-vars" and the existing react/react-in-jsx-scope setting unchanged.frontend/src/components/landing/Footer.jsx (1)
35-39: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low valueSafeguard scroll interactions with optional chaining.
If an element ID is changed or removed from the DOM in the future, calling
scrollIntoView()on anullresult will throw an error. Use optional chaining to safely handle the interaction.♻️ Proposed refactor
<ul className="space-y-3 text-sm text-base-content/70"> - <li><button onClick={() => document.getElementById('features').scrollIntoView({behavior: 'smooth'})} className="hover:text-primary transition-colors">Features</button></li> - <li><button onClick={() => document.getElementById('architecture').scrollIntoView({behavior: 'smooth'})} className="hover:text-primary transition-colors">Architecture</button></li> - <li><button onClick={() => document.getElementById('why-paso').scrollIntoView({behavior: 'smooth'})} className="hover:text-primary transition-colors">Why PASO</button></li> + <li><button onClick={() => document.getElementById('features')?.scrollIntoView({behavior: 'smooth'})} className="hover:text-primary transition-colors">Features</button></li> + <li><button onClick={() => document.getElementById('architecture')?.scrollIntoView({behavior: 'smooth'})} className="hover:text-primary transition-colors">Architecture</button></li> + <li><button onClick={() => document.getElementById('why-paso')?.scrollIntoView({behavior: 'smooth'})} className="hover:text-primary transition-colors">Why PASO</button></li> </ul>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/landing/Footer.jsx` around lines 35 - 39, Update the Features, Architecture, and Why PASO button handlers in the footer navigation to use optional chaining on the getElementById result before calling scrollIntoView, so missing target elements are safely ignored.frontend/src/components/landing/HowItWorks.jsx (1)
47-67: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer stable identifiers over array indices for list keys.
Since each step has a unique title, using
step.titleas the key is slightly more idiomatic and prevents potential re-rendering bugs if the array ever becomes dynamic.♻️ Proposed refactor
- {steps.map((step, index) => ( - <div key={index} className={`relative flex flex-col sm:flex-row items-center ${index % 2 === 0 ? 'sm:flex-row' : 'sm:flex-row-reverse'}`}> + {steps.map((step, index) => ( + <div key={step.title} className={`relative flex flex-col sm:flex-row items-center ${index % 2 === 0 ? 'sm:flex-row' : 'sm:flex-row-reverse'}`}>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/landing/HowItWorks.jsx` around lines 47 - 67, Update the key on each element rendered by the steps.map callback to use the step.title stable identifier instead of the index, while leaving the existing layout and rendering logic unchanged.frontend/src/components/landing/FeatureGrid.jsx (1)
78-91: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer stable identifiers over array indices for list keys.
Although the
featuresarray is static and using the index as a key is safe here, it's generally a better practice to use a stable, unique identifier like the feature's title to prevent potential re-rendering bugs if the list ever becomes dynamic.♻️ Proposed refactor
- {features.map((feature, index) => ( + {features.map((feature, index) => ( <div - key={index} + key={feature.title} className={`bg-base-100 rounded-2xl p-6 border border-base-200 group card-anim ${index % 2 === 0 ? 'animate-soft-tilt hover-glow' : 'animate-soft-tilt-reverse hover-glow-reverse'}`} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/landing/FeatureGrid.jsx` around lines 78 - 91, Replace the array-index key in the features.map rendering within FeatureGrid with a stable unique identifier from each feature, preferably feature.title, while leaving the existing card content and animation logic unchanged.frontend/src/components/landing/TechStack.jsx (1)
15-22: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer stable identifiers over array indices for list keys.
Since the technology strings are unique, using the string itself as the key is a better practice.
♻️ Proposed refactor
{technologies.map((tech, index) => ( <div - key={index} + key={tech} className={`px-6 py-3 bg-base-100 rounded-xl border border-base-200 text-base-content font-medium cursor-default card-anim ${index % 2 === 0 ? 'animate-soft-tilt hover-glow' : 'animate-soft-tilt-reverse hover-glow-reverse'}`} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/landing/TechStack.jsx` around lines 15 - 22, Update the technologies.map rendering in TechStack to use each unique technology string as the React key instead of the array index. Remove the index parameter if it is no longer needed, while preserving the existing alternating animation class behavior.frontend/src/components/landing/WhyPaso.jsx (1)
73-82: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer stable identifiers over array indices for list keys.
Since each strength item has a unique title, using
item.titleas the key is better practice than using the array index.♻️ Proposed refactor
- {strengths.map((item, index) => ( + {strengths.map((item, index) => ( <div - key={index} + key={item.title} className={`bg-base-200/50 p-6 rounded-2xl border border-base-200 card-anim ${index % 2 === 0 ? 'animate-soft-tilt-reverse hover-glow-reverse' : 'animate-soft-tilt hover-glow'}`} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/landing/WhyPaso.jsx` around lines 73 - 82, Update the key on each element rendered by strengths.map in WhyPaso so it uses the unique item.title identifier instead of the array index, while preserving the existing styling and content rendering.frontend/src/components/landing/BenefitsSection.jsx (1)
25-30: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer using unique strings over array indexes for React keys.
Although the
benefitsarray is static in this case, using a unique identifier (like the benefit string itself) as thekeyis a better practice in React and resolves linter warnings.♻️ Proposed refactor
- {benefits.map((benefit, index) => ( - <div key={index} className="flex items-center gap-3"> + {benefits.map((benefit) => ( + <div key={benefit} className="flex items-center gap-3"> <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0" /> <span className="text-base-content font-medium">{benefit}</span> </div>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/landing/BenefitsSection.jsx` around lines 25 - 30, Update the benefits.map rendering in BenefitsSection to use each unique benefit string as the React key instead of the array index, while leaving the existing benefit content and styling unchanged.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@frontend/eslint.config.js`:
- Around line 33-34: Remove the redundant "react/jsx-uses-react" entry from the
ESLint configuration, leaving "react/jsx-uses-vars" and the existing
react/react-in-jsx-scope setting unchanged.
In `@frontend/src/components/landing/BenefitsSection.jsx`:
- Around line 25-30: Update the benefits.map rendering in BenefitsSection to use
each unique benefit string as the React key instead of the array index, while
leaving the existing benefit content and styling unchanged.
In `@frontend/src/components/landing/FeatureGrid.jsx`:
- Around line 78-91: Replace the array-index key in the features.map rendering
within FeatureGrid with a stable unique identifier from each feature, preferably
feature.title, while leaving the existing card content and animation logic
unchanged.
In `@frontend/src/components/landing/Footer.jsx`:
- Around line 35-39: Update the Features, Architecture, and Why PASO button
handlers in the footer navigation to use optional chaining on the getElementById
result before calling scrollIntoView, so missing target elements are safely
ignored.
In `@frontend/src/components/landing/hero-dashboard/HeroDashboard.jsx`:
- Around line 13-56: Update the HeroDashboard tilt interaction around
handleMouseMove and the main dashboard container to use a ref for the transform
element instead of React tilt state. Apply the calculated rotateX/rotateY values
directly to the element style during mouse movement, reset them in
handleMouseLeave, and remove the per-event setTilt updates while preserving the
existing visual angles and transition behavior.
In `@frontend/src/components/landing/HowItWorks.jsx`:
- Around line 47-67: Update the key on each element rendered by the steps.map
callback to use the step.title stable identifier instead of the index, while
leaving the existing layout and rendering logic unchanged.
In `@frontend/src/components/landing/TechStack.jsx`:
- Around line 15-22: Update the technologies.map rendering in TechStack to use
each unique technology string as the React key instead of the array index.
Remove the index parameter if it is no longer needed, while preserving the
existing alternating animation class behavior.
In `@frontend/src/components/landing/WhyPaso.jsx`:
- Around line 73-82: Update the key on each element rendered by strengths.map in
WhyPaso so it uses the unique item.title identifier instead of the array index,
while preserving the existing styling and content rendering.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cd8429fb-2d7e-4c62-a767-58320bd442dd
⛔ Files ignored due to path filters (2)
backend/package-lock.jsonis excluded by!**/package-lock.jsonfrontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (28)
frontend/eslint.config.jsfrontend/src/App.jsxfrontend/src/components/Navbar.jsxfrontend/src/components/landing/ArchitecturePreview.jsxfrontend/src/components/landing/BenefitsSection.jsxfrontend/src/components/landing/CTASection.jsxfrontend/src/components/landing/FeatureGrid.jsxfrontend/src/components/landing/Footer.jsxfrontend/src/components/landing/HeroSection.jsxfrontend/src/components/landing/HowItWorks.jsxfrontend/src/components/landing/LandingNavbar.jsxfrontend/src/components/landing/TechStack.jsxfrontend/src/components/landing/WhyPaso.jsxfrontend/src/components/landing/hero-dashboard/AIModerationWidget.jsxfrontend/src/components/landing/hero-dashboard/AnalyticsWidget.jsxfrontend/src/components/landing/hero-dashboard/AnimatedProgressRing.jsxfrontend/src/components/landing/hero-dashboard/ChatMessage.jsxfrontend/src/components/landing/hero-dashboard/ChatWindow.jsxfrontend/src/components/landing/hero-dashboard/HealthWidget.jsxfrontend/src/components/landing/hero-dashboard/HeroDashboard.jsxfrontend/src/components/landing/hero-dashboard/MiniChart.jsxfrontend/src/components/landing/hero-dashboard/NotificationToast.jsxfrontend/src/components/landing/hero-dashboard/OnlineUsersWidget.jsxfrontend/src/components/landing/hero-dashboard/TypingIndicator.jsxfrontend/src/components/landing/hero-dashboard/VoiceCallWidget.jsxfrontend/src/index.cssfrontend/src/pages/LandingPage.jsxfrontend/tailwind.config.js
Member
|
Thanks for the contribution! The implementation looks too much AI-generated, but I'd like the landing page to have a more clean and professional look. Right now it feels a bit too busy with lots of floating widgets, effects, and animations. Please simplify the overall design and focus more on spacing, typography, and a modern SaaS-style UI. For reference, take a look at my portfolio: https://my-portfolio-one-roan-33.vercel.app/. Once that's updated, I'll review it again. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Objective
This PR introduces a brand-new, production-ready marketing landing page for PASO. It replaces the old entry point with a highly modular, responsive, and visually stunning experience designed to highlight the platform's enterprise-grade architecture, real-time messaging, and AI capabilities. It also features a deeply interactive 3D Hero Dashboard that acts as a live demonstration of the application.
🛠️ Changes Implemented
1. Landing Page Architecture & Routing
LandingPage.jsx: Created a new central layout orchestrating 10 unique sections.App.jsx): Refactored the main application wrapper to dynamically toggleoverflow-y-auto. When users are on the landing page, it uses native browser scrolling (min-h-screen) to prevent double scrollbars. When in the chat app, it reverts toh-screen overflow-hiddento keep the chat interface locked perfectly to the viewport.2. Modular Landing Components
Created a suite of reusable components in
src/components/landing/:LandingNavbar.jsx: Sticky navigation with scroll detection and dynamic CTA buttons.TechStack.jsx: A clean, animated marquee/row of modern technology tags used in PASO.FeatureGrid.jsx: A responsive 3-column grid showcasing PASO's core features (Real-time, AI Moderation, WebRTC) complete with subtle tilt and glow hover animations.WhyPaso.jsx: A two-column engineering breakdown detailing our architecture strengths (e.g., handling 100K+ concurrent users with Redis horizontal scaling).HowItWorks.jsx: A responsive vertical timeline guiding users seamlessly from Sign Up to Enterprise Analytics.ArchitecturePreview.jsx: A custom visual flow diagram built using DaisyUI cards and Lucide icons to clearly map theFrontend -> Express -> Redis -> FastAPIdata flow.BenefitsSection.jsx: High-impact bulleted benefits alongside an abstract pulsing dashboard UI representation.CTASection.jsx&Footer.jsx: A high-conversion bottom banner and a well-structured footer matching the brand guidelines.3. Interactive Hero Dashboard (The Masterpiece)
Completely redesigned the hero illustration into a dynamic, deeply layered 3D floating workspace utilizing 12 new modular widgets inside
src/components/landing/hero-dashboard/:onMouseMovehooks apply a subtle, premium 3D rotation to the entire dashboard based on cursor position.ChatWindow.jsx: Upgraded main interface featuring a mini-sidebar for channels (#engineering,#product,#design) and a realistic conversation about production deployments.AIModerationWidget,HealthWidget,OnlineUsersWidget,AnalyticsWidget, andVoiceCallWidget.NotificationToast.jsx: Slides in cleanly from the edge announcing successful deployments.MousePointer2cursor ("Alex typing...") indicating an active collaborative session.4. Advanced Animations (
tailwind.config.js&index.css)Injected completely bespoke, GPU-accelerated CSS animations across the entire page:
animate-soft-tilt,animate-float, andanimate-float-delayedfor ambient depth.animate-typing-dot,animate-waveform, andanimate-pulse-glowfor micro-interactions.animate-slide-in-toastandanimate-message-appearfor dynamic entry effects.5. Linting & Code Cleanup
eslint.config.jsto includereact/jsx-uses-varsto properly recognize variables used inside JSX tags, completely eliminating all false-positive unused variable warnings across the codebase.theme,Ribbon,Code2,MessageSquare,useEffect) across all modified files.🧪 Testing Performed
npm run lintwith 0 errors (all false positives eliminated).npm run build) successfully in1m 21s.transformandopacityproperties to prevent expensive browser repaints and ensure 60fps scrolling.Screenshots
Summary by CodeRabbit