From b12b7658e90e49bf5e1fc6a34308669267a00f5d Mon Sep 17 00:00:00 2001
From: ukorvl <ukorotovskiy@gmail.com>
Date: Fri, 16 Aug 2024 23:54:56 +0400
Subject: [PATCH] minor changes

---
 .vscode/settings.json                                     | 2 +-
 .../components/common/HeadingSection/HeadingSection.tsx   | 3 +++
 site/src/components/pages/About/Hero/Hero.module.scss     | 8 ++++----
 site/src/components/pages/About/Hero/Hero.tsx             | 7 ++-----
 .../pages/About/Toolchain/Toolchain.module.scss           | 8 +++++---
 site/src/components/pages/ZkSharding/Hero/Hero.tsx        | 2 +-
 site/src/components/pages/ZkSharding/More/More.tsx        | 2 +-
 7 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 11a1fb0b..591f36ec 100644
--- 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/HeadingSection/HeadingSection.tsx b/site/src/components/common/HeadingSection/HeadingSection.tsx
index 550edc74..97450810 100644
--- 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/pages/About/Hero/Hero.module.scss b/site/src/components/pages/About/Hero/Hero.module.scss
index 5882fd9f..84b907be 100644
--- 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);
     }
   }
 }
@@ -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
index b129f68e..60559df8 100644
--- a/site/src/components/pages/About/Hero/Hero.tsx
+++ b/site/src/components/pages/About/Hero/Hero.tsx
@@ -31,7 +31,7 @@ const Hero = ({ className, data: { title, description } }: HeroProps) => {
         <HeadingSection className={s.heading} title={title} description={isMobile ? description : null} />
         <div className={s.heroDescription}>
           <p>{description}</p>
-          <div style={{ height: '100px' }}></div>
+          <div style={{ height: '50px' }}></div>
         </div>
         <div className={s.box}>
           <WhiteRectangle className={s.line} />
@@ -42,10 +42,7 @@ const Hero = ({ className, data: { title, description } }: HeroProps) => {
       </Column>
       {!isMobile && (
         <Column type="right" className={s.right}>
-          <div className={s.rectWrapper}>
-            <WhiteRectangle />
-          </div>
-          <WhiteRectangle className={s.rect} />
+          {null}
         </Column>
       )}
     </div>
diff --git a/site/src/components/pages/About/Toolchain/Toolchain.module.scss b/site/src/components/pages/About/Toolchain/Toolchain.module.scss
index c09debfc..d9a1045a 100644
--- a/site/src/components/pages/About/Toolchain/Toolchain.module.scss
+++ b/site/src/components/pages/About/Toolchain/Toolchain.module.scss
@@ -35,17 +35,19 @@
 
 .heroDescription p {
   @include paragraph;
-  max-width: size(200);
+  max-width: size(400);
   background-color: $gray900;
+  margin-bottom: size($spacing32);
 
   @include mobile {
-    max-width: 50%;
+    max-width: 100%;
+    margin-bottom: size(0);
   }
 }
 
 .right {
   position: relative;
-  margin-top: size(240);
+  margin-top: size(0);
   background-color: $gray900;
 
   &:after {
diff --git a/site/src/components/pages/ZkSharding/Hero/Hero.tsx b/site/src/components/pages/ZkSharding/Hero/Hero.tsx
index 9d34b13b..c4709972 100644
--- a/site/src/components/pages/ZkSharding/Hero/Hero.tsx
+++ b/site/src/components/pages/ZkSharding/Hero/Hero.tsx
@@ -74,7 +74,7 @@ const Hero = ({ className, data: { title, description, list } }: HeroProps) => {
         <div className={s.rightFooter}>
           <div className={s.footerLeftBox}>
             <div className={s.buttonWrapper}>
-              <WebButton className={s.link} href="https://nil.foundation/blog/post/nil_zkSharding">
+              <WebButton className={s.link} href="https://docs.nil.foundation">
                 Learn more
               </WebButton>
             </div>
diff --git a/site/src/components/pages/ZkSharding/More/More.tsx b/site/src/components/pages/ZkSharding/More/More.tsx
index 792eade7..b82ae40f 100644
--- a/site/src/components/pages/ZkSharding/More/More.tsx
+++ b/site/src/components/pages/ZkSharding/More/More.tsx
@@ -28,7 +28,7 @@ const More = ({ data: { title, description, contentFooter, footer }, className }
           className={s.heading}
           descriptionClassName={s.description}
           title={title}
-          description={description}
+          offset={isMobile ? '20px' : '120px'}
         />
         {!isMobile && <WhiteRectangle />}
       </Column>