Change assets, general styles

src/components/sections/about/related/related.module.scss

@@ -124,9 +124,9 @@
     margin-left: 0;
     background: linear-gradient(
       180deg,
-      rgb(229 229 229 / 0) 0%,
+      rgb(4 4 4) 0%,
       rgb(241 241 241 / 0.5) 48.91%,
-      rgb(241 241 241 / 0) 89.23%
+      rgb(4 4 4) 89.23%
     );
     opacity: 0.4;
     width: 100%;

src/components/sections/blog/hero/hero.module.scss

@@ -20,9 +20,58 @@
     min-height: auto;
   }
 
+  .hero__container {
+    @include respond-to('mobile') {
+      min-height: unset;
+    }
+
+    display: flex;
+    place-content: center;
+    min-height: tovw(590px, 'default', 290px);
+
+    .hero {
+      @include respond-to('mobile') {
+        display: none;
+      }
+
+      margin: auto;
+      margin-top: tovw(-190px, 'default', -190px);
+      width: tovw(1580px, 'default', 700px);
+      mix-blend-mode: screen;
+
+      &__mobile {
+        @include respond-to('mobile') {
+          display: none;
+
+          // display: flex;
+          // margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
+          // width: 130%;
+          // mix-blend-mode: screen;
+          // place-self: center;
+          // mask-image: linear-gradient(
+          //   0deg,
+          //   rgb(255 255 255 / 0) 0%,
+          //   rgb(0 0 0) 25%
+          // );
+        }
+
+        display: none;
+      }
+    }
+  }
+
   .container {
+    @include respond-to('mobile') {
+      margin-top: unset;
+    }
+
     z-index: 10;
     padding-top: tovw(178px, 'default', 88px);
+    margin-top: tovw(-300px, 'default', -1450px);
+
+    h1 {
+      padding-bottom: tovw(120px, 'default', 80px);
+    }
 
     @media screen and (max-width: 800px) {
       padding-left: 0;

src/components/sections/blog/hero/index.tsx

@@ -13,10 +13,24 @@ interface HeroProps {
 const Hero = ({ featuredPost }: HeroProps) => {
   return (
     <Section className={s['section']} disableFadeIn>
-      <Heading as="h1" variant="xl" centered>
-        Blog
-      </Heading>
+      <div className={s.hero__container}>
+        <img
+          className={s.hero}
+          loading="eager"
+          alt="hero"
+          src="/images/blog/blog.png"
+        />
+        <img
+          className={s.hero__mobile}
+          loading="eager"
+          alt="hero"
+          src="/images/blog/blog.png"
+        />
+      </div>
       <Container className={s['container']}>
+        <Heading as="h1" variant="xl" centered>
+          Blog
+        </Heading>
         <BlogCard data={featuredPost} horizontal />
       </Container>
     </Section>

src/components/sections/contact/form/form.module.scss

@@ -75,6 +75,7 @@
         textarea,
         select {
           appearance: none;
+          width: 100%;
           font-size: tovw(24px, 'default', 18px);
           padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px);
           margin-top: tovw(20px, 'default', 16px);
@@ -88,6 +89,10 @@
             transition: all 250ms;
           }
 
+          &::placeholder {
+            color: var(--color-grey-light);
+          }
+
           option {
             background-color: black;
             opacity: 50%;
@@ -145,9 +150,9 @@
       margin-left: 0;
       background: linear-gradient(
         180deg,
-        rgb(229 229 229 / 0) 0%,
+        var(--color-black) 0%,
         rgb(241 241 241 / 0.5) 48.91%,
-        rgb(241 241 241 / 0) 100%
+        var(--color-black) 100%
       );
       opacity: 0.4;
       width: 100%;

src/components/sections/partners/contact/contact.module.scss

@@ -102,6 +102,7 @@
       }
 
       span {
+        text-transform: uppercase;
         padding-top: tovw(35px, 'default', 14px);
         color: var(--color-grey-light);
         font-family: var(--font-dm-mono), sans-serif;
@@ -137,6 +138,7 @@
         textarea,
         select {
           appearance: none;
+          width: 100%;
           font-size: tovw(24px, 'default', 18px);
           padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px);
           margin-top: tovw(20px, 'default', 16px);
@@ -150,20 +152,20 @@
             transition: all 250ms;
           }
 
+          &::placeholder {
+            color: var(--color-grey-light);
+          }
+
           option {
             background-color: black;
             opacity: 50%;
             border: none;
             color: var(--color-white);
-
-            &:first-child {
-              color: red;
-            }
           }
         }
 
         select {
-          background: url('/images/dropdown.svg') no-repeat 95% 50%;
+          background: url('/images/dropdown.svg') no-repeat 95% 52%;
           background-color: rgb(142 142 142 / 0.1);
           background-size: tovw(20px, 'default', 16px);
 

src/components/sections/partners/hero/hero.module.scss

@@ -21,56 +21,42 @@
     }
   }
 
-  .video_container {
-    align-self: center;
-    position: relative;
-    margin-top: tovw(-165px, 'default');
-    margin-bottom: tovw(-140px, 'default');
-    padding-top: tovw(30px, 'default', 20px);
-    width: 82%;
-    mix-blend-mode: lighten;
+  .hero__container {
+    @include respond-to('mobile') {
+      min-height: unset;
+    }
 
-    video {
+    display: flex;
+    place-content: center;
+    min-height: tovw(650px, 'default', 320px);
+
+    .hero {
       @include respond-to('mobile') {
         display: none;
       }
 
-      width: 100%;
-    }
-
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      background: radial-gradient(
-        ellipse,
-        rgb(3 3 3 / 0) 60%,
-        rgb(3 3 3 / 1) 75%,
-        rgb(3 3 3 / 1) 100%
-      );
-      width: 100%;
-      height: 100%;
-      content: '';
-    }
-  }
-
-  .hero__mobile {
-    @include respond-to('mobile') {
-      display: flex;
-      margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
-        tovw(16px, 'mobile', 20px);
-      width: 200%;
+      margin: auto;
+      margin-top: tovw(-35px, 'default', -35px);
+      width: tovw(1470px, 'default', 700px);
       mix-blend-mode: screen;
-      place-self: center;
-      mask-image: linear-gradient(
-        0deg,
-        rgb(255 255 255 / 0) 0%,
-        rgb(0 0 0) 25%
-      );
-    }
 
-    display: none;
+      &__mobile {
+        @include respond-to('mobile') {
+          display: flex;
+          margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
+          width: 130%;
+          mix-blend-mode: screen;
+          place-self: center;
+          mask-image: linear-gradient(
+            0deg,
+            rgb(255 255 255 / 0) 0%,
+            rgb(0 0 0) 25%
+          );
+        }
+
+        display: none;
+      }
+    }
   }
 
   .body {

src/components/sections/partners/opportunities/opportunities.module.scss

@@ -17,13 +17,17 @@
     }
 
     position: relative;
+    width: tovw(1076px, 'default', 400px);
 
     .block {
+      display: grid;
+      grid-template-columns: tovw(300px, 'default', 50px) auto;
+      gap: tovw(20px, 'default', 16px);
       padding-top: tovw(86px, 'default', 30px);
       border-top: tovw(1px, 'default', 1px) solid var(--color-grey-light);
 
       &:not(:first-child) {
-        margin-top: tovw(120px, 'default', 60px);
+        margin-top: tovw(86px, 'default', 30px);
       }
 
       &:last-child {
@@ -36,6 +40,11 @@
         border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
       }
 
+      img {
+        width: 100%;
+        mix-blend-mode: screen;
+      }
+
       .header {
         @include respond-to('mobile') {
           align-items: flex-end;
@@ -43,7 +52,7 @@
 
         display: flex;
         justify-content: space-between;
-        padding-bottom: tovw(76px, 'default', 35px);
+        padding-bottom: tovw(36px, 'default', 35px);
 
         > h2 {
           text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
@@ -75,33 +84,24 @@
           }
 
           margin: 0;
-          width: tovw(520px, 'default', 300px);
           font-size: tovw(24px, 'default', 16px);
         }
-
-        .arrow {
-          @include respond-to('mobile') {
-            display: none;
-          }
-
-          flex-shrink: 0;
-          width: tovw(23px, 'default', 14px);
-          height: fit-content;
-        }
       }
 
       ul {
         @include respond-to('mobile') {
-          padding: 0;
           flex-direction: column;
           gap: tovw(20px, 'mobile');
         }
 
         display: flex;
+        flex-wrap: wrap;
         list-style: none;
-        padding-left: tovw(104px, 'default', 52px);
+        gap: tovw(30px, 'default', 25px);
+        padding-left: 0;
         margin: 0;
-        margin-top: tovw(90px, 'default', 30px);
+        margin-top: tovw(70px, 'default', 30px);
+        padding-right: tovw(15px, 'default', 15px);
 
         li {
           a {
@@ -116,8 +116,6 @@
             @include respond-to('mobile') {
               margin: 0;
             }
-
-            margin-left: tovw(35px, 'default', 35px);
           }
         }
       }