Merge pull request #53 from Topledger/new-website

New website
Topledger · Feb 13, 2024 · 0a25d6c · 0a25d6c
2 parents ae29270 + 74bc4d9
commit 0a25d6c
Show file tree

Hide file tree

Showing 45 changed files with 798 additions and 301 deletions.
diff --git a/assets/styles/mixins.scss b/assets/styles/mixins.scss
@@ -78,6 +78,21 @@
   }
 }
 
+@mixin animFadeInTop($duration: 0.5s, $delay: 0s, $ease: ease-in-out) {
+  @keyframes fadeInTop {
+    0% {
+      height: 0%;
+      // transform: translateY(-20px);
+    }
+    100% {
+      height: 100%;
+      // transform: translateY(0);
+    }
+  }
+
+  animation: fadeInTop $duration $ease $delay 1 normal forwards;
+}
+
 @mixin mesh-overlay {
   &::before {
     content: "";

diff --git a/components/Footer/components/ContactUs/index.module.scss b/components/Footer/components/ContactUs/index.module.scss
@@ -14,7 +14,7 @@
     width: 22rem;
   }
   @include max-width(xl) {
-    border-radius: 2rem;
+    border-radius: 1.5rem;
     width: 100%;
   }
 }

diff --git a/components/Footer/components/FooterLinks/index.module.scss b/components/Footer/components/FooterLinks/index.module.scss
@@ -25,7 +25,7 @@
   min-width: 120px;
   padding-right: 1rem;
   padding-bottom: 1rem;
-  margin-right: 72px;
+  margin-right: 3.5rem;
   @include max-width(xxl) {
     margin-right: 2rem;
   }

diff --git a/components/Footer/index.js b/components/Footer/index.js
@@ -1,3 +1,5 @@
+import cx from "classnames";
+
 import Button from "../Button";
 import Section from "../Section";
 import ContactUs from "./components/ContactUs";
