diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
index 240bd24255..a0a84f8275 100644
--- a/packages/atlas/atlas.config.yml
+++ b/packages/atlas/atlas.config.yml
@@ -9,7 +9,7 @@ general:
appOgImgPath: '/og-image.webp' # Path to the open graph image - used in open graph meta tags in HTML
pioneerMemberUrlPrefix: 'https://dao.joystream.org/#/members' # URL prefix for Pioneer member profile page - used to link to member details
joystreamLandingPageUrl: 'https://www.joystream.org' # URL for Joystream landing page - used in the footer and in "Learn more" links
- joystreamDiscordUrl: 'https://discord.gg/DE9UN3YpRP' # URL for Joystream Discord - used for support when errors occur
+ joystreamDiscordUrl: 'https://discord.gg/joystream' # URL for Joystream Discord - used for support when errors occur
appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport`
crtMaintenanceMode: false
storage:
diff --git a/packages/atlas/src/assets/images/ypp-hero/crt-card-hero.webp b/packages/atlas/src/assets/images/ypp-hero/crt-card-hero.webp
new file mode 100644
index 0000000000..7f1ebdd3bd
Binary files /dev/null and b/packages/atlas/src/assets/images/ypp-hero/crt-card-hero.webp differ
diff --git a/packages/atlas/src/assets/images/ypp-hero/crt-dashboard-hero.webp b/packages/atlas/src/assets/images/ypp-hero/crt-dashboard-hero.webp
new file mode 100644
index 0000000000..ef40901e61
Binary files /dev/null and b/packages/atlas/src/assets/images/ypp-hero/crt-dashboard-hero.webp differ
diff --git a/packages/atlas/src/assets/images/ypp-hero/crt-payments-hero.webp b/packages/atlas/src/assets/images/ypp-hero/crt-payments-hero.webp
new file mode 100644
index 0000000000..087f85492a
Binary files /dev/null and b/packages/atlas/src/assets/images/ypp-hero/crt-payments-hero.webp differ
diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts b/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts
index e1bb18e66c..0662412831 100644
--- a/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts
+++ b/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts
@@ -65,8 +65,10 @@ export const StyledLimitedWidthContainerHero = styled.div<{ centerText?: boolean
overflow: hidden;
border-radius: 24px;
padding: ${sizes(4)};
+ margin-top: ${sizes(6)};
${media.md} {
+ margin-top: 0;
padding: ${sizes(8)};
border-radius: 32px;
}
diff --git a/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx b/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx
index f1ce9c51c7..b2efb94bc4 100644
--- a/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx
+++ b/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx
@@ -8,7 +8,7 @@ import earning_yt from '@/assets/images/earnings/earning-yt.webp'
import { FlexBox } from '@/components/FlexBox'
import { FlexGridItem, GridItem } from '@/components/LayoutGrid'
import { Text } from '@/components/Text'
-import { Button, TextButton } from '@/components/_buttons/Button'
+import { TextButton } from '@/components/_buttons/Button'
import { atlasConfig } from '@/config'
import { useMediaMatch } from '@/hooks/useMediaMatch'
import { cVar, media, sizes } from '@/styles'
@@ -44,7 +44,7 @@ const earningsOptions = [
]
export const CreatorOpportunities = () => {
- const xsMatch = useMediaMatch('xs')
+ // const xsMatch = useMediaMatch('xs')
const mdMatch = useMediaMatch('md')
const smMatch = useMediaMatch('sm')
const [titleVariant, subtitleVariant] = useSectionTextVariants()
@@ -107,15 +107,20 @@ export const CreatorOpportunities = () => {
colSpan={{ base: 12 }}
colStart={{ base: 1 }}
>
-
-
-
-
- } iconPlacement="right">
+ {/**/}
+ {/* */}
+ {/* */}
+ {/**/}
+ }
+ iconPlacement="right"
+ >
Connect with us on Discord.
diff --git a/packages/atlas/src/views/global/YppLandingView/sections/ViewerOpportunities.tsx b/packages/atlas/src/views/global/YppLandingView/sections/ViewerOpportunities.tsx
index 4b606e32c3..e1b2cbda37 100644
--- a/packages/atlas/src/views/global/YppLandingView/sections/ViewerOpportunities.tsx
+++ b/packages/atlas/src/views/global/YppLandingView/sections/ViewerOpportunities.tsx
@@ -40,7 +40,7 @@ const viewerEarningsOptions = [
title: 'Trade NFTs',
subtitle: (
<>
- Own and trade collectibles from wide variety of channels. Learn more
+ Own and trade collectibles from wide variety of channels. {/*Learn more*/}
>
),
image: viewer_earnings_nft,
@@ -110,7 +110,12 @@ export const ViewerOpportunities = () => {
colSpan={{ base: 12, sm: 10 }}
colStart={{ base: 1, sm: 2 }}
>
- } iconPlacement="right">
+ }
+ iconPlacement="right"
+ >
Connect with us on Discord.
diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.styles.ts b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.styles.ts
index 8217b53b7e..300bfabafb 100644
--- a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.styles.ts
+++ b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.styles.ts
@@ -36,16 +36,22 @@ export const WidgetsContainer = styled(FlexBox)`
export const ImagesContainer = styled(FlexBox)`
position: relative;
+ margin: 40px 0;
+
+ ${media.sm} {
+ margin: 80px 0;
+ }
`
export const RightImage = styled.img`
position: absolute;
width: 60%;
- max-width: 60%;
+ max-height: 420px;
height: auto;
+ object-fit: contain;
display: block;
- left: 5%;
- top: 25%;
+ left: 10%;
+ top: 10%;
z-index: 10;
border-radius: ${cVar('radiusMedium')};
`
@@ -53,15 +59,31 @@ export const RightImage = styled.img`
export const LeftImage = styled.img`
position: absolute;
width: 60%;
- max-width: 60%;
+ max-height: 420px;
height: auto;
+ object-fit: contain;
display: block;
- right: 5%;
- top: 25%;
+ right: 10%;
+ top: 10%;
z-index: 10;
border-radius: ${cVar('radiusMedium')};
`
+export const FrontImage = styled.img`
+ max-height: 520px;
+ width: 90%;
+ height: auto;
+ object-fit: contain;
+ display: block;
+ border-radius: ${cVar('radiusMedium')};
+ z-index: 20;
+ ${imageShadow}
+
+ ${media.xs} {
+ width: 70%;
+ }
+`
+
export const LogosContainer = styled.div`
display: flex;
align-items: center;
@@ -85,17 +107,6 @@ export const SelectDifferentChannelButton = styled.button`
}
`
-export const FrontImage = styled.img`
- width: 70%;
- max-width: 70%;
- height: auto;
- display: block;
- border-radius: ${cVar('radiusMedium')};
- margin-top: 10%;
- z-index: 20;
- ${imageShadow}
-`
-
export const BackImage = styled.img`
position: absolute;
width: 80%;
diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
index b4adbc3148..0723de6541 100644
--- a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
+++ b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
@@ -3,14 +3,15 @@ import { CSSTransition, SwitchTransition } from 'react-transition-group'
import useResizeObserver from 'use-resize-observer'
import { useMostPaidChannels } from '@/api/hooks/channel'
-import { SvgActionChevronR, SvgActionNewTab } from '@/assets/icons'
-import yt from '@/assets/images/ypp-hero/yt.webp'
+import { SvgActionChevronR } from '@/assets/icons'
+import crt_card from '@/assets/images/ypp-hero/crt-card-hero.webp'
+import crt_dashboard from '@/assets/images/ypp-hero/crt-dashboard-hero.webp'
+import payments from '@/assets/images/ypp-hero/crt-payments-hero.webp'
import { AppLogo } from '@/components/AppLogo'
-import { FlexBox } from '@/components/FlexBox'
-import { GlassDetailsWidget } from '@/components/GlassDetailsWidget'
import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
import { Text } from '@/components/Text'
-import { Button, TextButton } from '@/components/_buttons/Button'
+import { Button } from '@/components/_buttons/Button'
+import { GoogleButton } from '@/components/_buttons/GoogleButton'
import { PaidChannelCard } from '@/components/_channel/ChannelCard'
import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
import { atlasConfig } from '@/config'
@@ -25,8 +26,8 @@ import {
LeftImage,
LogosContainer,
RightImage,
+ SelectDifferentChannelButton,
StyledInfiniteCarousel,
- WidgetsContainer,
} from './YppHero.styles'
import {
@@ -131,14 +132,15 @@ export const YppHero: FC = ({
Go to dashboard
) : (
-
-
-
-
+ //
+ //
+ //
+ //
+
)
) : (
@@ -150,65 +152,84 @@ export const YppHero: FC = ({
- }>
- Earn as viewer
-
+ {/*}>*/}
+ {/* Earn as viewer*/}
+ {/**/}
+
+ {hasAnotherUnsyncedChannel && selectedChannelTitle && (
+ <>
+ Your channel "{selectedChannelTitle}" is already part of the YouTube Partner Program.{' '}
+
+ Select a different channel
+ {' '}
+ to apply again.
+ >
+ )}
+ {yppAtlasStatus !== 'ypp-signed' && 'It takes under 1 minute and is 100% free.'}
+
-
-
-
-
- Creator Earnings
-
-
-
-
- 204M
-
- }
- />
-
- 204M
-
- }
- />
-
- 204M
-
- }
- />
-
-
-
+ {/**/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* Creator Earnings*/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* 204M*/}
+ {/* */}
+ {/* }*/}
+ {/* />*/}
+ {/* */}
+ {/* 204M*/}
+ {/* */}
+ {/* }*/}
+ {/* />*/}
+ {/* */}
+ {/* 204M*/}
+ {/* */}
+ {/* }*/}
+ {/* />*/}
+ {/* */}
+ {/* */}
+ {/**/}
- {xsMatch && (
-
-
-
-
-
- )}
+
+
+ {xsMatch && (
+ <>
+
+
+ >
+ )}
+
{items && items.length >= 7 && (
{
justifyContent="end"
>
- } iconPlacement="right">
- Learn more
-
+ {/*} iconPlacement="right">*/}
+ {/* Learn more*/}
+ {/**/}
+
Payments are made in {atlasConfig.joystream.tokenTicker} tokens