Funnel/signup hero blocks#6136
Draft
AmarTrebinjac wants to merge 54 commits into
Draft
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>
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>
Start the background from scratch with three real-feeling options: - Cards: floating realistic daily.dev feed cards with full anatomy (source row + avatar, cover with title/play button/code lines, title, tag chip, engagement bar with upvote/comment/bookmark/share) - Squads: real squad profile panels with banner, squad icon, name, description, member/post stat chips, avatar stack and Join CTA - Stream: live community activity cards (upvote, comment, share, squad, milestone, trending) with action-tinted avatars and a fresh-now pulsing indicator All variants use the actual product tokens (bg-background-subtle, border-border-subtlest-tertiary, rounded-16, typo-*) and layered shadows for genuine product depth. Aurora orbs and form halo remain to keep the form readable in center-bottom. Variant switcher updated to Cards / Squads / Stream. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Make the three product variants feel real instead of marketing: - Strengthen the center-bottom form halo with multi-layered radial + linear vignettes so the form sits on dominant black, regardless of how busy the background variant gets behind it - Cards: Netflix-style 4-5 column feed wall with 12 real article cards. Each card has a real photo cover (Unsplash), source badge, hashtag chip, title, engagement bar with upvote/comment counts and the commenter's actual face - Squads: 3-column directory of 6 squad cards with real banner photos, squad icon medallion, member faces stacked, topic chip, member count and accent-colored Join CTA - Stream: masonry-style live activity wall with 9 items showing real user faces. Each item has the action verb in accent color, optional linked post preview (cover + title + source) or quoted comment, plus a pulsing fresh indicator - All three grids fade into the form halo via a radial CSS mask so the center-bottom stays clean while edges feel infinite Co-authored-by: Cursor <cursoragent@cursor.com>
Hero variants - Remove Squads and Stream variants - Restore Tags (constellation) variant alongside Cards and Desk - Cards variant now builds on the real Card, CardHeader, CardTitle, CardTextContainer and CardSpace primitives so the rendered cards match the actual feed: source avatar + name + relative time, bold typo-title3 title, tag chips, date and read-time metadata, rounded-12 cover image and a real action bar (upvote, comment, bookmark, share) - Add a center radial halo so the logo and headline sit on extra darkness, and strengthen the headline text-shadow Form layout (onboarding trigger only) - "Continue with email" mb shrinks to 12px so "Already a member?" sits right under it - Insert the existing FooterLinks (Guidelines, Explore, Tags, Sources, Squads, Leaderboard) between "Already a member?" and the disclaimer, with a 16px gap above and the footer's bottom padding zeroed out - Push "By continuing, you agree to the Terms…" further down with a 32px top margin so it reads as the page footer Co-authored-by: Cursor <cursoragent@cursor.com>
…isclaimer - Move FooterLinks to the bottom-left of the screen and the "By continuing, you agree to the Terms…" disclaimer to the bottom-right, outside the form. On mobile they stack centered under the form - Continue with email now renders with white text (kept Tertiary variant for the subtle background) - Feed cards now show real source LOGOS via the Clearbit logo CDN (with a Google s2 favicon fallback) instead of letter avatars. Source data switched to real domains: stripe.com, fireship.io, pragmaticengineer.com, vercel.com, cncf.io, daily.dev, etc. - Tighter card internals: 3 tag chips, typo-footnote chips, action bar uses bold tabular counts and pushes Share to the right — closer to the real ActionButtons layout Co-authored-by: Cursor <cursoragent@cursor.com>
… button border - Cards background now fetches the actual Most Upvoted (explore) feed via MOST_UPVOTED_FEED_QUERY using the public anonymous query, so every card shows real post titles, real cover images, real source logos (post.source.image), real upvote/comment counts, tags, read time, and createdAt deltas. Falls back to the curated set only while the request resolves or on failure. - Strengthened the center halo gradient further so the logo and headline pop with strong contrast against the feed grid. - "Continue with email" now has a subtle border using border-border-subtlest-tertiary (same color as the OR divider). Co-authored-by: Cursor <cursoragent@cursor.com>
Replace the custom Card replica with the actual ArticleGrid component used on /explore and other feed pages. The grid behind the form now renders the exact same cards as the real product — same source header (ProfileImageLink + source name + author), same SmartTitle, same PostTags, same PostMetadata, same PostCardFooter (cover image sized by the real component), and the same outline ActionButtons row (Upvote / Comment / Bookmark on the left, Share on the right) with the proper spacing, button variants, and tooltip-style icons. Grid responsiveness now matches the real Feed defaults (eco density): - mobile: 1 column - tablet: 2 columns - laptop: 3 columns - laptopL: 4 columns - laptopXL: 5 columns - desktop: 6 columns Implementation details: - Fetches MOST_UPVOTED_FEED_QUERY via the public anonymous query so any visitor sees real popular posts (period: 7d, first: 30). - Wraps the cards in ActiveFeedNameContext as Popular so the hooks inside ArticleGrid see a valid feed name. - Wraps each card in an ErrorBoundary that falls back to null, so a single broken card cannot break the whole background. - Drops all the replica helpers (FeedItemReplica, SourceImage, FeedActionButton, formatCount, daysSince, postToFeedItem, FALLBACK data, sourceLogo, unsplash, PLACEHOLDER_COVER) and the icon and Card primitive imports that powered them. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…m cards - Render the explore feed as the very first painted layer of the hero, so the cabbage / water orbs (with mix-blend-mode: screen) sit on top of the feed and tint it with a soft purple/blue glow. This pushes the feed visually further back without changing z-index — DOM order does the work — and gives the page the colorful, shiny, slightly-faded look we want. - Drop the ClickbaitShield icon on every background card by stamping clickbaitTitleDetected = false onto each post we pass into ArticleGrid. The shield was a noisy, message-less icon in a non-interactive decorative grid. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Merge origin/main and resolve conflicts in onboarding.tsx and OnboardingRegistrationForm.tsx, keeping the signup hero integration - Drop featureOnboardingV2 / OnboardingV2 paths removed on main - Include split layout variant (X label), feed opacity/padding tweaks, and variant switcher wrap fix so all options stay visible Co-authored-by: Cursor <cursoragent@cursor.com>
- Portal the variant switcher to document.body with z-index 9999 and a solid bg-raw-pepper-90 panel so it sits above all hero layers - Run background feed cards in FeedPreview mode so CardOverlay links are not rendered and cannot steal clicks; also force pointer-events-none on all card descendants - Narrow signup column from 416px (26rem) to 340px in the hero and onboarding AuthOptions container Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- On X variant only: social CTAs use "Sign up with {provider}",
email CTA is "Create account", and login uses a button-styled
"Already have an account?" row plus a full "Sign in" button
- Pass splitSignupStyle from OnboardingSignupHero into AuthOptions
Co-authored-by: Cursor <cursoragent@cursor.com>
…headline - X split: signup column is left-aligned in the right half (items-start, pl-12) instead of centered; footer matches the same alignment - Headline uses typo-mega2 so it fits on two lines instead of three - Restore feed card action bars by removing FeedPreview mode (it hid ActionButtons); cards stay non-interactive via pointer-events-none - "Already have an account?" is plain left-aligned text, not a button shell Co-authored-by: Cursor <cursoragent@cursor.com>
Use a two-column CSS grid on laptop+ so feed occupies column 1 and signup starts at the 50% line with left-aligned content and matching footer padding. 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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Author
|
@claude fix the build errors |
Contributor
|
Claude finished @AmarTrebinjac's task in 4m 58s —— View job Fixing build errors
What was failingThe strict typecheck on changed files ( The new step
You skip-listed FixAdded Note I couldn't run the build/typecheck locally — Pushed as |
FunnelHeroLanding is the new signup-hero step copied from FunnelOrganicSignup and carries the same copied-auth strict violations (user optionality, useRef RefObject vs MutableRefObject, onSuccessfulRegistration signature). It was missed when FunnelOrganicSignup was added to the strict skip list. Co-authored-by: Amar Trebinjac <AmarTrebinjac@users.noreply.github.com>
…ps into funnel/signup-hero-blocks
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.
Changes
Events
Did you introduce any new tracking events?
Experiment
Did you introduce any new experiments?
Manual Testing
Caution
Please make sure existing components are not breaking/affected by this PR
Preview domain
https://funnel-signup-hero-blocks.preview.app.daily.dev