Add Boss banner (#99)

* chore: update Boss banner * fix: moved banner up
bitcoinsearch · Dec 10, 2024 · 17cfb2f · 17cfb2f
1 parent 5f4d0a9
commit 17cfb2f
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "node": ">=20.13.1 <21"
   },
   "dependencies": {
+    "@bitcoin-dev-project/bdp-ui": "^1.5.2",
     "@chakra-ui/react": "^2.4.9",
     "@elastic/elasticsearch": "^8.8.1",
     "@emotion/react": "^11.10.5",

diff --git a/src/components/banner/BossBanner.tsx b/src/components/banner/BossBanner.tsx
@@ -0,0 +1,27 @@
+import { Banner } from "@bitcoin-dev-project/bdp-ui";
+import { Box } from "@chakra-ui/react";
+
+const BossBanner = () => {
+  return (
+    <Box
+      className={`dark w-full`}
+      zIndex={1}
+      position={"sticky"}
+      top={0}
+      width={"full"}
+      background={"#171923"}
+    >
+      <Banner
+        headingText="Start your career in bitcoin open source —"
+        linkText="APPLY TODAY"
+        linkTo="https://learning.chaincode.com/#BOSS"
+        hasBoss
+        styles={{
+          container: "boss-container-bg",
+        }}
+      />
+    </Box>
+  );
+};
+
+export default BossBanner;
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -1,31 +1,47 @@
-import { Box, Container, Divider, Flex, Text } from '@chakra-ui/react'
-import Link from 'next/link'
-import React from 'react'
+import { Box, Container, Divider, Flex, Text } from "@chakra-ui/react";
+import Link from "next/link";
+import React from "react";
+import BossBanner from "../banner/BossBanner";
+import { useRouter } from "next/router";
 
 const Navbar = () => {
+  const router = useRouter();
+  const isHomeScreen = Object.keys(router.query).length < 1;
   return (
-    <Box as="nav"
-      position="fixed"
-      h={12}
+    <Box
+      as="nav"
+      position="sticky"
+      minH={12}
+      top={"0px"}
       w="full"
       boxShadow="md"
       bgColor="gray.900"
       fontSize="14px"
       isolation="isolate"
       zIndex={1}
     >
-      <Flex alignItems="center" h="full" px={4}>
+      {isHomeScreen && <BossBanner />}
+      <Flex
+        alignItems="center"
+        h="full"
+        px={4}
+        bgColor="gray.900"
+        zIndex={1}
+      >
         <Link href="/">
-          <Text>chat<span style={{ color: "var(--chakra-colors-orange-400)" }}>
+          <Text>
+            chat
+            <span style={{ color: "var(--chakra-colors-orange-400)" }}>
               btc
-            </span></Text>
+            </span>
+          </Text>
         </Link>
         <Box h="full" mx={4} py={2}>
-          <Divider orientation='vertical' />
+          <Divider orientation="vertical" />
         </Box>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -2,29 +2,46 @@ import Navbar from "@/components/navbar/Navbar";
 import Head from "next/head";
 import React from "react";
 import styles from "./layout.module.css";
+import BossBanner from "@/components/banner/BossBanner";
+import { useRouter } from "next/router";
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
+
   return (
     <>
       <Head>
         <title>ChatBTC</title>
-        <meta name="description" content="A conversational AI based on technical bitcoin sources" />
+        <meta
+          name="description"
+          content="A conversational AI based on technical bitcoin sources"
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="favicon.ico" type="image/x-icon" />
-        <meta property="og:image" content="https://chat.bitcoinsearch.xyz/chat-btc-square.png"></meta>
+        <meta
+          property="og:image"
+          content="https://chat.bitcoinsearch.xyz/chat-btc-square.png"
+        ></meta>
         <meta property="og:title" content="ChatBTC"></meta>
         <meta property="og:url" content="https://chat.bitcoinsearch.xyz"></meta>
-        <meta property="og:description" content="A conversational AI based on technical bitcoin sources"></meta>
+        <meta
+          property="og:description"
+          content="A conversational AI based on technical bitcoin sources"
+        ></meta>
         <meta name="twitter:card" content="summary"></meta>
-        <meta name="twitter:image" content="https://chat.bitcoinsearch.xyz/chat-btc-landscape_v1.png"></meta>
+        <meta
+          name="twitter:image"
+          content="https://chat.bitcoinsearch.xyz/chat-btc-landscape_v1.png"
+        ></meta>
       </Head>
       <div className={styles.app_container}>
         <Navbar />
-        <div className={styles.child_container}>
-          {children}
-        </div>
+        <div className={styles.child_container}>{children}</div>
       </div>
-      <script async src="https://visits.bitcoindevs.xyz/script.js" data-website-id="3ec81b2a-ffba-41cb-91b0-68c30f8bea85"></script>
+      <script
+        async
+        src="https://visits.bitcoindevs.xyz/script.js"
+        data-website-id="3ec81b2a-ffba-41cb-91b0-68c30f8bea85"
+      ></script>
     </>
   );
 };

diff --git a/src/layout/layout.module.css b/src/layout/layout.module.css
@@ -6,7 +6,7 @@
 
 .child_container {
   height: 100%;
-  padding-top: var(--chakra-sizes-12); /* account for navbar height in chakra units
+  /* padding-top: var(--chakra-sizes-12); /* account for navbar height in chakra units */
   /* flex-grow: 1;
   margin-top: var(--chakra-sizes-12); account for navbar height in chakra units */
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,10 +1,12 @@
+import "@bitcoin-dev-project/bdp-ui/styles.css";
 import "@/styles/globals.css";
 import { ChakraProvider } from "@chakra-ui/react";
 import theme from "@/chakra/chakra-theme";
 import type { AppProps } from "next/app";
 import Layout from "@/layout";
 import { PaymentContextProvider } from "@/contexts/payment-context";
 
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider theme={theme}>

diff --git a/yarn.lock b/yarn.lock
@@ -78,6 +78,14 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
+"@bitcoin-dev-project/bdp-ui@^1.5.2":
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/@bitcoin-dev-project/bdp-ui/-/bdp-ui-1.5.2.tgz#018183023b4bfc0d8d3640a09e2c1be63aee2993"
+  integrity sha512-lZy/DZlp0ih7w6immMT6iEOuoVS55P6eOtd0UJab4JusxuUX16P1zknr4eIuLiwWQ3j8h8FPoS92m/wxjGE90g==
+  dependencies:
+    clsx "^2.1.1"
+    tailwind-merge "^2.5.2"
+
 "@chakra-ui/[email protected]":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-2.3.0.tgz#2c85fd2d2734b176f019f8db9f4e075007b4e1fb"
@@ -2916,6 +2924,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
@@ -7628,6 +7641,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwind-merge@^2.5.2:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.5.tgz#98167859b856a2a6b8d2baf038ee171b9d814e39"
+  integrity sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==
+
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"