diff --git a/public/locales/en/ensvs2.json b/public/locales/en/ensvs2.json index ac4b3e432..14a15d823 100644 --- a/public/locales/en/ensvs2.json +++ b/public/locales/en/ensvs2.json @@ -1,4 +1,51 @@ { "title": "ENSv2: The Next Generation of ENS", - "caption": "Approve your ENS names for ENSv2 now and enjoy automatic migration, paid for by ENS DAO." + "caption": "Approve your ENS names for ENSv2 now and enjoy automatic migration, paid for by ENS DAO.", + "accessible": { + "title": "Making ENS accessible to more people", + "caption": "We're taking our knowledge from the last 7 years at the frontier of web3 naming to re-envision the architecture from the ground up on L2 By utilizing L2s, we're excited to make ENS more accessible to a wider range of users.", + "link": "ENSv2 Project Plan", + "gas": { + "title": "Lower Gas Costs", + "text": "Layer 2 reduces gas fees, making .eth registrations and renewals cheaper and faster." + }, + "control": { + "title": "Enhanced Control", + "text": "ENSv2 gives each .eth name its own registry, offering more flexibility and control." + }, + "multichain": { + "title": "Improved Multi-Chain", + "text": "Layer 2 enables seamless .eth name use across blockchains with trustless connections." + } + }, + "announcement": { + "title": "Announcements", + "l2": { + "title": "L2 partner announcement", + "caption": "We’re announced that we’re partnering with _____! Watch Nick’s ___ presentation to see the full announcement." + }, + "ensv2": { + "title": "ENSv2: An Update on our Progress", + "caption": "This update aims to be informative and slightly technical, allowing you, the ENS community, to stay connected with our progress." + }, + "nextgen": { + "title": "ENSv2: The Next Generation of ENS", + "caption": "Our vision for the next iterations of the ENS protocol, on L2." + } + }, + "footer": { + "title": "Got questions?", + "learn": { + "title": "Learn", + "faq": "ENSv2 FAQs", + "plan": "ENSv2 Project Plan", + "base": "Knowledge base" + }, + "support": { + "title": "Support", + "ticket": "Open a ticket", + "twitter": "X (Twitter)", + "dao": "DAO forums" + } + } } \ No newline at end of file diff --git a/public/confetti.png b/public/migrate/confetti.png similarity index 100% rename from public/confetti.png rename to public/migrate/confetti.png diff --git a/public/migrate/preview.svg b/public/migrate/preview.svg new file mode 100644 index 000000000..5c5546d10 --- /dev/null +++ b/public/migrate/preview.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/DAO.svg b/src/assets/DAO.svg new file mode 100644 index 000000000..2d33444de --- /dev/null +++ b/src/assets/DAO.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/social/SocialX.svg b/src/assets/social/SocialX.svg index 6a7b7dfe7..134d9024f 100644 --- a/src/assets/social/SocialX.svg +++ b/src/assets/social/SocialX.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/pages/migrate/Carousel.tsx b/src/components/pages/migrate/Carousel.tsx index 9d25dca59..1f7f254a5 100644 --- a/src/components/pages/migrate/Carousel.tsx +++ b/src/components/pages/migrate/Carousel.tsx @@ -8,7 +8,7 @@ export const Carousel = ({ children }: { children: ReactNode[] }) => { arrows: false, pagination: false, gap: '16px', - perPage: 2, + perPage: 1, fixedWidth: 312, }} > @@ -18,4 +18,4 @@ export const Carousel = ({ children }: { children: ReactNode[] }) => { ))} ) -} \ No newline at end of file +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 3c5d9dfb9..294ed4587 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,7 @@ import { lightTheme, RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit' import '@rainbow-me/rainbowkit/styles.css' +import '@splidejs/react-splide/css' import { NextPage } from 'next' import type { AppProps } from 'next/app' diff --git a/src/pages/migrate.tsx b/src/pages/migrate.tsx index 948c5a7b3..b6be85326 100644 --- a/src/pages/migrate.tsx +++ b/src/pages/migrate.tsx @@ -6,14 +6,21 @@ import { Button, Card, GasPumpSVG, + InfoCircleSVG, KeySVG, + QuestionBubbleSVG, + QuestionCircleSVG, RightArrowSVG, + SpannerAltSVG, Typography, WalletSVG, } from '@ensdomains/thorin' import { Carousel } from '@app/components/pages/migrate/Carousel' +import DAOSVG from '../assets/DAO.svg' +import SocialX from '../assets/social/SocialX.svg' + const Title = styled.h1` font-weight: 830; text-align: center; @@ -50,6 +57,54 @@ const Main = styled.main( `, ) +const Footer = styled.div( + ({ theme }) => css` + display: flex; + flex-direction: column; + gap: ${theme.space['6']}; + h3 { + text-align: center; + } + span { + display: flex; + flex-direction: row; + align-items: center; + gap: ${theme.space['2']}; + color: ${theme.colors.green}; + } + & > div { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: ${theme.space['4']}; + } + & > div > div { + width: 100%; + display: flex; + align-items: center; + } + @media (min-width: 480px) { + & > div { + grid-template-columns: repeat(2, 1fr); + } + } + `, +) + +const AnnouncementBanner = styled.div( + ({ theme }) => css` + height: ${theme.space.full}; + text-align: center; + & > a { + height: ${theme.space.full}; + justify-content: flex-start; + & > div { + height: ${theme.space.full}; + justify-content: flex-start; + } + } + `, +) + const PartnershipAnnouncement = styled.div( ({ theme }) => css` width: ${theme.space.full}; @@ -83,8 +138,9 @@ const TopNav = styled.div( gap: ${theme.space['6']}; align-items: center; position: sticky; - top: 0; + top: ${theme.space['4']}; left: 0; + z-index: 1; `, ) @@ -128,9 +184,11 @@ const CardHeader = styled.h3( ) const AnnouncementSlide = ({ title, text }: { title: string; text: string }) => ( - - {text} - + + + {text} + + ) const SlideshowContainer = styled.div( @@ -144,6 +202,15 @@ const SlideshowContainer = styled.div( `, ) +const Video = styled.video( + ({ theme }) => css` + height: ${theme.space.full}; + width: ${theme.space.full}; + border-radius: ${theme.radii.card}; + margin-bottom: ${theme.space[18]}; + `, +) + export default function ENSv2() { const { t } = useTranslation('ensvs2') return ( @@ -160,10 +227,12 @@ export default function ENSv2() { {t('title')} {t('caption')} -
video
+ - 🎉 + 🎉 {t('accessible.title')} @@ -213,6 +282,35 @@ export default function ENSv2() { /> + ) }