feat: revamp landing page for modern UI/UX (#251) - #313
Closed
Siddh2024 wants to merge 2 commits into
Closed
Conversation
- Split monolithic landing page into section components - Add smooth scroll animations and micro-interactions - Implement orbit animations, BYOM pipeline, services showcase - Improve typography hierarchy and spacing - Fix auth forms with proper titles and branding - Remove redundant 'Back to Home' button from signup - Fully responsive across mobile, tablet, and desktop - Mobile hamburger menu support
Siddh2024
requested review from
Nitin-kumar-yadav1307 and
yash-pouranik
as code owners
June 15, 2026 16:08
Contributor
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughThis PR redesigns the landing page with three new visual effect components (BorderGlow, Hyperspeed, MagicBento) and refactors ChangesLanding Page Redesign with Visual Effects Components
Sequence DiagramsequenceDiagram
participant User
participant LandingPage
participant Hyperspeed
participant BorderGlow
participant GlobalSpotlight
User->>LandingPage: visit page
LandingPage->>Hyperspeed: mount Hyperspeed hero
Hyperspeed->>Hyperspeed: initialize Three.js renderer and animate road
User->>LandingPage: move pointer over MagicBento cards
GlobalSpotlight->>GlobalSpotlight: compute distance-based glow per card
User->>BorderGlow: hover card edge
BorderGlow->>BorderGlow: track --edge-proximity and --cursor-angle
BorderGlow-->>User: render glow effect
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
apps/web-dashboard/src/index.css (1)
816-819: ⚡ Quick winUse existing theme tokens instead of hardcoded card colors.
The new
rgba(...)values bypass the light/dark token system and make auth card theming harder to keep consistent. Reuse the existing variables already defined in:root/.light-mode.Suggested diff
.auth-form-card { width: 100%; padding: 2rem; - border: 1px solid rgba(255,255,255,0.06); + border: 1px solid var(--color-glass-card-border); border-radius: 16px; - background: rgba(255,255,255,0.02); + background: var(--color-glass-card-bg); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.4); }🤖 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 `@apps/web-dashboard/src/index.css` around lines 816 - 819, The border, background, and box-shadow properties in the card styling contain hardcoded rgba() values that bypass the theme token system, making it difficult to maintain consistent light/dark mode theming. Replace these hardcoded rgba color values with the existing CSS variables/tokens that are already defined in the :root or .light-mode selectors. Identify the corresponding theme tokens for the border color, background color, and box-shadow color, and update all four property values to use var() references instead of the hardcoded rgba() calls.apps/web-dashboard/src/pages/LandingPage/index.jsx (3)
37-49: 💤 Low valueRemove unused constants
HERO_ENDPOINTSandHERO_CLICK_STEPS.These constants are defined but never referenced in the component. The interactive window section (lines 1082-1106) uses hardcoded endpoint data instead.
🧹 Suggested cleanup
-const HERO_ENDPOINTS = [ - { method: 'GET', path: '/api/users', status: '200 OK' }, - { method: 'POST', path: '/api/users', status: '201 Created' }, - { method: 'GET', path: '/api/users/:id', status: '200 OK' }, - { method: 'PUT', path: '/api/users/:id', status: '200 OK' }, - { method: 'DELETE', path: '/api/users/:id', status: '200 OK' }, -]; - -const HERO_CLICK_STEPS = [ - { name: 'name', type: 'String', required: true }, - { name: 'email', type: 'String', required: true }, - { name: 'role', type: 'String', required: false }, -];🤖 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 `@apps/web-dashboard/src/pages/LandingPage/index.jsx` around lines 37 - 49, The constants HERO_ENDPOINTS and HERO_CLICK_STEPS are defined in the LandingPage component but are never referenced anywhere in the code. Since the interactive window section uses hardcoded endpoint data instead of these constants, remove both HERO_ENDPOINTS and HERO_CLICK_STEPS definitions to clean up unused code.
1363-1371: ⚡ Quick winFAQ toggle is not keyboard accessible.
The FAQ question divs use
onClickbut lack keyboard handlers, making them inaccessible to users navigating with Tab + Enter/Space.♿ Suggested accessibility fix
<div className="faq-question" onClick={() => toggleFaq(index)} + onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleFaq(index); } }} + role="button" + tabIndex={0} + aria-expanded={openFaqIndex === index} >🤖 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 `@apps/web-dashboard/src/pages/LandingPage/index.jsx` around lines 1363 - 1371, The faq-question div element is not keyboard accessible because it only handles onClick events and lacks keyboard navigation support and proper ARIA attributes. Convert the div with className faq-question to a button element, or if keeping it as a div, add keyboard event handling via onKeyDown to capture Enter and Space key presses, add role="button" and tabIndex="0" attributes to make it focusable and semantically correct. This will allow users navigating with Tab and Enter/Space keys to interact with the toggleFaq function.
1192-1209: ⚡ Quick winOrbit items lack keyboard accessibility.
The orbit technology items respond to mouse hover but are not keyboard-accessible. Users navigating with Tab cannot focus these elements or trigger the hover state to view details.
Consider adding
tabIndexand focus handlers:♿ Suggested accessibility improvement
<div key={item.id} className={`orbit-item-wrapper orbit-inner-wrapper ${item.cls} ${hoveredTech?.id === item.id ? 'active' : ''}`} style={{ animationDelay: `${-(20 / arr.length) * i}s`, '--hover-color': item.color }} + tabIndex={0} + role="button" + aria-label={`${item.label} - ${item.type}`} onMouseEnter={() => setHoveredTech(item)} onMouseLeave={() => setHoveredTech(null)} + onFocus={() => setHoveredTech(item)} + onBlur={() => setHoveredTech(null)} >Apply the same pattern to mid-orbit (lines 1213-1230) and outer-orbit (lines 1234-1251) items.
🤖 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 `@apps/web-dashboard/src/pages/LandingPage/index.jsx` around lines 1192 - 1209, The orbit technology items in the inner-orbit ring (and similarly in the mid-orbit and outer-orbit rings) are not keyboard accessible because they only respond to mouse hover events. Add keyboard accessibility by adding tabIndex="0" to the orbit-item-wrapper div to make it focusable, and add onFocus and onBlur event handlers that trigger the same setHoveredTech behavior as the mouse enter and leave handlers. Specifically, set onFocus to call setHoveredTech(item) and onBlur to call setHoveredTech(null). Apply this same pattern to all three orbit rings (inner-orbit at lines 1192-1209, mid-orbit at lines 1213-1230, and outer-orbit at lines 1234-1251) to ensure keyboard users can navigate and view the technology details consistently.
🤖 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.
Inline comments:
In `@apps/web-dashboard/src/pages/LandingPage/index.jsx`:
- Around line 610-631: Add an authError state variable to track authentication
error messages, then update the handleAuthSubmit function to set authError when
either resp.data.success is falsy or an error is caught during the API call.
Clear the authError at the start of the handler or when the form successfully
authenticates. Finally, render the authError value in the JSX form to display
error messages to the user whenever authentication fails.
---
Nitpick comments:
In `@apps/web-dashboard/src/index.css`:
- Around line 816-819: The border, background, and box-shadow properties in the
card styling contain hardcoded rgba() values that bypass the theme token system,
making it difficult to maintain consistent light/dark mode theming. Replace
these hardcoded rgba color values with the existing CSS variables/tokens that
are already defined in the :root or .light-mode selectors. Identify the
corresponding theme tokens for the border color, background color, and
box-shadow color, and update all four property values to use var() references
instead of the hardcoded rgba() calls.
In `@apps/web-dashboard/src/pages/LandingPage/index.jsx`:
- Around line 37-49: The constants HERO_ENDPOINTS and HERO_CLICK_STEPS are
defined in the LandingPage component but are never referenced anywhere in the
code. Since the interactive window section uses hardcoded endpoint data instead
of these constants, remove both HERO_ENDPOINTS and HERO_CLICK_STEPS definitions
to clean up unused code.
- Around line 1363-1371: The faq-question div element is not keyboard accessible
because it only handles onClick events and lacks keyboard navigation support and
proper ARIA attributes. Convert the div with className faq-question to a button
element, or if keeping it as a div, add keyboard event handling via onKeyDown to
capture Enter and Space key presses, add role="button" and tabIndex="0"
attributes to make it focusable and semantically correct. This will allow users
navigating with Tab and Enter/Space keys to interact with the toggleFaq
function.
- Around line 1192-1209: The orbit technology items in the inner-orbit ring (and
similarly in the mid-orbit and outer-orbit rings) are not keyboard accessible
because they only respond to mouse hover events. Add keyboard accessibility by
adding tabIndex="0" to the orbit-item-wrapper div to make it focusable, and add
onFocus and onBlur event handlers that trigger the same setHoveredTech behavior
as the mouse enter and leave handlers. Specifically, set onFocus to call
setHoveredTech(item) and onBlur to call setHoveredTech(null). Apply this same
pattern to all three orbit rings (inner-orbit at lines 1192-1209, mid-orbit at
lines 1213-1230, and outer-orbit at lines 1234-1251) to ensure keyboard users
can navigate and view the technology details consistently.
🪄 Autofix (Beta)
❌ Autofix failed (check again to retry)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fdc4b6e9-73e4-47f3-ad91-063a42179aee
📒 Files selected for processing (6)
apps/web-dashboard/src/components/AuthShell.jsxapps/web-dashboard/src/index.cssapps/web-dashboard/src/pages/LandingPage/index.jsxapps/web-dashboard/src/pages/LandingPage/style.cssapps/web-dashboard/src/pages/Login.jsxapps/web-dashboard/src/pages/Signup.jsx
Comment on lines
+610
to
+631
| const handleAuthSubmit = async (e) => { | ||
| e.preventDefault(); | ||
| setAuthLoading(true); | ||
| try { | ||
| if (authMode === 'signup') { | ||
| const resp = await api.post('/api/auth/register', authForm); | ||
| if (resp.data?.success) { | ||
| navigate('/login'); | ||
| } | ||
| } else { | ||
| const resp = await api.post('/api/auth/login', { email: authForm.email, password: authForm.password }); | ||
| if (resp.data?.success) { | ||
| login(resp.data.user); | ||
| navigate('/dashboard'); | ||
| } | ||
| } | ||
| } catch (err) { | ||
| console.error('Auth error:', err); | ||
| } finally { | ||
| setAuthLoading(false); | ||
| } | ||
| }; |
Contributor
There was a problem hiding this comment.
Auth failures provide no user feedback.
When authentication fails (either from a caught error or when resp.data.success is falsy), users receive no indication of what went wrong. The form simply stops loading with no visible change.
Consider adding an authError state to display error messages:
🛠️ Suggested fix
Add error state near line 532:
const [authLoading, setAuthLoading] = useState(false);
+const [authError, setAuthError] = useState('');Update the handler:
const handleAuthSubmit = async (e) => {
e.preventDefault();
setAuthLoading(true);
+ setAuthError('');
try {
if (authMode === 'signup') {
const resp = await api.post('/api/auth/register', authForm);
if (resp.data?.success) {
navigate('/login');
+ } else {
+ setAuthError(resp.data?.message || 'Signup failed. Please try again.');
}
} else {
const resp = await api.post('/api/auth/login', { email: authForm.email, password: authForm.password });
if (resp.data?.success) {
login(resp.data.user);
navigate('/dashboard');
+ } else {
+ setAuthError(resp.data?.message || 'Invalid email or password.');
}
}
} catch (err) {
console.error('Auth error:', err);
+ setAuthError(err.response?.data?.message || 'An unexpected error occurred.');
} finally {
setAuthLoading(false);
}
};Display the error in the form (around line 881):
{authError && <div className="hero-auth-error">{authError}</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 `@apps/web-dashboard/src/pages/LandingPage/index.jsx` around lines 610 - 631,
Add an authError state variable to track authentication error messages, then
update the handleAuthSubmit function to set authError when either
resp.data.success is falsy or an error is caught during the API call. Clear the
authError at the start of the handler or when the form successfully
authenticates. Finally, render the authError value in the JSX form to display
error messages to the user whenever authentication fails.
Contributor
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. An unexpected error occurred while generating fixes: Not Found - https://docs.github.com/rest/git/refs#get-a-reference |
Collaborator
|
@Siddh2024 fix the issues in code suggested by coderabbit |
geturbackend#251) - Add BorderGlow, Hyperspeed, and MagicBento components - Refactor hero section: centered layout with Hyperspeed background - Replace services grid with MagicBento card component - Add unified glassmorphism nav with active states - Update Pricing page to use shared nav and mobile overlay - Add gsap, three, postprocessing dependencies - Polish animations and visual effects across landing page
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
2 participants
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.
Closes #251
Summary
Complete visual overhaul of the landing page and auth flow improvements.
Changes
Landing Page
Auth Pages
Summary by CodeRabbit
New Features
Style
Updates