add banner

public/locales/en/ensvs2.json → public/locales/en/ensv2.json

@@ -47,5 +47,10 @@
       "twitter": "X (Twitter)",
       "dao": "DAO forums"
     }
+  },
+  "banner": {
+    "title": "Namechain is coming!",
+    "caption": "Keep up with ENSv2 development",
+    "cta": "ENSv2 hub"
   }
 }

src/components/pages/AnnouncementBanner.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
+import styled, { css } from 'styled-components'
+
+import { Button, Typography } from '@ensdomains/thorin'
+
+const Container = styled(Link)(
+  ({ theme }) => css`
+    display: flex;
+    flex-direction: row;
+    width: ${theme.space.full};
+    max-width: 466px;
+    padding: ${theme.space['4']};
+    align-items: center;
+    gap: ${theme.space['4']};
+    align-self: center;
+    border-radius: ${theme.radii['2xLarge']};
+    background-color: ${theme.colors.backgroundPrimary};
+  `,
+)
+
+const Text = styled.span(
+  ({ theme }) => css`
+    width: ${theme.space.full};
+  `,
+)
+
+export const AnnouncementBanner = () => {
+  const { t } = useTranslation('ensv2')
+
+  return (
+    <Container href="/ens-v2">
+      <img src="/migrate/confetti.png" alt="" height={33} width={33} />
+      <Text>
+        <Typography fontVariant="largeBold">{t('banner.title')}</Typography>
+        <Typography fontVariant="small" color="grey">
+          {t('banner.caption')}
+        </Typography>
+      </Text>
+      <Button colorStyle="greenPrimary" width="max">
+        {t('banner.cta')}
+      </Button>
+    </Container>
+  )
+}

src/pages/ens-v2.tsx

@@ -217,7 +217,7 @@ const Video = styled.video(
 )
 
 export default function ENSv2() {
-  const { t } = useTranslation('ensvs2')
+  const { t } = useTranslation('ensv2')
   return (
     <Main>
       <TopNav>

src/pages/index.tsx

@@ -8,6 +8,7 @@ import FaucetBanner from '@app/components/@molecules/FaucetBanner'
 import Hamburger from '@app/components/@molecules/Hamburger/Hamburger'
 import { SearchInput } from '@app/components/@molecules/SearchInput/SearchInput'
 import { LeadingHeading } from '@app/components/LeadingHeading'
+import { AnnouncementBanner } from '@app/components/pages/AnnouncementBanner'
 import { VerificationErrorDialog } from '@app/components/pages/VerificationErrorDialog'
 import { useVerificationOAuthHandler } from '@app/hooks/verification/useVerificationOAuthHandler/useVerificationOAuthHandler'
 
@@ -114,6 +115,8 @@ export default function Page() {
             </Typography>
           </SubtitleWrapper>
           <SearchInput />
+
+          <AnnouncementBanner />
         </Stack>
       </Container>
       <VerificationErrorDialog {...(dialogProps ?? {})} />