- {showCookieBanner && (
-
-
-
- )
-}
-
-const MobileArtist = (props: AristProps) => {
- return (
-
-
-
-
- {props.name}
-
-
- )
-}
-
-const artists = [
- {
- name: 'Katy Perry',
- imageUrl: investorKatyPerry
- },
- {
- name: 'Nas',
- imageUrl: investorNas
- },
- {
- name: 'The Chainsmokers',
- imageUrl: investorTheChainsmokers
- },
- {
- name: 'Pusha T',
- imageUrl: investorPushaT
- },
- {
- name: 'Steve Aoki',
- imageUrl: investorSteveAoki
- }
-]
-
-type ArtistInvestorsProps = {
- isMobile: boolean
-}
-
-const ArtistInvestors = (props: ArtistInvestorsProps) => {
- // Animate in the title and subtitle text
- const [hasViewed, refInView] = useHasViewed()
- const titleStyles = useSpring({
- config: { mass: 3, tension: 2000, friction: 500 },
- opacity: hasViewed ? 1 : 0,
- x: hasViewed ? 0 : 120
- })
-
- if (props.isMobile) {
- return (
-
- 
-
- {props.name}
-
-
- )
- }
-
- return (
-
- `translate3d(0,${x}px,0)`
- ),
- width: '100%'
- }}
- >
-
-
- {messages.joinTheMovement}
-
-
- {messages.title}
-{messages.subtitle}
-
- {artists.map((artist, i) => (
-
-
-
- )
-}
-
-export default ArtistInvestors
diff --git a/packages/web/src/public-site/pages/landing-page/components/CTAStartListening.module.css b/packages/web/src/public-site/pages/landing-page/components/CTAStartListening.module.css
deleted file mode 100644
index 55e6cd8f32b..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/CTAStartListening.module.css
+++ /dev/null
@@ -1,205 +0,0 @@
-.container {
- flex-shrink: 0;
- position: relative;
- width: 100%;
- z-index: 5;
- height: 500px;
- display: flex;
- justify-content: center;
- margin-top: 320px;
-}
-
-.content {
- position: relative;
- z-index: 5;
- max-width: 1340px;
- width: 100%;
- height: 100%;
- display: inline-flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- padding: 250px 0px 42px;
- margin: 0px 50px;
-}
-
-.title {
- color: #ffffff;
- font-size: 48px;
- font-weight: 800;
- line-height: 60px;
- text-shadow: 0px 5px 20px rgba(25, 0, 96, 0.25);
- max-width: 760px;
- margin-bottom: 20px;
- user-select: none;
-}
-
-.ctaButton {
- user-select: none;
- cursor: pointer;
- border: none;
- border-radius: 8px;
- background-color: #ffffff;
- box-shadow: 0 5px 20px 0 rgba(25, 0, 96, 0.25);
- padding: 16px 40px;
-
- color: #7e1bcc;
- font-size: 18px;
- font-weight: 700;
- line-height: 22px;
- text-align: center;
-
- display: inline-flex;
- justify-content: center;
- align-items: center;
- transition: all 0.15s ease-in-out;
- transform: scale3d(1, 1, 1);
-}
-
-.ctaButton:hover {
- transform: scale3d(1.03, 1.03, 1.03);
- background-color: #f7f7f7;
- box-shadow: 0 10px 20px 0 rgba(25, 0, 96, 0.25);
-}
-
-.ctaButton:active {
- transform: scale3d(0.99, 0.99, 0.99);
- background-color: #f2f2f2;
- box-shadow: 0 0 2px -1px rgba(25, 0, 96, 0.5);
-}
-
-.iconCaretRight {
- margin-left: 4px;
- height: 20px;
- width: 20px;
-}
-
-.iconCaretRight path {
- fill: #7e1bcc;
-}
-
-.dotsBackground {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 203px;
- width: 100%;
- background-repeat: repeat;
- background-size: 500px 201px;
- z-index: 0;
-}
-
-.footerForeground {
- position: absolute;
- max-height: 358px;
- max-height: 358px;
- height: 100%;
- width: 426px;
- right: 0px;
- bottom: 0;
- background-position: center;
- background-size: contain;
- background-repeat: no-repeat;
- z-index: 10;
-}
-
-.footerBackgroundContainer {
- position: absolute;
- width: 100%;
- height: 100%;
- overflow: hidden;
- width: 100%;
- height: 100%;
- max-height: 300px;
- margin-top: 200px;
- margin-bottom: 42px;
- z-index: 1;
- overflow: hidden;
-}
-
-.bgContent {
- position: relative;
- width: 100%;
- height: 100%;
-}
-
-.parallaxBg {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background-color: rgb(134, 91, 209);
-}
-
-.footerBackground {
- position: absolute;
- width: 120%;
- left: -10%;
- min-height: 200%;
- background-size: cover;
- background-repeat: no-repeat;
-}
-
-/* Mobile styles */
-.mobileContainer {
- position: relative;
- overflow: hidden;
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- height: 300px;
- width: 100%;
- padding: 64px 32px;
- margin-top: 120px;
-}
-
-.mobileContainer .footerForeground {
- position: absolute;
- top: 12%;
- left: 33%;
- width: 100%;
-}
-
-.mobileContainer .footerBackground {
- position: absolute;
- top: -30%;
- left: 0%;
- width: 130%;
- min-height: 200%;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
-}
-
-.mobileContainer .title {
- z-index: 50;
- color: #ffffff;
- font-size: 40px;
- line-height: 52px;
- font-weight: 700;
- text-shadow: 0 5px 20px rgba(25, 0, 96, 0.25);
- user-select: none;
-}
-
-.mobileContainer .ctaButton {
- z-index: 50;
- position: relative;
- width: 100%;
-}
-
-.mobileBgContent {
- position: absolute;
- top: 0;
- height: 100%;
- width: 100%;
-}
-
-.bgParallax {
- position: relative;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
-}
diff --git a/packages/web/src/public-site/pages/landing-page/components/CTAStartListening.tsx b/packages/web/src/public-site/pages/landing-page/components/CTAStartListening.tsx
deleted file mode 100644
index 2a361e39da9..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/CTAStartListening.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { route } from '@audius/common/utils'
-import { IconCaretRight } from '@audius/harmony'
-import { useNavigate } from 'react-router'
-import { Parallax } from 'react-scroll-parallax'
-
-import footerBackgroundMobile from 'assets/img/publicSite/Footer-Background-mobile@2x.jpg'
-import footerBackground from 'assets/img/publicSite/Footer-Background@2x.jpg'
-import footerForeground from 'assets/img/publicSite/Footer-Foreground@2x.png'
-import dots2x from 'assets/img/publicSite/dots@2x.jpg'
-import { handleClickRoute } from 'public-site/components/handleClickRoute'
-
-import styles from './CTAStartListening.module.css'
-
-const { TRENDING_PAGE } = route
-
-const messages = {
- title: 'Music Done Right',
- cta: 'Listen Now'
-}
-
-type CTAStartListeningProps = {
- isMobile: boolean
- setRenderPublicSite: (shouldRender: boolean) => void
-}
-
-const CTAStartListening = (props: CTAStartListeningProps) => {
- const navigate = useNavigate()
- if (props.isMobile) {
- return (
-
- `translate3d(0,${x}px,0)`
- ),
- width: '100%'
- }}
- >
-
-
- {messages.joinTheMovement}
-
-
- {messages.title}
-{messages.subtitle}
-
- {artists.map((artist) => (
-
-
-
-
- )
- }
-
- return (
-
-
-
-
-
-
- {messages.title}
-
- {messages.cta}
-
-
-
- )
-}
-
-export default CTAStartListening
diff --git a/packages/web/src/public-site/pages/landing-page/components/Description.module.css b/packages/web/src/public-site/pages/landing-page/components/Description.module.css
deleted file mode 100644
index 1223d8ba7cd..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/Description.module.css
+++ /dev/null
@@ -1,226 +0,0 @@
-.container {
- flex-shrink: 0;
- margin-top: 160px;
- flex-shrink: 0;
- overflow: hidden;
- width: 100%;
- display: flex;
- justify-content: center;
-}
-
-.content {
- max-width: 1110px;
- margin: 0px 48px;
- position: relative;
-}
-
-.foreground {
- position: relative;
- z-index: 5;
- display: inline-flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.productShot {
- margin-bottom: 70px;
- user-select: none;
- width: 100%;
- max-width: 1110px;
-}
-
-.title {
- position: relative;
- display: inline-flex;
- overflow: hidden;
- color: #a3a1b2;
- font-size: 42px;
- font-weight: 700;
- line-height: 42px;
- text-align: center;
- user-select: none;
-}
-
-.coloredTitle {
- position: relative;
- display: inline-flex;
- overflow: hidden;
- font-size: 72px;
- font-weight: 700;
- line-height: 96px;
- text-align: center;
- margin-bottom: 16px;
-}
-
-@media (max-width: 994px) {
- .coloredTitle {
- font-size: 48px;
- line-height: 60px;
- }
-}
-
-.coloredTitleWord {
- background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
- background: linear-gradient(315deg, #5b23e1 0%, #a22feb 100%);
- margin-bottom: 16px;
- user-select: none;
-}
-
-.subText {
- color: #6c6780;
- font-size: 24px;
- font-weight: 500;
- line-height: 32px;
- text-align: center;
- width: 100%;
- max-width: 1110px;
-}
-
-.descriptionBody {
- overflow: hidden;
-}
-
-.dotsLogo {
- user-select: none;
- width: 382px;
- position: absolute;
- top: 230px;
- z-index: 0;
-}
-
-.dotsLeft {
- left: -118px;
-}
-
-.dotsRight {
- right: -118px;
-}
-
-.textAnimate {
- margin-right: 16px;
- overflow: hidden;
- display: inline-flex;
-}
-
-.mobileContainer .textAnimate:last-child {
- margin-right: 0;
-}
-
-.gradient1 {
- background: linear-gradient(315deg, #8a2be8 0%, #a22feb 100%);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
-}
-
-.gradient2 {
- background: linear-gradient(315deg, #832ae7 0%, #882ae8 100%);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
-}
-
-.gradient3 {
- background: linear-gradient(315deg, #7127e4 0%, #812ae7 100%);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
-}
-
-.gradient4 {
- background: linear-gradient(315deg, #6c25e3 0%, #6e26e3 100%);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
-}
-
-.gradient5 {
- background: linear-gradient(315deg, #5b23e1 0%, #6926e3 100%);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
-}
-
-/* Mobile Styles */
-
-.mobileContainer {
- position: relative;
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- width: 100%;
- padding: 20px 0px 48px;
- overflow: hidden;
-}
-
-.mobileContainer .dotsLogo {
- width: 440px;
- position: absolute;
- z-index: 0;
- top: 130px;
- left: -100%;
- right: -100%;
- margin: 0px auto;
-}
-
-.mobileContainer .textSection {
- position: relative;
- z-index: 10;
- display: inline-flex;
- flex-direction: column;
- align-items: center;
-}
-
-.mobileContainer .title {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- color: #a3a1b2;
- font-size: 24px;
- font-weight: 800;
- line-height: 32px;
- text-align: center;
- position: relative;
- /* Counteract the spacing on the last character */
- left: 6px;
- max-width: 351px;
- margin: -12px auto 0px;
- user-select: none;
-}
-
-.mobileContainer .titleColor {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- font-weight: 700;
- font-size: 42px;
- line-height: 52px;
- max-width: 500px;
- text-align: center;
- background: linear-gradient(315deg, #5b23e1 0%, #a22feb 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- margin: 0 16px 24px;
-}
-
-.mobileContainer .coloredTitleWord {
- margin-bottom: 0px;
- user-select: none;
-}
-
-.mobileContainer .textAnimate {
- overflow: visible;
-}
-
-.mobileContainer .textAnimate:last-child {
- margin-right: 0;
-}
-
-.mobileContainer .textDescription {
- width: 100%;
- font-size: 18px;
- font-weight: 500;
- line-height: 24px;
- text-align: center;
- padding: 0px 20px;
-}
-
-.mobileContainer .textDescription p {
- margin-bottom: 16px;
-}
diff --git a/packages/web/src/public-site/pages/landing-page/components/Description.tsx b/packages/web/src/public-site/pages/landing-page/components/Description.tsx
deleted file mode 100644
index 44c4b9f403f..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/Description.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-
-import cn from 'classnames'
-// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
-import { useChain, useSpring, useTrail, animated } from 'react-spring'
-
-import productShot from 'assets/img/publicSite/ProductShot2.webp'
-import dotsLogo1x from 'assets/img/publicSite/dot-logo@1x.jpg'
-import dotsLogo2x from 'assets/img/publicSite/dot-logo@2x.jpg'
-
-import styles from './Description.module.css'
-const animatedAny = animated as any
-
-const messages = {
- title: 'The Music Industry Hard Fork',
- description: `Audius is music done right. It's a community-run music platform that connects artists and fans directly. Fans and artists build communities together around music, and developers build anything they want on their terms.`
-}
-
-const titleItems = messages.title.split(' ')
-
-type DescriptionProps = {
- isMobile: boolean
-}
-
-const Description = (props: DescriptionProps) => {
- const [hasViewed, setHasViewed] = useState(false)
-
- const startAnimation = useRef
-
- {messages.title}
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
-
- return (
-
- 
-
- {titleTrail.map(
- ({ x, wordYPosition, ...rest }: any, index: number) => (
-
- `translate3d(0,${x}px,0)`
- )
- }}
- >
-
-
-
- {titleTrail.map(
- ({ x, wordYPosition, ...rest }: any, index: number) => (
- `translate3d(0,${x}px,0)`
- )
- }}
- >
-
- {' '}
- {titleItems[index]}{' '}
-
-
- )
- )}
-
-
-
- {messages.description}
-
-
- )
-}
-
-export default Description
diff --git a/packages/web/src/public-site/pages/landing-page/components/FeaturedContent.module.css b/packages/web/src/public-site/pages/landing-page/components/FeaturedContent.module.css
deleted file mode 100644
index 3cec2346303..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/FeaturedContent.module.css
+++ /dev/null
@@ -1,263 +0,0 @@
-.container {
- flex-shrink: 0;
- position: relative;
- width: 100%;
- display: flex;
- flex-shrink: 0;
- justify-content: center;
- padding: 320px 120px 0;
- overflow: hidden;
-}
-
-.content {
- position: relative;
- z-index: 5;
- width: 100%;
- max-width: 1240px;
- display: inline-flex;
- flex-direction: column;
-}
-
-:global(#landingPage) .title {
- font-family: 'Avenir Next LT Pro' !important;
-}
-
-.title {
- background: linear-gradient(315deg, #5b23e1 0%, #a22feb 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- font-weight: 700;
- font-size: 56px;
- line-height: 72px;
- text-align: center;
- user-select: none;
- margin-bottom: 12px;
-}
-
-.subTitle {
- color: #6c6780;
- font-size: 24px;
- font-weight: 500;
- line-height: 32px;
- text-align: center;
- margin-bottom: 12px;
-}
-
-.tracksContainer {
- flex: 1;
- display: inline-flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 24px;
- transition: all 0.3s ease-in-out;
- margin-top: 24px;
-}
-
-@media (max-width: 1380px) {
- .tracksContainer {
- max-width: 700px;
- margin: 24px auto 0;
- }
-}
-
-.trackMoveContainer {
- user-select: none;
-}
-
-.trackContainer {
- user-select: none;
- cursor: pointer;
-}
-
-.track {
- overflow: hidden;
- height: 280px;
- width: 280px;
- border-radius: 16px;
- transition: all 0.3s ease-in-out;
- background-size: cover;
-}
-
-.track:hover {
- transform: scale3d(1.1, 1.1, 1.1);
-}
-
-.track:active {
- transform: scale3d(0.99, 0.99, 0.99);
-}
-
-.trackContent {
- width: 100%;
- height: 100%;
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-end;
- padding-bottom: 19px;
- transition: all 0.3s ease-in-out;
- background: rgba(0, 0, 0, 0);
-}
-
-.trackContent:hover,
-.trackContent:active {
- background: linear-gradient(
- 180deg,
- rgba(0, 0, 0, 0) 0%,
- rgba(0, 0, 0, 0.5) 100%
- );
-}
-
-.trackTitleContainer {
- margin-top: 24px;
- text-align: center;
-}
-
-.trackTitle {
- color: #6c6780;
- font-size: 18px;
- line-height: 24px;
- font-weight: 500;
- text-align: center;
-}
-
-.track .trackArtist {
- opacity: 0;
- color: rgba(255, 255, 255, 1);
- font-size: 18px;
- font-weight: 500;
- line-height: 23px;
- text-align: center;
- margin-bottom: 19px;
- transition: all 0.07s ease-in-out;
-}
-
-.track .listenOnAudius {
- opacity: 0;
- width: 154px;
- transition: all 0.07s ease-in-out;
-}
-
-.track:hover .trackTitle {
- opacity: 1;
-}
-
-.track:hover .trackArtist {
- opacity: 1;
-}
-
-.track:hover .listenOnAudius {
- opacity: 1;
-}
-
-.lines {
- position: absolute;
- left: -10%;
- right: -10%;
- width: 120%;
- height: auto;
- z-index: 0;
-}
-
-.loadingContainer {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 280px;
-}
-
-/* Mobile */
-
-.mobileContainer {
- width: 100%;
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- padding: 120px 16px 0px;
- position: relative;
- height: auto;
- overflow: hidden;
-}
-
-.mobileContainer .title {
- font-size: 32px;
- line-height: 40px;
- text-align: center;
- user-select: none;
-}
-.mobileContainer .subTitle {
- font-size: 18px;
- font-weight: 500;
- line-height: 24px;
- text-align: center;
-}
-
-.mobileContainer .tracksContainer {
- width: 100%;
- position: relative;
- display: inline-flex;
- flex-wrap: wrap;
- align-items: flex-start;
- margin-top: 24px;
-}
-
-.mobileContainer .trackContainer {
- max-width: 165px;
- height: auto;
- display: inline-flex;
- flex-direction: column;
- flex-wrap: wrap;
- justify-content: flex-start;
- align-items: center;
-}
-
-.mobileContainer .trackImage {
- height: 164px;
- width: 164px;
- border-radius: 8px;
- margin-bottom: 14px;
- background-size: cover;
- background-position: center;
-}
-
-.mobileContainer .trackTitle {
- position: relative;
- font-size: 14px;
- font-weight: 500;
- line-height: 18px;
- text-align: center;
- margin: 0px auto 2px;
- overflow: hidden;
- white-space: nowrap;
- max-width: 100%;
- text-overflow: ellipsis;
-}
-
-.mobileContainer .mobileIconArrow {
- height: 12px;
- width: 12px;
- margin-left: 4px;
-}
-
-.mobileContainer .mobileIconArrow path {
- fill: #6c6780;
-}
-
-.mobileContainer .trackArtist {
- color: #6c6780;
- font-size: 14px;
- font-weight: 500;
- line-height: 18px;
- text-align: center;
- margin: 0px auto;
-}
-
-.mobileContainer .lines {
- position: absolute;
- left: -10%;
- right: -10%;
- width: 500%;
- height: auto;
- top: 65%;
- z-index: 0;
-}
diff --git a/packages/web/src/public-site/pages/landing-page/components/FeaturedContent.tsx b/packages/web/src/public-site/pages/landing-page/components/FeaturedContent.tsx
deleted file mode 100644
index f7dd661f127..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/FeaturedContent.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { useState } from 'react'
-
-import {
- transformAndCleanList,
- userCollectionMetadataFromSDK
-} from '@audius/common/adapters'
-import { route } from '@audius/common/utils'
-import { Id } from '@audius/sdk'
-import { useNavigate } from 'react-router'
-// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
-import { useSpring, animated } from 'react-spring'
-import { useAsync } from 'react-use'
-
-import IconLines from 'assets/img/publicSite/Lines.svg'
-import IconListenOnAudius from 'assets/img/publicSite/listen-on-audius.svg'
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
-import useCardWeight from 'hooks/useCardWeight'
-import useHasViewed from 'hooks/useHasViewed'
-import { handleClickRoute } from 'public-site/components/handleClickRoute'
-import { audiusSdk } from 'services/audius-sdk'
-import { env } from 'services/env'
-
-import styles from './FeaturedContent.module.css'
-const animatedAny = animated as any
-
-const { collectionPage } = route
-
-const messages = {
- title: 'Featured Content',
- subTitle: 'Check out the playlists we are listening to right now'
-}
-
-type PlaylistTileProps = {
- title: string
- artist: string
- imageUrl: string | null
- onClick: () => void
-}
-
-const DesktopPlaylistTile = (props: PlaylistTileProps) => {
- const [cardRef, onMove, onLeave, transform] = useCardWeight({
- sensitivity: 1.8
- })
- const [mouseDown, setMouseDown] = useState(false)
- return (
-
- 
-
-
-
-
-
- {titleTrail.map(
- ({ x, wordYPosition, ...rest }: any, index: number) => (
-
- `translate3d(0,${x}px,0)`
- )
- }}
- >
-
-
-
- {titleTrail.map(
- ({ x, wordYPosition, ...rest }: any, index: number) => (
- `translate3d(0,${x}px,0)`
- )
- }}
- >
-
- {' '}
- {titleItems[index]}{' '}
-
-
- )
- )}
-
-
- {messages.description}
-
- {
- onLeave()
- setMouseDown(false)
- }}
- onMouseUp={() => setMouseDown(false)}
- onMouseDown={() => setMouseDown(true)}
- >
-
-
-
- )
-}
-
-const MobilePlaylistTile = (props: PlaylistTileProps) => (
-
-
-
-
- {`By ${props.artist}`}
-
- {props.title}
-
-
-
-
-)
-
-type FeaturedContentProps = {
- isMobile: boolean
- setRenderPublicSite: (shouldRender: boolean) => void
-}
-
-const FeaturedContent = (props: FeaturedContentProps) => {
- const navigate = useNavigate()
- const { value: featuredPlaylists, loading } = useAsync(async () => {
- const response = await fetch(env.EXPLORE_CONTENT_URL)
- const json = await response.json()
- const featuredPlaylistIds = json.featuredPlaylists
- .slice(0, 4)
- .map((id: string) => Id.parse(parseInt(id)))
- const sdk = await audiusSdk()
- const { data } = await sdk.playlists.getBulkPlaylists({
- id: featuredPlaylistIds
- })
- return transformAndCleanList(data, userCollectionMetadataFromSDK)
- }, [])
-
- // Animate in the title and subtitle text
- const [hasViewed, refInView] = useHasViewed(0.8)
-
- const textStyles = useSpring({
- config: { mass: 3, tension: 2000, friction: 500 },
- opacity: hasViewed ? 1 : 0,
- x: hasViewed ? 0 : 150
- })
-
- if (props.isMobile) {
- return (
- {props.title}
-
-
- )
- }
-
- return (
-
- `translate3d(0,${x}px,0)`
- )
- }}
- >
-
-
- {messages.title}
-{messages.subTitle}
-
- {loading ? (
-
-
-
- ) : (
- featuredPlaylists?.map((p) => (
-
-
- )
-}
-
-export default FeaturedContent
diff --git a/packages/web/src/public-site/pages/landing-page/components/Hero.module.css b/packages/web/src/public-site/pages/landing-page/components/Hero.module.css
deleted file mode 100644
index 5df5ad26093..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/Hero.module.css
+++ /dev/null
@@ -1,364 +0,0 @@
-:global(#landingPage) .heroContainer .title {
- font-family: 'Avenir Next LT Pro' !important;
-}
-
-.container {
- flex-shrink: 0;
- position: relative;
- width: 100%;
- display: inline-flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding-bottom: 100px;
-}
-
-/* BG Images */
-.bg {
- padding: 100px;
- z-index: 1;
- width: 100%;
- min-height: 920px;
- height: 104vh;
- justify-content: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- overflow: hidden;
- position: relative;
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%);
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%);
-}
-
-.parallaxBg {
- z-index: -1;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background-color: #7400ff;
-}
-
-.bgImageLoading {
- filter: blur(3px);
- opacity: 0.8;
-}
-
-.imgContainer {
- position: absolute;
- width: 100%;
- overflow: hidden;
-}
-
-.fgContainer {
- user-select: none;
- z-index: 10;
-}
-
-.foreground {
- height: auto;
- /* Adjust vw and vh values for image placement */
- --vw-adjusted: calc(100vw - 100px);
- --vh-adjusted: calc(100vh + 300px);
- /* Take the max of view height and width so that the image always fills the space */
- min-height: max(var(--vh-adjusted), var(--vw-adjusted));
-}
-
-.foregroundImg {
- height: 100vh;
- min-height: 960px;
-}
-
-@media (max-width: 1387px) {
- .container .textContent .subtitle {
- max-width: 500px;
- }
-}
-
-.bgContainer {
- z-index: 0;
-}
-
-.background {
- user-select: none;
- width: 100%;
- left: 0;
- right: 0;
- top: 0;
- height: 100%;
- position: absolute;
-}
-
-.textContent {
- position: relative;
- z-index: 10;
- margin: 0px auto;
- width: 100%;
- max-width: 1240px;
-}
-
-.buttonContentParallax {
- position: relative;
- z-index: 30;
- width: 100%;
- display: flex;
- max-width: 1240px;
- margin-top: 24px;
-}
-
-.content {
- position: relative;
- z-index: 10;
- /* padding-top: 16px; */
-}
-
-.title {
- max-width: 800px;
- color: #ffffff;
- font-size: 160px;
- font-weight: 900;
- line-height: 132px;
- text-transform: uppercase;
- text-shadow:
- 0px 100px 80px rgba(0, 0, 0, 0.07),
- 0px 42px 33px rgba(0, 0, 0, 0.05),
- 0px 22px 18px rgba(0, 0, 0, 0.04),
- 0px 12.5px 10px rgba(0, 0, 0, 0.035),
- 0px 7px 5px rgba(0, 0, 0, 0.03),
- 0px 2.8px 2.2px rgba(0, 0, 0, 0.02);
- transform: translateZ(0);
- /*for older browsers*/
- will-change: transform;
- letter-spacing: -3.2px;
- user-select: none;
-}
-
-.subtitle {
- color: #ffffff;
- font-size: 28px;
- font-weight: 700;
- line-height: 32px;
- margin-top: 24px;
- text-shadow:
- 0px 100px 80px rgba(0, 0, 0, 0.07),
- 0px 42px 33px rgba(0, 0, 0, 0.05),
- 0px 22px 18px rgba(0, 0, 0, 0.04),
- 0px 12.5px 10px rgba(0, 0, 0, 0.035),
- 0px 7px 5px rgba(0, 0, 0, 0.03),
- 0px 2.8px 2.2px rgba(0, 0, 0, 0.02);
- transform: translateZ(0);
- /*for older browsers*/
- will-change: transform;
- margin-bottom: 72px;
-}
-
-.buttonContent {
- display: flex;
- position: relative;
- z-index: 30;
-}
-
-.appLinksContentParallax {
- position: relative;
- z-index: 25;
- width: 100%;
- display: flex;
- max-width: 1240px;
-}
-
-.appLinksContent {
- padding-top: 24px;
- display: flex;
- position: relative;
- z-index: 30;
-}
-
-.googlePlayBtn {
- margin-left: 8px;
-}
-
-.ctaButton {
- user-select: none;
- transition: all 0.15s ease-in-out;
- display: inline-flex;
- align-items: center;
- height: 48px;
- border: none;
- 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;
- padding: 12px 24px;
- font-size: 18px;
- font-weight: 700;
- text-align: center;
- transform: scale3d(1, 1, 1);
- margin-right: 16px;
-}
-
-.ctaButton path {
- fill: #7e1bcc;
-}
-
-.mobileContainer .ctaButton {
- width: 100%;
- display: flex;
- justify-content: center;
- margin-right: 0;
- margin-bottom: 24px;
-}
-
-.ctaButton:hover {
- cursor: pointer;
- transform: scale3d(1.03, 1.03, 1.03);
- box-shadow:
- 0px 0px 1px -2px rgba(133, 129, 153, 0.1),
- 0px 1px 0px -2px #e3e3e3,
- 0px 17px 21px rgba(133, 129, 153, 0.15);
-}
-
-.ctaButton:active {
- cursor: pointer;
- transform: scale3d(0.99, 0.99, 0.99);
- box-shadow:
- 0px 0px 1px -2px rgba(133, 129, 153, 0.1),
- 0px 1px 0px -2px #e3e3e3,
- 0px 17px 21px rgba(133, 129, 153, 0.15);
-}
-
-.ctaMessage {
- margin-right: 8px;
-}
-
-.secondaryCtaMessage {
- margin-left: 12px;
-}
-
-.downloadButton {
- user-select: none;
- transition: all 0.15s ease-in-out;
- display: inline-flex;
- align-items: center;
- height: 48px;
- border: none;
- border-radius: 6px;
- background: none;
- color: #ffffff;
- padding-left: 24px;
- padding-right: 24px;
- font-size: 18px;
- font-weight: 700;
- text-align: center;
- transform: scale3d(1, 1, 1);
- cursor: pointer;
-}
-
-.downloadButton path {
- fill: #ffffff;
-}
-
-.downloadButton:hover {
- transform: scale3d(1.03, 1.03, 1.03);
- background: rgba(255, 255, 255, 0.2);
-}
-
-.downloadButton:active {
- transform: scale3d(0.99, 0.99, 0.99);
- background: rgba(255, 255, 255, 0.1);
-}
-
-.glyphPattern {
- width: 100%;
- position: absolute;
- z-index: 0;
- bottom: 0;
-}
-
-/* Mobile */
-.mobileContainer {
- height: 850px;
- min-height: calc(104vh + 100px);
- position: relative;
- overflow: hidden;
- padding-bottom: 100px;
- width: 100%;
-}
-
-.mobileBG {
- user-select: none;
- min-width: 100%;
- position: absolute;
- top: 0;
- z-index: -1;
-}
-
-.mobileImgBG {
- min-height: calc(134vh + 100px);
- min-width: 100%;
- width: 300%;
- margin: 0px -110% 0px;
- object-fit: cover;
-}
-
-.mobileContainer .content {
- height: 100%;
- width: 100%;
- display: inline-flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 24px;
-
- background-size: auto 140%;
- background-position: 40% 10%;
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%);
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%);
-}
-
-.mobileContainer .content .title {
- letter-spacing: -3.2px;
- color: #ffffff;
- font-size: 72px;
- font-weight: 900;
- line-height: 76px;
- text-align: center;
- text-shadow:
- 0px 100px 80px rgba(0, 0, 0, 0.07),
- 0px 42px 33px rgba(0, 0, 0, 0.05),
- 0px 22px 18px rgba(0, 0, 0, 0.04),
- 0px 12.5px 10px rgba(0, 0, 0, 0.035),
- 0px 7px 5px rgba(0, 0, 0, 0.03),
- 0px 2.8px 2.2px rgba(0, 0, 0, 0.02);
- /* margin-bottom: 24px; */
- user-select: none;
-}
-
-.mobileContainer .content .subtitle {
- color: #ffffff;
- font-size: 28px;
- font-weight: 700;
- line-height: 32px;
- text-align: center;
- margin-top: 32px;
- margin-bottom: 48px;
- text-shadow:
- 0px 100px 80px rgba(0, 0, 0, 0.07),
- 0px 42px 33px rgba(0, 0, 0, 0.05),
- 0px 22px 18px rgba(0, 0, 0, 0.04),
- 0px 12.5px 10px rgba(0, 0, 0, 0.035),
- 0px 7px 5px rgba(0, 0, 0, 0.03),
- 0px 2.8px 2.2px rgba(0, 0, 0, 0.02);
-}
-
-.mobileContainer .glyphPattern {
- width: 100%;
- position: absolute;
- z-index: 0;
- bottom: 0px;
- left: 0;
- transform: scale3d(3, 3, 3);
-}
diff --git a/packages/web/src/public-site/pages/landing-page/components/Hero.tsx b/packages/web/src/public-site/pages/landing-page/components/Hero.tsx
deleted file mode 100644
index d5ff6c28349..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/Hero.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import { useCallback } from 'react'
-
-import { route } from '@audius/common/utils'
-import { IconCaretRight, IconCloudDownload } from '@audius/harmony'
-import cn from 'classnames'
-import { useNavigate } from 'react-router'
-import { Parallax, useParallaxController } from 'react-scroll-parallax'
-
-import HeroBackgroundMobile from 'assets/img/publicSite/HeroBG.webp'
-import HeroBackground from 'assets/img/publicSite/HeroBG@2x.webp'
-import HeroBackgroundXL from 'assets/img/publicSite/HeroBG@3x.webp'
-import HeroForeground from 'assets/img/publicSite/ProductShot1.webp'
-import AppStoreBadge from 'assets/img/publicSite/app-store-badge.svg'
-import GlyphPattern1x from 'assets/img/publicSite/glyph-pattern@1x.png'
-import GlyphPattern2x from 'assets/img/publicSite/glyph-pattern@2x.png'
-import GooglePlayBadge from 'assets/img/publicSite/google-play-badge.svg'
-import { handleClickRoute } from 'public-site/components/handleClickRoute'
-import { getIOSAppLink } from 'utils/appLinks'
-
-import styles from './Hero.module.css'
-
-const { APP_REDIRECT, TRENDING_PAGE, DOWNLOAD_START_LINK } = route
-
-const messages = {
- title: 'Music Done Right',
- subtitle: 'Create the future of music, together.',
- cta: 'Listen Now',
- download: 'Download The App'
-}
-
-type HeroProps = {
- isMobile: boolean
- onImageLoad: () => void
- setRenderPublicSite: (shouldRender: boolean) => void
-}
-
-const iOSDownloadLink = getIOSAppLink()
-
-const Hero = (props: HeroProps) => {
- const parallaxController = useParallaxController()
- const navigate = useNavigate()
- const { onImageLoad, isMobile } = props
- const onImgSet = useCallback(() => {
- if (!isMobile) parallaxController?.update()
- onImageLoad()
- }, [parallaxController, onImageLoad, isMobile])
-
- if (props.isMobile) {
- return (
-
- )
- }
-
- return (
-
- `translate3d(0,${x}px,0)`
- )
- }}
- >
-
-
- {messages.title}
-{messages.subTitle}
-
- {loading ? (
-
-
-
- ) : (
- featuredPlaylists?.map((p) => (
-
-
-
- 
-
- )
-}
-
-export default Hero
diff --git a/packages/web/src/public-site/pages/landing-page/components/PlatformFeatures.module.css b/packages/web/src/public-site/pages/landing-page/components/PlatformFeatures.module.css
deleted file mode 100644
index 6900ddc88cf..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/PlatformFeatures.module.css
+++ /dev/null
@@ -1,239 +0,0 @@
-.container {
- flex-shrink: 0;
- width: 100%;
- display: flex;
- justify-content: center;
- background: linear-gradient(129.23deg, #f3f2f5 4.22%, #fbfbfc 95.97%);
- -webkit-clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
- clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
- padding: 120px 100px;
-}
-
-.content {
- width: 100%;
- max-width: 1240px;
- display: flex;
- flex-direction: column;
-}
-
-.animateTitleContainer {
- overflow: hidden;
- position: relative;
- z-index: 20;
- text-align: center;
- margin-bottom: 48px;
-}
-
-.header {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-:global(#landingPage) .title {
- font-family: 'Avenir Next LT Pro' !important;
-}
-
-.title {
- background: linear-gradient(315deg, #5b23e1 0%, #a22feb 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- font-size: 56px;
- font-weight: 700;
- line-height: 72px;
- text-align: center;
- user-select: none;
- margin-bottom: 12px;
-}
-
-.subTitle {
- color: #6c6780;
- font-size: 24px;
- font-weight: 500;
- line-height: 32px;
- text-align: center;
-}
-
-.body {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- gap: 24px;
-}
-
-.productShot {
- user-select: none;
- flex: 1;
- width: 100%;
- height: 400px;
- object-fit: contain;
- max-width: 100%;
-}
-
-@media (min-width: 1410px) {
- .productShot {
- max-width: 728px;
- }
-}
-
-.features {
- flex: 1;
- display: inline-flex;
- flex-direction: column;
- justify-content: space-between;
- width: 100%;
- gap: 12px;
-}
-
-.feature {
- padding: 24px;
- border-radius: 12px;
- background-color: #ffffff;
- box-shadow: 0 16px 20px 0 rgba(232, 228, 234, 0.5);
- display: inline-flex;
- align-items: center;
- min-width: 430px;
- gap: 24px;
-}
-
-.isMobile.feature {
- min-width: auto;
-}
-
-.featureIconContainer {
- min-width: 52px;
- height: 52px;
- padding: 10px;
- border-radius: 50%;
- border: 1px solid rgba(0, 0, 0, 0.1);
- box-shadow:
- -3.73333px 3.73333px 3.73333px 0px rgba(255, 255, 255, 0.08) inset,
- 3.73333px -3.73333px 3.73333px 0px rgba(96, 21, 155, 0.08) inset,
- 0px 4px 6px -2px rgba(0, 0, 0, 0.15);
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.featureIconContainer path {
- fill: var(--harmony-white);
-}
-
-.featureIconContainer:has(.cartIcon) {
- background: linear-gradient(180deg, #483bff 0%, #3a2fcc 100%);
-}
-
-.featureIconContainer:has(.fanbaseIcon) {
- background: linear-gradient(180deg, #7a25fc 0%, #601dc6 100%);
-}
-
-.featureIconContainer:has(.allTimeIcon) {
- background: linear-gradient(180deg, #ea39f6 0%, #b72dc0 100%);
-}
-
-.featureIconContainer:has(.giftIcon) {
- background: linear-gradient(180deg, #3ed0ff 0%, #32a6cc 100%);
-}
-
-.featureText {
- display: inline-flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: space-between;
-}
-
-.featureTitle {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 18px;
- line-height: 24px;
- font-weight: 700;
-}
-
-.featureDescription {
- font-size: 16px;
- line-height: 24px;
- font-weight: 500;
-}
-
-/* Mobile Styles */
-
-.isMobile.container {
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- background: linear-gradient(129.23deg, #f3f2f5 0%, #fbfbfc 100%);
- -webkit-clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
- clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
- padding: 64px 0 64px;
-}
-
-.isMobile .header {
- margin: 0px;
-}
-
-.isMobile .title {
- font-size: 32px;
- line-height: 40px;
- text-align: center;
- user-select: none;
-}
-
-.isMobile .subTitle {
- font-size: 18px;
- font-weight: 500;
- line-height: 24px;
- text-align: center;
-}
-
-.isMobile .animateTitleContainer {
- margin: 24px 16px 0;
-}
-
-.isMobile .body {
- margin-top: 48px;
- flex-direction: column;
-}
-
-.isMobile .productShot {
- flex: initial;
- height: auto;
- min-height: initial;
- max-width: 100%;
- width: 100%;
- object-fit: contain;
-}
-
-.isMobile .features {
- padding: 32px 16px;
-}
-
-.isMobile .feature {
- display: inline-flex;
- justify-content: center;
- align-content: center;
- border-radius: 12px;
- box-shadow: 0px 16px 20px rgba(232, 228, 234, 0.5);
- background: #ffffff;
- padding: 24px;
-}
-
-.isMobile .featureText {
- width: 100%;
- display: inline-flex;
- flex-direction: column;
-}
-
-.isMobile .featureTitle {
- margin: 8px 0px;
- display: block;
-}
-
-.isMobile .featureDescription {
- font-size: 16px;
- line-height: 24px;
- font-weight: 500;
-}
diff --git a/packages/web/src/public-site/pages/landing-page/components/PlatformFeatures.tsx b/packages/web/src/public-site/pages/landing-page/components/PlatformFeatures.tsx
deleted file mode 100644
index d1d6523eac0..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/PlatformFeatures.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { ReactNode } from 'react'
-
-import { IconAllTime, IconCart, IconUserGroup, IconGift } from '@audius/harmony'
-import cn from 'classnames'
-// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
-import { useSpring, animated } from 'react-spring'
-
-import productShot from 'assets/img/publicSite/ProductShot3.webp'
-import useHasViewed from 'hooks/useHasViewed'
-
-import styles from './PlatformFeatures.module.css'
-const animatedAny = animated as any
-
-const messages = {
- title: ' Empowering Features for Artists',
- subTitle:
- 'Take control of your music with the growing list of artist-centric features on Audius.'
-}
-
-type FeatureProps = {
- title: string
- description: string | ReactNode
- icon: ReactNode
-}
-
-const features: Array
-
- )
- },
- {
- title: 'Grow Your Fanbase',
- description:
- 'With Remix Contests, direct messaging, comments, and more. Audius gives you the tools to build a thriving fan community.',
- icon: (
-
-
- )
- },
- {
- title: 'Sell Your Beats, Stems, & More',
- description:
- 'Take advantage of features like premium download gates, and earn bonus rewards with every sale!',
- icon: (
-
-
- )
- },
- {
- title: 'Earn Token Rewards',
- description:
- 'Earn $AUDIO token rewards by completing achievements or winning weekly competitions!',
- icon: (
-
-
- )
- }
-]
-
-type PlatformFeaturesProps = {
- isMobile: boolean
-}
-
-const Feature = (props: FeatureProps & PlatformFeaturesProps) => {
- return (
-
- {props.icon}
-
- )
-}
-
-const PlatformFeatures = (props: PlatformFeaturesProps) => {
- // Animate in the title and subtitle text
- const [hasViewed, refInView] = useHasViewed(0.8)
-
- const textStyles = useSpring({
- config: { mass: 3, tension: 2000, friction: 500 },
- opacity: hasViewed ? 1 : 0,
- x: hasViewed ? 0 : 150
- })
-
- return (
-
-
- {props.title}
- {props.description}
-
-
- )
-}
-
-export default PlatformFeatures
diff --git a/packages/web/src/public-site/pages/landing-page/components/WhoUsesAudius.module.css b/packages/web/src/public-site/pages/landing-page/components/WhoUsesAudius.module.css
deleted file mode 100644
index d4b0e74c091..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/WhoUsesAudius.module.css
+++ /dev/null
@@ -1,164 +0,0 @@
-.container {
- flex-shrink: 0;
- margin: 320px 0 200px;
- padding-left: 100px;
- padding-right: 100px;
- width: 100%;
- display: flex;
- justify-content: center;
-}
-
-.content {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100%;
- max-width: 1240px;
- position: relative;
-}
-
-.productShot {
- width: 100%;
- max-width: 807px;
-}
-
-:global(#landingPage) .title {
- font-family: 'Avenir Next LT Pro' !important;
-}
-
-.title {
- user-select: none;
- background: linear-gradient(315deg, #5b23e1 0%, #a22feb 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- font-size: 55px;
- font-weight: 700;
- line-height: 72px;
- width: 100%;
- text-align: center;
- margin-bottom: 24px;
-}
-
-.subTitle {
- color: #6c6780;
- font-size: 24px;
- font-weight: 500;
- line-height: 32px;
- width: 100%;
- text-align: center;
- margin-bottom: 36px;
-}
-
-.cardMoveContainer {
- margin-bottom: 32px;
- user-select: none;
-}
-
-.artistsContainer {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- gap: 24px;
-}
-
-/* Artist Component */
-
-.artistContainer {
- display: inline-flex;
- flex-direction: column;
-}
-
-.artistImageWrapper {
- border: 2px solid var(--harmony-border-strong);
- border-radius: 50%;
- height: 192px;
- width: 192px;
- overflow: hidden;
- cursor: pointer;
-}
-
-.artistImageWrapper:hover {
- opacity: 0.85;
- transform: opacity var(--harmony-quick);
-}
-
-.artistImage {
- height: 100%;
- width: 100%;
- stroke-width: 2px;
- stroke: #fff;
-}
-
-.artistName {
- color: #6c6780;
- font-size: 16px;
- font-weight: 500;
- line-height: 25px;
- text-align: center;
- margin: 18px auto 0px;
- cursor: pointer;
-}
-
-.byArtistName {
- color: #ffffff;
- font-size: 18px;
- font-weight: bold;
- width: 100%;
- text-align: right;
- margin-top: 4px;
-}
-
-/* Mobile */
-
-.mobileContainer {
- overflow: hidden;
- position: relative;
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- margin: 72px 0 56px;
- padding: 0 16px;
-}
-
-.mobileContainer .title {
- z-index: 1;
- font-size: 32px;
- line-height: 40px;
- text-align: center;
-}
-
-.mobileContainer .subTitle {
- z-index: 1;
- font-size: 18px;
- font-weight: 500;
- line-height: 24px;
- text-align: center;
- margin-bottom: 16px;
-}
-
-.mobileContainer .artistsContainer {
- margin: unset;
- max-width: 400px;
- z-index: 1;
- display: inline-flex;
- align-items: center;
- flex-wrap: wrap;
- justify-content: center;
- gap: 24px;
- margin-top: 36px;
-}
-
-.mobileContainer .artistImageWrapper {
- width: 120px;
- height: 120px;
- margin-bottom: 8px;
-}
-
-.mobileContainer .artistName {
- font-size: 16px;
- font-weight: 500;
- line-height: 19px;
- text-align: center;
- margin: 0px auto;
-}
diff --git a/packages/web/src/public-site/pages/landing-page/components/WhoUsesAudius.tsx b/packages/web/src/public-site/pages/landing-page/components/WhoUsesAudius.tsx
deleted file mode 100644
index f926c08acb4..00000000000
--- a/packages/web/src/public-site/pages/landing-page/components/WhoUsesAudius.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { useCallback } from 'react'
-
-import { useSpring, animated } from '@react-spring/web'
-
-import artistAluna from 'assets/img/publicSite/Artist-Aluna.webp'
-import artistDeadmau5 from 'assets/img/publicSite/Artist-Deadmau5.webp'
-import artistDiplo from 'assets/img/publicSite/Artist-Diplo.webp'
-import artistKennyBeats from 'assets/img/publicSite/Artist-Kenny-Beats.webp'
-import artistLoloZouai from 'assets/img/publicSite/Artist-Lolo-Zouai.webp'
-import artistMattOX from 'assets/img/publicSite/Artist-Matt-OX.webp'
-import artistRezz from 'assets/img/publicSite/Artist-Rezz.webp'
-import artistSkrillex from 'assets/img/publicSite/Artist-Skrillex.webp'
-import artistZedd from 'assets/img/publicSite/Artist-Zedd.webp'
-import useHasViewed from 'hooks/useHasViewed'
-
-import styles from './WhoUsesAudius.module.css'
-
-const messages = {
- title: 'Who Uses Audius?',
- subtitle:
- 'Thousands of artists across dozens of genres—including electronic, hip-hop, and more—use Audius to forge unparalleled connections with fans.'
-}
-
-type AristProps = {
- name: string
- handle: string
- imageUrl: string
- goToArtist: (handle: string) => void
-}
-
-const Artist = (props: AristProps) => {
- return (
-
- {!props.isMobile ? (
-
-
- `translate3d(0,${x}px,0)`
- )
- }}
- >
-
-
- ) : null}
-
-
- {messages.title}
-{messages.subTitle}
-
-
- {props.isMobile ? (
-
-
- `translate3d(0,${x}px,0)`
- )
- }}
- >
-
-
- ) : null}
-
-
- {messages.title}
-{messages.subTitle}
-
- {features.map((feature) => (
-
- props.goToArtist(props.handle)}
- >
-
- )
-}
-
-const MobileArtist = (props: AristProps) => {
- return (
-
-
-
-
-
- {props.name}
- props.goToArtist(props.handle)}
- >
-
- )
-}
-
-const artists = [
- {
- name: 'deadmau5',
- handle: 'deadmau5',
- imageUrl: artistDeadmau5
- },
- {
- name: 'Skrillex',
- handle: 'skrillex',
- imageUrl: artistSkrillex
- },
- {
- name: 'Zedd',
- handle: 'zedd',
- imageUrl: artistZedd
- },
- {
- name: 'Kenny Beats',
- handle: 'kennybeats',
- imageUrl: artistKennyBeats
- },
- {
- name: 'Matt OX',
- handle: 'mattox',
- imageUrl: artistMattOX
- },
- {
- name: 'Aluna',
- handle: 'alunaaa',
- imageUrl: artistAluna
- },
- {
- name: 'Diplo',
- handle: 'diplo',
- imageUrl: artistDiplo
- },
- {
- name: 'Lolo Zouai',
- handle: 'lolozouai',
- imageUrl: artistLoloZouai
- },
- {
- name: 'Rezz',
- handle: 'officialrezz',
- imageUrl: artistRezz
- }
-]
-
-type WhoUsesAudiusProps = {
- isMobile: boolean
- setRenderPublicSite?: (shouldRender: boolean) => void
-}
-
-const WhoUsesAudius = (props: WhoUsesAudiusProps) => {
- // Animate in the title and subtitle text
- const [hasViewed, refInView] = useHasViewed()
- const titleStyles = useSpring({
- config: { mass: 3, tension: 2000, friction: 500 },
- opacity: hasViewed ? 1 : 0,
- x: hasViewed ? 0 : 120
- })
-
- const goToArtist = useCallback((handle: string) => {
- window.open(`https://audius.co/${handle}`, '_blank')
- }, [])
-
- if (props.isMobile) {
- return (
-
-
-
- {props.name}
-
-
- )
- }
-
- return (
-
-
-
- `translate3d(0,${x}px,0)`
- ),
- width: '100%'
- }}
- >
-
-
- {messages.title}
-{messages.subtitle}
-
- {artists.map((artist, i) => (
-
-
-
- )
-}
-
-export default WhoUsesAudius
- `translate3d(0,${x}px,0)`
- ),
- width: '100%'
- }}
- >
-
-
- {messages.title}
-{messages.subtitle}
-
- {artists.map((artist) => (
-
-