Skip to content

feat: revamp landing page with interactive components and unified nav (#251)#315

Merged
yash-pouranik merged 3 commits into
geturbackend:mainfrom
Siddh2024:fix/landing-page-revamp-v2-251
Jun 17, 2026
Merged

feat: revamp landing page with interactive components and unified nav (#251)#315
yash-pouranik merged 3 commits into
geturbackend:mainfrom
Siddh2024:fix/landing-page-revamp-v2-251

Conversation

@Siddh2024

@Siddh2024 Siddh2024 commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Fixes #251

This PR revamps the landing page and pricing page with:

  • New interactive components: BorderGlow, Hyperspeed (animated background), MagicBento (services grid)
  • Hero section: Centered layout with Hyperspeed particle background, streamlined CTAs
  • Unified glassmorphism nav: Shared nav bar on landing and pricing pages with active-state detection
  • Pricing page: Shared nav/mobile overlay, authentication-aware actions
  • Visual polish: Smoother animations, refined color palette, updated storage/mail/realtime card visuals
  • Dependencies: Added gsap, three, postprocessing

Closes #251

Summary by CodeRabbit

  • New Features

    • Added animated glow cards, a GSAP-powered “magic bento” card grid, and a new motion background experience on the landing page.
    • Refreshed the landing page layout and marketing sections, plus updated header/hero visuals.
    • Implemented a more responsive top navigation with a working mobile menu on the pricing page.
  • Bug Fixes

    • Improved auth UI behavior and presentation (conditional mode controls, brand block display).
    • Updated login/signup copy and button styling for clearer sign-in and create-account flows.
    • Enhanced smooth hash scrolling when navigation changes.

- 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
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
@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f28d26d1-91fa-4fc6-b96f-7d367d1693d8

📥 Commits

Reviewing files that changed from the base of the PR and between e06ebf5 and 5fd4dc3.

📒 Files selected for processing (8)
  • apps/web-dashboard/src/components/BorderGlow/BorderGlow.css
  • apps/web-dashboard/src/components/BorderGlow/BorderGlow.jsx
  • apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.css
  • apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.jsx
  • apps/web-dashboard/src/components/MagicBento/MagicBento.css
  • apps/web-dashboard/src/components/MagicBento/MagicBento.jsx
  • apps/web-dashboard/src/pages/Pricing.css
  • apps/web-dashboard/src/pages/Pricing.jsx
💤 Files with no reviewable changes (1)
  • apps/web-dashboard/src/components/BorderGlow/BorderGlow.css
✅ Files skipped from review due to trivial changes (1)
  • apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.css
🚧 Files skipped from review as they are similar to previous changes (3)
  • apps/web-dashboard/src/components/BorderGlow/BorderGlow.jsx
  • apps/web-dashboard/src/components/MagicBento/MagicBento.jsx
  • apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.jsx

📝 Walkthrough

Walkthrough

Adds three new reusable visual components (BorderGlow, Hyperspeed WebGL scene, MagicBento GSAP card grid), installs their dependencies (gsap, three, postprocessing), and substantially rewrites the LandingPage with new data models, nav, hero, services, and ecosystem sections. Auth pages receive updated copy and glassmorphism card styling; the Pricing page gains a consistent responsive nav.

Changes

Visual Component Library and Landing Page Revamp

Layer / File(s) Summary
New 3D/animation dependencies
apps/web-dashboard/package.json
Adds gsap, postprocessing, and three to dependencies.
BorderGlow component: CSS + JSX
apps/web-dashboard/src/components/BorderGlow/BorderGlow.css, apps/web-dashboard/src/components/BorderGlow/BorderGlow.jsx
Defines the .border-glow-card CSS custom property system (proximity, angle, mesh-gradient border, edge-light glow, blend modes) and implements the BorderGlow React component with HSL color helpers, animateValue rAF utility, pointer tracking, and animated sweep mode.
Hyperspeed WebGL component: CSS + JSX
apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.css, apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.jsx
Defines #lights/canvas CSS layout and implements the full Three.js road scene: DEFAULT_EFFECT_OPTIONS, distortion variants (GLSL + JS), the App class (renderer, EffectComposer, bloom/SMAA, Road, CarLights, LightsSticks, tick loop), and React lifecycle wiring with SMAA asset loading and disposal.
MagicBento component: CSS + JSX
apps/web-dashboard/src/components/MagicBento/MagicBento.css, apps/web-dashboard/src/components/MagicBento/MagicBento.jsx
Defines the full MagicBento stylesheet (theme variables, grid, hover, responsive, particle/spotlight effects). Implements ParticleCard (GSAP particle/tilt/magnetism/ripple), GlobalSpotlight (distance-based per-card glow intensity via CSS vars), useMobileDetection, and the MagicBento default export composing BorderGlow cards with optional spotlight.
LandingPage static data models
apps/web-dashboard/src/pages/LandingPage/index.jsx
Introduces COMPATIBLE_TECHNOLOGIES (orbit/ecosystem catalog with inline SVG and code samples), APP_SERVICES (MagicBento card definitions with JSX visuals), HYPERSPEED_OPTIONS, and NAV_ITEMS; updates React/router/component imports.
LandingPage rendering: nav, hero, services, infrastructure, ecosystem
apps/web-dashboard/src/pages/LandingPage/index.jsx
Updates component state (studioStep/replayKey replacing the old demo state machine), simplifies scroll logic, renders NAV_ITEMS-driven nav with hash-active detection, adds Hyperspeed to the hero, renders MagicBento for services, replaces infrastructure callout with animated BYO cards, rebuilds ecosystem into orbit/hover visualization, and removes the prior features timeline section.

Auth Pages and Pricing Navigation Polish

Layer / File(s) Summary
AuthShell brand block and modeLabel guard
apps/web-dashboard/src/components/AuthShell.jsx, apps/web-dashboard/src/index.css
AuthShell renders the UrBackend brand inside the form card and wraps the mode-control UI in a modeLabel guard; .auth-form-card gains glassmorphism styling with padding, border, background, and shadow.
Login and Signup copy and styling
apps/web-dashboard/src/pages/Login.jsx, apps/web-dashboard/src/pages/Signup.jsx
Login passes explicit title/subtitle to AuthShell; Signup removes the Home icon, updates create-account labels and alternate sign-in route, and changes the submit button from btn-secondary to btn-primary.
Pricing page responsive navigation bar
apps/web-dashboard/src/pages/Pricing.jsx, apps/web-dashboard/src/pages/Pricing.css
Adds NAV_ITEMS, scroll/mobile-menu state, a glass scroll-responsive nav with hash-active link logic, internal vs external link rendering, auth-conditional CTAs, and a mobile menu overlay with styled link/divider/action components.

Sequence Diagram(s)

sequenceDiagram
  participant Browser as Browser
  participant LandingPage as LandingPage
  participant Hyperspeed as Hyperspeed (Three.js)
  participant MagicBento as MagicBento
  participant BorderGlow as BorderGlow
  participant GlobalSpotlight as GlobalSpotlight

  Browser->>LandingPage: mount
  LandingPage->>Hyperspeed: render in hero section
  Hyperspeed->>Hyperspeed: load SMAA assets → init App → tick()
  LandingPage->>MagicBento: render APP_SERVICES cards
  MagicBento->>GlobalSpotlight: mount (if enableSpotlight + !isMobile)
  MagicBento->>BorderGlow: render each card
  Browser->>GlobalSpotlight: mousemove
  GlobalSpotlight->>BorderGlow: set --glow-intensity per card distance
  Browser->>BorderGlow: onPointerMove
  BorderGlow->>BorderGlow: compute --edge-proximity, --cursor-angle → update DOM style
Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related issues

  • Issue #318: Code review findings and bugs within the newly-added BorderGlow, Hyperspeed, MagicBento components and updated pages (Pricing, LandingPage).

Possibly related PRs

  • geturbackend/urBackend#201: Implements the features/timeline section in LandingPage/index.jsx that this PR removes and replaces with the new orbit/bento UI.
  • geturbackend/urBackend#235: Modifies AuthShell.jsx's mode-control rendering logic that this PR extends with the modeLabel conditional guard.

Suggested labels

enhancement, feature, type:design, level:advanced

Suggested reviewers

  • yash-pouranik

Poem

🐇 Hop hop, the dashboard glows tonight,
Hyperspeed roads and bento light!
BorderGlow pulses at the cursor's call,
GSAP particles dance for all.
The landing page shines, new orbit rings spin —
UrBackend's future begins! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies the main changes: landing page revamp with new interactive components and unified navigation, matching the core scope of the PR.
Linked Issues check ✅ Passed The PR substantially addresses issue #251's objectives: components are refactored (BorderGlow, Hyperspeed, MagicBento added), visual enhancements implemented (animations, hover effects, hero redesign), responsive design added with mobile menu, and multiple code review findings were fixed in follow-up commits.
Out of Scope Changes check ✅ Passed All changes directly support the landing/pricing page modernization objective: new interactive components, navigation unification, enhanced styling, and dependency additions (gsap, three, postprocessing) are all within scope.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@yash-pouranik

Copy link
Copy Markdown
Member

LGTM
@coderabbitai
what about u?

@yash-pouranik

Copy link
Copy Markdown
Member

@coderabbitai
?? review

@coderabbitai

coderabbitai Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

@yash-pouranik Sure! I'll kick off a review of this PR right away. 🐇

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 9

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)
apps/web-dashboard/src/pages/LandingPage/index.jsx (3)

772-774: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add ARIA metadata to the mobile menu toggle button.

The toggle button has no accessible name/state. Add aria-label, aria-expanded, and aria-controls so screen readers can operate it correctly.

🤖 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 772 - 774,
The mobile menu toggle button with className "mobile-menu-btn" lacks
accessibility attributes required by screen readers. Add the aria-label
attribute to provide an accessible name describing the button's purpose, add the
aria-expanded attribute bound to the isMobileMenuOpen state to indicate whether
the menu is open or closed, and add the aria-controls attribute that references
the ID of the mobile menu element being toggled. These attributes will enable
screen reader users to understand and operate the button correctly.

1284-1290: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Use semantic buttons for FAQ toggles (keyboard + ARIA).

The FAQ trigger is a clickable div, which is not keyboard-accessible by default. Use a <button> with aria-expanded/aria-controls.

Proposed fix
-<div className="faq-question" onClick={() => toggleFaq(index)}>
+<button
+  type="button"
+  className="faq-question"
+  onClick={() => toggleFaq(index)}
+  aria-expanded={openFaqIndex === index}
+  aria-controls={`faq-answer-${index}`}
+>
   <span>{faq.q}</span>
   {openFaqIndex === index ? <ChevronUp size={20} color="`#666`" /> : <ChevronDown size={20} color="`#666`" />}
-</div>
+</button>
 {openFaqIndex === index && (
-  <div className="faq-answer">{faq.a}</div>
+  <div id={`faq-answer-${index}`} className="faq-answer">{faq.a}</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 1284 - 1290,
The FAQ trigger element with className "faq-question" uses a non-semantic div
instead of a button, which lacks keyboard accessibility and screen reader
support. Replace the div element with a button element, add an aria-expanded
attribute that reflects the open state (true when openFaqIndex === index, false
otherwise), add an aria-controls attribute pointing to a unique ID of the
associated answer section (faq-answer), and assign that ID to the answer div
container. Keep the onClick handler with toggleFaq(index) on the button element
to maintain the toggle functionality.

694-700: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Fix broken mobile “Features” anchor target.

Line 696 links to #features, but there is no element with id="features" in this page. The mobile menu item is currently non-functional.

Proposed fix
-<a href="`#features`" onClick={() => setIsMobileMenuOpen(false)} ...>Features</a>
+<a href="`#client-services`" onClick={() => setIsMobileMenuOpen(false)} ...>Features</a>
🤖 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 694 - 700,
The mobile menu item with href="`#features`" in the mobile-menu-overlay section
references an anchor point that does not exist on the page. Locate the Features
section element in the LandingPage component and add the id="features" attribute
to the appropriate container element that should serve as the target for this
anchor link. This will make the mobile navigation link functional when clicked.
🧹 Nitpick comments (1)
apps/web-dashboard/src/index.css (1)

815-819: ⚡ Quick win

Use theme tokens for the auth card surface.

These hardcoded colors bypass your existing light/dark token system. Switching to variables keeps this component consistent with the rest of the design system.

♻️ Suggested change
 .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 815 - 819, The auth card
surface styling uses hardcoded RGBA color values for border, background, and
box-shadow instead of theme tokens, which prevents proper light/dark mode
theming. Replace the hardcoded rgba(255,255,255,0.06) border color,
rgba(255,255,255,0.02) background color, and the rgba(0,0,0,0.4) box-shadow
value with corresponding CSS custom properties or theme variables from your
existing token system to ensure consistency across the design system and support
dynamic theme switching.
🤖 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/components/BorderGlow/BorderGlow.css`:
- Around line 61-84: Remove the empty lines before certain CSS declarations in
the BorderGlow.css file to comply with Stylelint's declaration-empty-line-before
rule. Specifically, eliminate the blank lines that appear before the mask-image
declaration (after opacity), before the mask-image declaration in the
.border-glow-card > .edge-light block (after z-index), and before the final
opacity declaration. Ensure all declarations within each CSS rule block are
properly spaced according to your Stylelint configuration without unnecessary
empty lines between them.

In `@apps/web-dashboard/src/components/BorderGlow/BorderGlow.jsx`:
- Around line 39-49: The `animateValue` function starts delayed animations using
setTimeout and requestAnimationFrame but provides no way to cancel them, leaving
orphaned callbacks running when the component unmounts or props change rapidly.
Modify `animateValue` to return a cancel function that clears the setTimeout and
cancels any pending requestAnimationFrame calls by storing the frame ID. Then
update the effect around line 109 that calls `animateValue` multiple times to
collect the returned cancel functions and invoke all of them in the effect's
cleanup function to properly clean up animations when the component unmounts or
dependencies change.

In `@apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.css`:
- Around line 13-17: The canvas selector in Hyperspeed.css is a global selector
that will unintentionally restyle all canvas elements across the app,
potentially causing cross-page regressions. To fix this, scope the canvas
selector to only apply within the Hyperspeed component by changing the selector
from `canvas` to `#lights canvas`. This ensures that the width, height, and
display properties only affect the canvas element inside the `#lights`
container.

In `@apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.jsx`:
- Around line 1168-1177: The async operation started by
loadAssets().then(myApp.init) can execute after the cleanup function has
disposed of appRef.current, causing init to run on a disposed instance. Fix this
by tracking whether the component is still mounted using a flag or ref, then in
the then callback where myApp.init is called, check that the component is still
mounted and appRef.current has not been set to null before executing init.
Alternatively, store the promise from loadAssets() and cancel it in the cleanup
function before disposing to prevent the async chain from completing after
unmount.

In `@apps/web-dashboard/src/components/MagicBento/MagicBento.css`:
- Line 10: The stylelint rule `declaration-empty-line-before` is being violated
on the line containing the `color-scheme: light dark;` declaration. Add an empty
line before the `color-scheme` declaration to comply with the stylelint
configuration and resolve the lint violation.
- Around line 1-11: The CSS custom properties and color-scheme setting are
currently defined on the global :root selector in MagicBento.css, which causes
them to leak styling behavior application-wide. Move all the variable
definitions (--hue, --sat, --white, --purple-primary, --purple-glow,
--purple-border, --border-color, --background-dark) and the color-scheme
property from the :root selector to a component-scoped selector such as
.bento-section or the appropriate container class for the MagicBento component.
This will ensure these styles only apply to the component and do not have
unintended side effects on other pages or components.

In `@apps/web-dashboard/src/components/MagicBento/MagicBento.jsx`:
- Around line 475-488: The MagicBento component has several interactive
card-related props commented out in the destructuring (enableTilt, clickEffect,
enableMagnetism, particleCount) that are being passed by callers but are never
used because the component renders BorderGlow directly instead of ParticleCard.
Uncomment these props in the function parameters and ensure they are passed to
ParticleCard component (or whichever component is responsible for rendering the
interactive cards) so that GSAP card interactions like tilt, click effects, and
magnetism can actually execute. Make sure the card rendering logic in the map
function uses the appropriate component that accepts these interactive props.

In `@apps/web-dashboard/src/pages/Pricing.jsx`:
- Line 69: The mobile menu toggle button lacks accessibility attributes required
for screen reader users. Add aria-expanded attribute to the button element that
controls the mobile menu, setting its value to the isMobileMenuOpen state
(aria-expanded={isMobileMenuOpen}), and add an aria-label attribute with a
descriptive label such as "Toggle mobile menu" to provide an accessible name for
the icon-only button. Apply these ARIA attributes to both the menu toggle button
near line 69 and the additional instance around lines 149-151.
- Around line 70-73: Replace the anchor tag elements with hash references
(Features with href="/#client-services" and Use Cases with href="/#use-cases")
with the React Router Link component to enable client-side navigation instead of
full page reloads. Change the href attributes to to attributes and convert the
<a> tags to <Link> tags while preserving all the onClick handlers and inline
styles.

---

Outside diff comments:
In `@apps/web-dashboard/src/pages/LandingPage/index.jsx`:
- Around line 772-774: The mobile menu toggle button with className
"mobile-menu-btn" lacks accessibility attributes required by screen readers. Add
the aria-label attribute to provide an accessible name describing the button's
purpose, add the aria-expanded attribute bound to the isMobileMenuOpen state to
indicate whether the menu is open or closed, and add the aria-controls attribute
that references the ID of the mobile menu element being toggled. These
attributes will enable screen reader users to understand and operate the button
correctly.
- Around line 1284-1290: The FAQ trigger element with className "faq-question"
uses a non-semantic div instead of a button, which lacks keyboard accessibility
and screen reader support. Replace the div element with a button element, add an
aria-expanded attribute that reflects the open state (true when openFaqIndex ===
index, false otherwise), add an aria-controls attribute pointing to a unique ID
of the associated answer section (faq-answer), and assign that ID to the answer
div container. Keep the onClick handler with toggleFaq(index) on the button
element to maintain the toggle functionality.
- Around line 694-700: The mobile menu item with href="`#features`" in the
mobile-menu-overlay section references an anchor point that does not exist on
the page. Locate the Features section element in the LandingPage component and
add the id="features" attribute to the appropriate container element that should
serve as the target for this anchor link. This will make the mobile navigation
link functional when clicked.

---

Nitpick comments:
In `@apps/web-dashboard/src/index.css`:
- Around line 815-819: The auth card surface styling uses hardcoded RGBA color
values for border, background, and box-shadow instead of theme tokens, which
prevents proper light/dark mode theming. Replace the hardcoded
rgba(255,255,255,0.06) border color, rgba(255,255,255,0.02) background color,
and the rgba(0,0,0,0.4) box-shadow value with corresponding CSS custom
properties or theme variables from your existing token system to ensure
consistency across the design system and support dynamic theme switching.
🪄 Autofix (Beta)

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: b06ad7aa-dcd1-4297-a7a7-9ea9ffd54e78

📥 Commits

Reviewing files that changed from the base of the PR and between a8dde05 and e06ebf5.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (14)
  • apps/web-dashboard/package.json
  • apps/web-dashboard/src/components/AuthShell.jsx
  • apps/web-dashboard/src/components/BorderGlow/BorderGlow.css
  • apps/web-dashboard/src/components/BorderGlow/BorderGlow.jsx
  • apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.css
  • apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.jsx
  • apps/web-dashboard/src/components/MagicBento/MagicBento.css
  • apps/web-dashboard/src/components/MagicBento/MagicBento.jsx
  • apps/web-dashboard/src/index.css
  • apps/web-dashboard/src/pages/LandingPage/index.jsx
  • apps/web-dashboard/src/pages/LandingPage/style.css
  • apps/web-dashboard/src/pages/Login.jsx
  • apps/web-dashboard/src/pages/Pricing.jsx
  • apps/web-dashboard/src/pages/Signup.jsx

Comment thread apps/web-dashboard/src/components/BorderGlow/BorderGlow.css
Comment thread apps/web-dashboard/src/components/BorderGlow/BorderGlow.jsx
Comment thread apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.css Outdated
Comment thread apps/web-dashboard/src/components/Hyperspeed/Hyperspeed.jsx
Comment thread apps/web-dashboard/src/components/MagicBento/MagicBento.css Outdated
Comment thread apps/web-dashboard/src/components/MagicBento/MagicBento.css Outdated
Comment thread apps/web-dashboard/src/components/MagicBento/MagicBento.jsx
Comment thread apps/web-dashboard/src/pages/Pricing.jsx Outdated
Comment thread apps/web-dashboard/src/pages/Pricing.jsx Outdated
@yash-pouranik

Copy link
Copy Markdown
Member

can u create a new issue for all these comments? @coderabbitai
so that this could be merged to prod?

@coderabbitai

coderabbitai Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Get all review comments on PR `#315`
echo "=== PR Review Comments ==="
gh pr view 315 --repo geturbackend/urBackend --json reviews,comments

echo ""
echo "=== PR Review Thread Comments ==="
gh api repos/geturbackend/urBackend/pulls/315/comments --jq '.[] | {id: .id, body: .body, path: .path, line: .line, user: .user.login}'

echo ""
echo "=== PR Issue Comments ==="
gh api repos/geturbackend/urBackend/issues/315/comments --jq '.[] | {id: .id, body: .body, user: .user.login}'

echo ""
echo "=== PR Reviews ==="
gh api repos/geturbackend/urBackend/pulls/315/reviews --jq '.[] | {id: .id, body: .body, state: .state, user: .user.login}'

Length of output: 151666


🏁 Script executed:

#!/bin/bash
set -euo pipefail

gh issue create \
  --repo geturbackend/urBackend \
  --assignee yash-pouranik \
  --title "Follow-up: Address code review findings from PR `#315` (Landing Page Revamp)" \
  --body "## Overview

This issue tracks all actionable findings from the CodeRabbit review of PR `#315` (Landing Page Revamp). Addressing these will allow the changes to be merged to production safely.

> **Requested by:** `@yash-pouranik`  
> **Source PR:** https://github.com/geturbackend/urBackend/pull/315

---

## 🔴 Major Issues

### 1. \`BorderGlow/BorderGlow.jsx\`\`animateValue\` lacks cancellation (Lines 39–49, 109–128)
The \`animateValue\` function uses \`setTimeout\` + \`requestAnimationFrame\` but returns no cancel handle. Unmounting the component or rapidly changing props leaves orphaned callbacks running against stale DOM elements.

**Fix:** Make \`animateValue\` return a cancel function, and call all cancel functions in the \`useEffect\` cleanup.

---

### 2. \`Hyperspeed/Hyperspeed.jsx\` — Async init/unmount race condition (Line 1177)
\`loadAssets().then(myApp.init)\` can execute after the cleanup function has already disposed the instance, reinitializing listeners/resources on a torn-down component.

**Fix:** Track a \`cancelled\` flag in the \`useEffect\` and guard \`myApp.init()\` with it:
\`\`\`diff
+let cancelled = false;
 myApp.loadAssets().then(() => {
-  myApp.init();
+  if (!cancelled && !myApp.disposed) myApp.init();
 });
 return () => {
+  cancelled = true;
   appRef.current?.dispose();
 };
\`\`\`

---

### 3. \`Hyperspeed/Hyperspeed.css\` — Global \`canvas\` selector (Lines 13–17)
The bare \`canvas\` selector will restyle **all** canvas elements across the app, causing potential cross-page regressions.

**Fix:**
\`\`\`diff
-canvas {
+#lights canvas {
   width: 100%;
   height: 100%;
   display: block;
 }
\`\`\`

---

### 4. \`MagicBento/MagicBento.css\` — Global \`:root\` CSS variable leak (Lines 1–11)
CSS custom properties and \`color-scheme\` defined on \`:root\` leak styling behavior app-wide.

**Fix:** Scope them to \`.bento-section\` instead of \`:root\`, and remove \`color-scheme: light dark;\` from the component stylesheet.

---

### 5. \`MagicBento/MagicBento.jsx\` — Interactive card props never wired (Lines 475–488, 505–541)
\`enableTilt\`, \`clickEffect\`, \`enableMagnetism\`, and \`particleCount\` are accepted by callers but silently dropped — \`BorderGlow\` is rendered directly instead of \`ParticleCard\`, so GSAP interactions never execute.

**Fix:** Uncomment the props in the destructuring and wrap \`BorderGlow\` cards inside \`ParticleCard\`, forwarding the interaction props.

---

### 6. \`Pricing.jsx\` — Mobile menu toggle button missing ARIA (Line 69, Lines 149–151)
The icon-only toggle button has no accessible name or expanded-state metadata, breaking screen-reader navigation.

**Fix:**
\`\`\`diff
 <button
   className=\"mobile-menu-btn\"
   onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+  aria-label={isMobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
+  aria-expanded={isMobileMenuOpen}
+  aria-controls=\"pricing-mobile-menu\"
 >
\`\`\`

---

### 7. \`LandingPage/index.jsx\` — Mobile menu toggle button missing ARIA (Lines 772–774)
Same issue as above — the \`.mobile-menu-btn\` in the LandingPage lacks \`aria-label\`, \`aria-expanded\`, and \`aria-controls\`.

---

### 8. \`LandingPage/index.jsx\` — Broken mobile "Features" anchor (Lines 694–700)
\`href=\"`#features`\"\` in the mobile overlay references an ID that does not exist on the page, making this nav item non-functional.

**Fix:** Change to \`href=\"`#client-services`\"\` (or add \`id=\"features\"\` to the appropriate section container).

---

### 9. \`LandingPage/index.jsx\` — FAQ toggle uses non-semantic \`<div>\` (Lines 1284–1290)
The FAQ trigger is a clickable \`<div>\`, which is not keyboard-accessible by default.

**Fix:** Replace with \`<button type=\"button\">\` and add \`aria-expanded\` / \`aria-controls\` attributes.

---

### 10. \`Pricing.jsx\` — Hash links should use \`<Link>\` not \`<a>\` (Lines 70–73)
\`<a href=\"/#client-services\">\` and \`<a href=\"/#use-cases\">\` cause full page reloads. React Router's \`<Link to=\"/#...\">\` handles these client-side.

**Fix:** Replace the \`<a>\` tags with \`<Link>\` from \`react-router-dom\`, and update the \`isInternal\` check to include hash-based paths.

---

## 🟡 Minor Issues

### 11. \`BorderGlow/BorderGlow.css\` — Stylelint \`declaration-empty-line-before\` violations (Lines 61, 63–70, 79–82, 84)
Multiple empty lines before CSS declarations violate the configured Stylelint rule, keeping lint red.

**Fix:** Remove the blank lines before \`mask-image\` and \`opacity\` declarations in the affected rule blocks.

---

### 12. \`MagicBento/MagicBento.css\` — Stylelint \`declaration-empty-line-before\` violation (Line 10)
Missing empty line before the \`color-scheme: light dark;\` declaration.

**Fix:** Add an empty line before the \`color-scheme\` declaration.

---

## 💡 Nitpick

### 13. \`src/index.css\` — Auth card uses hardcoded RGBA colors (Lines 815–819)
The \`.auth-form-card\` uses hardcoded \`rgba(255,255,255,...)\` values instead of theme tokens, bypassing the light/dark token system.

**Suggestion:** Replace with CSS custom properties (e.g., \`var(--color-glass-card-border)\`, \`var(--color-glass-card-bg)\`).

---

## Acceptance Criteria

- [ ] \`animateValue\` returns a cancel function and the \`useEffect\` calls it on cleanup
- [ ] Hyperspeed async init guarded against post-unmount execution
- [ ] \`canvas\` selector scoped to \`#lights canvas\`
- [ ] MagicBento CSS variables scoped to \`.bento-section\` instead of \`:root\`
- [ ] \`ParticleCard\` wired up with interaction props in \`MagicBento\`
- [ ] Mobile menu toggle buttons have \`aria-label\`, \`aria-expanded\`, \`aria-controls\` in both LandingPage and Pricing
- [ ] FAQ toggle replaced with semantic \`<button>\` + ARIA attributes
- [ ] Broken \`#features\` anchor fixed in LandingPage mobile menu
- [ ] Hash navigation links in Pricing use \`<Link>\` instead of \`<a>\`
- [ ] Stylelint violations fixed in \`BorderGlow.css\` and \`MagicBento.css\`
- [ ] (Optional) Auth card hardcoded colors replaced with theme tokens
"

Length of output: 6376



@yash-pouranik Done! 🎉 I've created issue #318 consolidating all the review findings:

👉 #318

It's assigned to you and includes all 13 items from the review — broken down into major issues (bugs/regressions/a11y), minor lint violations, and a nitpick — along with a checklist of acceptance criteria so you can track progress before merging to production.

Here's a quick summary of the most critical ones to tackle first:

Priority Item
🔴 animateValue memory leak on unmount (BorderGlow.jsx)
🔴 Hyperspeed async init race condition (Hyperspeed.jsx)
🔴 Global canvas CSS selector (Hyperspeed.css)
🔴 :root CSS variable leak (MagicBento.css)
🔴 ARIA attributes missing on mobile menu toggles (both pages)
🔴 Broken #features anchor in LandingPage mobile menu
🟡 Stylelint violations in BorderGlow.css & MagicBento.css

@yash-pouranik

Copy link
Copy Markdown
Member

now we can safely merge this?
@coderabbitai

@coderabbitai

coderabbitai Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== PR `#315` status ==="
gh pr view 315 --repo geturbackend/urBackend --json state,mergeable,mergeStateStatus,headRefName,commits,title

echo ""
echo "=== Issue `#318` current body (checklist) ==="
gh issue view 318 --repo geturbackend/urBackend --json body,state,title --jq '{state: .state, title: .title, body: .body}'

Length of output: 8481



@yash-pouranik Not yet, unfortunately. The PR is technically conflict-free on GitHub, but no new commits have been pushed since the review and all 10 checklist items in #318 are still open. Here's the breakdown:

Must fix before merging to prod (🔴 Major):

# Issue Risk
1 animateValue memory leak — orphaned rAF callbacks after unmount Memory leak / crashes
2 Hyperspeed async init race condition Re-initialization on torn-down component
3 Global canvas CSS selector Breaks any other canvas element in the app
4 :root CSS variable leak from MagicBento.css Global style bleed across all pages
5 ParticleCard interaction props never wired Feature silently broken
6–7 Mobile menu buttons missing ARIA Screen-reader users can't navigate
8 #features anchor broken in mobile nav Dead link in mobile menu
9 FAQ toggle is a non-semantic <div> Not keyboard accessible
10 Hash links in Pricing.jsx using <a> Full-page reloads instead of client-side routing

Once the fixes from issue #318 are committed, feel free to ask me to re-review and I'll check that everything's been addressed. 🐇

@yash-pouranik

Copy link
Copy Markdown
Member

i was thinking to merge this to prod and then @Siddh2024 will open follow up PR for #318
@coderabbitai
??
or do u think it should be solved in this pr only?

@coderabbitai

coderabbitai Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Tip

For best results, initiate chat on the files or code changes.

@yash-pouranik That's a reasonable approach for most of the items, but there are 3 issues I'd strongly recommend fixing before merging because they affect the entire app, not just the new landing page:

# Issue Why it's blocking
3 Global canvas {} selector in Hyperspeed.css Overrides width/height/display on every canvas element in the app — could visually break other pages immediately
4 :root CSS variable leak in MagicBento.css Injects color-scheme and custom properties globally — can silently alter light/dark theming across all pages
2 Hyperspeed async init race condition Can throw JS errors on the landing page itself when the component unmounts quickly (e.g. route change)

These are 3–4 line fixes each. The rest (ARIA, broken anchor, ParticleCard wiring, lint, hash links) are totally fine to defer to a follow-up PR from @Siddh2024 via #318 — they're all self-contained to the new components.

TL;DR: Fix items #2, #3, #4 in this PR, then merge confidently. Everything else in #318 can ship in the follow-up. 🐇

- Fix Stylelint declaration-empty-line-before in BorderGlow.css
- Add animation cancellation cleanup to BorderGlow.jsx
- Scope canvas selector to #lights in Hyperspeed.css
- Guard async asset-init against unmount race in Hyperspeed.jsx
- Scope :root tokens to .bento-section in MagicBento.css
- Wire ParticleCard props in MagicBento.jsx
- Add ARIA attributes and extract inline styles in Pricing.jsx/css
@yash-pouranik yash-pouranik merged commit 9ccebb3 into geturbackend:main Jun 17, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI Enhancement] Revamp Landing Page for Modern Look & Improved User Experience

2 participants