qa

ensdomains · Nov 8, 2024 · bd2685f · bd2685f
1 parent 114a262
commit bd2685f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/public/locales/en/ensv2.json b/public/locales/en/ensv2.json
@@ -1,6 +1,6 @@
 {
-  "title": "ENSv2: The Next Generation of ENS",
-  "caption": "After seven years at the frontier of web3 naming, we're re-envisioning ENS on L2.",
+  "title": "Namechain is a Layer 2 designed for onchain identity",
+  "caption": "Built for everyone tired of addresses, numbers, and complexity. Namechain lets users and developers create onchain identities through the power of names, not numbers.",
   "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.",
@@ -18,6 +18,11 @@
       "text": "Layer 2 enables seamless .eth name use across blockchains with trustless connections."
     }
   },
+  "learn-more": {
+    "title": "Want to learn more?",
+    "caption": "If you’re interested in learning more and building on Namechain, join the ENS Developer Telegram.",
+    "button": "Developer Telegram"
+  },
   "announcement": {
     "title": "Announcements",
     "l2": {

diff --git a/src/pages/ens-v2.tsx b/src/pages/ens-v2.tsx
@@ -26,15 +26,11 @@ const Title = styled.h1`
   font-weight: 830;
   text-align: center;
 
-  font-size: 52px;
+  font-size: 36px;
   line-height: 104%;
 
   @media (min-width: 640px) {
-    font-size: 60px;
-  }
-
-  @media (min-width: 1024px) {
-    font-size: 76px;
+    font-size: 52px;
   }
 `
 
@@ -46,7 +42,8 @@ const Header = styled.header(
     justify-content: center;
     gap: ${theme.space[4]};
     padding: ${theme.space[4]};
-    min-height: 530px;
+    min-height: 330px;
+    text-align: center;
   `,
 )
 
@@ -149,18 +146,15 @@ const TopNav = styled.div(
   `,
 )
 
-const CardWithEmoji = styled(Card)`
+const CenteredCard = styled(Card)`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding-top: 83px;
-  position: relative;
+`
+
+const CardWithEmoji = styled(CenteredCard)`
   grid-column: 1 / -1;
-  & > img {
-    position: absolute;
-    top: -72px;
-  }
 `
 
 const GridOneToThree = styled.div(
@@ -212,7 +206,6 @@ const Video = styled.video(
     height: ${theme.space.full};
     width: ${theme.space.full};
     border-radius: ${theme.radii.card};
-    margin-bottom: ${theme.space[18]};
   `,
 )
 
@@ -230,14 +223,29 @@ export default function ENSv2() {
       </TopNav>
       <Header>
         <Title>{t('title')}</Title>
-        <Typography>{t('caption')}</Typography>
+        <Typography fontVariant="body">{t('caption')}</Typography>
       </Header>
       <Video poster="/migrate/preview.svg">
         <track />
       </Video>
+      <CenteredCard>
+        <Typography fontVariant="headingTwo" asProp="h2">
+          {t('learn-more.title')}
+        </Typography>
+        <Typography fontVariant="body">{t('learn-more.caption')}</Typography>
+        <Button
+          as="a"
+          href="https://t.me/+TJ_M02FbKwcyNjgx"
+          width="max"
+          colorStyle="greenPrimary"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('learn-more.button')}
+        </Button>
+      </CenteredCard>
       <GridOneToThree>
         <CardWithEmoji>
-          <img src="/migrate/confetti.png" width={108} height={108} alt="🎉" />
           <Typography fontVariant="headingTwo" asProp="h2">
             {t('accessible.title')}
           </Typography>