Merge pull request #178 from NilFoundation/dev

Website updates

.vscode/settings.json

@@ -9,7 +9,7 @@
         "editor.defaultFormatter": "biomejs.biome"
     },
     "editor.codeActionsOnSave": {
-        "quickfix.biome": true
+        "quickfix.biome": "explicit"
     },
     "editor.formatOnSave": true,
     "editor.formatOnPaste": true,

site/src/components/common/Footer/Footer.tsx

@@ -59,6 +59,19 @@ function Footer({ className }: InferProps<typeof Footer.propTypes>) {
           </div>
 
           <div className={s.address}>
+            {stub.corporate.map((el) => (
+              <div key={el.title} className={s.socialWrapper}>
+                <div className={s.title}>{el.title}</div>
+                <div className={s.icons}>
+                  {el.icons.map((item) => (
+                    <SocialButton key={item.icon} href={item.link} icon={item.icon} />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* <div className={s.address}>
             <div className={s.title}>{stub.address.title}</div>
             <div className={s.addressWrapper}>
               {stub.address.places.map((el) => (
@@ -67,7 +80,7 @@ function Footer({ className }: InferProps<typeof Footer.propTypes>) {
                 </div>
               ))}
             </div>
-          </div>
+          </div> */}
         </div>
 
         <div className={s.bottom}>

site/src/components/common/Footer/stub.ts

@@ -2,20 +2,20 @@ import { socialLinks } from 'constants/socials'
 
 export const stub = {
   list: [
-    {
-      title: 'Products',
-      links: [
-        { name: '=nil;', link: '/' },
-        { name: 'Proof Market ', link: '/proof-market' },
-        { name: 'zkLLVM Compiler', link: '/zkLLVM' },
-      ],
-    },
+    // {
+    //   title: 'Products',
+    //   links: [
+    //     { name: '=nil;', link: '/' },
+    //     { name: 'Proof Market ', link: '/proof-market' },
+    //     { name: 'zkLLVM Compiler', link: '/zkLLVM' },
+    //   ],
+    // },
     {
       title: 'Navigation',
       links: [
         { name: 'Blog', link: '/blog' },
         { name: 'Careers', link: '/careers' },
-        { name: 'Research', link: '/research' },
+        // { name: 'Research', link: '/research' },
         {
           name: 'Documentation',
           link: 'https://docs.nil.foundation/',
@@ -36,6 +36,19 @@ export const stub = {
         { icon: 'dev-portal', link: socialLinks.devPortal },
       ],
     },
+    // {
+    //   title: 'Corporate',
+    //   icons: [
+    //     {
+    //       icon: 'linkedin',
+    //       link: socialLinks.linkedin,
+    //     },
+    //     { icon: 'twitter', link: socialLinks.twitter },
+    //   ],
+    // },
+  ],
+
+  corporate: [
     {
       title: 'Corporate',
       icons: [

site/src/components/common/Header/Header.tsx

@@ -59,7 +59,7 @@ function Header({ className, config }: HeaderProps) {
           <Icon name="logo" className={s.logo} />
         </Button>
         <div className={s.mainWrapper}>
-          {realLinks.main.map((el) => (
+          {/* {realLinks.main.map((el) => (
             <Button
               key={el.name}
               className={cx(s.btn, {
@@ -70,7 +70,7 @@ function Header({ className, config }: HeaderProps) {
               <div className={s.square} />
               {el.name}
             </Button>
-          ))}
+          ))} */}
         </div>
         <div className={s.box}>
           {realLinks.other.map((el) => (

site/src/components/common/Header/stub.ts

@@ -1,16 +1,16 @@
 export const links = {
   main: [
     { name: '=nil;', link: '/' },
-    { name: 'Proof Market ', link: '/proof-market' },
-    { name: 'zkLLVM Compiler', link: '/zkLLVM' },
+    // { name: 'Proof Market ', link: '/proof-market' },
+    // { name: 'zkLLVM Compiler', link: '/zkLLVM' },
   ],
   other: [
     { name: 'Blog', link: '/blog' },
     {
       name: 'Documentation',
       link: 'https://docs.nil.foundation/',
     },
-    { name: 'Research', link: '/research' },
+    // { name: 'Research', link: '/research' },
     { name: 'About', link: '/about' },
     { name: 'Careers', link: '/careers' },
   ],

site/src/components/common/HeadingSection/HeadingSection.tsx

@@ -15,6 +15,7 @@ function HeadingSection({
   title,
   description,
   socials,
+  offset,
 }: InferProps<typeof HeadingSection.propTypes>) {
   const getIcons = useMemo(
     () =>
@@ -28,6 +29,7 @@ function HeadingSection({
     <div className={cx(s.root, className)}>
       <h2 className={s.title}>{title}</h2>
       {description && <p className={cx(s.description, descriptionClassName)}>{description}</p>}
+      {offset && <div style={{ height: offset }} />}
       {socials && <div className={cx(s.icons, iconsClassName)}>{getIcons}</div>}
     </div>
   )
@@ -40,6 +42,7 @@ HeadingSection.propTypes = {
   title: string.isRequired,
   description: string,
   socials: oneOf(['community', 'corporate']),
+  offset: string,
 }
 
 export default HeadingSection

site/src/components/common/Icon/icons/DevPortal.tsx

@@ -1,12 +1,16 @@
 import { memo } from 'react'
 import { SvgIconComponent } from '../SvgIconComponent'
+import { PRIMITIVE_COLORS } from '@nilfoundation/ui-kit'
 
 const DevPortal: SvgIconComponent = ({ className }) => (
-  <svg className={className} width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M35.6319 15.8954C35.6319 15.8954 31.1366 13.411 30.7063 13.1505C30.2759 12.89 30.3943 12.582 30.3943 12.582C30.3943 12.582 30.5622 11.3753 30.2739 10.2864C29.9857 9.19758 29.0728 8.6779 29.0728 8.6779C29.0728 8.6779 21.1915 4.3466 19.7517 3.54233C18.3119 2.73807 16.3624 3.06629 16.3624 3.06629C16.3624 3.06629 5.67098 5.53053 4.3733 5.95643C3.07563 6.38233 3.05183 7.49462 3.00357 7.75511C2.95531 8.0156 3.41211 18.9979 3.41211 18.9979C3.51854 21.6028 4.46982 22.7848 4.46982 22.7848C4.46982 22.7848 11.2927 29.8616 12.398 30.9746C13.5033 32.0875 15.0654 31.6134 15.2571 31.519C15.4488 31.4246 15.8098 31.6134 15.8098 31.6134C15.8098 31.6134 18.6206 34.501 20.1827 36.1101C21.7448 37.7193 23.6666 36.6546 23.6666 36.6546C23.6666 36.6546 32.1719 32.7016 34.2622 31.6844C36.3525 30.6672 36.2083 28.2284 36.2083 28.2284C36.2083 28.2284 36.761 21.3657 36.9791 18.9979C37.1973 16.63 35.6319 15.8954 35.6319 15.8954ZM30.35 15.691C30.6018 15.8525 31.8797 16.6294 31.8797 16.6294L30.0254 17.2884L30.1497 15.7255C30.1497 15.7255 30.0974 15.5308 30.35 15.6923V15.691ZM11.4851 26.3431L6.87214 21.6913C6.87214 21.6913 6.10332 20.8675 6.04118 19.4003C5.97904 17.9331 5.73709 11.9998 5.73709 11.9998C5.73709 11.9998 5.56058 11.5107 5.8812 11.779C6.20182 12.0473 10.5087 16.1657 10.5087 16.1657C10.8028 16.4187 11.0412 16.7283 11.2092 17.0755C11.3773 17.4227 11.4714 17.8001 11.4857 18.1845C11.5333 19.4948 11.4851 26.3431 11.4851 26.3431ZM15.7457 12.8347C15.7457 12.8347 14.6879 13.1661 13.8557 12.5032C13.0234 11.8403 7.80094 7.67631 7.80094 7.67631L16.098 5.40419C16.098 5.40419 17.4598 4.99392 18.6927 5.70375C19.9256 6.41359 24.9728 9.44374 24.9728 9.44374L15.7457 12.8347ZM19.8099 32.4717C19.8099 32.4717 19.8059 32.6853 19.566 32.4444C19.326 32.2034 17.5828 30.4256 17.5828 30.4256C17.5828 30.4256 17.442 30.3605 17.6026 30.2797C17.7632 30.199 19.7253 29.3107 19.7253 29.3107C19.7253 29.3107 19.8489 29.2319 19.8489 29.4097C19.8489 29.5875 19.8099 32.473 19.8099 32.473V32.4717ZM16.5627 27.8129C16.5627 27.8129 16.1 28.0812 16.1 27.5921V18.5003C16.1 18.5003 16.0041 17.6166 17.7817 16.9537C19.5594 16.2907 27.3745 13.3557 27.3745 13.3557C27.3745 13.3557 27.7434 13.0561 27.7434 13.6246C27.7434 14.1931 27.1339 21.9238 27.1339 21.9238C27.1339 21.9238 27.2145 23.0759 26.1092 23.6281C25.0039 24.1803 16.5627 27.8129 16.5627 27.8129ZM34.4387 20.7256C34.358 21.5937 33.8774 28.0786 33.8774 28.0786C33.8774 28.0786 34.1339 29.0886 32.4039 29.8616C30.6739 30.6346 24.2351 33.3958 24.2351 33.3958C24.2351 33.3958 23.8351 33.7162 23.8384 33.1086C23.8417 32.501 23.8186 27.6683 23.8186 27.6683L27.3586 26.0272C27.3586 26.0272 28.7522 25.2073 29.1528 24.3392C29.5534 23.4711 29.6327 22.3035 29.6327 22.1902C29.6327 22.0769 29.4727 21.9688 30.0816 21.748C30.6904 21.5272 34.0539 20.2652 34.0539 20.2652C34.0539 20.2652 34.5187 19.8575 34.4387 20.7256Z"
-      fill="#212121"
-    />
+  <svg className={className} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="5" y="3" width="2" height="18" fill={PRIMITIVE_COLORS.gray900} />
+    <rect x="17" y="8" width="2" height="13" fill={PRIMITIVE_COLORS.gray900} />
+    <rect x="19" y="19" width="2" height="14" transform="rotate(90 19 19)" fill={PRIMITIVE_COLORS.gray900} />
+    <rect x="14" y="3" width="2" height="9" transform="rotate(90 14 3)" fill={PRIMITIVE_COLORS.gray900} />
+    <rect x="14" y="10" width="2" height="7" transform="rotate(-180 14 10)" fill={PRIMITIVE_COLORS.gray900} />
+    <path d="M19 8.00002L17.5858 9.41424L12.6 4.41424L14.0142 3.00003L19 8.00002Z" fill={PRIMITIVE_COLORS.gray900} />
+    <rect x="12" y="10" width="2" height="7" transform="rotate(-90 12 10)" fill={PRIMITIVE_COLORS.gray900} />
   </svg>
 )
 

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

@@ -139,3 +139,8 @@
     margin-top: size(3);
   }
 }
+
+.devnet {
+  padding-left: 0.5ch;
+  @include paragraph;
+}

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

@@ -5,8 +5,13 @@ import classNames from 'classnames'
 import PropTypes, { InferProps } from 'prop-types'
 import s from './JoinSection.module.scss'
 import { Column } from 'components/Column'
+import { useViewport } from 'hooks/useViewport'
+import { WebButton } from 'components/WebButton'
+import { seo } from 'constants/seo'
 
 function JoinSection({ title, leftText, rightText, social, className }: InferProps<typeof JoinSection.propTypes>) {
+  const { isMobile } = useViewport()
+
   return (
     <section className={classNames(s.container, className)}>
       <Column type="left" className={s.headingWrapper}>
@@ -16,12 +21,19 @@ function JoinSection({ title, leftText, rightText, social, className }: InferPro
       </Column>
       <div className={s.contentWrapperLeft}>
         <WhiteRectangle className={s.line} />
-        <p className={s.text}>{leftText}</p>
+        <p className={s.text}>
+          {leftText}
+          <WebButton className={s.devnet} href={seo.devnetLink}>
+            Join our devnet
+          </WebButton>
+        </p>
+        {!isMobile && <div style={{ height: '80px' }}></div>}
         <WhiteRectangle className={s.bottomLine} />
       </div>
       <div className={s.contentWrapperRight}>
         <WhiteRectangle className={s.line} />
-        <p className={classNames(s.text, s.textRight)}>{rightText}</p>
+        {/* <p className={classNames(s.text, s.textRight)}>{rightText}</p> */}
+        <div style={{ height: '220px' }}></div>
         <WhiteRectangle className={s.bottomLine} />
         {/* <WhiteRectangle className={s.lineMobile} /> */}
       </div>

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

@@ -25,7 +25,7 @@
 
     p {
       margin-top: size($spacing24 * 2 + $spacing48 + 5);
-      width: size(158);
+      width: size(300);
     }
   }
 }
@@ -46,7 +46,7 @@
 
 .heroDescription p {
   @include paragraph;
-  max-width: size(247);
+  max-width: size(494);
   background-color: $gray900;
 }
 
@@ -57,7 +57,7 @@
 }
 
 .line {
-  width: 50%;
+  width: 100%;
 }
 
 .info {
@@ -117,7 +117,7 @@
 }
 .right {
   display: grid;
-  margin-top: size(297);
+  margin-top: size(457);
   grid-template-columns: size(275) size(259);
 
   @include mobile {
@@ -132,7 +132,7 @@
   display: flex;
   align-items: flex-start;
   height: 100%;
-  background-color: $gray900;
+  background-color: "transparent";
 
   &:after {
     content: '';
@@ -150,7 +150,7 @@
 }
 
 .rect {
-  margin-top: size(295);
+  margin-top: size(200);
 
   @include mobile {
     margin-top: 0;

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

@@ -23,65 +23,28 @@ const getContent = (isMobile: boolean | null, content: string | { isDesktop: str
   return isMobile ? content.isMobile : content.isDesktop
 }
 
-const Hero = ({ className, data: { title, description, info, content, future, footer } }: HeroProps) => {
+const Hero = ({ className, data: { title, description } }: HeroProps) => {
   const { isMobile } = useViewport()
   return (
     <div className={cx(s.root, className)}>
       <Column type="left" className={s.left}>
         <HeadingSection className={s.heading} title={title} description={isMobile ? description : null} />
         <div className={s.heroDescription}>
           <p>{description}</p>
+          <div style={{ height: '50px' }}></div>
         </div>
         <div className={s.box}>
           <WhiteRectangle className={s.line} />
           <div className={s.info}>
-            <p>{info}</p>
             <WhiteRectangle />
           </div>
         </div>
       </Column>
-
-      <Column type="right" className={s.right}>
-        <div className={s.rectWrapper}>
-          <WhiteRectangle />
-        </div>
-        <WhiteRectangle className={s.rect} />
-
-        <div className={s.content}>
-          {content.map((el) => (
-            <div className={s.card} key={el.title}>
-              <h3 className={s.title}>{el.title}</h3>
-              <div className={s.desc}>
-                {el.description.map((item, index) => (
-                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                  <p key={index}>{getContent(isMobile, item)}</p>
-                ))}
-              </div>
-            </div>
-          ))}
-
-          {future.map((el) => (
-            <div className={cx(s.card, s.grey)} key={el.title}>
-              <h3 className={s.title}>{el.title}</h3>
-              <div className={s.desc}>
-                <p>{el.description}</p>
-              </div>
-            </div>
-          ))}
-
-          <div className={s.footer}>
-            <div className={s.footerWrapper}>
-              <p className={s.inTouch}>Stay in touch with our news</p>
-              <div className={s.socials}>
-                {footer.socials.map((el) => (
-                  <SocialButton className={s.socialButton} key={el.icon} icon={el.icon} href={el.link} />
-                ))}
-              </div>
-            </div>
-            <WhiteRectangle className={s.wRect} />
-          </div>
-        </div>
-      </Column>
+      {!isMobile && (
+        <Column type="right" className={s.right}>
+          {null}
+        </Column>
+      )}
     </div>
   )
 }

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

@@ -130,3 +130,8 @@
     }
   }
 }
+
+.devnet {
+  padding-left: 0.5ch;
+  @include paragraph;
+}

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

@@ -4,8 +4,14 @@ import WhiteRectangle from 'components/WhiteRectangle'
 import classNames from 'classnames'
 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()
+
   return (
     <section className={classNames(s.container, className)}>
       <div className={s.headingWrapper}>
@@ -15,12 +21,19 @@ function JoinNil({ title, leftText, rightText, social, className }: InferProps<t
       </div>
       <div className={s.contentWrapperLeft}>
         <WhiteRectangle className={s.line} />
-        <p className={classNames(s.text, s.bigBottomPadding)}>{leftText}</p>
+        <p className={classNames(s.text, s.bigBottomPadding)}>
+          {leftText}
+          <WebButton className={s.devnet} href={seo.devnetLink}>
+            Join our devnet
+          </WebButton>
+        </p>
+        {!isMobile && <div style={{ height: '80px' }}></div>}
         <WhiteRectangle className={s.lineMobile} />
       </div>
       <div className={s.contentWrapperRight}>
         <WhiteRectangle className={s.line} />
-        <p className={s.text}>{rightText}</p>
+        {/* <p className={s.text}>{rightText}</p> */}
+        <div style={{ height: '180px' }}></div>
         <WhiteRectangle className={s.lineMobile} />
       </div>
     </section>