Skip to content

Commit d97368a

Browse files
dylanjeffersdylanjeffers
authored
Landing page updates (#13806)
1. Top nav CTA If the user is unauthenticated, the button should say “Sign Up.” If the user is authenticated, the button should say “Launch.” 2. Hero CTA The main hero CTA should link to /trending (not Sign Up). 3. Bottom CTA Change the copy from “Get Started” to “Start Exploring.” Link this button to /explore.
1 parent 5bc8c01 commit d97368a

7 files changed

Lines changed: 39 additions & 21 deletions

File tree

‎packages/web/src/Root.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const AppOrPublicSite = () => {
6161
<Suspense fallback={<div style={{ width: '100vw', height: '100vh' }} />}>
6262
<PublicSite
6363
isMobile={isMobile}
64+
isAuthenticated={!!foundUser}
6465
setRenderPublicSite={setRenderPublicSite}
6566
/>
6667
</Suspense>

‎packages/web/src/public-site/PublicSite.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,12 @@ const ExternalRedirect = ({ to }: { to: string }) => {
5656

5757
type PublicSiteProps = {
5858
isMobile: boolean
59+
isAuthenticated: boolean
5960
setRenderPublicSite: (shouldRender: boolean) => void
6061
}
6162

6263
export const PublicSite = (props: PublicSiteProps) => {
63-
const { isMobile, setRenderPublicSite } = props
64+
const { isMobile, isAuthenticated, setRenderPublicSite } = props
6465
const [isMobileOrNarrow, setIsMobileOrNarrow] = useState(isMobile)
6566
const handleMobileMediaQuery = useCallback(() => {
6667
if (MOBILE_WIDTH_MEDIA_QUERY.matches) setIsMobileOrNarrow(true)
@@ -189,6 +190,7 @@ export const PublicSite = (props: PublicSiteProps) => {
189190
element={
190191
<DownloadPage
191192
isMobile={isMobileOrNarrow}
193+
isAuthenticated={isAuthenticated}
192194
openNavScreen={openNavScreen}
193195
setRenderPublicSite={setRenderPublicSite}
194196
/>
@@ -199,6 +201,7 @@ export const PublicSite = (props: PublicSiteProps) => {
199201
element={
200202
<LandingPage2026
201203
isMobile={isMobileOrNarrow}
204+
isAuthenticated={isAuthenticated}
202205
openNavScreen={openNavScreen}
203206
setRenderPublicSite={setRenderPublicSite}
204207
/>

‎packages/web/src/public-site/pages/download-page/DownloadPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const messages = {
4141

4242
type DownloadPageProps = {
4343
isMobile: boolean
44+
isAuthenticated: boolean
4445
openNavScreen: () => void
4546
setRenderPublicSite: (shouldRender: boolean) => void
4647
}
@@ -181,6 +182,7 @@ const DownloadPage = (props: DownloadPageProps) => {
181182
) : null}
182183
<Nav2026
183184
isMobile={isMobileOrNarrow}
185+
isAuthenticated={props.isAuthenticated}
184186
openNavScreen={props.openNavScreen}
185187
setRenderPublicSite={props.setRenderPublicSite}
186188
/>

‎packages/web/src/public-site/pages/landing-2026/LandingPage2026.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const MOBILE_MEDIA_QUERY =
2626

2727
type LandingPage2026Props = {
2828
isMobile: boolean
29+
isAuthenticated: boolean
2930
openNavScreen: () => void
3031
setRenderPublicSite: (shouldRender: boolean) => void
3132
}
@@ -112,6 +113,7 @@ export const LandingPage2026 = (props: LandingPage2026Props) => {
112113
) : null}
113114
<Nav2026
114115
isMobile={isMobileOrNarrow}
116+
isAuthenticated={props.isAuthenticated}
115117
openNavScreen={props.openNavScreen}
116118
setRenderPublicSite={props.setRenderPublicSite}
117119
/>

‎packages/web/src/public-site/pages/landing-2026/components/CreateFutureCTA.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import promoBg from '../assets/promo-bg.jpg'
99

1010
import styles from './CreateFutureCTA.module.css'
1111

12-
const { SIGN_UP_PAGE } = route
12+
const { EXPLORE_PAGE } = route
1313

1414
const messages = {
1515
headline: 'Create the future of music, together.',
16-
getStarted: 'Get Started'
16+
startExploring: 'Start Exploring'
1717
}
1818

1919
type CreateFutureCTAProps = {
@@ -24,8 +24,8 @@ type CreateFutureCTAProps = {
2424
export const CreateFutureCTA = (props: CreateFutureCTAProps) => {
2525
const navigate = useNavigate()
2626

27-
const onSignUp = (e: MouseEvent) => {
28-
handleClickRoute(SIGN_UP_PAGE, props.setRenderPublicSite, navigate)(e)
27+
const onStartExploring = (e: MouseEvent) => {
28+
handleClickRoute(EXPLORE_PAGE, props.setRenderPublicSite, navigate)(e)
2929
}
3030

3131
return (
@@ -40,8 +40,12 @@ export const CreateFutureCTA = (props: CreateFutureCTAProps) => {
4040
<h2 id='cta-heading' className={styles.headline}>
4141
{messages.headline}
4242
</h2>
43-
<button type='button' className={styles.ctaButton} onClick={onSignUp}>
44-
<span className={styles.ctaLabel}>{messages.getStarted}</span>
43+
<button
44+
type='button'
45+
className={styles.ctaButton}
46+
onClick={onStartExploring}
47+
>
48+
<span className={styles.ctaLabel}>{messages.startExploring}</span>
4549
</button>
4650
</div>
4751
</div>

‎packages/web/src/public-site/pages/landing-2026/components/Hero2026.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import landingImg from '../assets/landing.png'
99

1010
import styles from './Hero2026.module.css'
1111

12-
const { SIGN_UP_PAGE } = route
12+
const { TRENDING_PAGE } = route
1313

1414
const messages = {
1515
line1: 'Find your people.',
@@ -26,7 +26,7 @@ export const Hero2026 = (props: Hero2026Props) => {
2626
const navigate = useNavigate()
2727

2828
const onGetStarted = (e: MouseEvent) => {
29-
handleClickRoute(SIGN_UP_PAGE, props.setRenderPublicSite, navigate)(e)
29+
handleClickRoute(TRENDING_PAGE, props.setRenderPublicSite, navigate)(e)
3030
}
3131

3232
return (

‎packages/web/src/public-site/pages/landing-2026/components/Nav2026.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,11 @@ import IconHelpSupport from '../assets/icon-help-support.svg'
2828

2929
import styles from './Nav2026.module.css'
3030

31-
const { SIGN_UP_PAGE, DOWNLOAD_LINK } = route
31+
const { SIGN_UP_PAGE, TRENDING_PAGE, DOWNLOAD_LINK } = route
3232

3333
const messages = {
34-
getStarted: 'Get Started',
34+
signUp: 'Sign Up',
35+
launch: 'Launch',
3536
resources: 'Resources'
3637
}
3738

@@ -83,12 +84,13 @@ const SOCIAL_LINKS = [
8384

8485
type Nav2026Props = {
8586
isMobile: boolean
87+
isAuthenticated: boolean
8688
openNavScreen: () => void
8789
setRenderPublicSite: (shouldRender: boolean) => void
8890
}
8991

9092
export const Nav2026 = (props: Nav2026Props) => {
91-
const { isMobile, setRenderPublicSite } = props
93+
const { isMobile, isAuthenticated, setRenderPublicSite } = props
9294
const navigate = useNavigate()
9395
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
9496
const [isDropdownClosing, setIsDropdownClosing] = useState(false)
@@ -136,9 +138,10 @@ export const Nav2026 = (props: Nav2026Props) => {
136138
}
137139
}, [isMobileOverlayOpen])
138140

139-
const onSignUp = (e: MouseEvent) => {
141+
const onCtaClick = (e: MouseEvent) => {
140142
setIsMobileOverlayOpen(false)
141-
handleClickRoute(SIGN_UP_PAGE, setRenderPublicSite, navigate)(e)
143+
const routeToUse = isAuthenticated ? TRENDING_PAGE : SIGN_UP_PAGE
144+
handleClickRoute(routeToUse, setRenderPublicSite, navigate)(e)
142145
}
143146

144147
const onLogoClick = (e: MouseEvent) => {
@@ -216,10 +219,10 @@ export const Nav2026 = (props: Nav2026Props) => {
216219
<button
217220
type='button'
218221
className={styles.ctaButton}
219-
onClick={onSignUp}
222+
onClick={onCtaClick}
220223
>
221224
<span className={styles.ctaLabel}>
222-
{messages.getStarted}
225+
{isAuthenticated ? messages.launch : messages.signUp}
223226
</span>
224227
</button>
225228
</>
@@ -231,7 +234,8 @@ export const Nav2026 = (props: Nav2026Props) => {
231234
{isMobileOverlayOpen ? (
232235
<MobileNavOverlay
233236
onClose={() => setIsMobileOverlayOpen(false)}
234-
onSignUp={onSignUp}
237+
onCtaClick={onCtaClick}
238+
ctaLabel={isAuthenticated ? messages.launch : messages.signUp}
235239
onLogoClick={onLogoClick}
236240
/>
237241
) : null}
@@ -241,11 +245,13 @@ export const Nav2026 = (props: Nav2026Props) => {
241245

242246
function MobileNavOverlay({
243247
onClose,
244-
onSignUp,
248+
onCtaClick,
249+
ctaLabel,
245250
onLogoClick
246251
}: {
247252
onClose: () => void
248-
onSignUp: (e: MouseEvent) => void
253+
onCtaClick: (e: MouseEvent) => void
254+
ctaLabel: string
249255
onLogoClick: (e: MouseEvent) => void
250256
}) {
251257
const handleItemClick = (href: string) => () => {
@@ -315,9 +321,9 @@ function MobileNavOverlay({
315321
<button
316322
type='button'
317323
className={styles.overlayCtaButton}
318-
onClick={onSignUp}
324+
onClick={onCtaClick}
319325
>
320-
<span className={styles.ctaLabel}>{messages.getStarted}</span>
326+
<span className={styles.ctaLabel}>{ctaLabel}</span>
321327
</button>
322328
</div>
323329
</div>

0 commit comments

Comments
 (0)