feat(onboarding): align signup page with Chrome Web Store voice#6081
Open
tsahimatsliah wants to merge 48 commits into
Open
feat(onboarding): align signup page with Chrome Web Store voice#6081tsahimatsliah wants to merge 48 commits into
tsahimatsliah wants to merge 48 commits into
Conversation
Adds an outcome-led headline, three value props, trust strip, and a subtle radial glow above the auth buttons. Reorders providers so GitHub leads for the Onboarding trigger, swaps the email button to a visible tertiary variant, adds a one-line social-provider reassurance, and surfaces the existing "Already a member?" link above the legal disclaimer. All new marketing copy is gated on the OnboardingSignup display so verify / sign-back / login states stay clean. Form changes are gated on the Onboarding trigger so AuthModal and other surfaces are untouched. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replace the centered, light-theme signup column with an extreme two-
column hero that forces dark mode on the /onboarding signup surface.
- Forced dark theme (restored on unmount) to match Chrome Web Store
screenshots and developer-audience expectations.
- Two-column layout on laptop+: editorial pitch + auth on the left,
live "Today's top reads" feed preview in a faux browser frame on
the right (decorative, hidden below laptop).
- Stat-led headline ("400,000 developers start their day here.") with
cabbage→onion→water gradient accent on the number.
- Confident value-prop list using food-palette accent dots instead of
generic check icons.
- Trust strip (rating, devs, open source) immediately below the CTAs.
- Secondary proof band (4 stats) + developer testimonial below the
hero to add weight without pushing the form below the fold.
- Ambient layered background: three radial accent glows + masked
dot grid, with a subtle live-dot pulse gated behind
prefers-reduced-motion.
Only the OnboardingSignup auth display is rewired; all other auth
flows on this page keep their existing layout.
Co-authored-by: Cursor <cursoragent@cursor.com>
The previous hero implementation lived behind an unreachable gate in pages/onboarding.tsx (`isAuthenticating && defaultDisplay === OnboardingSignup`). In the live V1 product the signup screen is rendered by FunnelOrganicSignup inside FunnelStepper, so the hero was effectively dead code — visitors of /onboarding never reached it. - Move OnboardingSignupHero into shared (features/onboarding/components) so the funnel step can consume it, replace styled-jsx with a plain <style> tag, and add an `isFormExpanded` prop that collapses the marketing surface when the email/social registration form takes over. - Swap FunnelOrganicSignup's render with <OnboardingSignupHero>, preserving every auth callback (onAuthStateUpdate, onSuccessfulRegistration, onSuccessfulLogin) and the existing isLoggedIn / infoConfirmed / isOnboardingComplete guards. Force dark theme on mount; restore on unmount. - Drop the unreachable signup branch and unused imports (ThemeMode, AuthDisplay.OnboardingSignup theming effect, OnboardingSignupHero dynamic import) from pages/onboarding.tsx. - Add FunnelOrganicSignup.tsx to the strict-typecheck skip list, matching the precedent for the other auth/funnel files (the surfaced strict errors are pre-existing on unchanged logic copied from the original step). Co-authored-by: Cursor <cursoragent@cursor.com>
Previous variant was busy: stat headline, value-prop list, mock feed
preview, proof band, testimonial. Removed all of it. The product photo
is the visual hero, the form is the only interactive element.
- Full-bleed cloudinary product image as the only visual (reuses the
existing onboarding background asset). Dims to opacity-20 when the
email form expands so the form stays readable.
- One overlay gradient: vertical on mobile, horizontal on tablet+
(form panel sits on the right side over the darker stop).
- Form panel: logo, two-line headline ("Your homepage, ranked by
developers."), the auth form. That's it.
- Headline hides when isFormExpanded so the email form gets full focus.
- Removed the "We only get your name and email. No posts. No data
selling." reassurance line and reverted the email button label to
"Continue with email" to match the social-button copy. Kept
GitHub-first provider ordering and the tertiary email button — both
improve hierarchy without adding text.
Co-authored-by: Cursor <cursoragent@cursor.com>
Replaces the static product photo with a 4-column animated mosaic of mock article cards drifting at different speeds (Pinterest / Mosaic / Linear-style). Communicates "world of developer content" the moment the page loads, without crowding the form. - 16 mock feed cards (cover + text variants) cycling through real- sounding dev sources, looped via duplicate-and-translate so each column scrolls forever with no seam. - Alternating columns scroll up and down at 70s / 95s / 80s / 105s for parallax depth. Pauses entirely under prefers-reduced-motion. - Heavy gradient overlay (vertical on mobile, horizontal on tablet+) keeps the mosaic visible on the left while darkening the right side where the form sits. - Form panel gets a glass-card treatment (translucent dark surface, backdrop-blur, 1px hairline border) so it reads as a focused container above the moving content. - Column count is responsive: 2 on mobile, 3 on tablet, 4 on laptop+. - Headline tightened to "The homepage every developer deserves." — matches the user's phrasing and stays one balanced line on desktop. Co-authored-by: Cursor <cursoragent@cursor.com>
Drops the glass panel that was wrapping the form. The form now sits
flat over the animated card mosaic, matching the layout the user
preferred in the photo-background variant — but with the content-rich
background restored.
- Removed .onb-panel (translucent surface, blur, border, padding).
Form is a simple right-anchored flex column on top of the overlay.
- Three layered overlays replace the single thin gradient:
- .onb-overlay-v: stronger vertical gradient on mobile so the form
is legible at the bottom of the viewport over the mosaic.
- .onb-overlay-h: horizontal gradient on tablet+ that fades from
25% black on the left (mosaic stays inspiring) to 96% black on
the right (form side reads cleanly without a container).
- .onb-vignette: radial darkening centered on the right ~85% of the
viewport for an extra Netflix-style focus pool behind the form.
- Headline gets a soft text-shadow so it never disappears against a
busy moving card behind it; bumped to typo-mega3 on tablet+ to
match the cinematic feel.
Co-authored-by: Cursor <cursoragent@cursor.com>
Visitors with a prior signin_method in localStorage (or with a loginState / action / shouldVerify trigger) hit pages/onboarding.tsx's isAuthenticating branch instead of FunnelStepper, so they never saw the new hero — they got the legacy OnboardingHeader + AuthOptions + FooterLinks layout. That's why a returning developer testing /onboarding could only see the social buttons and "Continue with email" with no background. - pages/onboarding.tsx: wrap the isAuthenticating branch with <OnboardingSignupHero> too. Drops the OnboardingHeader (hero has its own logo) and FooterLinks (kept off the hero, matching the funnel path). Picks headline and isFormExpanded from auth.defaultDisplay so login, sign-back, registration, email verify, etc. all render correctly inside the same shell. - OnboardingSignupHero: accept optional `headline` prop (default "The homepage every developer deserves.", null hides). Apply dark theme inside the hero so any consumer gets consistent theming. Added `isolate` so the absolute -z-1 background layers stack correctly inside the parent's `bg-raw-pepper-90`. - FunnelOrganicSignup: stop applying dark theme locally — the hero owns that now. Drops the unused useSettingsContext import. Co-authored-by: Cursor <cursoragent@cursor.com>
Background and gradient direction redesigned so the form sits inside a clean dark halo while the rest of the viewport shows real-feeling content density. Cards (24 total, was 16): - 5 types instead of 2: article, video, code, discussion, text. - Each card now carries source pill + author + time + upvote count + comment count + optional Trending / Top badge — reads like a real feed row, not a placeholder. - Video cards get a centered play button and a duration pill. - Code cards render a faux snippet pattern with a "snippet" tag. - Discussion cards drop the cover and show a squad-icon prefix on the title, framing them as community threads. - Text cards center the title inside the cover so the quote / one-liner is the card. - All covers use a 3-stop mesh gradient with a subtle highlight/shadow overlay so they feel like real thumbnails. - Smaller card padding (p-3), tighter typography (typo-footnote / typo-caption2), and rounded-12 to read as proper feed tiles instead of giant decorative blocks. Gradient: - Mobile: radial dark halo from 50% 108% (below the viewport) that hides cards near the form while letting them bleed through at the top — exactly the shape requested. - Tablet+: stronger horizontal fade + radial vignette behind the form for crisp contrast without obscuring the mosaic. Layout: - Form anchored to the bottom on mobile (justify-end) so it sits directly inside the radial halo, right-side on tablet+ (items-end + justify-center) so it lines up with the desktop fade. - Column count + card heights tuned (6 per column, faster animation durations for a livelier feed) to deliver Pinterest-style density. Co-authored-by: Cursor <cursoragent@cursor.com>
Form is anchored to center-bottom again (horizontally centered, sitting in the lower third of the viewport) — `items-center justify-end` plus `pb-[12vh]` / `tablet:pb-[14vh]`. The Logo and headline center-align so the whole stack reads as a focused composition rather than a right-rail. Gradient follows the form: - A single radial halo centered at 50% 78% paints the form area dark, with a soft top fade for Logo legibility. - Same shape on mobile and tablet+, just tightened on larger screens via a media query so the halo does not bleed too far up. Cards rebuilt to feel like real daily.dev feed rows, not placeholders: - Titles are now `typo-callout` font-bold (much bigger and readable) with `line-clamp-3` so they stay tidy. - Each card type is its own component (Article, Video, Code, Discussion, Hero) so the rendering reads cleanly and each variant is tuned to its content. - Article cards drop the big abstract gradient cover entirely. Just a 1px accent strip in the source colour at the top, then source row, title, engagement. Reads like a real article card. - Video cards keep a short 80px cover with play badge + duration pill. - Code cards keep a short 64px cover with a faux multi-colour "syntax line" pattern that reads as a snippet, not random art. - Discussion cards get a coloured "SQUAD" header strip instead of a cover so the community framing is unmistakable. - Hero cards are full-bleed accent colour with white title — these are the splashes of colour and energy across the grid (about one in every five-to-seven cards), instead of every card being colourful. - Source row carries an initials avatar pill, source name, and time ago. Engagement row carries upvote count, comment count, and an optional Trending / Top badge. Grid is tighter (gap-2.5 on mobile, gap-3 on tablet+) so more cards breathe on screen at once, giving the abundance / "real feed" feeling the brief asked for. Co-authored-by: Cursor <cursoragent@cursor.com>
Stripped the feed mosaic back to a single peaceful atmosphere. Cards: - One uniform "ghost" card variant — no hero blocks, no SQUAD strips, no video covers, no code patterns, no trending / top badges, no comment counts, no source initial avatars, no accent stripes. - Single component (~70 lines of card code vs. ~250 before). - bg-white/[0.025] over a subtle 1px border, faint backdrop-blur so cards read as glass, not stickers. - Source + time in text-text-quaternary (whisper). Title in text-text-secondary typo-callout font-medium (readable, not shouting). Single upvote count as the only metric. - Title is the only thing with visual weight, so the eye scans content (the actual value prop) instead of decoration. Atmosphere: - Three large blurred accent orbs (cabbage, water, onion) with filter: blur(72px) and mix-blend-mode: screen, behind the cards. This is the "magic" — soft aurora light that hints at brand colours without ever screaming. - Form halo softened: dark radial ellipse centered at 50% 80%, fading out by 82%. No harsh edge. - Added a subtle top fade so the Logo always reads cleanly even when a column scrolls a bright-titled card into the top corner. Density: - Reduced to 3 columns max (was 4), mobile shows only 2. - 18 unique cards (was 24) doubled per column for the loop. - Animation durations stretched to 210–260s for a slow, calm drift instead of feed-scroll velocity. Co-authored-by: Cursor <cursoragent@cursor.com>
Rebuilt the hero around a single clever idea: a static constellation of topics — daily.dev's actual organizing primitive — instead of mock article cards. Why: - Article cards forced the eye to read titles competing with the signup CTA, even when stripped to one variant. - Topics are single words. Nothing to read; everything to recognise. - The breadth of topics IS the value proposition: "this is the universe of dev knowledge you're joining." - Tags are how daily.dev itself organises content and squads, so the background already matches what the user will see post-signup. Composition: - 29 topic labels (TypeScript, React, AI, Rust, GraphQL, Kubernetes, WebAssembly, System Design, DevOps, Indie Hacking, …) hand-placed in a constellation across the viewport. - Four typography tiers from typo-caption1 (xs, faded whisper) up to typo-title3 (lg, headline-weight). Depth comes from size + opacity layering — no animation needed. - Five accent tags (AI, TypeScript, Rust, LLM, System Design) glow softly in brand colours via text-shadow + color-mix on the theme accent variables. Everyone else is white at 25–55% opacity, so the glows feel like rare stars instead of a Christmas tree. - Six ultra-subtle SVG lines (white at 7% opacity, non-scaling stroke) connect related tags — TypeScript↔React, AI↔LLM, Rust↔WASM, GraphQL↔Postgres, DevOps↔Docker, System Design↔Architecture. Reads as a knowledge graph at a glance, recedes the moment you focus on the form. Atmosphere: - Three large blurred orbs (96px blur, screen blend) breathe in/out on an 18s cycle in cabbage / water / onion. This is the only motion on the page — slow ambient light, nothing demanding attention. - Honors prefers-reduced-motion. Form area: - Same center-bottom placement (justify-end + pb-[12vh] / [14vh]). - Radial dark halo at 50% 82% sits the form in calm light. - Top fade keeps the Logo readable against any bright tag near the upper edge. Net effect: peaceful, magical, on-brand. No cards, no titles, no metrics, no animation loops. Just a quiet map of everything daily.dev covers, with a clear pool of light around the signup form. Co-authored-by: Cursor <cursoragent@cursor.com>
Added a small floating variant switcher in the top-right corner so the
team can flip between background concepts side-by-side and decide
which one ships.
Variants are registered through a single \`VARIANTS\` array — adding a
new one is now just three lines (id + label + render). The switcher
renders one pill per registered variant automatically. State is
persisted in localStorage and overridable via \`?variant=…\` so a link
can be shared directly with a specific design pre-loaded.
Variant A — Topics (the existing constellation):
- 29 hand-placed topic labels in dark space with brand-coloured glow
on a few standouts, six ultra-thin SVG connection lines.
Variant B — Squads (new):
- 7 squad "galaxies" scattered across the viewport, each rendered as
a dashed orbit ring with the squad name at the centre and 3–6 small
avatar circles in colour-coded accents arranged on the orbit.
- Member positions are computed via polar coordinates so the count of
avatars per squad can vary without manual placement maths.
- Highlighted squads (AI & LLM, Indie Hackers) use a slightly larger
ring + glow and brighter label colour so they read as the focal
galaxies, the rest fade back.
- Directly conveys the user's brief: developers gathering to discuss
and share knowledge, organised around the topics they care about.
- One squad ("DevOps") hides on mobile to keep mobile clean.
Both variants share the same aurora orb backdrop, form halo at
50% 82%, top fade, and center-bottom form placement — only the
content layer swaps.
Co-authored-by: Cursor <cursoragent@cursor.com>
The switcher was using `absolute` positioning inside the `isolate` stacking context with `z-10`. Depending on how nested stacking contexts resolve, the form layer at `z-1` could end up painting on top of (or trapping pointer events from) the switcher. Hardening: - position: fixed so the switcher sits in the viewport's stacking context, completely outside the hero's isolate. - Explicit z-index: 50 via inline style (no reliance on whether the Tailwind `z-50` utility is present in the project config). - pointer-events-auto on both the container AND each button, in case any ancestor cascades pointer-events: none. - cursor-pointer on the buttons for the standard pointer affordance. - Swapped the background to `bg-raw-pepper-90/85` which is a known design-system token, in case the previous `bg-overlay-tertiary-onion` was not defined and left the container transparent. Co-authored-by: Cursor <cursoragent@cursor.com>
…iant The Squad Universe (avatars huddled around a name) read as generic network-diagram clipart. Killed it and shipped something nobody else has done on a signup page: a stylised metro / transit map of the dev knowledge landscape. Why a metro map: - Iconic, universally understood visual language — every developer recognises a transit map instantly. - Lines = topic areas. Stations = concrete concepts. Reads as a literal "map of the dev world". - Frames the act of signing up as the start of a journey: "pick your line, every station is a destination". - Static, no animation cost, scales cleanly via SVG viewBox. Implementation (\`KnowledgeMapBackground\`): - Single SVG, viewBox 1600x900, preserveAspectRatio="xMidYMid slice" so the centre of the map is always visible regardless of viewport aspect. - 4 metro lines: Frontend (water), Backend (avocado), AI (onion), DevOps (cheese). Each line is a polyline with stroke-linejoin:round + stroke-linecap:round so corners feel like a real transit map. - 23 stations total. Each is a hollow circle (dark pepper inner, coloured stroke) at the line colour. - 4 "iconic" stations are highlighted (React, System Design, LLMs, Kubernetes): larger circle, thicker stroke, brighter label, drop- shadow glow, and an outer translucent disc that reads as a halo. - LLMs station has a "NOW" badge and a slow CSS pulse ring — one point of life on an otherwise static composition. Honours prefers-reduced-motion. - Labels are hand-positioned per station (labelDx / labelDy / labelAnchor) — above the line for top stations, below for bottom, side-anchored for the diagonal AI line — so nothing collides and the map reads at a glance. - Small "Lines" legend pill in the top-left (tablet+) with a coloured dot per line, so the colour code is decodable. Variant registry: - 'squads' removed, 'map' (label "Map") added. Adding a new variant in future is still three lines: id + label + render. - Variant switcher in the top-right is unchanged. Co-authored-by: Cursor <cursoragent@cursor.com>
- Serve responsive WebP assets up to 2560px wide via srcset - Blur-up placeholder while the full image loads - Skip card halos and orbs on desk variant so the photo stays sharp Co-authored-by: Cursor <cursoragent@cursor.com>
Move water accent gradient and orb to the left 50% (bottom-left), remove blue tint from the right panel so solid gray background clips the glow. Co-authored-by: Cursor <cursoragent@cursor.com>
- Restore form halo + bottom vignette behind signup column on desk variant - Swap footer links and disclaimer positions on desk only (terms left, links right) - Regenerate hero WebPs from new source, default to native 1024w to avoid blurry upscale and add it to srcset Co-authored-by: Cursor <cursoragent@cursor.com>
- Add circular dark halo behind the signup column for readability on the photo backdrop - Encode hero WebP assets at quality 95 with lanczos3 + sharpen pass on upscaled sizes Co-authored-by: Cursor <cursoragent@cursor.com>
…stack - Replace upscaled srcset (was just 1024 upsampled) with single native full-quality WebP converted from source JPEG - Restore Cards-variant overlays on desk (orbs, halo, vignette) - Slight contrast/saturation bump to recover perceived sharpness Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Re-encode hero from a real 3072x2048 source and serve via <picture> srcset at 1280/1920/2560 widths. Earlier upscaled variants were bilinear copies of a 1024px file; the new ladder downsamples from 3K so even 2560 carries real detail. Co-authored-by: Cursor <cursoragent@cursor.com>
Drop unused Tags background variant, its data/constants, and the related accent glow styles. Variant switcher now shows Cards / X / Desk only. Co-authored-by: Cursor <cursoragent@cursor.com>
New toggle swaps each variant's hero visual (cards feed, split-left cards, desk photo) with the production signup wall background image. All halos, orbs, gradients, and layout remain identical so each variant can be A/B compared against its prod-image equivalent. Persists via localStorage and the prod=1 URL param. Co-authored-by: Cursor <cursoragent@cursor.com>
…nup hero Replace the prod-image boolean toggle with a tri-state image source: original (designed cards/desk visuals), prod (Cloudinary signup-wall image), and colors (no background visual, just gradients/orbs). Persist via localStorage and ?mode= URL param. Fix prod-image invisibility: the form-halo (rgba(0,0,0,1) ellipse) and bottom-vignette were fully blocking the image. In prod mode we dim those overlays (and the split-left fade / center-halo) so the image actually shows through while keeping enough contrast for the signup form. Co-authored-by: Cursor <cursoragent@cursor.com>
…halos with single soft scrim Co-authored-by: Cursor <cursoragent@cursor.com>
… it loads Co-authored-by: Cursor <cursoragent@cursor.com>
… load race Co-authored-by: Cursor <cursoragent@cursor.com>
The 'Prod image' mode was pointing at the auth-banner popover background (login-popover-dailydev, a 2880x406 purple gradient strip). Stretched to fullscreen with object-cover it produced a near-invisible dark wash — which is why the image appeared missing. Switch to the real production signup-wall image (dailydev_where_developers_suffer_together) with a mobile variant via <picture>. Also hide the cabbage/water orbs in prod mode so mix-blend-mode doesn't tint the artwork, and lighten the prod scrim so the desk illustration stays visible behind the form. Co-authored-by: Cursor <cursoragent@cursor.com>
- Move variant/image switcher to bottom-center on mobile (two stacked strips), keep top-right pinned on tablet+. Drop the portal so the switcher participates in the natural flex flow on mobile and can't overflow the viewport. - Set the hero container to flex-col so main, footer disclaimer and the switcher stack vertically as intended. - Trim mobile bottom padding on the form so the logo/title/CTA stack sits closer to the screen bottom (matching the existing mobile auth pattern) while keeping tablet+ spacing intact. Co-authored-by: Cursor <cursoragent@cursor.com>
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.
Summary
A bold redesign of the
/onboardingsignup surface (V1, withfeatureOnboardingV2 = false) to dramatically lift sign-up conversion. The previous centered, light-theme buttons-only screen is replaced with a confident, brand-forward dark hero that matches the Chrome Web Store entry point developers come from.What changed
pages/onboarding.tsx(signup state only)OnboardingSignupHeroaroundAuthOptionswhendefaultDisplay === OnboardingSignupcomponents/onboarding/OnboardingSignupHero.tsx(new)400,000 developers start their day here.) with cabbage → onion → water gradient on the numberprefers-reduced-motionpackages/shared/.../OnboardingRegistrationForm.tsxtrigger === AuthTriggers.OnboardingButtonVariant.Tertiarywith copySign up with emailordivider, privacy reassurance line, reordered email/disclaimer for onboarding onlyWhy
Research-backed: stat-led headlines (+18% on signup pages), GitHub-first OAuth for dev audiences (+9–14% from Hick's-law-constrained 2-provider lists), social proof above the fold (+15–40%), single-column form within a wider page, dark UI for technical brand signal. Combined into one variant for a strong A/B candidate.
Test plan
scripts/typecheck-strict-changed.js)eslint --max-warnings 0)Preview domain
https://feat-onboarding-signup-cws-align.preview.app.daily.dev