From 4106b7eb9674bd77eee3fc9c676fc8b2d24a8261 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?=
 <78366796+fedealvarezcampos@users.noreply.github.com>
Date: Wed, 13 Apr 2022 14:48:17 +0200
Subject: [PATCH] Minor improvements (#36)

---
 .../common/footer/footer.module.scss          | 13 ++++++-
 src/components/icons/arrow.tsx                | 37 ++++++++++---------
 .../sections/about/hero/hero.module.scss      |  2 +-
 .../about/related/related.module.scss         |  2 +-
 src/components/sections/about/team/index.tsx  |  2 +-
 .../sections/about/team/team.module.scss      |  6 ++-
 .../community/events/events.module.scss       | 16 ++++++--
 .../homepage/benefits/benefits.module.scss    | 19 +++++++++-
 .../latest-news/latest-news.module.scss       | 22 ++++++++---
 .../what-others-say.module.scss               |  4 ++
 .../sections/products/app/app.module.scss     |  2 +
 .../sections/products/hero/hero.module.scss   |  4 +-
 .../products/network/network.module.scss      |  4 +-
 .../products/partners/partners.module.scss    |  6 ++-
 .../sections/products/stack/stack.module.scss |  3 +-
 .../sections/products/token/token.module.scss |  4 +-
 16 files changed, 106 insertions(+), 40 deletions(-)

diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index c52d5ee..68548ce 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -58,6 +58,10 @@
       filter: blur(tovw(80px, 'default', 40px));
     }
 
+    h2 {
+      text-shadow: 0 0 tovw(40px, 'default', 40px) rgb(255 255 255 / 0.4);
+    }
+
     .video {
       position: absolute;
       top: 0;
@@ -165,10 +169,10 @@
       }
 
       display: flex;
-      gap: tovw(88px, 'default', 55px);
+      gap: tovw(160px, 'default', 55px);
 
       @media screen and (max-width: 1180px) {
-        gap: tovw(65px, 'default', 35px);
+        gap: tovw(65px, 'default', 65px);
       }
     }
   }
@@ -233,6 +237,11 @@
     div {
       width: tovw(24px, 'default', 24px);
       height: tovw(24px, 'default', 24px);
+
+      &:hover {
+        transition: filter var(--normal-transition);
+        filter: opacity(40%);
+      }
     }
   }
 }
diff --git a/src/components/icons/arrow.tsx b/src/components/icons/arrow.tsx
index fb74978..e563139 100644
--- a/src/components/icons/arrow.tsx
+++ b/src/components/icons/arrow.tsx
@@ -102,24 +102,25 @@ const ArrowSlider = ({
   disabled?: any
 }) => {
   return (
-    <svg
-      onClick={onClick}
-      className={className}
-      fill="none"
-      viewBox="0 0 50 18"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M40 17L48 9L40 1"
-        stroke={fill || (!disabled ? 'var(--color-white)' : 'grey')}
-        strokeWidth="1.5"
-      />
-      <path
-        d="M48 9H0"
-        stroke={fill || (!disabled ? 'var(--color-white)' : 'grey')}
-        strokeWidth="1.5"
-      />
-    </svg>
+    <button onClick={onClick}>
+      <svg
+        className={className}
+        fill="none"
+        viewBox="0 0 50 18"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M40 17L48 9L40 1"
+          stroke={fill || (!disabled ? 'var(--color-white)' : 'grey')}
+          strokeWidth="1.5"
+        />
+        <path
+          d="M48 9H0"
+          stroke={fill || (!disabled ? 'var(--color-white)' : 'grey')}
+          strokeWidth="1.5"
+        />
+      </svg>
+    </button>
   )
 }
 
diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index 10918e2..df2306d 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -38,7 +38,7 @@
 
 .container {
   @include respond-to('mobile') {
-    padding: 0 tovw(16px, 'tablet', 16px);
+    padding: 0 tovw(56px, 'default', 16px);
   }
 }
 
diff --git a/src/components/sections/about/related/related.module.scss b/src/components/sections/about/related/related.module.scss
index be8d177..691221a 100644
--- a/src/components/sections/about/related/related.module.scss
+++ b/src/components/sections/about/related/related.module.scss
@@ -26,7 +26,7 @@
       align-items: flex-start;
       flex-direction: column;
       border-bottom: unset;
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
       gap: tovw(16px, 'mobile');
     }
 
