fix: landing page & visualizer UI/UX makeover - #221
Merged
Conversation
…cy in tests and translations
Show a spinner and localized 'Signing in…' label instead of a silent disabled button while the Google popup and token exchange are in flight. Applies to the header UserMenu (landing + compact) and SignInPromptModal.
…nd improved layout
github-actions
Bot
added
documentation
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review limit reached
Next review available in: 41 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (9)
📝 WalkthroughWalkthroughThe pull request updates the landing page with new sections, typography, and an autoplay visualizer. It improves authentication and settings feedback, restructures roadmap data, expands localization, changes algorithm tips, and removes daily signed-in video-export limits. ChangesProduct experience updates
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
Preview for Bayan Flow Staging ready!
Preview alias |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🤖 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 `@src/components/ArrayVisualizer.jsx`:
- Around line 194-197: Update the ArrayVisualizer label setup around
arrayPaneLabel to add localization keys for both interactive and non-interactive
labels, then obtain each label through the existing t(...) translation function.
Preserve the current wording and interactive/non-interactive selection behavior
while ensuring screen readers receive the localized value.
- Around line 287-312: The caption animation boundary in ArrayVisualizer should
remain mounted regardless of showCaption. Keep AnimatePresence as the outer
element and move the showCaption condition inside it, while preserving the
existing description check and motion.div enter/exit behavior.
In `@src/components/landing/ProPreview.jsx`:
- Around line 164-170: Update the Pro CTA rendering in Button and its usage
around the Link in ProPreview so only one interactive element is produced: when
Button receives to or href, render a noninteractive inner element while
preserving the existing link navigation, styling, and CTA text behavior.
In `@src/components/landing/ProPreview.test.jsx`:
- Around line 7-12: Update the beforeEach setup in the ProPreview test suite to
explicitly set the shared i18n language to English before each test, ensuring
renderWithI18n produces the English text and aria-label values asserted by the
tests.
In `@src/components/SettingsPanel.jsx`:
- Around line 215-226: Add aria-pressed={isActive} to the category selector
button in the button rendering loop, preserving the existing mutually exclusive
selection behavior and accessibility labels.
In `@src/i18n/i18n.test.js`:
- Around line 86-117: Update both tests around the algorithmTips and
algorithmUses assertions to read each locale’s translation resources directly,
or disable i18n fallback during these checks, so missing French or Arabic
entries cannot resolve to English values. Preserve the existing coverage and
duplicate-content assertions for every algorithm key and locale.
In `@src/i18n/locales/en/translation.json`:
- Around line 1481-1495: Update the FAQ answers under the visible “difference,”
“beginner,” “learn,” and “try” entries so manual pause/step controls and input
customization are explicitly qualified by the account tier that provides them,
while preserving accurate general access for anonymous and Free users. Remove or
reword any unqualified claims that all users can use these gated capabilities.
In `@src/i18n/locales/fr/translation.json`:
- Line 92: Correct the localized Pro preview copy in
src/i18n/locales/fr/translation.json at lines 92-92 by replacing “sans
watermark” with “sans filigrane”, and in src/i18n/locales/ar/translation.json at
lines 1461-1461 by replacing “تصوّر كل الـخوارزمية” with “تصوّر كل الخوارزميات”.
🪄 Autofix
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 Plus
Run ID: e905df2d-45e7-4565-b270-b402cdf4abf4
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (52)
.impeccable/design.jsonAGENTS.mdDESIGN.mddocs/AGENTS_REFERENCE.mddocs/ARCHITECTURE.mdpackage.jsonsrc/components/AlgorithmTipToast.jsxsrc/components/AlgorithmTipToast.test.jsxsrc/components/ArrayVisualizer.appDefaults.test.jsxsrc/components/ArrayVisualizer.jsxsrc/components/Header.jsxsrc/components/SettingsPanel.jsxsrc/components/SignInPromptModal.jsxsrc/components/SignInPromptModal.test.jsxsrc/components/UserMenu.jsxsrc/components/UserMenu.test.jsxsrc/components/landing/FAQ.jsxsrc/components/landing/FAQ.test.jsxsrc/components/landing/Features.jsxsrc/components/landing/Features.test.jsxsrc/components/landing/Hero.jsxsrc/components/landing/Hero.test.jsxsrc/components/landing/HeroVisualizerDemo.jsxsrc/components/landing/HeroVisualizerDemo.test.jsxsrc/components/landing/LearnYourWay.jsxsrc/components/landing/LearnYourWay.test.jsxsrc/components/landing/ProPreview.jsxsrc/components/landing/ProPreview.test.jsxsrc/components/landing/SocialProofStrip.jsxsrc/components/landing/SocialProofStrip.test.jsxsrc/components/landing/heroVisualizerDemoConfig.jssrc/components/landing/landingSocialProof.jssrc/components/roadmap/TimelineItem.jsxsrc/components/roadmap/TimelineItem.test.jsxsrc/components/ui/Section.jsxsrc/data/roadmapData.jssrc/data/roadmapData.test.jssrc/hooks/useSortingVisualization.jssrc/hooks/useVisualization.jssrc/hooks/useVisualization.test.jssrc/i18n/i18n.test.jssrc/i18n/locales/ar/translation.jsonsrc/i18n/locales/en/translation.jsonsrc/i18n/locales/fr/translation.jsonsrc/index.csssrc/main.jsxsrc/pages/LandingPage.jsxsrc/pages/LandingPage.test.jsxsrc/pages/VisualizerApp.jsxsrc/pages/VisualizerApp.test.jsxsrc/services/__tests__/entitlementService.test.jssrc/services/entitlementService.js
💤 Files with no reviewable changes (3)
- src/pages/VisualizerApp.jsx
- src/components/landing/LearnYourWay.test.jsx
- src/components/landing/LearnYourWay.jsx
- Localize array pane labels (interactive + static) for screen readers - Keep AnimatePresence mounted so caption exit animation runs - Render a single interactive element for CTA link buttons (no nested <button>) - Reset i18n to English before ProPreview tests - Expose selected category state via aria-pressed in SettingsPanel - Read algorithmTips/algorithmUses directly from locale resources in tests - Qualify gated FAQ capabilities by account tier (en/fr/ar) - Fix FR 'sans watermark' and AR 'كل الـخوارزمية' translation typos
11 tasks
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
1 participant
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.
Contribution workflow
develop: This PR targetsdevelop, notmain. (If the base is wrong, edit the PR on GitHub and change the base branch.)Description
This PR is a UI/UX makeover focused on the landing page and the visualizer experience. It introduces a new academic-lab visual identity for marketing headings (Source Serif 4 display font), rebuilds several landing sections (Hero with an interactive visualizer demo, ProPreview, FAQ, SocialProofStrip), improves the visualizer's timeline seek UX and loading states, and clarifies video-export messaging by removing daily export limits for free users.
Type of Change
Related Issues
Fixes #
Changes Made
.landing-h1/.landing-h2) and updated design tokens inDESIGN.md/.impeccable/design.json.Heronow renders an interactiveHeroVisualizerDemo(live array visualizer preview) driven byheroVisualizerDemoConfig.js; addedSocialProofStrip,ProPreview, andFAQcomponents; removed the oldLearnYourWaysection.useVisualization/useSortingVisualization.UserMenuandSignInPromptModalinstead of a silent disabled state.entitlementService; clarified export copy in the UI.AlgorithmTipToastmessages for clarity/consistency across locales.TimelineItemnow supports highlight flags and external article links; roadmap data and highlights updated.en,fr, andarlocales.Algorithm Details (if applicable)
N/A — no new algorithms in this PR.
Testing
pnpm test:run)Test Results
Screenshots/GIFs
N/A — visual change; interactive demo can be previewed on the landing page.
Code Quality
pnpm lint)pnpm format)Performance Impact
Accessibility
Breaking Changes
Checklist
Additional Notes
The branch currently sits on top of
developat the last merge-base;develophas since moved ahead with the Cloudflare Turnstile signup changes. There is no file overlap, so the merge is clean.Summary by CodeRabbit