Add boss banner on Main (#304)

Author: 0tuedon

package.json

@@ -11,6 +11,7 @@
     "compile:scripts": "tsc --project tsconfig.scripts.json"
   },
   "dependencies": {
+    "@bitcoin-dev-project/bdp-ui": "^1.5.2",
     "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",

src/components/banner/BossBanner.tsx

@@ -0,0 +1,24 @@
+import { Banner } from "@bitcoin-dev-project/bdp-ui";
+import { Box } from "@chakra-ui/react";
+
+const BossBanner = ({ top }: { top: number }) => {
+  return (
+    <Box
+      className={`bg-bdp-background`}
+      zIndex={100}
+      position={"fixed"}
+      top={top}
+      background={"white"}
+      width={"full"}
+    >
+      <Banner
+        headingText="Start your career in bitcoin open source —"
+        linkText="APPLY TODAY"
+        linkTo="https://learning.chaincode.com/#BOSS"
+        hasBoss
+      />
+    </Box>
+  );
+};
+
+export default BossBanner;

src/components/home/HeroSection.tsx

@@ -24,6 +24,7 @@ const HeroSection = ({ getStarted }: { getStarted: () => void }) => {
       className="hero-section "
       flexDir={"column"}
       width={"100%"}
+      pt={{ lg: 14 }}
       id="hero-section"
       position={"relative"}
     >

src/layout/index.tsx

@@ -8,12 +8,13 @@ import { useRouter } from "next/router";
 import Navbar from "@/components/navbar/Navbar";
 import config from "@/config/config.json";
 import Script from "next/script";
+import BossBanner from "@/components/banner/BossBanner";
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   const [isReviewSite, setIsReviewSite] = useState(false);
   const { noRestriction } = useNoContainerLimit();
   const router = useRouter();
-  const isHomePage = router.pathname === "/";
+  const isRoot = router.pathname === "/";
   const isHomeRouter = router.pathname === "/home";
 
   useEffect(() => {
@@ -53,16 +54,17 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             content="https://review.btctranscripts.com/btctranscripts.png"
           ></meta>
         </Head>
-        {!isHomePage && <Navbar />}
+        {!isRoot && <Navbar />}
+        {(isRoot || isHomeRouter) && <BossBanner top={isRoot ? 0 : 12} />}
         <GlobalContainer
           flexGrow={1}
-          py={!isHomePage ? 4 : 0}
-          mt={!isHomePage ? 12 : 0}
+          py={!isRoot ? 4 : 0}
+          mt={!isRoot ? 12 : 0}
           {...(noRestriction ? { maxW: "none", p: 0 } : {})}
         >
           {children}
         </GlobalContainer>
-        {!isHomePage && !isHomeRouter && <Footer />}
+        {!isRoot && !isHomeRouter && <Footer />}
         {isReviewSite && (
           <Script
             async

src/pages/_app.tsx

@@ -2,6 +2,7 @@ import theme from "@/chakra/chakra-theme";
 import Layout from "@/layout";
 import { ApiProvider } from "@/services/api/provider";
 import "@splidejs/react-splide/css";
+import "@bitcoin-dev-project/bdp-ui/styles.css";
 import "@/styles/globals.css";
 import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
 import { SessionProvider } from "next-auth/react";

yarn.lock

@@ -57,6 +57,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"
@@ -1811,6 +1819,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==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -4173,6 +4186,11 @@ synckit@^0.8.5:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.5.0"
 
+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.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"