@@ -6,51 +8,51 @@ import FooterLinks from "./components/FooterLinks";
 import styles from "./index.module.scss";
 
 const footerLinks = [
-  // {
-  //   id: 1,
-  //   title: "Products",
-  //   links: [
-  //     {
-  //       text: "SQL platform",
-  //       href: "/web3-teams",
-  //     },
-  //     {
-  //       text: "Wallet profiler",
-  //       href: "",
-  //     },
-  //     {
-  //       text: "TL for research",
-  //       href: "/research",
-  //     },
-  //   ],
-  // },
-  // {
-  //   id: 2,
-  //   title: "Use Cases",
-  //   links: [
-  //     {
-  //       text: "For web3 teams",
-  //       href: "/web3-teams",
-  //     },
-  //     {
-  //       text: "For institutions",
-  //       href: "/research",
-  //     },
-  //     {
-  //       text: "For developers",
-  //       href: "https://docs.topledger.xyz",
-  //       target: "_blank",
-  //     },
-  //   ],
-  // },
+  {
+    id: 1,
+    title: "Products",
+    links: [
+      {
+        text: "SQL platform",
+        href: "/web3-teams",
+      },
+      {
+        text: "Wallet profiler",
+        href: "",
+      },
+      {
+        text: "TL for research",
+        href: "/research",
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "Use Cases",
+    links: [
+      {
+        text: "For web3 teams",
+        href: "/web3-teams",
+      },
+      {
+        text: "For institutions",
+        href: "/research",
+      },
+      {
+        text: "For developers",
+        href: "https://docs.topledger.xyz",
+        target: "_blank",
+      },
+    ],
+  },
   {
     id: 3,
     title: "Other links",
     links: [
-      // {
-      //   text: "Pricing",
-      //   href: "/pricing",
-      // },
+      {
+        text: "Pricing",
+        href: "/pricing",
+      },
       {
         text: "Blogs",
         href: "https://blog.topledger.xyz",
@@ -84,9 +86,13 @@ const Footer = () => {
             <Button.Link tertiary color="#1A3989" className={styles.copyLink}>
               © 2024, Top Ledger, All rights reserved
             </Button.Link>
-            {/* <Button.Link tertiary color="#1A3989" className={styles.copyLink}>
+            <Button.Link
+              tertiary
+              color="#1A3989"
+              className={cx(styles.copyLink, styles.privacyPolicy)}
+            >
               Privacy Policy
-            </Button.Link> */}
+            </Button.Link>
           </div>
         </div>
         <div className={styles.rightSection}>

diff --git a/components/Footer/index.module.scss b/components/Footer/index.module.scss
@@ -71,3 +71,9 @@
   font-weight: 400;
   width: 100%;
 }
+
+.privacyPolicy {
+  @include mobile {
+    display: none;
+  }
+}
diff --git a/components/Header/components/HeaderMenu/index.js b/components/Header/components/HeaderMenu/index.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import cx from "classnames";
 
 import Icon from "components/Icon";
@@ -48,20 +48,36 @@ const MenuItem = ({ icon, title, description, href, target, comingSoon }) => {
 };
 
 const HeaderMenu = ({ children, menuItems }) => {
+  const containerRef = useRef();
   const [isOpen, setIsOpen] = useState();
 
+  useEffect(() => {
+    if (isOpen) {
+      const handleClick = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("click", handleClick);
+      return () => document.removeEventListener("click", handleClick);
+    }
+  }, [isOpen]);
+
   return (
     <>
       <span
-        className={styles.headerLink}
+        className={cx(styles.headerLink, { [styles.headerLinkOpen]: isOpen })}
         onClick={() => setIsOpen((isOpen) => !isOpen)}
+        ref={containerRef}
       >
-        {children}{" "}
-        <Icon
-          className={cx(styles.chevron, "chevron-icon")}
-          // style={{ transform: `rotate(${isOpen ? -180 : 0}deg)` }}
-          name="chevron"
-        />
+        <span>
+          {children}{" "}
+          <Icon
+            className={cx(styles.chevron, "chevron-icon")}
+            // style={{ transform: `rotate(${isOpen ? -180 : 0}deg)` }}
+            name="chevron"
+          />
+        </span>
         <div className={cx(styles.headerMenu, "header-menu")}>
           <ul className={styles.headerMenuItems}>
             {menuItems.map((menuItem) => (

diff --git a/components/Header/components/HeaderMenu/index.module.scss b/components/Header/components/HeaderMenu/index.module.scss
@@ -1,11 +1,14 @@
 @import "@/assets/styles/breakpoints.scss";
+@import "@/assets/styles/mixins.scss";
 
 $header-animation-time: 0.3s;
 $header-in-animation-delay: 0.1s;
 $header-out-animation-delay: 0.3s;
 
 @mixin header-menu {
-  z-index: -1;
+  position: fixed;
+  top: -2000px;
+  z-index: -10;
   opacity: 0;
   transform: translate(0px, -10px);
   transition: height $header-animation-time ease-in-out,
@@ -15,6 +18,8 @@ $header-out-animation-delay: 0.3s;
 }
 
 @mixin header-menu-hover {
+  position: absolute;
+  top: 88px;
   opacity: 1;
   z-index: 10;
   transform: translate(0px, 0px);
@@ -27,26 +32,48 @@ $header-out-animation-delay: 0.3s;
 .headerLink {
   display: inline-flex;
   align-items: center;
-  position: relative;
+  // position: relative;
   cursor: pointer;
 
-  &:hover {
+  &.headerLinkOpen {
     .headerMenu {
       @include header-menu-hover;
+
+      @include mobile {
+        display: block;
+      }
     }
 
     .chevron {
       transform: rotate(180deg);
     }
   }
+
+  > span:first-child {
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  @include mobile {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  // & > span:first-child > a:active {
+  //   color: red;
+  // }
+  &:focus {
+    background-color: red;
+  }
 }
 
 .chevron {
   transition: transform 0.3s ease-in-out;
 }
 
 .headerMenu {
-  position: fixed;
+  position: absolute;
   top: 88px;
   width: 100vw;
   left: 0;
@@ -58,7 +85,23 @@ $header-out-animation-delay: 0.3s;
   @include header-menu;
 
   &:hover {
-    @include header-menu-hover;
+    @include min-width(lg) {
+      @include header-menu-hover;
+    }
+
+    @include mobile {
+      display: block;
+      @include animFadeInTop;
+    }
+  }
+
+  @include mobile {
+    position: relative !important;
+    top: 0 !important;
+    width: calc(100% + 3rem);
+    margin-left: -1.5rem;
+    display: none;
+    margin-top: 1rem;
   }
 }
 
@@ -72,6 +115,13 @@ $header-out-animation-delay: 0.3s;
   grid-template-columns: repeat(2, 1fr);
   row-gap: 1.5rem;
   column-gap: 84px;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+    row-gap: 1rem;
+    column-gap: 0;
+    @include animFadeInTop(0.3s, 0.1s);
+  }
 }
 
 .headerMenuItem {
@@ -92,6 +142,12 @@ $header-out-animation-delay: 0.3s;
     border-color: #e8e9fa;
     padding: 15px;
   }
+
+  @include mobile {
+    border: none;
+    border-radius: 0;
+    margin-bottom: 0rem;
+  }
 }
 
 .headerMenuItemIcon {