Merge pull request #192 from NilFoundation/revert-191-legion

Remove legion baner
NilFoundation · Feb 13, 2025 · 5bda15e · 5bda15e
2 parents 7875a9a + c12f80a
commit 5bda15e
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 224 deletions.
diff --git a/site/src/components/common/Header/Arrow.tsx b/site/src/components/common/Header/Arrow.tsx
diff --git a/site/src/components/common/Header/Header.module.scss b/site/src/components/common/Header/Header.module.scss
@@ -4,9 +4,6 @@
 @use '~styles/paddings' as *;
 @use '~styles/typography' as *;
 
-$mobileBannerHeight: 24px;
-$desktopBannerHeight: 42;
-
 .root {
   position: fixed;
   z-index: 100;
@@ -15,95 +12,12 @@ $desktopBannerHeight: 42;
   height: size(30);
   color: $grey;
 
-  transition: transform 0.3s ease;
-  transform: translateY(0);
-
   @include mobile {
     width: 100vw;
     height: auto;
   }
 }
 
-.banner {
-  position: fixed;
-  width: 100%;
-  z-index: 100;
-  top: 0;
-  height: size($desktopBannerHeight);
-  overflow: hidden;
-  white-space: nowrap;
-  border-bottom: 1px solid var(--Gray-pallete-gray-700, #444);
-  background: var(--Gray-pallete-gray-900, #212121);
-  transform: translateY(0);
-  transition: transform 0.3s ease;
-
-  @media screen and (max-width: 768px) {
-    height: $mobileBannerHeight;
-  }
-
-  &_hidden {
-    transform: translateY(-100%);
-
-    &+.root {
-      transform: translateY(size(-$desktopBannerHeight));
-
-      @media screen and (max-width: 768px) {
-        transform: translateY(-$mobileBannerHeight);
-      }
-    }
-  }
-
-  // infinite scroll
-
-  @keyframes scroll {
-    from {
-      transform: translateX(0);
-    }
-
-    to {
-      transform: translateX(-50%);
-    }
-  }
-
-  &__container {
-    width: fit-content;
-    min-width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    gap: size(16);
-    padding-right: size(16);
-    animation: scroll 70s linear infinite;
-    transition: all 0.3s ease;
-
-    &:hover {
-      animation-play-state: paused;
-    }
-  }
-
-  &__text {
-    font-size: size(15);
-    white-space: nowrap;
-  }
-
-  &__arrow {
-    height: size(16);
-    width: size(16);
-    flex-shrink: 0;
-  }
-
-  &+.root {
-    top: size($desktopBannerHeight);
-
-    @media screen and (max-width: 768px) {
-      top: $mobileBannerHeight;
-    }
-  }
-}
-
-
 .wrapper {
   display: grid;
   grid-template-columns: size(324) 1fr;

diff --git a/site/src/components/common/Header/Header.tsx b/site/src/components/common/Header/Header.tsx
@@ -3,7 +3,6 @@ import cx from 'classnames'
 import { useRouter } from 'next/router'
 
 import { useViewport } from 'hooks/useViewport'
-import { useScrollDirection } from 'hooks/useScrollDirection'
 
 import Icon from 'components/Icon'
 import Container from 'components/Container'
@@ -14,21 +13,16 @@ import BurgerMenu from './BurgerMenu'
 import s from './Header.module.scss'
 import { links } from './stub'
 import { Config } from 'src/strapi/types/Config'
-import { Arrow } from './Arrow'
 
 type HeaderProps = {
   className?: string
   config: Config
 }
 
-const bannerText = ['=nil; has partnered with Legion', 'Join the =nil; community on Legion']
-
 function Header({ className, config }: HeaderProps) {
   const router = useRouter()
   const { isMobile } = useViewport()
 
-  const scrollDirection = useScrollDirection()
-
   const [isBurgerOpen, setBurgerOpen] = useState(false)
 
   const realLinks = useMemo(() => {
@@ -58,72 +52,46 @@ function Header({ className, config }: HeaderProps) {
     setBurgerOpen(!isBurgerOpen)
   }, [isBurgerOpen])
 
-  const bannerElements = []
-  for (let i = 0; i < 10; i++) {
-    for (const text of bannerText) {
-      bannerElements.push(
-        <span key={`${i}_text`} className={s.banner__text}>
-          {text}
-        </span>,
-      )
-      bannerElements.push(
-        <div>
-          <Arrow key={`${i}_arrow`} className={s.banner__arrow} />
-        </div>,
-      )
-    }
-  }
-
   return (
-    <>
-      <a
-        className={cx(s.banner, {
-          [s.banner_hidden]: useScrollDirection() === 'down',
-        })}
-        href="https://legion.cc/access?ref=nil"
-      >
-        <div className={s.banner__container}>{bannerElements}</div>
-      </a>
-      <Container className={cx(s.root, className)}>
-        <nav className={s.wrapper}>
-          <Button href="/">
-            <Icon name="logo" className={s.logo} />
-          </Button>
-          <div className={s.box}>
-            {realLinks.other.map((el) => (
-              <Button
-                key={el.name}
-                href={el.link}
-                className={cx(s.otherLink, {
-                  [s.isActive]: router.asPath === el.link,
+    <Container className={cx(s.root, className)}>
+      <nav className={s.wrapper}>
+        <Button href="/">
+          <Icon name="logo" className={s.logo} />
+        </Button>
+        <div className={s.box}>
+          {realLinks.other.map((el) => (
+            <Button
+              key={el.name}
+              href={el.link}
+              className={cx(s.otherLink, {
+                [s.isActive]: router.asPath === el.link,
+              })}
+            >
+              {el.name}
+            </Button>
+          ))}
+        </div>
+        {isMobile && (
+          <>
+            <div className={s.buttonsWrapper} onClick={handleClickBurger}>
+              <Icon
+                className={cx(s.burgerBtn, {
+                  [s.isBurgerOpen]: isBurgerOpen,
+                })}
+                name="cross"
+              />
+              <Icon
+                className={cx(s.burgerBtn, {
+                  [s.isBurgerOpen]: !isBurgerOpen,
                 })}
-              >
-                {el.name}
-              </Button>
-            ))}
-          </div>
-          {isMobile && (
-            <>
-              <div className={s.buttonsWrapper} onClick={handleClickBurger}>
-                <Icon
-                  className={cx(s.burgerBtn, {
-                    [s.isBurgerOpen]: isBurgerOpen,
-                  })}
-                  name="cross"
-                />
-                <Icon
-                  className={cx(s.burgerBtn, {
-                    [s.isBurgerOpen]: !isBurgerOpen,
-                  })}
-                  name="squares"
-                />
-              </div>
-              <BurgerMenu isOpen={isBurgerOpen} />
-            </>
-          )}
-        </nav>
-      </Container>
-    </>
+                name="squares"
+              />
+            </div>
+            <BurgerMenu isOpen={isBurgerOpen} />
+          </>
+        )}
+      </nav>
+    </Container>
   )
 }
 

diff --git a/site/src/components/common/Header/assets/arrow.svg b/site/src/components/common/Header/assets/arrow.svg
diff --git a/site/src/components/common/Layout/Layout.module.scss b/site/src/components/common/Layout/Layout.module.scss
@@ -2,9 +2,9 @@
 @use '~styles/mixins' as *;
 
 .wrapper {
-  margin-top: size(76);
+  margin-top: size(46);
 
   @include mobile {
-    margin-top: size(45);
+    margin-top: size(25);
   }
-}
+}
diff --git a/site/src/components/pages/LandingPage/Intro/Intro.module.scss b/site/src/components/pages/LandingPage/Intro/Intro.module.scss
@@ -6,10 +6,10 @@
 
 
 .intro {
-    margin-top: size(110);
+    margin-top: size(80);
 
     @media screen and (max-width: 768px) {
-        margin-top: 70px;
+        margin-top: 40px;
         padding: 0 16px;
         overflow: hidden;
     }

diff --git a/site/src/hooks/useScrollDirection.ts b/site/src/hooks/useScrollDirection.ts