+
+ {messages.blog}
+
+
{messages.token}
+
+ {messages.download}
+
{messages.startListening}
diff --git a/packages/web/src/components/public-site/NavOverlay.module.css b/packages/web/src/components/public-site/NavOverlay.module.css
index e012cfd2a4..8eb6935bb2 100644
--- a/packages/web/src/components/public-site/NavOverlay.module.css
+++ b/packages/web/src/components/public-site/NavOverlay.module.css
@@ -21,7 +21,7 @@
width: calc(100vw + 30px);
margin: -10px;
filter: blur(5px);
- background-size: 1000px;
+ background-size: cover;
background-position: 50% 5%;
}
@@ -36,10 +36,10 @@
z-index: 2000;
height: 100vh;
width: 100vw;
- padding: 24px 24px 54px;
+ padding: 24px;
display: inline-flex;
+ justify-content: space-between;
flex-direction: column;
- align-items: center;
}
.iconContainer {
@@ -49,6 +49,7 @@
}
.iconClose {
+ position: absolute;
width: 32px;
height: 32px;
}
@@ -57,51 +58,51 @@
fill: var(--static-white);
}
-.centerLogo {
- flex: 0 1 133px;
- margin: 0px auto;
-}
-
.horizontalLogo {
- width: 182px;
+ width: 195px;
margin: 0px auto;
filter: brightness(0) invert(1);
}
-.startListeningButtonContainer {
- flex: 0 1 143px;
+.startListeningButtonContaier {
+ margin-top: 32px;
}
.startListeningButton {
- border-radius: 9px;
- background-color: var(--static-primary);
- box-shadow: 0 5px 20px 0 rgba(25, 0, 96, 0.5);
- padding: 16px 40px;
- color: var(--static-white);
- font-family: Gilroy;
- font-size: var(--font-2xl);
- font-weight: var(--font-bold);
- letter-spacing: 0.3px;
- line-height: 29px;
+ width: 100%;
+ padding: 13px 0px;
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 22px;
text-align: center;
+ border-radius: 6px;
+ background-color: #ffffff;
+ box-shadow: 0px 0px 1px -2px rgba(133, 129, 153, 0.1),
+ 0px 1px 0px -2px #e3e3e3, 1px 2px 5px rgba(133, 129, 153, 0.25);
+ color: #7e1bcc;
+ border: none;
+ transform: scale3d(1, 1, 1);
}
-.dappLinksContainer {
- flex: 0 1 173px;
+@media screen and (min-height: 705px) {
+ .dappLinksContainer {
+ margin-top: 56px;
+ }
}
.dappLinks {
+ height: 100%;
display: inline-flex;
flex-direction: column;
- justify-content: space-between;
- margin-bottom: 48px;
- height: 125px;
+ justify-content: center;
+ align-items: flex-start;
}
.dappLink {
display: inline-flex;
align-items: center;
justify-content: center;
+ margin-bottom: 32px;
}
.dappLinkIcon {
@@ -116,26 +117,25 @@
.dappLinkText {
margin-left: 16px;
color: var(--static-white);
- font-size: var(--font-2xl);
- font-weight: var(--font-bold);
- letter-spacing: 0.3px;
+ font-size: 24px;
+ line-height: 24px;
+ font-weight: 700;
}
.linksContainer {
- flex: 1;
- display: inline-flex;
- flex-direction: column;
- justify-content: space-between;
+ display: inline-grid;
+ grid-template-columns: repeat(3, 1fr);
+ flex-grow: 1;
+ align-content: flex-end;
+ row-gap: 16px;
}
.link {
- font-size: var(--font-m);
- font-weight: var(--font-bold);
- letter-spacing: 0.2px;
- line-height: 19px;
- text-align: center;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 24px;
color: var(--static-white);
- font-family: Gilroy;
+ white-space: nowrap;
}
.iconsContainer {
@@ -146,8 +146,8 @@
}
.icon {
- width: 24px;
- height: 24px;
+ width: 32px;
+ height: 32px;
}
.icon path {
diff --git a/packages/web/src/components/public-site/NavOverlay.tsx b/packages/web/src/components/public-site/NavOverlay.tsx
index 29aa9deeeb..c283644716 100644
--- a/packages/web/src/components/public-site/NavOverlay.tsx
+++ b/packages/web/src/components/public-site/NavOverlay.tsx
@@ -1,31 +1,38 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
import {
- IconRemove,
- IconInstagram,
- IconTwitterBird,
+ IconCampFire,
IconDiscord,
+ IconDownload,
IconExplore,
+ IconFollow,
+ IconInstagram,
+ IconRemove,
IconTrending,
- IconCampFire
+ IconTwitterBird
} from '@audius/stems'
import cn from 'classnames'
import ReactDOM from 'react-dom'
-import HeroBackground from 'assets/img/publicSite/Hero-Background@2x.jpg'
+import HeroBackground from 'assets/img/publicSite/Hero-BG@2x.jpg'
import HorizontalLogo from 'assets/img/publicSite/Horizontal-Logo-Full-Color@2x.png'
import {
- AUDIUS_TWITTER_LINK,
- AUDIUS_INSTAMGRAM_LINK,
+ AUDIUS_BLOG_LINK,
AUDIUS_DISCORD_LINK,
- AUDIUS_TEAM_LINK,
- AUDIUS_DEV_STAKER_LINK,
+ AUDIUS_DOCS_LINK,
+ AUDIUS_EXPLORE_LINK,
+ AUDIUS_HOT_AND_NEW,
+ AUDIUS_INSTAMGRAM_LINK,
AUDIUS_LISTENING_LINK,
+ AUDIUS_ORG,
AUDIUS_PRESS_LINK,
+ AUDIUS_REMIX_CONTESTS_LINK,
+ AUDIUS_SIGN_UP_LINK,
+ AUDIUS_TEAM_LINK,
+ AUDIUS_TWITTER_LINK,
+ DOWNLOAD_START_LINK,
PRIVACY_POLICY,
- TERMS_OF_SERVICE,
- AUDIUS_HOT_AND_NEW,
- AUDIUS_EXPLORE_LINK
+ TERMS_OF_SERVICE
} from 'utils/route'
import styles from './NavOverlay.module.css'
@@ -52,42 +59,64 @@ const socialLinks = [
const dappLinks = [
{
- text: 'Explore',
- icon:
,
- link: AUDIUS_EXPLORE_LINK
+ text: 'Sign Up',
+ icon:
,
+ link: AUDIUS_SIGN_UP_LINK
},
{
text: 'Trending',
icon:
,
link: AUDIUS_LISTENING_LINK
},
+ {
+ text: 'Explore',
+ icon:
,
+ link: AUDIUS_EXPLORE_LINK
+ },
{
text: 'Hot & New',
icon:
,
link: AUDIUS_HOT_AND_NEW
+ },
+ {
+ text: 'Download App',
+ icon:
,
+ link: DOWNLOAD_START_LINK
}
]
const links = [
{
- text: 'Dev & Stakers',
- link: AUDIUS_DEV_STAKER_LINK
+ text: 'Blog',
+ link: AUDIUS_BLOG_LINK
},
{
- text: 'Team',
- link: AUDIUS_TEAM_LINK
- },
- {
- text: 'Press',
- link: AUDIUS_PRESS_LINK
+ text: 'Docs',
+ link: AUDIUS_DOCS_LINK
},
{
text: 'Privacy Policy',
link: PRIVACY_POLICY
},
+ {
+ text: 'Remixes',
+ link: AUDIUS_REMIX_CONTESTS_LINK
+ },
+ {
+ text: 'Team',
+ link: AUDIUS_TEAM_LINK
+ },
{
text: 'Terms of Service',
link: TERMS_OF_SERVICE
+ },
+ {
+ text: 'Token',
+ link: AUDIUS_ORG
+ },
+ {
+ text: 'Brand',
+ link: AUDIUS_PRESS_LINK
}
]
@@ -147,22 +176,12 @@ const NavOverlay = (props: NavOverlayProps) => {
className={styles.iconClose}
onClick={props.closeNavScreen}
/>
-