Update devnet link style

site/src/components/common/JoinSection/JoinSection.module.scss

@@ -142,4 +142,5 @@
 
 .devnet {
   padding-left: 0.5ch;
+  @include paragraph;
 }

site/src/components/common/JoinSection/JoinSection.tsx

@@ -6,7 +6,8 @@ import PropTypes, { InferProps } from 'prop-types'
 import s from './JoinSection.module.scss'
 import { Column } from 'components/Column'
 import { useViewport } from 'hooks/useViewport'
-import Button from 'components/Button'
+import { WebButton } from 'components/WebButton'
+import { seo } from 'constants/seo'
 
 function JoinSection({ title, leftText, rightText, social, className }: InferProps<typeof JoinSection.propTypes>) {
   const { isMobile } = useViewport()
@@ -22,9 +23,9 @@ function JoinSection({ title, leftText, rightText, social, className }: InferPro
         <WhiteRectangle className={s.line} />
         <p className={s.text}>
           {leftText}
-          <Button className={s.devnet} href="https://wsrr1ntszgn.typeform.com/nil-devnet">
-            devnet
-          </Button>
+          <WebButton className={s.devnet} href={seo.devnetLink}>
+            Join our devnet
+          </WebButton>
         </p>
         {!isMobile && <div style={{ height: '80px' }}></div>}
         <WhiteRectangle className={s.bottomLine} />

site/src/components/pages/About/JoinNil/JoinNil.module.scss

@@ -133,4 +133,5 @@
 
 .devnet {
   padding-left: 0.5ch;
+  @include paragraph;
 }

site/src/components/pages/About/JoinNil/JoinNil.tsx

@@ -6,6 +6,8 @@ import PropTypes, { InferProps } from 'prop-types'
 import s from './JoinNil.module.scss'
 import { useViewport } from 'hooks/useViewport'
 import Button from 'components/Button'
+import { WebButton } from 'components/WebButton'
+import { seo } from 'constants/seo'
 
 function JoinNil({ title, leftText, rightText, social, className }: InferProps<typeof JoinNil.propTypes>) {
   const { isMobile } = useViewport()
@@ -21,9 +23,9 @@ function JoinNil({ title, leftText, rightText, social, className }: InferProps<t
         <WhiteRectangle className={s.line} />
         <p className={classNames(s.text, s.bigBottomPadding)}>
           {leftText}
-          <Button className={s.devnet} href="https://wsrr1ntszgn.typeform.com/nil-devnet">
-            devnet
-          </Button>
+          <WebButton className={s.devnet} href={seo.devnetLink}>
+            Join our devnet
+          </WebButton>
         </p>
         {!isMobile && <div style={{ height: '80px' }}></div>}
         <WhiteRectangle className={s.lineMobile} />

site/src/components/pages/ZkSharding/Hero/Hero.tsx

@@ -70,9 +70,7 @@ const Hero = ({ className, data: { title, description, list } }: HeroProps) => {
       </Column>
 
       <Column type="right">
-        <div className={s.contentWrapper}>
-          {/* <div className={s.lottieWrapper} ref={lottieRef} /> */}
-        </div>
+        <div className={s.contentWrapper}>{/* <div className={s.lottieWrapper} ref={lottieRef} /> */}</div>
         <div className={s.rightFooter}>
           <div className={s.footerLeftBox}>
             <div className={s.buttonWrapper}>

site/src/components/pages/ZkSharding/Intro/Intro.module.scss

@@ -43,7 +43,7 @@
   padding: 0 size($spacing32);
 
   p {
-    @include heading-04;
+    @include heading-02;
     line-height: size(27);
   }
 

site/src/components/pages/ZkSharding/Intro/Intro.tsx

@@ -37,7 +37,7 @@ const Intro = () => {
               duration={700}
               delay={500}
               isVisible={isVisible}
-              text="Built to Outlast that uses zkSharding to securely scale Ethereum to 60,000+ TPS, empowering web3 developers to build scalable, secure, and composable applications."
+              text="Built to Outlast"
             />
           )}
         </IntroAnimationWidget>

site/src/components/pages/ZkSharding/Intro/data.tsx

@@ -19,11 +19,7 @@ export const getAnimatedItemList = (prefersReduceMotion?: boolean) => [
     ySourceValue: '-336px',
     yTransformValue: '-99%',
     children: (isCompleted: boolean) => (
-      <IntroDescription
-        className={s.description}
-        text="Built to Outlast that securely scales Ethereum to 60,000+ TPS through zkSharding, empowering web3 developers to build scalable, secure, and composable applications."
-        isVisible={isCompleted}
-      />
+      <IntroDescription className={s.description} text="Built to Outlast" isVisible={isCompleted} />
     ),
   },
   {

site/src/components/pages/ZkSharding/JoinNil/JoinNil.module.scss

@@ -129,4 +129,5 @@
 
 .devnet {
   padding-left: 0.5ch;
+  @include paragraph;
 }

site/src/components/pages/ZkSharding/JoinNil/JoinNil.tsx

@@ -8,7 +8,8 @@ import WhiteRectangle from 'components/WhiteRectangle'
 
 import s from './JoinNil.module.scss'
 import { JoinNilBaseData } from './JoinNilBaseData'
-import Button from 'components/Button'
+import { WebButton } from 'components/WebButton'
+import { seo } from 'constants/seo'
 
 type JoinNilProps<T extends JoinNilBaseData> = {
   className?: string
@@ -51,9 +52,9 @@ const JoinNil = <T extends JoinNilBaseData>({
           {!isMobile && <WhiteRectangle />}
           <p className={cx(s.text, s.bigPadding)}>
             {content.left}
-            <Button className={s.devnet} href="https://wsrr1ntszgn.typeform.com/nil-devnet">
-              devnet
-            </Button>
+            <WebButton className={s.devnet} href={seo.devnetLink}>
+              Join our devnet
+            </WebButton>
           </p>
           {!isMobile && <div style={{ height: '80px' }}></div>}
           <WhiteRectangle />

site/src/constants/seo.ts

@@ -5,4 +5,5 @@ export const seo = {
   url: 'https://nil.foundation',
   image: '/og.jpg',
   theme: '#212121',
+  devnetLink: 'https://wsrr1ntszgn.typeform.com/nil-devnet',
 }

site/src/stubs/joinPartData.ts

@@ -2,7 +2,7 @@ export const joinNil = {
   title: 'Join our community',
   social: 'community',
   content: {
-    left: `Want to build? Apply to join our`,
+    left: `Want to build?`,
     right:
       'Join our community to collaborate with experienced engineers on building secure, scalable and composable decentralized applications.',
     newRight: {