Merge pull request #182 from NilFoundation/dev

Website updates
NilFoundation · Aug 29, 2024 · f85b3af · f85b3af
2 parents 263dea1 + e37826a
commit f85b3af
Show file tree

Hide file tree

Showing 35 changed files with 182 additions and 158 deletions.
diff --git a/.vscode/settings.json b/.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,

diff --git a/site/src/components/common/Footer/Footer.tsx b/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}>

diff --git a/site/src/components/common/Footer/stub.ts b/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: [

diff --git a/site/src/components/common/Header/Header.tsx b/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) => (

diff --git a/site/src/components/common/Header/stub.ts b/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' },
   ],

diff --git a/site/src/components/common/HeadingSection/HeadingSection.tsx b/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
diff --git a/site/src/components/common/Icon/icons/DevPortal.tsx b/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>
 )
 

diff --git a/site/src/components/common/Icon/icons/Twitter.tsx b/site/src/components/common/Icon/icons/Twitter.tsx
@@ -2,10 +2,19 @@ import { memo } from 'react'
 import { SvgIconComponent } from '../SvgIconComponent'
 
 const Twitter: SvgIconComponent = ({ className }) => (
-  <svg className={className} width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    shape-rendering="geometricPrecision"
+    text-rendering="geometricPrecision"
+    image-rendering="optimizeQuality"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    viewBox="0 0 512 462.799"
+  >
     <path
-      d="M36.9375 9.42801C35.6651 9.99083 34.3158 10.3605 32.9342 10.5247C34.3904 9.65373 35.4803 8.28303 36.0008 6.66801C34.6342 7.48134 33.1358 8.05134 31.5742 8.35968C30.5252 7.23731 29.1348 6.49295 27.6191 6.24232C26.1034 5.99169 24.5474 6.24883 23.1929 6.97376C21.8385 7.6987 20.7615 8.85082 20.1293 10.251C19.4972 11.6512 19.3454 13.221 19.6975 14.7163C16.926 14.5774 14.2147 13.8572 11.7396 12.6024C9.26456 11.3477 7.08103 9.58642 5.33082 7.43301C4.7113 8.49709 4.38575 9.70672 4.38749 10.938C4.38749 13.3547 5.61749 15.4897 7.48749 16.7397C6.38084 16.7048 5.29854 16.406 4.33082 15.868V15.9547C4.33115 17.5642 4.8881 19.124 5.90723 20.3698C6.92636 21.6155 8.34496 22.4705 9.92249 22.7897C8.89518 23.0681 7.818 23.1091 6.77249 22.9097C7.21727 24.2951 8.08417 25.5067 9.25181 26.3749C10.4194 27.243 11.8294 27.7243 13.2842 27.7513C11.8383 28.8869 10.1828 29.7263 8.41229 30.2216C6.64179 30.7169 4.79103 30.8584 2.96582 30.638C6.15198 32.6871 9.86098 33.7749 13.6492 33.7713C26.4708 33.7713 33.4825 23.1497 33.4825 13.938C33.4825 13.638 33.4742 13.3347 33.4608 13.038C34.8256 12.0516 36.0035 10.8297 36.9392 9.42968L36.9375 9.42801Z"
-      fill="#212121"
+      fill-rule="nonzero"
+      d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z"
     />
   </svg>
 )

diff --git a/site/src/components/common/JoinSection/JoinSection.module.scss b/site/src/components/common/JoinSection/JoinSection.module.scss
@@ -139,3 +139,8 @@
     margin-top: size(3);
   }
 }
+
+.devnet {
+  padding-left: 0.5ch;
+  @include paragraph;
+}
diff --git a/site/src/components/common/JoinSection/JoinSection.tsx b/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>

diff --git a/site/src/components/pages/About/Hero/Hero.module.scss b/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;

diff --git a/site/src/components/pages/About/Hero/Hero.tsx b/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>
   )
 }

diff --git a/site/src/components/pages/About/JoinNil/JoinNil.module.scss b/site/src/components/pages/About/JoinNil/JoinNil.module.scss
@@ -130,3 +130,8 @@
     }
   }
 }
+
+.devnet {
+  padding-left: 0.5ch;
+  @include paragraph;
+}