General styles

src/components/common/header/header.module.scss

@@ -18,6 +18,8 @@
   nav {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    width: 100%;
 
     svg {
       display: block;
@@ -26,7 +28,6 @@
 
   ul {
     display: flex;
-    margin: 0 0 0 tovw(122px, 'default', 90px);
     padding: 0;
     list-style-type: none;
     gap: tovw(32px, 'default', 16px);

src/components/common/header/index.tsx

@@ -160,15 +160,16 @@ export const Header = () => {
               </li>
             ))}
         </ul>
+        <ButtonLink
+          className="hide-on-mobile"
+          href="https://discord.com/invite/ukhbBemyxY"
+          size="small"
+          variant="default"
+        >
+          Join Us
+        </ButtonLink>
       </nav>
-      <ButtonLink
-        className="hide-on-mobile"
-        href="https://discord.com/invite/ukhbBemyxY"
-        size="small"
-        variant="default"
-      >
-        Join Us
-      </ButtonLink>
+
       <div className="hide-on-desktop">
         <Button
           aria-label="Menu"

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

@@ -8,7 +8,6 @@
 
   position: relative;
   margin: tovw(135px, 'default', 70px) 0;
-  padding: tovw(104px, 'default', 95px) 0;
 
   .container {
     @include respond-to('mobile') {

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

@@ -7,7 +7,7 @@
 
   position: relative;
   margin-top: tovw(24px, 'default', 16px);
-  padding: tovw(124px, 'default', 120px) 0 tovw(124px, 'default', 80px) 0;
+  padding: tovw(124px, 'default', 120px) 0 tovw(80px, 'default', 60px) 0;
 
   .container {
     @include respond-to('mobile') {

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

@@ -7,8 +7,7 @@
   }
 
   position: relative;
-  margin: tovw(135px, 'default', 70px) 0;
-  padding: tovw(104px, 'default', 95px) 0;
+  margin: tovw(50px, 'default', 30px) 0;
 
   .container {
     @include respond-to('mobile') {
@@ -66,7 +65,7 @@
 
       position: absolute;
       right: 0;
-      bottom: tovw(245px, 'default', 170px);
+      bottom: tovw(210px, 'default', 80px);
       left: 0;
       opacity: 0.3;
       margin-left: 0;
@@ -77,7 +76,7 @@
         rgb(241 241 241 / 0) 95%
       );
       width: 100%;
-      height: tovw(900px, 'default', 400px);
+      height: tovw(800px, 'default', 350px);
       content: '';
       pointer-events: none;
       user-select: none;

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

@@ -80,7 +80,7 @@
           padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px);
           margin-top: tovw(20px, 'default', 16px);
           background: rgb(142 142 142 / 0.1);
-          border: tovw(1px, 'default', 1px) solid transparent;
+          border: tovw(1px, 'default', 1px) solid var(--color-grey);
           border-radius: tovw(8px, 'default', 8px);
 
           &:focus {

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

@@ -31,7 +31,8 @@
 
     display: flex;
     place-content: center;
-    min-height: tovw(600px, 'default', 315px);
+    margin-top: tovw(-180px, 'default', -180px);
+    min-height: tovw(925px, 'default', 485px);
 
     .hero {
       @include respond-to('mobile') {
@@ -73,7 +74,7 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-    margin-top: tovw(16px, 'default', 10px);
+    margin-top: tovw(-50px, 'default', -50px);
     width: tovw(800px, 'default');
     gap: tovw(50px, 'default', 40px);
     z-index: 5;

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

@@ -27,13 +27,13 @@ const Hero = ({ data }: Props) => {
           className={s.hero}
           loading="eager"
           alt="hero"
-          src="/images/contact/contact.png"
+          src="/images/contact/banner-contact.png"
         />
         <img
           className={s.hero__mobile}
           loading="eager"
           alt="hero"
-          src="/images/contact/contact.png"
+          src="/images/contact/banner-contact.png"
         />
       </div>
       <Container className={s['container']}>

src/components/sections/newsroom/media/index.tsx

@@ -42,11 +42,13 @@ const Media = ({ data }: Props) => {
 
   const [showDialog, setShowDialog] = useState(false)
   const [videoLink, setVideoLink] = useState<string>('')
+  const [videoLabel, setVideoLabel] = useState<string>('')
 
   const close = () => setShowDialog(false)
-  const open = (link: string) => {
+  const open = (link: string, label: string) => {
     setVideoLink(link)
     setShowDialog(true)
+    setVideoLabel(label)
   }
 
   const [sliderRef] = useKeenSlider<HTMLDivElement>({
@@ -92,7 +94,9 @@ const Media = ({ data }: Props) => {
             <div className={`${s.item} keen-slider__slide`}>
               <div
                 className={s['image__container']}
-                onClick={() => open(data?.mediaVideo01Link)}
+                onClick={() =>
+                  open(data?.mediaVideo01Link, data?.mediaVideo01Label)
+                }
               >
                 <img
                   alt="image"
@@ -115,7 +119,9 @@ const Media = ({ data }: Props) => {
             <div className={`${s.item} keen-slider__slide`}>
               <div
                 className={s['image__container']}
-                onClick={() => open(data?.mediaVideo02Link)}
+                onClick={() =>
+                  open(data?.mediaVideo02Link, data?.mediaVideo02Label)
+                }
               >
                 <img
                   alt="image"
@@ -138,7 +144,9 @@ const Media = ({ data }: Props) => {
             <div className={`${s.item} keen-slider__slide`}>
               <div
                 className={s['image__container']}
-                onClick={() => open(data?.mediaVideo03Link)}
+                onClick={() =>
+                  open(data?.mediaVideo03Link, data?.mediaVideo03Label)
+                }
               >
                 <img
                   alt="image"
@@ -161,7 +169,9 @@ const Media = ({ data }: Props) => {
             <div className={`${s.item} keen-slider__slide`}>
               <div
                 className={s['image__container']}
-                onClick={() => open(data?.mediaVideo04Link)}
+                onClick={() =>
+                  open(data?.mediaVideo04Link, data?.mediaVideo04Label)
+                }
               >
                 <img
                   alt="image"
@@ -187,7 +197,7 @@ const Media = ({ data }: Props) => {
 
       <Modal showDialog={showDialog} close={close}>
         <Video videoLink={videoLink} />
-        {/* <div>culo</div> */}
+        <span className={s.videolabel}>{videoLabel}</span>
       </Modal>
     </>
   )

src/components/sections/newsroom/media/media.module.scss

@@ -7,7 +7,7 @@
 
   position: relative;
   margin: tovw(140px, 'default', 110px) 0;
-  padding: tovw(104px, 'default', 90px) 0;
+  padding: tovw(70px, 'default', 50px);
 
   .container {
     @include respond-to('mobile') {
@@ -128,3 +128,12 @@
     }
   }
 }
+
+.videolabel {
+  display: block;
+  font-family: var(--font-tt-hoves);
+  font-size: tovw(40px, 'default', 18px);
+  margin-top: tovw(20px, 'default', 15px);
+  line-height: 120%;
+  letter-spacing: -0.02em;
+}

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

@@ -143,7 +143,7 @@
           padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px);
           margin-top: tovw(20px, 'default', 16px);
           background: rgb(142 142 142 / 0.1);
-          border: tovw(1px, 'default', 1px) solid transparent;
+          border: tovw(1px, 'default', 1px) solid var(--color-grey);
           border-radius: tovw(8px, 'default', 8px);
 
           &:focus {

src/css/global.scss

@@ -17,6 +17,7 @@
   --color-accent: #0000f4;
   --color-black: #040404;
   --color-white: #fbfbfb;
+  --color-grey: #565656;
   --color-grey-light: #8e8e8e;
   --color-grey-lightness: #dedede;
 
@@ -150,7 +151,7 @@ p {
     font-size: tovw(24px, 'default', 18px) !important;
     padding: tovw(16px, 'default', 11px) tovw(10px, 'default', 7px) !important;
     background: rgb(142 142 142 / 0.1) !important;
-    border: tovw(1px, 'default', 1px) solid transparent !important;
+    border: tovw(1px, 'default', 1px) solid var(--color-grey) !important;
     border-radius: tovw(8px, 'default', 8px) !important;
     transition: unset !important;