Update landing & footer

website/docusaurus.config.js

@@ -146,72 +146,6 @@ const config = {
         },
       ],
     },
-    image: "img/undraw_online.svg",
-    footer: {
-      style: "dark",
-      links: [
-        {
-          title: "Foundation",
-          items: [
-            {
-              label: "About Us",
-              to: "https://www.nervos.org/",
-            },
-          ],
-        },
-        {
-          title: "Developer",
-          items: [
-            { label: "GitHub", to: "https://github.com/nervosnetwork" },
-            {
-              label: "Whitepaper",
-              to: "https://github.com/nervosnetwork/rfcs/blob/master/rfcs/0002-ckb/0002-ckb.md",
-            },
-            { label: "RFCs", to: "https://github.com/nervosnetwork/rfcs" },
-          ],
-        },
-        {
-          title: "Community",
-          items: [
-            {
-              label: "Discord",
-              to: "https://discord.gg/nervosnetwork ",
-            },
-
-            {
-              label: "Forum",
-              to: "https://talk.nervos.org/",
-            },
-            {
-              label: "Reddit",
-              to: "https://www.reddit.com/r/NervosNetwork/",
-            },
-            {
-              label: "Telegram",
-              to: "https://t.me/nervosnetwork",
-            },
-          ],
-        },
-        {
-          title: "More",
-          items: [
-            {
-              label: "Twitter/X",
-              to: "https://twitter.com/nervosnetwork",
-            },
-            {
-              label: "Medium",
-              to: "https://medium.com/nervosnetwork",
-            },
-            {
-              label: "YouTube",
-              to: "https://www.youtube.com/channel/UCONuJGdMzUY0Y6jrPBOzH7A",
-            },
-          ],
-        },
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} Nervos Foundation. All Rights Reserved.`,
-    },
     algolia: {
       appId: "LU9B8PQ7W5",
       apiKey: "122c7efa6c0425cfd6852286c746e653",

website/src/components/Button/index.tsx

@@ -4,26 +4,43 @@ import styles from "./styles.module.css";
 
 interface ButtonProps {
   link: string;
+  type?: "primary" | "secondary";
+  size?: "small" | "default";
   internal?: boolean;
   children: React.ReactNode;
   className?: string;
 }
 export default function Button({
   link,
+  type = "secondary",
+  size = "default",
   internal = true,
   children,
   className,
 }: ButtonProps): JSX.Element {
   if (internal) {
     return (
-      <Link className={clsx(styles.solidBtn, className)} to={link}>
+      <Link
+        className={clsx(
+          { [styles.secBtn]: type === "secondary" },
+          { [styles.priBtn]: type === "primary" },
+          { [styles.smallBtn]: size === "small" },
+          className
+        )}
+        to={link}
+      >
         {children}
       </Link>
     );
   }
   return (
     <Link
-      className={clsx(styles.solidBtn, className)}
+      className={clsx(
+        { [styles.secBtn]: type === "secondary" },
+        { [styles.priBtn]: type === "primary" },
+        { [styles.smallBtn]: size === "small" },
+        className
+      )}
       href={link}
       target="_blank"
       rel="noopener noreferrer"

website/src/components/Button/styles.module.css

@@ -1,26 +1,37 @@
 @import "@css/customVariables.css";
 
-.solidBtn {
+.priBtn,
+.secBtn {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 1.5rem;
-  color: var(--dark-text-inverse) !important;
+  padding: 0 2rem;
   text-decoration: none !important;
   border-radius: 80px;
   font-weight: bold;
   font-size: 1em;
   line-height: 3em;
   border: none;
-  box-shadow: var(--dark-btn-shadow);
-  backdrop-filter: blur(15px);
   cursor: pointer;
   width: fit-content;
   position: relative;
   overflow: hidden;
   z-index: 1;
 }
-.solidBtn:after {
+.priBtn {
+  color: var(--dark-text-inverse) !important;
+  box-shadow: var(--dark-btn-shadow);
+  backdrop-filter: blur(15px);
+}
+.secBtn {
+  background-color: var(--dark-alert-success-bg);
+}
+.smallBtn {
+  line-height: 2rem;
+  padding: 0 1rem;
+}
+
+.priBtn:after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -31,7 +42,7 @@
   border-radius: 80px;
   z-index: -2;
 }
-.solidBtn:before {
+.priBtn:before {
   content: "";
   position: absolute;
   bottom: 0;
@@ -43,12 +54,21 @@
   border-radius: 80px;
   z-index: -1;
 }
-.solidBtn:hover:before {
+.priBtn:hover:before {
   width: 100%;
 }
+.secBtn:hover {
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(24, 239, 177, 0) 0%,
+    rgba(24, 239, 177, 0.3) 100%
+  );
+  transition: opacity 0.2s;
+}
 
 @media (max-width: 768px) {
-  .solidBtn {
+  .priBtn,
+  .secBtn {
     line-height: 2.5rem;
     width: 100%;
   }