feat(onboarding): redesign onboarding v2 page#5593
feat(onboarding): redesign onboarding v2 page#5593tsahimatsliah wants to merge 50 commits intomainfrom
Conversation
…arch field Introduce the onboarding redesign page and add a layout-level toggle to hide the header search field so onboarding can use a cleaner, focused header without CSS workarounds. Co-authored-by: Cursor <cursoragent@cursor.com>
- Mobile feed cards use flat list mode (full width, no bg, no radius) - Desktop card limit set to 18, mobile to 10 with progressive fade-out - Add dark gradient overlay with progressive blur (mask-image) behind the personalization panel so feed cards fade naturally underneath - Restore sticky scroll behavior so panel pins at center of viewport - Sidebar fully disabled with low opacity, grayscale, and no interaction - All modals use z-modal to render above header (login/signup blocked) - Body scroll locked while any modal is open - GitHub import modal compacted: smaller orb, 2-col seniority grid, tighter spacing, close button inside card - Section titles set to white with larger typography Co-authored-by: Cursor <cursoragent@cursor.com>
Improve onboarding-v2 engagement and conversion UX by adding live feed ticker behavior, tightening hero/panel layouts, and refining GitHub/AI onboarding CTAs and copy. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Add logo with login/signup buttons for mobile, tone down glow intensity, simplify tag pill animations, and tighten spacing. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@claude Review the PR. |
|
Claude finished @tsahimatsliah's task in 10m 57s —— View job PR Review & Build Fix
Build FixTwo ESLint errors were found that caused the Vercel build to fail:
Fix committed:
Code ReviewThe feature is visually impressive but the implementation has several concerns worth addressing in follow-up: Critical — DOM Mutation Anti-patternsLive engagement ticker mutates the DOM directly ( // ❌ Current approach
const label = document.createElement('label');
label.htmlFor = btnId;
wrapper.appendChild(label);
// ✅ Better: track counters in React state and render themArchitecture3540-line single-file component — The entire page — state, business logic, all UI sub-flows, and ~670 lines of global CSS — lives in one file. Per the CLAUDE.md philosophy of pragmatic iteration, this will be hard to maintain or A/B test. The distinct flows (GitHub import, AI setup, extension promo, confetti, signup chooser) could each be extracted into focused components. ~670-line GitHub orb visualization is copy-pasted 3× — The animated orb with rotating rings, incoming particles, and center icon appears in the personalization panel (×2) and the import overlay. Extract to a shared GitHub icon SVG path duplicated ~5× — Should be extracted as a shared Design System ViolationsHardcoded hex colors in inline styles ( // ❌ Hardcoded
bg-[#0e1217]
background: 'rgba(168,85,247,0.06)'
// ✅ Use design tokens
bg-background-default
bg-accent-onion-default/6Logic
Shared ChangesThe SummaryThe build fix is pushed. The two ESLint errors were the root cause of Vercel's failure. The review findings above are improvements worth tracking — the DOM mutation ticker is the most important to address before this goes to high traffic. |
…fix ESLint build errors - Remove unused `panelShadowOpacity` variable that was flagged by @typescript-eslint/no-unused-vars - Replace `for...of` loop in `findCounterIn` with `Array.prototype.find()` to satisfy airbnb no-restricted-syntax rule Co-authored-by: Tsahi Matsliah <tsahimatsliah@users.noreply.github.com>
|
@claude dix all issues and make sure all are green. |
|
Claude finished @tsahimatsliah's task in 12m 20s —— View job All Issues Fixed
Changes (commit
|
…ors, constants - Refactor live engagement ticker floaters from direct DOM manipulation to React state + fixed overlay, eliminating DOM mutations outside React - Scope scroll-reveal MutationObserver from document.body to .onb-feed-stage container to avoid site-wide DOM change listeners - Replace hardcoded bg-[#0e1217] with bg-raw-pepper-90 design system token - Replace rgba(168,85,247,...) hardcoded colors in CSS with color-mix(in srgb, var(--theme-accent-onion-default) N%, transparent) - Remove misleading panelBackdropOpacity = 1 constant, use 1 directly - Add mobileAppUrl constant to shared/lib/constants.ts and use it instead of hardcoding https://app.daily.dev Co-authored-by: Tsahi Matsliah <tsahimatsliah@users.noreply.github.com>
…olor ESLint error bg-[length:200%_auto] in a literal className triggers the no-custom-color rule since it starts with 'bg-' but isn't a design system color token. Move background-size: 200% auto into the .onb-gradient-text CSS class. Co-authored-by: Tsahi Matsliah <tsahimatsliah@users.noreply.github.com>
Fix prettier formatting, nested ternaries, no-void, no-plusplus, unused variable, and styled-jsx unknown property errors in onboarding-v2. Add sidebar disabled state for onboarding flow. Co-authored-by: Cursor <cursoragent@cursor.com>
… builds - Remove unused getExperienceLevelIcon function - Remove void operator from toggleSidebarExpanded (no-void) - Fix i-- to i -= 1 in Fisher-Yates shuffle (no-plusplus) - Add eslint-disable for necessary DOM reflow void expression - Replace nested ternaries with lookup maps and helper variables - Fix array index keys to use stable identifiers (tag.label, s.delay) - Add eslint-disable for styled-jsx react/no-unknown-property - Apply Prettier formatting and Tailwind class ordering fixes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Flatten the conditional className expression to match Prettier formatting so shared lint and CI build pass. Co-authored-by: Cursor <cursoragent@cursor.com>
…counter Animation duration 5s→3s, travel distance 70px→44px, spawn delay 1.8-4s→0.8-2s, stream gap 3-6s→1.5-3.5s. Floaters now start 5px above the counter instead of 0.5rem for a tighter layout. Made-with: Cursor
…e staggering - Animation duration 3s → 1.5s with shorter travel (20px) - All floaters start/end from same position (2px above counter) - Removed lane offset staggering so numbers align - Faster spawn intervals and stream reschedule Made-with: Cursor
…ounter - bottom: 100% (flush with counter top, no extra gap) - opacity: 1 from frame 0 — visible immediately, no fade-in - total travel only 14px so floaters stay near the number - animation 1.2s, removed scale transforms for cleaner motion Made-with: Cursor
- Increased floater font-size to 0.875rem (14px) to match card numbers - Positioned exact using offsetLeft/offsetTop of the counter text - Added a snappy pop-and-jump animation with scaling - Sped up the stagger interval between numbers in a burst (150-350ms) to make them appear and fade in a tight, near-simultaneous sequence Made-with: Cursor
- Removed button color-change logic completely (fixes "stays colorful" bug) - Floaters are now attached to the `<article>` node and positioned absolutely based on the button coords - Reintroduced a random X/Y offset so numbers scatter organically and don't stack perfectly on top of each other - Reduced floater font size to 12px for a subtler, "live event" feel - Removed `!panelVisible` guard from the animation loop so floaters still spawn on large screens where the panel is always technically "visible" at the bottom - Z-index remains confined to the article's stacking context, ensuring it never goes over the blur Made-with: Cursor
…rket style" This reverts commit 344dbf1.
- Remove !panelVisible guard so animation runs on large desktops - Fix icons staying colorful by cleaning up active classes when all floaters for an article finish (pendingFloaters counter) and on effect teardown - Add vertical lane offset (idx * 1.2rem) so consecutive floaters don't stack on top of each other - Lower z-index to 1 so floaters stay behind the panel blur (z-50) - Smoother animation: 1.8s with cubic-bezier ease, gentle float from +2px to -26px with subtle scale - Smaller font (11px) for a subtle "live event" feel Made-with: Cursor
- Increased vertical space around top and bottom mobile tag containers - Height increased from 1.5rem to 4.5rem for top container with larger bottom margin - Height increased from 2rem to 4.5rem for bottom container with larger top margin - Provides necessary space for the tags to visually rise above the title and below the CTA buttons without being prematurely cropped Made-with: Cursor
Insert the real AuthOptions signup flow (Google, GitHub, email) into the onboarding-v2 page so users can create an account before seeing the Chrome extension promotion. Made-with: Cursor
- Show auth provider popup only after AI/manual flow, not GitHub flow - Hide experience level in registration forms (already asked during flow) - Add title/subtitle and close button only on provider step - Remove gradient from "Join daily.dev" title, match previous step style - Fix bottom padding and min-height in auth popup - Add separator border above "Already have an account?" link Made-with: Cursor
|
Ported and moved here for clean implementation and ab test #5835 |
4 participants
Summary
Test plan
Made with Cursor
Preview domain
https://feat-redesign-onboarding.preview.app.daily.dev