Landing page updates

Author: dylanjeffers

packages/web/src/Root.tsx

@@ -61,6 +61,7 @@ const AppOrPublicSite = () => {
       <Suspense fallback={<div style={{ width: '100vw', height: '100vh' }} />}>
         <PublicSite
           isMobile={isMobile}
+          isAuthenticated={!!foundUser}
           setRenderPublicSite={setRenderPublicSite}
         />
       </Suspense>

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

@@ -56,11 +56,12 @@ const ExternalRedirect = ({ to }: { to: string }) => {
 
 type PublicSiteProps = {
   isMobile: boolean
+  isAuthenticated: boolean
   setRenderPublicSite: (shouldRender: boolean) => void
 }
 
 export const PublicSite = (props: PublicSiteProps) => {
-  const { isMobile, setRenderPublicSite } = props
+  const { isMobile, isAuthenticated, setRenderPublicSite } = props
   const [isMobileOrNarrow, setIsMobileOrNarrow] = useState(isMobile)
   const handleMobileMediaQuery = useCallback(() => {
     if (MOBILE_WIDTH_MEDIA_QUERY.matches) setIsMobileOrNarrow(true)
@@ -199,6 +200,7 @@ export const PublicSite = (props: PublicSiteProps) => {
                         element={
                           <LandingPage2026
                             isMobile={isMobileOrNarrow}
+                            isAuthenticated={isAuthenticated}
                             openNavScreen={openNavScreen}
                             setRenderPublicSite={setRenderPublicSite}
                           />

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

@@ -26,6 +26,7 @@ const MOBILE_MEDIA_QUERY =
 
 type LandingPage2026Props = {
   isMobile: boolean
+  isAuthenticated: boolean
   openNavScreen: () => void
   setRenderPublicSite: (shouldRender: boolean) => void
 }
@@ -112,6 +113,7 @@ export const LandingPage2026 = (props: LandingPage2026Props) => {
         ) : null}
         <Nav2026
           isMobile={isMobileOrNarrow}
+          isAuthenticated={props.isAuthenticated}
           openNavScreen={props.openNavScreen}
           setRenderPublicSite={props.setRenderPublicSite}
         />

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

@@ -9,11 +9,11 @@ import promoBg from '../assets/promo-bg.jpg'
 
 import styles from './CreateFutureCTA.module.css'
 
-const { SIGN_UP_PAGE } = route
+const { EXPLORE_PAGE } = route
 
 const messages = {
   headline: 'Create the future of music, together.',
-  getStarted: 'Get Started'
+  startExploring: 'Start Exploring'
 }
 
 type CreateFutureCTAProps = {
@@ -24,8 +24,8 @@ type CreateFutureCTAProps = {
 export const CreateFutureCTA = (props: CreateFutureCTAProps) => {
   const navigate = useNavigate()
 
-  const onSignUp = (e: MouseEvent) => {
-    handleClickRoute(SIGN_UP_PAGE, props.setRenderPublicSite, navigate)(e)
+  const onStartExploring = (e: MouseEvent) => {
+    handleClickRoute(EXPLORE_PAGE, props.setRenderPublicSite, navigate)(e)
   }
 
   return (
@@ -40,8 +40,14 @@ export const CreateFutureCTA = (props: CreateFutureCTAProps) => {
           <h2 id='cta-heading' className={styles.headline}>
             {messages.headline}
           </h2>
-          <button type='button' className={styles.ctaButton} onClick={onSignUp}>
-            <span className={styles.ctaLabel}>{messages.getStarted}</span>
+          <button
+            type='button'
+            className={styles.ctaButton}
+            onClick={onStartExploring}
+          >
+            <span className={styles.ctaLabel}>
+              {messages.startExploring}
+            </span>
           </button>
         </div>
       </div>

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

@@ -9,7 +9,7 @@ import landingImg from '../assets/landing.png'
 
 import styles from './Hero2026.module.css'
 
-const { SIGN_UP_PAGE } = route
+const { TRENDING_PAGE } = route
 
 const messages = {
   line1: 'Find your people.',
@@ -26,7 +26,7 @@ export const Hero2026 = (props: Hero2026Props) => {
   const navigate = useNavigate()
 
   const onGetStarted = (e: MouseEvent) => {
-    handleClickRoute(SIGN_UP_PAGE, props.setRenderPublicSite, navigate)(e)
+    handleClickRoute(TRENDING_PAGE, props.setRenderPublicSite, navigate)(e)
   }
 
   return (

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

@@ -28,10 +28,11 @@ import IconHelpSupport from '../assets/icon-help-support.svg'
 
 import styles from './Nav2026.module.css'
 
-const { SIGN_UP_PAGE, DOWNLOAD_LINK } = route
+const { SIGN_UP_PAGE, TRENDING_PAGE, DOWNLOAD_LINK } = route
 
 const messages = {
-  getStarted: 'Get Started',
+  signUp: 'Sign Up',
+  launch: 'Launch',
   resources: 'Resources'
 }
 
@@ -83,12 +84,13 @@ const SOCIAL_LINKS = [
 
 type Nav2026Props = {
   isMobile: boolean
+  isAuthenticated: boolean
   openNavScreen: () => void
   setRenderPublicSite: (shouldRender: boolean) => void
 }
 
 export const Nav2026 = (props: Nav2026Props) => {
-  const { isMobile, setRenderPublicSite } = props
+  const { isMobile, isAuthenticated, setRenderPublicSite } = props
   const navigate = useNavigate()
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [isDropdownClosing, setIsDropdownClosing] = useState(false)
@@ -136,9 +138,10 @@ export const Nav2026 = (props: Nav2026Props) => {
     }
   }, [isMobileOverlayOpen])
 
-  const onSignUp = (e: MouseEvent) => {
+  const onCtaClick = (e: MouseEvent) => {
     setIsMobileOverlayOpen(false)
-    handleClickRoute(SIGN_UP_PAGE, setRenderPublicSite, navigate)(e)
+    const routeToUse = isAuthenticated ? TRENDING_PAGE : SIGN_UP_PAGE
+    handleClickRoute(routeToUse, setRenderPublicSite, navigate)(e)
   }
 
   const onLogoClick = (e: MouseEvent) => {
@@ -216,10 +219,10 @@ export const Nav2026 = (props: Nav2026Props) => {
                   <button
                     type='button'
                     className={styles.ctaButton}
-                    onClick={onSignUp}
+                    onClick={onCtaClick}
                   >
                     <span className={styles.ctaLabel}>
-                      {messages.getStarted}
+                      {isAuthenticated ? messages.launch : messages.signUp}
                     </span>
                   </button>
                 </>
@@ -231,7 +234,8 @@ export const Nav2026 = (props: Nav2026Props) => {
       {isMobileOverlayOpen ? (
         <MobileNavOverlay
           onClose={() => setIsMobileOverlayOpen(false)}
-          onSignUp={onSignUp}
+          onCtaClick={onCtaClick}
+          ctaLabel={isAuthenticated ? messages.launch : messages.signUp}
           onLogoClick={onLogoClick}
         />
       ) : null}
@@ -241,11 +245,13 @@ export const Nav2026 = (props: Nav2026Props) => {
 
 function MobileNavOverlay({
   onClose,
-  onSignUp,
+  onCtaClick,
+  ctaLabel,
   onLogoClick
 }: {
   onClose: () => void
-  onSignUp: (e: MouseEvent) => void
+  onCtaClick: (e: MouseEvent) => void
+  ctaLabel: string
   onLogoClick: (e: MouseEvent) => void
 }) {
   const handleItemClick = (href: string) => () => {
@@ -315,9 +321,9 @@ function MobileNavOverlay({
           <button
             type='button'
             className={styles.overlayCtaButton}
-            onClick={onSignUp}
+            onClick={onCtaClick}
           >
-            <span className={styles.ctaLabel}>{messages.getStarted}</span>
+            <span className={styles.ctaLabel}>{ctaLabel}</span>
           </button>
         </div>
       </div>