[Landing page redesign] Mobile nav menu + Downloads Page

packages/web/src/common/hooks/useMatchesBreakpoint.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from 'react'
+
+/** Returns whether the given media query is matched */
+export const useMatchesBreakpoint = ({
+  mediaQuery,
+  initialValue = false
+}: {
+  /**
+   * E.g. the return value of something like `window.matchMedia("(max-width: 900px)")`
+   */
+  mediaQuery: MediaQueryList
+  initialValue?: boolean
+}) => {
+  const [value, setValue] = useState(initialValue)
+  const handleChange = useCallback(() => {
+    setValue(mediaQuery.matches)
+  }, [mediaQuery])
+
+  useEffect(() => {
+    handleChange()
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [handleChange, mediaQuery])
+
+  return value
+}

packages/web/src/common/store/pages/explore/sagas.ts

@@ -4,6 +4,7 @@ import { ID } from 'common/models/Identifiers'
 import { retrieveCollections } from 'common/store/cache/collections/utils'
 import { fetchUsers } from 'common/store/cache/users/sagas'
 import { waitForBackendSetup } from 'store/backend/sagas'
+import { STATIC_EXPLORE_CONTENT_URL } from 'utils/constants'
 
 import {
   fetchExplore,
@@ -12,10 +13,9 @@ import {
 } from './slice'
 
 const EXPLORE_CONTENT_URL =
-  process.env.REACT_APP_EXPLORE_CONTENT_URL ||
-  'https://download.audius.co/static-resources/explore-content.json'
+  process.env.REACT_APP_EXPLORE_CONTENT_URL || STATIC_EXPLORE_CONTENT_URL
 
-const fetchExploreContent = async () => {
+export const fetchExploreContent = async () => {
   return fetch(EXPLORE_CONTENT_URL).then(resp => resp.json())
 }
 

packages/web/src/components/app-redirect-popover/AppRedirectListener.tsx

@@ -7,17 +7,17 @@ import { Dispatch } from 'redux'
 
 import { MobileOS } from 'common/models/OS'
 import { getMobileOS } from 'utils/clientUtil'
-import { APP_REDIRECT } from 'utils/route'
+import {
+  APP_REDIRECT,
+  ANDROID_PLAY_STORE_LINK,
+  IOS_WEBSITE_STORE_LINK,
+  IOS_APP_STORE_LINK
+} from 'utils/route'
 
 type AppRedirectListenerProps = ReturnType<typeof mapDispatchToProps>
 
 const EMBED_HASH = '#embed'
 const NATIVE_MOBILE = process.env.REACT_APP_NATIVE_MOBILE
-const IOS_APP_STORE_LINK = 'itms-apps://us/app/audius-music/id1491270519'
-const ANDROID_PLAY_STORE_LINK =
-  'https://play.google.com/store/apps/details?id=co.audius.app'
-const IOS_WEBSITE_STORE_LINK =
-  'https://apps.apple.com/us/app/audius-music/id1491270519'
 
 /**
  * `AppRedirectListener` listens to redirects from the `AppRedirectPopover`.

packages/web/src/components/public-site/Footer.module.css

@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  padding: 49px 0px 39px;
+  padding: 49px 50px 39px;
 }
 
 .content {
@@ -34,7 +34,7 @@
   border: none;
   border-radius: 6px;
   background-color: var(--static-primary);
-  box-shadow: 0 10px 30px -2px rgba(89, 11, 151, 0.3);
+  box-shadow: 0 10px 30px -2px rgb(89 11 151 / 10%);
   padding: 12px 24px;
   display: inline-flex;
   justify-content: center;
@@ -52,13 +52,13 @@
 .startListeningButton:hover {
   transform: scale3d(1.03, 1.03, 1.03);
   background-color: #dc19f0;
-  box-shadow: 0 10px 20px -1px rgba(25, 0, 96, 0.5);
+  box-shadow: 0 10px 30px -1px rgb(25 0 96 / 20%);
 }
 
 .startListeningButton:active {
   transform: scale3d(0.99, 0.99, 0.99);
   background-color: #ba02ce;
-  box-shadow: 0 0 2px -1px rgba(25, 0, 96, 0.5);
+  box-shadow: 0 10px 30px -1px rgb(25 0 96 / 20%);
 }
 
 .arrowRight {
@@ -124,7 +124,8 @@
   align-items: center;
   flex-direction: column;
   align-self: baseline;
-
+  margin-left: 16px;
+  margin-right: 16px;
   color: var(--static-neutral);
   font-size: var(--font-s);
   line-height: 20px;
@@ -238,6 +239,8 @@
 .isMobile .rightsContainer {
   width: 100%;
   order: 3;
+  margin-left: initial;
+  margin-right: initial;
 }
 
 .isMobile .socialLinks {

packages/web/src/components/public-site/Footer.tsx

@@ -21,8 +21,8 @@ import {
   AUDIUS_EXPLORE_LINK,
   AUDIUS_BLOG_LINK,
   AUDIUS_REMIX_CONTESTS_LINK,
-  APP_REDIRECT,
-  AUDIUS_DOCS_LINK
+  AUDIUS_DOCS_LINK,
+  DOWNLOAD_LINK
 } from 'utils/route'
 
 import styles from './Footer.module.css'
@@ -79,7 +79,7 @@ const siteLinkRows = [
     },
     {
       text: 'Download App',
-      link: APP_REDIRECT
+      link: DOWNLOAD_LINK
     }
   ]
 ]

packages/web/src/components/public-site/NavBanner.module.css

@@ -29,7 +29,6 @@
 
 /* Left Icons */
 .iconContainer {
-  flex: 1;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
@@ -65,10 +64,11 @@
 
 /* Center Logo */
 .centerLogo {
-  flex: 1;
+  flex-grow: 1;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding-right: 12px;
 }
 
 .horizontalLogo {
@@ -87,16 +87,14 @@
 
 /* Right Links */
 .linkContainer {
-  flex: 1;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
+  color: var(--static-white);
 }
 
-.token {
+.rightLink {
   cursor: pointer;
-  color: var(--static-white);
-  font-family: Gilroy !important;
   font-size: var(--font-m);
   font-weight: var(--font-bold);
   letter-spacing: 0.2px;
@@ -107,19 +105,19 @@
   transform: scale3d(1, 1, 1);
 }
 
-.token:hover {
+.rightLink:hover {
   text-decoration: underline;
   opacity: 0.8;
   transform: scale3d(1.03, 1.03, 1.03);
 }
 
-.token:active {
+.rightLink:active {
   opacity: 0.8;
   transform: scale3d(0.99, 0.99, 0.99);
 }
 
-.invertColors .token {
-  display: none;
+.invertColors .linkContainer {
+  color: var(--static-secondary);
 }
 
 .startListening {
@@ -128,8 +126,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #480b79;
-  font-family: Gilroy !important;
+  color: #7e1bcc;
   font-size: var(--font-m);
   font-weight: var(--font-bold);
   letter-spacing: 0.2px;
@@ -175,7 +172,7 @@
   position: fixed;
   width: 100%;
   top: 0px;
-  padding: 16px;
+  padding: 0px 22px;
   height: 80px;
   display: inline-flex;
   align-items: center;
@@ -194,14 +191,18 @@
 }
 
 .kebabMenu {
-  position: absolute;
-  left: 24px;
-  top: 24px;
   height: 32px;
   width: 32px;
+  padding-right: 2px;
+}
+
+.trendingIcon {
+  height: 28px;
+  width: 28px;
 }
 
-.kebabMenu path {
+.kebabMenu path,
+.trendingIcon path {
   fill: var(--static-white);
 }
 

packages/web/src/components/public-site/NavBanner.tsx

@@ -9,21 +9,30 @@ import {
 import cn from 'classnames'
 
 import HorizontalLogo from 'assets/img/publicSite/Horizontal-Logo-Full-Color@2x.png'
+import { useMatchesBreakpoint } from 'common/hooks/useMatchesBreakpoint'
 import {
   AUDIUS_LISTENING_LINK,
   AUDIUS_HOT_AND_NEW,
   AUDIUS_EXPLORE_LINK,
-  AUDIUS_ORG
+  AUDIUS_ORG,
+  AUDIUS_BLOG_LINK,
+  DOWNLOAD_START_LINK
 } from 'utils/route'
 
 import styles from './NavBanner.module.css'
 import { handleClickRoute } from './handleClickRoute'
 
+const DESKTOP_NAV_BANNER_MIN_WIDTH = 1170
+const MOBILE_WIDTH_MEDIA_QUERY = window.matchMedia(
+  `(max-width: ${DESKTOP_NAV_BANNER_MIN_WIDTH}px)`
+)
 const messages = {
   explore: 'Explore',
   trending: 'Trending',
   hotAndNew: 'Hot & New',
   token: 'Token',
+  blog: 'Blog',
+  download: 'Download',
   startListening: 'Start Listening'
 }
 
@@ -36,6 +45,10 @@ type NavBannerProps = {
 }
 
 const NavBanner = (props: NavBannerProps) => {
+  const isNarrow = useMatchesBreakpoint({
+    mediaQuery: MOBILE_WIDTH_MEDIA_QUERY,
+    initialValue: props.isMobile
+  })
   const [isScrolling, setIsScrolling] = useState(false)
   const setScrolling = useCallback(() => {
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop
@@ -61,13 +74,23 @@ const NavBanner = (props: NavBannerProps) => {
   )
   const onClickToken = handleClickRoute(AUDIUS_ORG, props.setRenderPublicSite)
 
+  const onClickBlog = handleClickRoute(
+    AUDIUS_BLOG_LINK,
+    props.setRenderPublicSite
+  )
+
+  const onClickDownload = handleClickRoute(
+    DOWNLOAD_START_LINK,
+    props.setRenderPublicSite
+  )
+
   useEffect(() => {
     setScrolling()
     window.addEventListener('scroll', setScrolling)
     return () => window.removeEventListener('scroll', setScrolling)
   }, [setScrolling])
 
-  if (props.isMobile) {
+  if (props.isMobile || isNarrow) {
     return (
       <div
         className={cn(styles.mobileContainer, {
@@ -86,6 +109,10 @@ const NavBanner = (props: NavBannerProps) => {
             alt='Audius Logo'
           />
         </div>
+        <IconTrending
+          className={styles.trendingIcon}
+          onClick={onClickTrending}
+        />
       </div>
     )
   }
@@ -133,9 +160,15 @@ const NavBanner = (props: NavBannerProps) => {
           />
         </div>
         <div className={styles.linkContainer}>
-          <div onClick={onClickToken} className={styles.token}>
+          <div onClick={onClickBlog} className={styles.rightLink}>
+            {messages.blog}
+          </div>
+          <div onClick={onClickToken} className={styles.rightLink}>
             {messages.token}
           </div>
+          <div onClick={onClickDownload} className={styles.rightLink}>
+            {messages.download}
+          </div>
           <div onClick={onClickTrending} className={styles.startListening}>
             {messages.startListening}
           </div>