diff --git a/src/components/sections/about/team/index.tsx b/src/components/sections/about/team/index.tsx
index cbc6c2d..d986252 100644
--- a/src/components/sections/about/team/index.tsx
+++ b/src/components/sections/about/team/index.tsx
@@ -11,7 +11,7 @@ const TeamSection = () => {
   return (
     <Section className={s['section']} id="team">
       <Container className={s['container']}>
-        <Heading as="h1" variant="lg">
+        <Heading as="h2" variant="lg">
           Team
         </Heading>
         <div>
diff --git a/src/components/sections/about/team/team.module.scss b/src/components/sections/about/team/team.module.scss
index ae6476d..fe643a8 100644
--- a/src/components/sections/about/team/team.module.scss
+++ b/src/components/sections/about/team/team.module.scss
@@ -11,7 +11,11 @@
 
   .container {
     @include respond-to('mobile') {
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
+    }
+
+    > h2 {
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
     }
 
     > div:nth-child(2) {
diff --git a/src/components/sections/community/events/events.module.scss b/src/components/sections/community/events/events.module.scss
index ec91b6f..6f56297 100644
--- a/src/components/sections/community/events/events.module.scss
+++ b/src/components/sections/community/events/events.module.scss
@@ -9,7 +9,7 @@
 
   .container {
     @include respond-to('mobile') {
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
     }
   }
 }
@@ -131,12 +131,22 @@
   gap: tovw(25px, 'default', 15px);
   place-content: center;
 
-  .arrow {
+  button {
     cursor: pointer;
-    width: tovw(50px, 'default', 30px);
+    display: flex;
+    align-items: center;
+    border: unset;
+    padding: unset;
+    margin: unset;
+    background-color: unset;
+    height: tovw(45px, 'default', 40px);
 
     &:first-child {
       transform: rotate(180deg);
     }
+
+    .arrow {
+      width: tovw(51px, 'default', 51px);
+    }
   }
 }
diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss
index 585f922..31debd0 100644
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@@ -11,11 +11,17 @@
         display: none;
       }
     }
+  }
 
