landing page

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"
+    }
+  }
 }

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[] }) => {
       ))}
     </Splide>
   )
-}
+}

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'

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 }) => (
-  <Banner style={{ height: '100%' }} as="a" alert="info" href="#" title={title}>
-    {text}
-  </Banner>
+  <AnnouncementBanner>
+    <Banner as="a" alert="info" href="#" title={title}>
+      {text}
+    </Banner>
+  </AnnouncementBanner>
 )
 
 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() {
         <Title>{t('title')}</Title>
         <Typography>{t('caption')}</Typography>
       </Header>
-      <div>video</div>
+      <Video poster="/migrate/preview.svg">
+        <track />
+      </Video>
       <GridOneToThree>
         <CardWithEmoji>
-          <img src="/confetti.png" width={108} height={108} alt="🎉" />
+          <img src="/migrate/confetti.png" width={108} height={108} alt="🎉" />
           <Typography fontVariant="headingTwo" asProp="h2">
             {t('accessible.title')}
           </Typography>
@@ -213,6 +282,35 @@ export default function ENSv2() {
           />
         </Carousel>
       </SlideshowContainer>
+      <Footer as="footer">
+        <Typography asProp="h3" fontVariant="headingThree">
+          {t('footer.title')}
+        </Typography>
+        <div>
+          <Card title={t('footer.learn.title')}>
+            <span>
+              <QuestionBubbleSVG /> {t('footer.learn.faq')}
+            </span>
+            <span>
+              <SpannerAltSVG /> {t('footer.learn.plan')}
+            </span>
+            <span>
+              <InfoCircleSVG /> {t('footer.learn.base')}
+            </span>
+          </Card>
+          <Card title={t('footer.support.title')}>
+            <span>
+              <QuestionCircleSVG /> {t('footer.support.ticket')}
+            </span>
+            <span>
+              <SocialX height="16" width="16" /> {t('footer.support.twitter')}
+            </span>
+            <span>
+              <DAOSVG height="16" width="16" /> {t('footer.support.dao')}
+            </span>
+          </Card>
+        </div>
+      </Footer>
     </Main>
   )
 }