feat: add banner for fiber network

nervosnetwork · Dec 16, 2024 · 09779c0 · 09779c0
1 parent 01c646e
commit 09779c0
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 13 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -205,6 +205,13 @@
       "wallets_memo": "In alphabetical order",
       "nft_collections": "NFT Collections"
     },
+    "banner": {
+      "fiber_title": "Fiber Network is making Satoshi’s vision a reality",
+      "fiber_subtitle": "The Next-generation Common Lightning Network",
+      "learn_more": "Learn More",
+      "find_nodes": "Find Nodes",
+      "coming_soon": "Coming soon"
+    },
     "blockchain": {
       "latest_block": "Latest Block",
       "epoch": "Epoch",

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -220,6 +220,13 @@
       "wallets_memo": "In alphabetical order",
       "nft_collections": "NFT 藏品"
     },
+    "banner": {
+      "fiber_title": "Fiber Network 不忘初心",
+      "fiber_subtitle": "下一代通用闪电网络",
+      "learn_more": "了解更多",
+      "find_nodes": "更多节点",
+      "coming_soon": "敬请期待"
+    },
     "blockchain": {
       "latest_block": "最高块",
       "epoch": "Epoch",

diff --git a/src/pages/Home/Banner/fiber_network.gif b/src/pages/Home/Banner/fiber_network.gif
diff --git a/src/pages/Home/Banner/fiber_network_640.gif b/src/pages/Home/Banner/fiber_network_640.gif
diff --git a/src/pages/Home/Banner/index.module.scss b/src/pages/Home/Banner/index.module.scss
@@ -2,25 +2,187 @@
 
 $backgroundColor: #232323;
 
-.root {
+.root,
+.fiberBanner {
   width: 100%;
-  background-color: $backgroundColor;
   height: 200px;
   position: relative;
-  background-image: url('./ckb_explorer_banner.svg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: auto 100%;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.root {
+  background-color: $backgroundColor;
+  background-image: url('./ckb_explorer_banner.svg');
 
   @media (width <= $mobileBreakPoint) {
     background-image: url('./ckb_explorer_banner_phone.svg');
   }
 }
 
+.fiberBanner {
+  --m: 1rem;
+  --red: #ff6565;
+  --pink: #ff64f9;
+  --purple: #6b5fff;
+  --blue: #4d8aff;
+  --green: #5bff89;
+  --yellow: #fe5;
+  --orange: #ff6d1b;
+
+  position: relative;
+  background-color: black;
+  background-image: url('./fiber_network.gif');
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .slogan {
+    display: flex;
+    flex-direction: column;
+
+    h1,
+    h3 {
+      line-height: 1;
+      color: #f3f3f3;
+      text-align: center;
+    }
+
+    h3 {
+      opacity: 0.8;
+      font-weight: 300;
+    }
+
+    margin-bottom: 20px;
+  }
+
+  a {
+    position: relative;
+    color: #f3f3f3;
+    font-size: var(--m);
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  span {
+    box-sizing: border-box;
+    border: calc(0.08 * var(--m)) solid transparent;
+    border-radius: calc(0.7 * var(--m));
+    padding: calc(0.5 * var(--m)) calc(1 * var(--m));
+    background: linear-gradient(#121213, #121213),
+      linear-gradient(#121213 50%, rgb(18 18 19 / 60%) 80%, rgb(18 18 19 / 0%)),
+      linear-gradient(
+        90deg,
+        var(--orange),
+        var(--yellow),
+        var(--green),
+        var(--blue),
+        var(--purple),
+        var(--pink),
+        var(--red)
+      );
+    background-origin: border-box;
+    background-clip: padding-box, border-box, border-box;
+    background-size: 200%;
+    animation: animate 8s infinite linear;
+    transition-duration: 0.3s;
+    z-index: 1;
+  }
+
+  .links {
+    display: flex;
+    gap: 80px;
+  }
+
+  a::before {
+    content: '';
+    background: linear-gradient(
+      90deg,
+      var(--orange),
+      var(--yellow),
+      var(--green),
+      var(--blue),
+      var(--purple),
+      var(--pink),
+      var(--red)
+    );
+    height: 30%;
+    width: 90%;
+    position: absolute;
+    bottom: 0;
+    background-size: 200%;
+    animation: animate 8s infinite linear;
+    filter: blur(calc(0.8 * var(--m)));
+  }
+
+  a:hover span {
+    border: calc(0.08 * var(--m)) solid transparent;
+    transform: perspective(1000px) translateZ(50px);
+    transform-style: preserve-3d;
+  }
+
+  a:hover::before {
+    height: 100%;
+    width: 120%;
+    filter: blur(calc(1.5 * var(--m)));
+    opacity: 0.8;
+  }
+
+  a[aria-disabled] {
+    /* pointer-events: none; */
+    cursor: not-allowed;
+
+    span {
+      background: #aaa;
+      color: #ccc;
+      border: none;
+    }
+
+    &::before {
+      display: none;
+    }
+
+    &:hover span {
+      transform: none;
+    }
+
+    /* opacity: 0.6; */
+  }
+
+  @keyframes animate {
+    0% {
+      background-position: 0;
+    }
+
+    100% {
+      background-position: 200%;
+    }
+  }
+
+  @media (width <= 640px) {
+    background-image: url('./fiber_network_640.gif');
+    height: 150px;
+    font-size: 0.6rem;
+
+    .slogan {
+      margin-bottom: 10px;
+    }
+
+    .links {
+      gap: 16px;
+    }
+
+    --m: 0.6rem;
+  }
+}
+
 .halvingBannerSuccess {
   background-size: cover;
   background-position: center;

diff --git a/src/pages/Home/Banner/index.tsx b/src/pages/Home/Banner/index.tsx
@@ -1,14 +1,18 @@
 import { useQuery } from '@tanstack/react-query'
 import { BarChartIcon } from '@radix-ui/react-icons'
+import { useTranslation } from 'react-i18next'
+import { Tooltip } from 'antd'
 import { Link } from '../../../components/Link'
 import config from '../../../config'
 import styles from './index.module.scss'
 import { getKnowledgeSize } from './utils'
 import { NumberTicker } from '../../../components/ui/NumberTicker'
+import { IS_MAINNET } from '../../../constants/common'
 
 const { BACKUP_NODES: backupNodes } = config
 
 export default () => {
+  const [t] = useTranslation()
   const { data: size } = useQuery(
     ['backnode_tip_header'],
     async () => {
@@ -24,18 +28,45 @@ export default () => {
     },
     { refetchInterval: 12 * 1000 },
   )
+  if (IS_MAINNET) {
+    return (
+      <div className={styles.root}>
+        <div className={styles.knowledgeBase}>
+          <span>Knowledge Size</span>
+          <br />
+          <div className={styles.ticker}>
+            <NumberTicker value={size ? +size : null} />
+            <span>CKBytes</span>
+            <Link to="/charts/knowledge-size">
+              <BarChartIcon color="white" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
-    <div className={styles.root}>
-      <div className={styles.knowledgeBase}>
-        <span>Knowledge Size</span>
-        <br />
-        <div className={styles.ticker}>
-          <NumberTicker value={size ? +size : null} />
-          <span>CKBytes</span>
-          <Link to="/charts/knowledge-size">
-            <BarChartIcon color="white" />
+    <div className={styles.fiberBanner}>
+      <div className={styles.slogan}>
+        <h1>{t(`banner.fiber_title`)}</h1>
+        <h3>{t(`banner.fiber_subtitle`)}</h3>
+      </div>
+      <div className={styles.links}>
+        <Link to="https://www.ckbfiber.net/" target="_blank" rel="noopener noreferrer">
+          <span>{t(`banner.learn_more`)}</span>
+        </Link>
+        <Tooltip title={t('banner.coming_soon')}>
+          <Link
+            to="/"
+            aria-disabled
+            onClick={(e: React.SyntheticEvent<HTMLAnchorElement>) => {
+              e.preventDefault()
+            }}
+          >
+            <span>{t('banner.find_nodes')}</span>
           </Link>
-        </div>
+        </Tooltip>
       </div>
     </div>
   )