diff --git a/packages/atlas/src/assets/roadmap/community.svg b/packages/atlas/src/assets/roadmap/community.svg new file mode 100644 index 0000000000..512c038071 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/community.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/content.svg b/packages/atlas/src/assets/roadmap/content.svg new file mode 100644 index 0000000000..fc74bb930d --- /dev/null +++ b/packages/atlas/src/assets/roadmap/content.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/creator-tokens.svg b/packages/atlas/src/assets/roadmap/creator-tokens.svg new file mode 100644 index 0000000000..bd2e830cca --- /dev/null +++ b/packages/atlas/src/assets/roadmap/creator-tokens.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/dollar-sign.svg b/packages/atlas/src/assets/roadmap/dollar-sign.svg new file mode 100644 index 0000000000..d130cb8c47 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/dollar-sign.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/gear.svg b/packages/atlas/src/assets/roadmap/gear.svg new file mode 100644 index 0000000000..505f2ef3b8 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/gear.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 1 staking module.svg b/packages/atlas/src/assets/roadmap/icon 1 staking module.svg new file mode 100644 index 0000000000..a55c4efdb2 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 1 staking module.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 10 content delivery improvements.svg b/packages/atlas/src/assets/roadmap/icon 10 content delivery improvements.svg new file mode 100644 index 0000000000..51c24241c4 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 10 content delivery improvements.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 11 gleev recommended content V1.svg b/packages/atlas/src/assets/roadmap/icon 11 gleev recommended content V1.svg new file mode 100644 index 0000000000..6743a67415 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 11 gleev recommended content V1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 12 js project overview dashboard.svg b/packages/atlas/src/assets/roadmap/icon 12 js project overview dashboard.svg new file mode 100644 index 0000000000..e41956e491 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 12 js project overview dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 13 subscan block explorer improvements.svg b/packages/atlas/src/assets/roadmap/icon 13 subscan block explorer improvements.svg new file mode 100644 index 0000000000..926792e680 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 13 subscan block explorer improvements.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 14 pioneer financials page.svg b/packages/atlas/src/assets/roadmap/icon 14 pioneer financials page.svg new file mode 100644 index 0000000000..cc562b113e --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 14 pioneer financials page.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 15 content curator tooling.svg b/packages/atlas/src/assets/roadmap/icon 15 content curator tooling.svg new file mode 100644 index 0000000000..75674ebb59 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 15 content curator tooling.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 16 wallet implementations.svg b/packages/atlas/src/assets/roadmap/icon 16 wallet implementations.svg new file mode 100644 index 0000000000..07081b1533 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 16 wallet implementations.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 17 automated thumbnail generation.svg b/packages/atlas/src/assets/roadmap/icon 17 automated thumbnail generation.svg new file mode 100644 index 0000000000..2b9ed2735e --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 17 automated thumbnail generation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 18 pioneer forum & proposal label system.svg b/packages/atlas/src/assets/roadmap/icon 18 pioneer forum & proposal label system.svg new file mode 100644 index 0000000000..ffb19eaf26 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 18 pioneer forum & proposal label system.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 19 governance tooling.svg b/packages/atlas/src/assets/roadmap/icon 19 governance tooling.svg new file mode 100644 index 0000000000..5813e55f43 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 19 governance tooling.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 2 more exchanges.svg b/packages/atlas/src/assets/roadmap/icon 2 more exchanges.svg new file mode 100644 index 0000000000..cf25ec31b5 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 2 more exchanges.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 20 js cli improvements.svg b/packages/atlas/src/assets/roadmap/icon 20 js cli improvements.svg new file mode 100644 index 0000000000..aaf968ef97 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 20 js cli improvements.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 21 dApp OperatorDeveloper Grants & Support.svg b/packages/atlas/src/assets/roadmap/icon 21 dApp OperatorDeveloper Grants & Support.svg new file mode 100644 index 0000000000..d0e6dd55ec --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 21 dApp OperatorDeveloper Grants & Support.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 22 Non-video Content Uploads.svg b/packages/atlas/src/assets/roadmap/icon 22 Non-video Content Uploads.svg new file mode 100644 index 0000000000..cbdd086f37 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 22 Non-video Content Uploads.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 23 Premium Video Comments & Tips.svg b/packages/atlas/src/assets/roadmap/icon 23 Premium Video Comments & Tips.svg new file mode 100644 index 0000000000..1acf46a721 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 23 Premium Video Comments & Tips.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 24 DAO Creator Channel Payout tooling improvements.svg b/packages/atlas/src/assets/roadmap/icon 24 DAO Creator Channel Payout tooling improvements.svg new file mode 100644 index 0000000000..1dfadca070 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 24 DAO Creator Channel Payout tooling improvements.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 25 Pioneer Working Group Management Module.svg b/packages/atlas/src/assets/roadmap/icon 25 Pioneer Working Group Management Module.svg new file mode 100644 index 0000000000..7b177b6aa0 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 25 Pioneer Working Group Management Module.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 26 Joystream Ethereum Bridging Solution.svg b/packages/atlas/src/assets/roadmap/icon 26 Joystream Ethereum Bridging Solution.svg new file mode 100644 index 0000000000..36aa296104 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 26 Joystream Ethereum Bridging Solution.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 27 bounties module.svg b/packages/atlas/src/assets/roadmap/icon 27 bounties module.svg new file mode 100644 index 0000000000..98d8eaefdb --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 27 bounties module.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 28 Smartphone App for AtlasGleev.svg b/packages/atlas/src/assets/roadmap/icon 28 Smartphone App for AtlasGleev.svg new file mode 100644 index 0000000000..10391affcf --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 28 Smartphone App for AtlasGleev.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 29 NFT Improvements - V1.svg b/packages/atlas/src/assets/roadmap/icon 29 NFT Improvements - V1.svg new file mode 100644 index 0000000000..996393f656 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 29 NFT Improvements - V1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 3 content marketing.svg b/packages/atlas/src/assets/roadmap/icon 3 content marketing.svg new file mode 100644 index 0000000000..26e21bb465 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 3 content marketing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 30 Staking Nomination Pools.svg b/packages/atlas/src/assets/roadmap/icon 30 Staking Nomination Pools.svg new file mode 100644 index 0000000000..67b71fa2b3 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 30 Staking Nomination Pools.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 31 Joystream SDK.svg b/packages/atlas/src/assets/roadmap/icon 31 Joystream SDK.svg new file mode 100644 index 0000000000..b44c50a950 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 31 Joystream SDK.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 32 Video Communities No-tech App creation.svg b/packages/atlas/src/assets/roadmap/icon 32 Video Communities No-tech App creation.svg new file mode 100644 index 0000000000..fe816ceb56 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 32 Video Communities No-tech App creation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 33 Premium Content Gating Features.svg b/packages/atlas/src/assets/roadmap/icon 33 Premium Content Gating Features.svg new file mode 100644 index 0000000000..f427ef51dc --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 33 Premium Content Gating Features.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 34 Multiple Video Resolutions.svg b/packages/atlas/src/assets/roadmap/icon 34 Multiple Video Resolutions.svg new file mode 100644 index 0000000000..76760bac27 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 34 Multiple Video Resolutions.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 35 Metamask Snap Development.svg b/packages/atlas/src/assets/roadmap/icon 35 Metamask Snap Development.svg new file mode 100644 index 0000000000..a8f67ea5a9 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 35 Metamask Snap Development.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 4 js discord tip bot.svg b/packages/atlas/src/assets/roadmap/icon 4 js discord tip bot.svg new file mode 100644 index 0000000000..83ef1fa798 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 4 js discord tip bot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 5 stablecoin treasury.svg b/packages/atlas/src/assets/roadmap/icon 5 stablecoin treasury.svg new file mode 100644 index 0000000000..818130a78b --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 5 stablecoin treasury.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 6 bounties program.svg b/packages/atlas/src/assets/roadmap/icon 6 bounties program.svg new file mode 100644 index 0000000000..9f70df7fc8 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 6 bounties program.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 7 creator ambassador program.svg b/packages/atlas/src/assets/roadmap/icon 7 creator ambassador program.svg new file mode 100644 index 0000000000..35dd1c7bd4 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 7 creator ambassador program.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 8 mobile design for pioneer.svg b/packages/atlas/src/assets/roadmap/icon 8 mobile design for pioneer.svg new file mode 100644 index 0000000000..f3d2b64507 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 8 mobile design for pioneer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/icon 9 pioneer email notifications.svg b/packages/atlas/src/assets/roadmap/icon 9 pioneer email notifications.svg new file mode 100644 index 0000000000..2b0ae9b158 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/icon 9 pioneer email notifications.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/list.svg b/packages/atlas/src/assets/roadmap/list.svg new file mode 100644 index 0000000000..5f069c76df --- /dev/null +++ b/packages/atlas/src/assets/roadmap/list.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/lock.svg b/packages/atlas/src/assets/roadmap/lock.svg new file mode 100644 index 0000000000..e1d4659721 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/lock.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/monitor.svg b/packages/atlas/src/assets/roadmap/monitor.svg new file mode 100644 index 0000000000..cbc7dd0203 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/monitor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/play.svg b/packages/atlas/src/assets/roadmap/play.svg new file mode 100644 index 0000000000..c06fff11b4 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/play.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/search.svg b/packages/atlas/src/assets/roadmap/search.svg new file mode 100644 index 0000000000..48c49b93f3 --- /dev/null +++ b/packages/atlas/src/assets/roadmap/search.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/atlas/src/assets/roadmap/visibility.svg b/packages/atlas/src/assets/roadmap/visibility.svg new file mode 100644 index 0000000000..e5dc35868f --- /dev/null +++ b/packages/atlas/src/assets/roadmap/visibility.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/atlas/src/components/AnimatedTimeline/AnimatedTimeline.tsx b/packages/atlas/src/components/AnimatedTimeline/AnimatedTimeline.tsx new file mode 100644 index 0000000000..79a888725f --- /dev/null +++ b/packages/atlas/src/components/AnimatedTimeline/AnimatedTimeline.tsx @@ -0,0 +1,712 @@ +import styled from '@emotion/styled' +import { useEffect, useRef, useState } from 'react' + +import { Text } from '@/components/Text' +import { Button } from '@/components/_buttons/Button' +import { DialogModal } from '@/components/_overlays/DialogModal' +import { useMediaMatch } from '@/hooks/useMediaMatch' +import { cVar } from '@/styles' +import { isMobile } from '@/utils/browser' + +import { iconMap } from './iconMap' + +export let offset = 300 +const PANEL_HIGHLIGHT_OFFSET = 60 + +type Milestone = { + icon: string + title: string + content: string + generalIndex?: number +} + +export type QuartersData = { + year: string + id: string + deliveryMilestones: Milestone[] +} + +type QuarterPanelProps = { + data: { quarters: QuartersData[] } +} + +function QuarterPanel({ data }: QuarterPanelProps) { + const [activeItem, setActiveItem] = useState(0) + const [activeText, setActiveText] = useState(0) + const [isNextItemActive, setIsNextItemActive] = useState(false) + const [dotActiveState, setDotActiveState] = useState(false) + const smMatch = useMediaMatch('sm') + const [modalData, setModalData] = useState({ + isOpen: false, + content: '', + title: '', + }) + + if (isMobile()) { + offset = 200 + } else { + offset = 300 + } + + const activeItemsData = useRef<[boolean, boolean, number]>([false, false, 0]) + const activeTextIndex = useRef(0) + + useEffect(() => { + const handleScroll = () => { + const timelineItems = document.querySelectorAll('.QuarterPanel__submain') + const scroll = window.scrollY + const MOVING_CIRCLE_HEIGHT = 24 + timelineItems.forEach((item, index) => { + const itemTop = item.offsetTop + const itemHight = item.offsetHeight + if (index === 0 && scroll < itemTop - offset) { + activeItemsData.current = [false, false, activeItemsData.current[2]] + } else if (index === timelineItems.length - 1 && scroll > itemTop - offset + itemHight - MOVING_CIRCLE_HEIGHT) { + activeItemsData.current = [false, false, activeItemsData.current[2]] + } else if (scroll > itemTop - offset) { + if (timelineItems.length - 1 > index) { + if (timelineItems[index + 1].offsetTop - offset - PANEL_HIGHLIGHT_OFFSET < scroll) { + activeItemsData.current = [true, activeItemsData.current[1], index] + } + + if (timelineItems[index + 1].offsetTop - offset - PANEL_HIGHLIGHT_OFFSET > scroll) { + activeItemsData.current = [false, activeItemsData.current[1], index] + } + } + + activeItemsData.current = [activeItemsData.current[0], true, index] + } + }) + + const timelineText = document.querySelectorAll('.QuarterPanel__main__rigth') + timelineText.forEach((item, index) => { + const itemTop = item.offsetTop + if (scroll > itemTop - offset) { + activeTextIndex.current = index + } + }) + + setIsNextItemActive(activeItemsData.current[0]) + setDotActiveState(activeItemsData.current[1]) + setActiveItem(activeItemsData.current[2]) + setActiveText(activeTextIndex.current) + + if ( + scroll > timelineText[activeText].offsetTop + timelineText[activeText].offsetHeight - offset - 200 && + activeText < timelineText.length - 2 + ) { + const opacity = + scroll - timelineText[activeText].offsetTop - timelineText[activeText].offsetHeight - 200 - offset + + timelineText[activeText].style.opacity = String(-opacity / 100 - 9) + } else { + timelineText[activeText].style.opacity = String(1) + } + + if (activeText === timelineText.length - 1) timelineText[activeText].style.opacity = String(0) + } + handleScroll() + window.addEventListener('scroll', handleScroll) + return () => window.removeEventListener('scroll', handleScroll) + }, [activeText]) + + const numberOfItems = data.quarters.reduce((acc, curr) => { + return acc + curr.deliveryMilestones.length + }, 0) + + const isPanelAndRelatedActive = (milestone: Milestone) => + (milestone?.generalIndex === activeItem && dotActiveState) || + (activeItem === 0 && !dotActiveState && milestone?.generalIndex === 0) + + const isPanelActive = (allMilestones: Milestone[], milestoneIndex: number, currentMilestone: Milestone) => + (isPanelAndRelatedActive(currentMilestone) && !isNextItemActive) || + (isPanelAndRelatedActive(allMilestones[milestoneIndex - 1]) && isNextItemActive) + + const shouldMilestoneContentBeTruncated = (milestone: Milestone) => milestone.content.length > 100 && isMobile() + + return ( + + {data.quarters.map((res, index) => { + return ( +
+
+
+
{res.year}
+
{res.id}
+
+
+
+ {res.deliveryMilestones.map((milestone, deliveryMilestoneIndex) => { + return ( +
+
+
+
+
+ +
+
+
+ Mileston icon +
+ {/*
*/} + {/* /!**!/*/} + {/* /!* getLink(milestone.generalIndex)}*!/*/} + {/* /!* />*!/*/} + {/* /!**!/*/} + {/*
*/} +
+ + {milestone.title} + + + {smMatch ? milestone.content : milestone.content.slice(0, 100) + '...'} + + {shouldMilestoneContentBeTruncated(milestone) ? ( + + ) : null} +
+
+ ) + })} +
+
+ ) + })} +
+
+
+
+
+
+
+
+
+
+
+
+
+
= 0 && !dotActiveState), + })} + > + + More plans + +
+
+
+ setModalData({ isOpen: false, title: '', content: '' }), + }} + > + + {modalData.title} + + + {modalData.content} + + + + ) +} + +export default function cn(def: string, args?: Record) { + let classes = `${def}` + const entries = Object.entries(args ?? {}) + + entries.forEach(([key, value]) => { + if (value) { + classes += ` ${key}` + } + }) + + return classes +} + +const Box = styled.div` + margin: 100px 0; + + .QuarterPanel__submain { + display: grid; + flex-direction: column; + gap: 30px; + grid-gap: 30px; + grid-template-columns: 76px 712px; + + &__bottom { + display: grid; + flex-direction: column; + gap: 30px; + grid-gap: 8px; + grid-template-columns: 76px 712px; + } + + @media (max-width: 1200px) { + grid-template-columns: 76px 550px; + + &__bottom { + grid-template-columns: 76px 550px; + } + } + + @media (max-width: 992px) { + grid-gap: 30px; + grid-template-columns: 40px 540px; + + &__bottom { + width: 475px; + grid-template-columns: 40px 540px; + } + } + + @media (max-width: 768px) { + width: 432px; + gap: 0; + grid-template-columns: 40px auto; + + &__bottom { + width: 432px; + grid-template-columns: 40px auto; + } + } + + @media (max-width: 768px) { + width: auto; + + &__bottom { + width: auto; + } + } + } + + .QuarterPanel__main { + display: grid; + flex-direction: column; + width: 1030px; + gap: 30px; + grid-gap: 30px; + grid-template-columns: 182px 818px; + + &__rigth { + position: relative; + display: flex; + align-items: end; + flex-direction: column; + width: 182px; + margin-bottom: -100px; + text-align: right; + } + + &__title { + position: sticky; + top: 300px; + align-items: end; + flex-direction: column; + text-align: right; + opacity: 0.4; + transition: opacity 0.3s ease-in-out; + + &--active { + opacity: 1; + } + + &--last { + margin-bottom: 0; + } + } + + &__subtitle { + position: relative; + width: 160px; + height: 48px; + font-size: 40px; + text-align: right; + } + + &__quarters { + position: relative; + font-size: 32px; + color: ${cVar('colorText')}; + } + + &__timeline { + position: relative; + display: flex; + align-items: center; + flex-direction: column; + + &__bottom { + display: flex; + align-items: center; + flex-direction: column; + } + } + + &__line { + &__dotbottom { + position: absolute; + bottom: 0; + width: 24px; + height: 24px; + min-height: 24px; + background-color: silver; + border-radius: 50%; + + &--active { + background-color: ${cVar('colorBackgroundPrimary')}; + } + } + + &__dot { + width: 24px; + height: 24px; + background-color: ${cVar('colorBackground')}; + border-radius: 50%; + + &__loading { + width: 24px; + height: 24px; + background: ${cVar('colorBackgroundPrimary')}; + border-radius: 50%; + } + + &--active { + position: fixed; + top: 300px; + z-index: 2; + width: 24px !important; + background: ${cVar('colorBackgroundPrimary')}; + } + + &--hide { + opacity: 0; + } + + &--stick { + position: absolute; + top: 0; + background: ${cVar('colorBackgroundPrimary')}; + } + + &--last { + width: 4px; + } + } + + &__line { + position: absolute; + right: 0; + left: 0; + width: 4px; + height: 100%; + margin: 0 auto; + background-color: ${cVar('colorBackground')}; + + &__bottom { + top: 1px; + left: 10px; + width: 4px; + height: 100%; + margin-top: -28px; + background-color: purple; + } + } + } + + &__panel__loading { + width: 500px; + height: 324px; + padding: 24px; + background: ${cVar('colorBackground')}; + border-radius: 4px; + gap: 16px; + } + + &__panel { + width: 712px; + margin-bottom: 48px; + padding: 24px; + background: ${cVar('colorBackgroundMutedAlpha')}; + border-radius: 4px; + opacity: 0.4; + + &--active { + opacity: 1; + } + + &--laster { + margin-bottom: 0; + } + + &__bottom { + width: 500px; + padding: 24px; + background: red; + border-radius: 4px; + } + } + + &__underline { + position: relative; + display: inline-block; + text-decoration: underline; + cursor: pointer; + } + + &__link { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(2, 1fr); + } + + &__playIcon { + display: inherit; + align-items: center; + width: 48px; + height: 48px; + background-color: #dee3e9; + border: solid 1px #a3c3f230; + border-radius: 50%; + justify-items: center; + + &--active { + background-color: #4038ff26; + } + } + @media (max-width: 1200px) { + width: 818px; + grid-template-columns: 132px 656px; + + &__rigth { + width: 132px; + } + + &__panel { + width: 550px; + } + } + + @media (max-width: 992px) { + width: 700px; + grid-gap: 20px; + grid-template-columns: 70px 610px; + + &__subtitle { + //styleName: h5; + font-size: 28px; + font-weight: 400; + line-height: 36px; + letter-spacing: 0; + } + + &__quarters { + //styleName: h6; + font-size: 24px; + font-weight: 400; + line-height: 32px; + letter-spacing: 0; + } + + &__panel { + width: 540px; + padding: 16px; + gap: 1px; + + &__bottom { + width: 540px; + padding: 16px; + } + } + + &__timeline { + width: 40px; + } + + &__rigth { + width: auto; + } + + &__line { + &__dotbottom { + height: 24px; + min-height: 24px; + } + } + } + + @media (max-width: 768px) { + width: 500px; + grid-gap: 0; + grid-template-columns: 68px 432px; + + &__subtitle { + font-size: 28px; + font-weight: 400; + line-height: 36px; + letter-spacing: 0; + } + + &__quarters { + font-size: 24px; + font-weight: 400; + line-height: 32px; + letter-spacing: 0; + } + + &__panel { + width: 392px; + padding: 16px; + gap: 1px; + + &__bottom { + width: 392px; + padding: 16px; + } + } + + &__title { + top: 300px; + } + + &__timeline { + width: 40px; + } + + &__rigth { + width: auto; + } + + &__line { + &__dotbottom { + height: 24px; + min-height: 24px; + } + + &__dot { + &--active { + top: 200px; + } + } + } + } + + @media (max-width: 768px) { + width: 100%; + grid-template-columns: 68px 1fr; + + &__panel { + width: auto; + } + } + + @media (max-width: 550px) { + &__panel { + &__content { + margin-top: 4px; + } + } + } + } + + .mileston__icon { + width: 24px; + height: 24px; + + &--active { + /* filter configuration comes from CSS filter generator - check NOTE below */ + filter: invert(12%) sepia(63%) saturate(6234%) hue-rotate(222deg) brightness(87%) contrast(156%); + } + } +` + +type QuartersListDataProps = { + data: { quarters: QuartersData[] }[] +} + +export function QuartersListData({ data }: QuartersListDataProps) { + return ( + + {data.map((res, index) => { + return + })} + + ) +} + +const QuartersListContainer = styled.div` + display: grid; + justify-content: center; +` diff --git a/packages/atlas/src/components/AnimatedTimeline/iconMap.ts b/packages/atlas/src/components/AnimatedTimeline/iconMap.ts new file mode 100644 index 0000000000..3131badefa --- /dev/null +++ b/packages/atlas/src/components/AnimatedTimeline/iconMap.ts @@ -0,0 +1,94 @@ +import communityIcon from '../../assets/roadmap/community.svg' +import contentIcon from '../../assets/roadmap/content.svg' +import creatorTokensIcon from '../../assets/roadmap/creator-tokens.svg' +import dollarSignIcon from '../../assets/roadmap/dollar-sign.svg' +import gearIcon from '../../assets/roadmap/gear.svg' +import stakeIcon from '../../assets/roadmap/icon 1 staking module.svg' +import exchangeIcon from '../../assets/roadmap/icon 2 more exchanges.svg' +import contentMarketingIcon from '../../assets/roadmap/icon 3 content marketing.svg' +import tipBotIcon from '../../assets/roadmap/icon 4 js discord tip bot.svg' +import stablecoinIcon from '../../assets/roadmap/icon 5 stablecoin treasury.svg' +import bountyIcon from '../../assets/roadmap/icon 6 bounties program.svg' +import ambassadorIcon from '../../assets/roadmap/icon 7 creator ambassador program.svg' +import mobileDesignIcon from '../../assets/roadmap/icon 8 mobile design for pioneer.svg' +import emailNotificationIcon from '../../assets/roadmap/icon 9 pioneer email notifications.svg' +import contentDeliveryIcon from '../../assets/roadmap/icon 10 content delivery improvements.svg' +import recommendIcon from '../../assets/roadmap/icon 11 gleev recommended content V1.svg' +import dashboardIcon from '../../assets/roadmap/icon 12 js project overview dashboard.svg' +import subscanIcon from '../../assets/roadmap/icon 13 subscan block explorer improvements.svg' +import financialIcon from '../../assets/roadmap/icon 14 pioneer financials page.svg' +import curatorIcon from '../../assets/roadmap/icon 15 content curator tooling.svg' +import walletIcon from '../../assets/roadmap/icon 16 wallet implementations.svg' +import thumbnailIcon from '../../assets/roadmap/icon 17 automated thumbnail generation.svg' +import forumLabelIcon from '../../assets/roadmap/icon 18 pioneer forum & proposal label system.svg' +import governanceIcon from '../../assets/roadmap/icon 19 governance tooling.svg' +import cliIcon from '../../assets/roadmap/icon 20 js cli improvements.svg' +import dappIcon from '../../assets/roadmap/icon 21 dApp OperatorDeveloper Grants & Support.svg' +import nonVideoIcon from '../../assets/roadmap/icon 22 Non-video Content Uploads.svg' +import premiumIcon from '../../assets/roadmap/icon 23 Premium Video Comments & Tips.svg' +import channelPayoutIcon from '../../assets/roadmap/icon 24 DAO Creator Channel Payout tooling improvements.svg' +import wgManagementIcon from '../../assets/roadmap/icon 25 Pioneer Working Group Management Module.svg' +import bridgeIcon from '../../assets/roadmap/icon 26 Joystream Ethereum Bridging Solution.svg' +import smartphoneIcon from '../../assets/roadmap/icon 28 Smartphone App for AtlasGleev.svg' +import nftIcon from '../../assets/roadmap/icon 29 NFT Improvements - V1.svg' +import stakePoolIcon from '../../assets/roadmap/icon 30 Staking Nomination Pools.svg' +import sdkIcon from '../../assets/roadmap/icon 31 Joystream SDK.svg' +import videoCommunityIcon from '../../assets/roadmap/icon 32 Video Communities No-tech App creation.svg' +import contentGatingIcon from '../../assets/roadmap/icon 33 Premium Content Gating Features.svg' +import resolutionsIcon from '../../assets/roadmap/icon 34 Multiple Video Resolutions.svg' +import metamaskSnapIcon from '../../assets/roadmap/icon 35 Metamask Snap Development.svg' +import listIcon from '../../assets/roadmap/list.svg' +import lockIcon from '../../assets/roadmap/lock.svg' +import monitorIcon from '../../assets/roadmap/monitor.svg' +import playIcon from '../../assets/roadmap/play.svg' +import searchIcon from '../../assets/roadmap/search.svg' +import visibilityIcon from '../../assets/roadmap/visibility.svg' + +export const iconMap = { + play: playIcon, + search: searchIcon, + visibility: visibilityIcon, + 'creator-tokens': creatorTokensIcon, + content: contentIcon, + monitor: monitorIcon, + list: listIcon, + 'dollar-sign': dollarSignIcon, + lock: lockIcon, + community: communityIcon, + gear: gearIcon, + + stake: stakeIcon, + exchange: exchangeIcon, + contentMarketing: contentMarketingIcon, + tipBot: tipBotIcon, + stablecoin: stablecoinIcon, + bounty: bountyIcon, + ambassador: ambassadorIcon, + mobileDesign: mobileDesignIcon, + emailNotification: emailNotificationIcon, + contentDelivery: contentDeliveryIcon, + recommend: recommendIcon, + dashboard: dashboardIcon, + subscan: subscanIcon, + financial: financialIcon, + curator: curatorIcon, + wallet: walletIcon, + thumbnail: thumbnailIcon, + forumLabel: forumLabelIcon, + governance: governanceIcon, + cli: cliIcon, + dapp: dappIcon, + nonVideo: nonVideoIcon, + premium: premiumIcon, + channelPayout: channelPayoutIcon, + wgManagement: wgManagementIcon, + bridge: bridgeIcon, + smartphone: smartphoneIcon, + nft: nftIcon, + stakePool: stakePoolIcon, + sdk: sdkIcon, + videoCommunity: videoCommunityIcon, + contentGating: contentGatingIcon, + resolutions: resolutionsIcon, + metamaskSnap: metamaskSnapIcon, +} diff --git a/packages/atlas/src/components/AnimatedTimeline/index.ts b/packages/atlas/src/components/AnimatedTimeline/index.ts new file mode 100644 index 0000000000..9326c678fb --- /dev/null +++ b/packages/atlas/src/components/AnimatedTimeline/index.ts @@ -0,0 +1 @@ +export * from './AnimatedTimeline' diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts b/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts index 54ac8640ba..e1bb18e66c 100644 --- a/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts +++ b/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts @@ -125,6 +125,7 @@ export const HeaderGridItem = styled(GridItem, { })` margin-bottom: ${({ marginBottom = 0 }) => sizes(marginBottom)}; align-self: center; + text-align: center; ` type BackgroundContainerProps = { diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx b/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx index 0cea3e7fbc..9036e1e98b 100644 --- a/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx +++ b/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx @@ -10,11 +10,12 @@ import { useHeadTags } from '@/hooks/useHeadTags' import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics' import { useUser } from '@/providers/user/user.hooks' import { useYppStore } from '@/providers/ypp/ypp.store' -import { YppConnectionDetails } from '@/views/global/YppLandingView/sections/YppConnectionDetails' +import { CreatorOpportunities } from '@/views/global/YppLandingView/sections/CreatorOpportunities' +import { JoystreamRoadmap } from '@/views/global/YppLandingView/sections/JoystreamRoadmap' +import { ViewerOpportunities } from '@/views/global/YppLandingView/sections/ViewerOpportunities' import { YppAuthorizationModal } from './YppAuthorizationModal' import { Wrapper } from './YppLandingView.styles' -import { YppCardsSections } from './sections/YppCardsSections' import { YppFooter } from './sections/YppFooter' import { YppHero } from './sections/YppHero' import { YppRewardSection } from './sections/YppRewardSection' @@ -110,10 +111,12 @@ export const YppLandingView: FC = () => { hasAnotherUnsyncedChannel={hasAnotherUnsyncedChannel} selectedChannelTitle={selectedChannelTitle} /> + - - + + + {/**/} diff --git a/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx b/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx index 745d7d7061..f1ce9c51c7 100644 --- a/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx +++ b/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx @@ -44,6 +44,7 @@ const earningsOptions = [ ] export const CreatorOpportunities = () => { + const xsMatch = useMediaMatch('xs') const mdMatch = useMediaMatch('md') const smMatch = useMediaMatch('sm') const [titleVariant, subtitleVariant] = useSectionTextVariants() @@ -106,9 +107,11 @@ export const CreatorOpportunities = () => { colSpan={{ base: 12 }} colStart={{ base: 1 }} > - - - + diff --git a/packages/atlas/src/views/global/YppLandingView/sections/JoystreamRoadmap.tsx b/packages/atlas/src/views/global/YppLandingView/sections/JoystreamRoadmap.tsx new file mode 100644 index 0000000000..7bacc3d5ec --- /dev/null +++ b/packages/atlas/src/views/global/YppLandingView/sections/JoystreamRoadmap.tsx @@ -0,0 +1,229 @@ +import { QuartersData, QuartersListData } from '@/components/AnimatedTimeline' +import { GridItem, LayoutGrid } from '@/components/LayoutGrid' +import { Text } from '@/components/Text' +import { useMediaMatch } from '@/hooks/useMediaMatch' +import { HeaderGridItem } from '@/views/global/YppLandingView/YppLandingView.styles' +import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants' + +export const JoystreamRoadmap = () => { + const [titleVariant, subtitleVariant] = useSectionTextVariants() + const mdMatch = useMediaMatch('md') + const smMatch = useMediaMatch('sm') + + return ( + + + + Project Roadmap + + + The project is constantly evolving with support of the builders and operators from the Joystream DAO. + + + + + + + ) +} + +export const parseQuarters = (data: { quarters: QuartersData[] }[]) => { + if (data.length === 0) return [] + let index = 0 + return data.map((roadmapData) => { + roadmapData.quarters = roadmapData.quarters.map((quarter) => { + quarter.deliveryMilestones = quarter.deliveryMilestones.map((milestone) => { + milestone.generalIndex = index + index++ + return milestone + }) + return quarter + }) + return roadmapData + }) +} + +const data: { quarters: QuartersData[] }[] = [ + { + quarters: [ + { + 'year': '2024', + 'id': 'Q2', + 'deliveryMilestones': [ + { + 'icon': 'exchange', + 'title': 'New Exchange Listings', + 'content': + 'Outreach & discussions with additional cryptocurrency exchanges to provide users with more options for trading the JOY token.', + }, + { + 'icon': 'bridge', + 'title': 'Ethereum Bridge', + 'content': + 'Development & deployment of a bridging solution on Joystream that will allow for interoperability with Ethereum. In this first version, the goal would be to make JOY accessible on the Ethereum mainnet as an ERC20 token, from which it could be bridged further to other L2s and side-chains. This would allow JOY to be traded, custodied and used with a much wider set of tools.', + }, + { + 'icon': 'play', + 'title': 'Content Recommendations - v2', + 'content': + 'Surfacing personalized content for a consumer is a key requirement for any content platform. Key product experiences like home screens, feeds and related content, all depend on having modern Machine learning based content recommendation system. Currently Orion has no infrastructure to produce or serve such recommendations, and app recommendations are being done entirely client-side. The goal of this milestone is to ship the first recommendation capability in Orion, to make Joystream apps much more', + }, + { + 'icon': 'smartphone', + 'title': 'Progressive Web App for Atlas/Gleev', + 'content': + 'Development of a progressive web app for Atlas/Gleev that will allow for the app to be installed on user’s smartphones without having to go through app stores.', + }, + { + 'icon': 'monitor', + 'title': 'Transcoding & Adaptive Streaming', + 'content': + 'Users access content across a wide range of browser, devices, applications and also under heterogeneous and dynamic bandwidth constraints. As it stands, only a single version of each media asset is represented in our metadata standards and backend node software. This means have now way to represent a broad range of encodings and resolutions for media assets, let alone produce all of these. Introducing server-side transcoding in Orion will unlock this, and many other future benefits that come from server-side post-processing (thumbnail extractions, auto-subtitling, etc.). It will also unlock the ability to do adaptive streaming, where a user with a dynamic connection can more quickly see asset resolve and play, and also be able to watch videos under suboptimal circumstances.', + }, + { + 'icon': 'metamaskSnap', + 'title': 'Metamask Snap Development', + 'content': + 'The development of a “Metamask Snap” plugin that will enable Joystream assets to be usable by Metamask users.', + }, + { + 'icon': 'wallet', + 'title': 'New Wallets - v2', + 'content': + 'Implementations with external wallet providers such as hardware & software wallet providers (Tangem, Ledger)', + }, + { + 'icon': 'content', + 'title': 'API-less YouTube Sync', + 'content': + 'This functionality would enable for channels to sync to Joystream via our YouTube Partner Program without relying on YouTube’s API.', + }, + { + 'icon': 'channelPayout', + 'title': 'Creator Rewards Program', + 'content': + "Objective of the program is to offer creators a broader range of activities to be rewarded for. Overall the focus of rewards is shifting from rewards for syncing to holistic engagement and driving the platform growth. As part of the rewards program creators are offered the opportunity to maximize rewards by posting original content to Gleev App ahead of other platforms, and further with utilizing Gleev branding assets. Promoting their channel's NFTs and Tokens on social media and actively participating in the creator's community opens up more additional opportunities for monetizing engagement with Joystream platform.", + }, + { + 'icon': 'ambassador', + 'title': 'Ambassador Program Expansion - v2', + 'content': + 'Further expansion of our Ambassador program which will include more recruitment and funding for content and engagement by creators.', + }, + ], + }, + { + 'year': '2024', + 'id': 'Q3', + 'deliveryMilestones': [ + { + 'icon': 'exchange', + 'title': 'New Exchange Listings', + 'content': + 'Outreach & discussions with additional cryptocurrency exchanges to provide users with more options for trading the JOY token.', + }, + { + 'icon': 'list', + 'title': 'Playlists', + 'content': + 'A key primitive for organizing content is through playlists. We have developed designs and metadata formats for this a long time ago, but in this milestone we will finally ship the ability for publishing and consuming playlists.', + }, + { + 'icon': 'premium', + 'title': 'Premium Video Comments & Tips', + 'content': + 'Add functionality for users to leave comments on videos with a tip attached to them that will be sent to the channel owner. This will also enable functionality for users to tip channels and videos directly.', + }, + { + 'icon': 'stakePool', + 'title': 'Staking Nomination Pools', + 'content': + 'Implementation of on-chain nomination pools which will allow for users to far more easily and quickly stake the JOY token for pooled rewards from other users. This will also provide an important revenue stream for wallet developers and make the Joystream project more attractive to be featured on wallets.', + }, + { + 'icon': 'premium', + 'title': 'Social Collaboration Features', + 'content': + "The power of Web3 is in the community ownership and leveraging the network effects. Gleev will offer new ways to organise community based on content verticals and individual channels, adding more utility and new use cases for Creator Tokens and Joy tokens. Channel token holders will be offered exclusive ways to connect with creators, and social feed will empower viewers to co-curate the platform's trending content, gain exposure on the platform and earn JOY tokens for active participation.", + }, + { + 'icon': 'channelPayout', + 'title': 'Creator Token Improvements', + 'content': + 'Various improvements to creator token functionality such as the addition of public sales, whitelisting and transfer of creator tokens.', + }, + ], + }, + { + 'year': '2024', + 'id': 'Q4', + 'deliveryMilestones': [ + { + 'icon': 'exchange', + 'title': 'New Exchange Listings', + 'content': + 'Outreach & discussions with additional cryptocurrency exchanges to provide users with more options for trading the JOY token.', + }, + { + 'icon': 'community', + 'title': 'Video Communities - v1', + 'content': + 'Launching a new application for your community using Atlas currently requires a lot of deep technical knowledge. You have to obtain hosting and a domain, start the service, configure it, and then maintain it. This is quite difficult. The goal of this milestone is to create the Reddit to phpBB, in terms of the experience of a prospective community creator and moderator. One requires substantially more work and skill. By instead offering a fully hosted and simple point-and-click feature, we can make it orders of magnitude easier to allow third parties to invite their communities to use Joystream.', + }, + { + 'icon': 'sdk', + 'title': 'Joystream SDK', + 'content': + 'Building on top of Joystream today is still a challenging experience. There are no robust libraries or builder documentation for application development. Offering an excellent experience for developer to build apps, and not just use Atlas off-the shelf, will require a significant investment in building out the SDK. This milestone has as a goal to extract the core of key existing applications, like Atlas and Pioneer, and then to synthesize it all into a new core developer experience, with a suite of excellent tutorials, documentation, examples and also active outreach.', + }, + { + 'icon': 'lock', + 'title': 'Content Infrastructure: Authentication & Authorization', + 'content': + 'Proper monetization, both for the DAO and individual creators, depends on being able to practically restrict access to content, or make access conditional. Currently, the infrastructure has no awareness of who the consumer is, or the semantics around what the content is, or any associated authorization policy. The goal of this milestone is to introduce basic authentication and authorization at the content layer, enforced by content delivery nodes. This will allow features such as gating videos to only NFT holders for example.', + }, + { + 'icon': 'dapp', + 'title': 'dApp Operator/Developer Grants & Support', + 'content': + 'Development of a grants program to attract dApp operators and developers to build on the Joystream platform and build our ecosystem.', + }, + { + 'icon': 'bounty', + 'title': 'Bounties Module', + 'content': + 'Development & deployment of an on-chain bounty management module that will enable bounties to be posted and crowdfunded by users including oracle selection and reward splitting. The council will also have the unique feature of being able to fund bounties that it selects for being of benefit to the platform via the council treasury.', + }, + { + 'icon': 'contentGating', + 'title': 'Premium Content Gating Features', + 'content': + 'This feature will allow for content creators to restrict access for content to users unless they pay a fee, enabling another revenue stream for premium content.', + }, + { + 'icon': 'smartphone', + 'title': 'Native Mobile App Development', + 'content': 'Development of a native mobile app for major smartphone platforms.', + }, + ], + }, + ], + }, +] diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx index b9a17dde4c..b4adbc3148 100644 --- a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx +++ b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx @@ -131,9 +131,11 @@ export const YppHero: FC = ({ Go to dashboard ) : ( - - - +