-    .header {
+  .header {
+    @include respond-to('mobile') {
       padding-right: 0;
       padding-left: 0;
     }
+
+    h2 {
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+    }
   }
 
   position: relative;
@@ -23,6 +29,10 @@
   padding-bottom: tovw(100px, 'default', 90px);
 
   .grid {
+    @include respond-to('mobile') {
+      display: unset;
+    }
+
     display: grid;
     margin-top: tovw(64px, 'default', 44px);
     grid-column-gap: tovw(24px, 'default', 24px);
@@ -39,6 +49,10 @@
     }
 
     p {
+      @include respond-to('mobile') {
+        margin-top: tovw(24px, 'mobile', 44px);
+      }
+
       margin: 0;
       line-height: 1.33;
       letter-spacing: tovw(-0.3px, 'default', -0.3px);
@@ -88,6 +102,9 @@
 .users {
   @include respond-to('mobile') {
     padding: 0 tovw(13px, 'mobile');
+    margin: 0;
+    margin-bottom: tovw(70px, 'mobile');
+    max-width: unset;
   }
 
   margin: 0 0 tovw(305px, 'default', 110px) auto;
diff --git a/src/components/sections/homepage/latest-news/latest-news.module.scss b/src/components/sections/homepage/latest-news/latest-news.module.scss
index 457383a..1ad671a 100644
--- a/src/components/sections/homepage/latest-news/latest-news.module.scss
+++ b/src/components/sections/homepage/latest-news/latest-news.module.scss
@@ -4,8 +4,8 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin-top: tovw(55px, 'default', 20px);
-  padding: 0 0 tovw(185px, 'default', 90px) 0;
+  margin-top: tovw(55px, 'default', 55px);
+  padding: tovw(95px, 'default', 90px) 0 tovw(185px, 'default', 90px) 0;
 
   .slider__container {
     @include respond-to('mobile') {
@@ -22,7 +22,7 @@
       align-items: flex-start;
       flex-direction: column;
       border-bottom: unset;
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
       gap: tovw(16px, 'mobile');
     }
 
@@ -119,16 +119,26 @@
     display: flex;
     padding-top: tovw(75px, 'default', 45px);
     width: 100%;
-    gap: tovw(25px, 'default', 15px);
+    gap: tovw(25px, 'default', 18px);
     place-content: center;
 
-    .arrow {
+    button {
       cursor: pointer;
-      width: tovw(50px, 'default', 30px);
+      display: flex;
+      align-items: center;
+      border: unset;
+      padding: unset;
+      margin: unset;
+      background-color: unset;
+      height: tovw(45px, 'default', 40px);
 
       &:first-child {
         transform: rotate(180deg);
       }
+
+      .arrow {
+        width: tovw(51px, 'default', 51px);
+      }
     }
   }
 }
diff --git a/src/components/sections/homepage/what-others-say/what-others-say.module.scss b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
index 4118acf..f80965c 100644
--- a/src/components/sections/homepage/what-others-say/what-others-say.module.scss
+++ b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
@@ -13,6 +13,10 @@
     gap: tovw(24px, 'mobile');
   }
 
+  > h2 {
+    text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+  }
+
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/src/components/sections/products/app/app.module.scss b/src/components/sections/products/app/app.module.scss
index f7f7fe8..c934fbe 100644
--- a/src/components/sections/products/app/app.module.scss
+++ b/src/components/sections/products/app/app.module.scss
@@ -30,6 +30,8 @@
       @include respond-to('mobile') {
         font-size: tovw(32px, 'mobile');
       }
+
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
     }
 
     p {
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index 4e370a9..be8803a 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -16,7 +16,7 @@
 
   .container {
     @include respond-to('mobile') {
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
     }
   }
 
@@ -54,7 +54,7 @@
       }
 
       margin: 0;
-      text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
     }
 
     ol {
diff --git a/src/components/sections/products/network/network.module.scss b/src/components/sections/products/network/network.module.scss
index c696d6d..a03c92f 100644
--- a/src/components/sections/products/network/network.module.scss
+++ b/src/components/sections/products/network/network.module.scss
@@ -11,7 +11,7 @@
 
   .container {
     @include respond-to('mobile') {
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
     }
 
     display: flex;
@@ -24,6 +24,8 @@
         @include respond-to('mobile') {
           width: tovw(200px, 'mobile');
         }
+
+        text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
       }
 
       > p {
diff --git a/src/components/sections/products/partners/partners.module.scss b/src/components/sections/products/partners/partners.module.scss
index 114cada..bdf4e8d 100644
--- a/src/components/sections/products/partners/partners.module.scss
+++ b/src/components/sections/products/partners/partners.module.scss
@@ -11,7 +11,7 @@
 
   .container {
     @include respond-to('mobile') {
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
     }
 
     .header {
@@ -20,6 +20,10 @@
       border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
       padding-bottom: tovw(36px, 'default', 24px);
 
+      > h2 {
+        text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+      }
+
       &:nth-child(3) {
         margin-top: tovw(182px, 'default', 100px);
       }
diff --git a/src/components/sections/products/stack/stack.module.scss b/src/components/sections/products/stack/stack.module.scss
index 4fa0fa6..87487c4 100644
--- a/src/components/sections/products/stack/stack.module.scss
+++ b/src/components/sections/products/stack/stack.module.scss
@@ -11,7 +11,7 @@
 
   .container {
     @include respond-to('mobile') {
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
     }
   }
 
@@ -28,6 +28,7 @@
       }
 
       width: tovw(360px, 'default', 250px);
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
     }
 
     p {
diff --git a/src/components/sections/products/token/token.module.scss b/src/components/sections/products/token/token.module.scss
index 8670225..6159bd2 100644
--- a/src/components/sections/products/token/token.module.scss
+++ b/src/components/sections/products/token/token.module.scss
@@ -11,7 +11,7 @@
 
   .container {
     @include respond-to('mobile') {
-      padding: 0 tovw(16px, 'tablet', 16px);
+      padding: 0 tovw(56px, 'default', 16px);
     }
 
     display: flex;
@@ -21,6 +21,8 @@
       @include respond-to('mobile') {
         width: tovw(320px, 'mobile');
       }
+
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
     }
 
     div:first-child {