Skip to content

fix(onboarding): improve copy across onboarding flow #5872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nimrodkra merged 2 commits into from
Apr 16, 2026
+18 −17
Merged

fix(onboarding): improve copy across onboarding flow #5872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
afd938e
fix(onboarding): improve copy across onboarding flow
nimrodkra Apr 16, 2026
51dd01c
fix(onboarding): fix prettier formatting in subtext
nimrodkra Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions packages/webapp/components/onboarding/OnboardingChooserGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,10 +172,10 @@ export function OnboardingChooserGrid({
</div>
</div>

<h4 className="mb-1.5 break-words text-center font-bold text-text-primary typo-body">
<h4 className="mb-1.5 break-words text-center font-bold text-text-primary typo-title3">
One-click setup
</h4>
<p className="mb-5 text-center text-text-tertiary typo-footnote">
<p className="mb-5 text-center text-text-tertiary typo-callout">
Connect GitHub and let our AI do the rest.
</p>

Expand Down Expand Up @@ -206,7 +206,7 @@ export function OnboardingChooserGrid({
<NewTabIcon size={IconSize.Size16} secondary />
)}
</span>
<span className="text-left text-text-primary typo-footnote">
<span className="text-left text-text-primary typo-callout">
{text}
</span>
</div>
Expand Down Expand Up @@ -250,7 +250,7 @@ export function OnboardingChooserGrid({
</button>
</div>
<p className="mt-2.5 text-text-quaternary typo-caption2">
Read-only access &middot; No special permissions
Read-only access &middot; Public repos only
</p>
</div>

Expand All @@ -273,10 +273,10 @@ export function OnboardingChooserGrid({
</div>
</div>

<h4 className="mb-1.5 break-words text-center font-bold text-text-primary typo-body">
<h4 className="mb-1.5 break-words text-center font-bold text-text-primary typo-title3">
Tell our AI about yourself
</h4>
<p className="mb-5 text-center text-text-tertiary typo-footnote">
<p className="mb-5 text-center text-text-tertiary typo-callout">
Describe your stack and let AI build your feed.
</p>

Expand Down Expand Up @@ -334,7 +334,7 @@ export function OnboardingChooserGrid({
</button>
</div>
<p className="mt-2.5 text-text-quaternary typo-caption2">
AI-powered &middot; instant personalization
Describe your stack &middot; AI does the rest
</p>
</div>
</div>
Expand Down
21 changes: 11 additions & 10 deletions packages/webapp/components/onboarding/OnboardingV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -844,11 +844,11 @@ export const OnboardingV2 = (): ReactElement => {
>
<h1 className="mx-auto max-w-[20rem] font-bold leading-[1.12] tracking-tight typo-title1 tablet:max-w-[48rem] tablet:leading-[1.08] tablet:typo-mega1">
<span className="text-text-primary">
Stay up to date as a developer
Staying updated shouldn&apos;t be hard
</span>
<br />
<span className="onb-gradient-text bg-clip-text text-transparent">
Build your feed identity.
Get your personalized dev feed
</span>
</h1>
</div>
Expand All @@ -865,8 +865,9 @@ export const OnboardingV2 = (): ReactElement => {
className="mx-auto mt-4 max-w-[20rem] text-text-secondary typo-callout tablet:mt-5 tablet:max-w-[36rem] tablet:typo-body"
style={{ lineHeight: '1.65' }}
>
Tap into live signals from the global dev community, then lock
your feed to your stack with GitHub import or AI setup.
Millions of developers rely on daily.dev for tech news, tools, and
discussions that actually matter. Tailored to your stack from day
one.
</p>
</div>

Expand Down Expand Up @@ -897,7 +898,7 @@ export const OnboardingV2 = (): ReactElement => {
className="onb-btn-shine focus-visible:ring-white/20 group relative flex w-full items-center justify-center gap-2.5 overflow-hidden rounded-14 bg-white px-7 py-3.5 font-bold text-black transition-all duration-300 typo-callout hover:-translate-y-1 hover:shadow-[0_8px_30px_rgba(255,255,255,0.12)] focus-visible:outline-none focus-visible:ring-2 tablet:w-auto"
>
<GitHubIcon secondary size={IconSize.XSmall} />
Continue with GitHub
One-click setup
<svg
width="14"
height="14"
Expand Down Expand Up @@ -1260,10 +1261,10 @@ export const OnboardingV2 = (): ReactElement => {
{step === 'hero' && (
<div className="mx-auto -mt-48 w-full max-w-[58rem] px-4 pb-12 pt-6 tablet:-mt-64 tablet:px-8">
<div className="mb-6 text-center tablet:mb-8">
<p className="mb-2 text-text-secondary typo-body">
<p className="mb-2 text-text-secondary typo-callout tablet:typo-body">
You just explored the global feed.
</p>
<h3 className="font-bold text-text-primary typo-title2">
<h3 className="font-bold text-text-primary typo-title2 tablet:typo-title1">
Now build a feed that is truly yours
</h3>
</div>
Expand Down Expand Up @@ -1334,10 +1335,10 @@ export const OnboardingV2 = (): ReactElement => {
<div className="px-4 pb-5 pt-8 tablet:px-8 tablet:pb-8">
<div className="mb-6 text-center tablet:mb-8">
<p className="mb-2 text-text-secondary typo-body">
Stay up to date, level up with the community, and unlock more.
Millions of developers already use daily.dev.
</p>
<h3 className="font-bold text-text-primary typo-title2">
Build your developer identity
Now let&apos;s set up yours.
</h3>
</div>

Expand Down Expand Up @@ -1565,7 +1566,7 @@ export const OnboardingV2 = (): ReactElement => {
[
'Zero clicks to your personalized feed',
'Catch trending tools & discussions early',
'Trusted by 1M+ developers daily',
'Top-rated on Chrome Web Store',
] as const
).map((label) => (
<div
Expand Down
Loading