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