Add banner for the upcoming hardfork

components/HardforkBanner/HardforkBanner.tsx

@@ -0,0 +1,21 @@
+import { Container, Flex, Link, Text } from "@/lib/ui";
+
+export function HardforkBanner() {
+  return (
+    <Flex bg="black" h="52px" alignItems="center">
+      <Container
+        textAlign={{
+          base: "left",
+          md: "center",
+        }}
+      >
+        <Text color="white">
+          The hardfork is coming on April 2nd, 12 PM GMT.&nbsp;
+          <Link href="/learn/blog/2024-02-26-testnet-hardfork">
+            Learn more {">"}
+          </Link>
+        </Text>
+      </Container>
+    </Flex>
+  );
+}

layouts/Main/Main.tsx

@@ -1,10 +1,12 @@
 import { Flex, chakra } from "@/lib/ui";
 import { Footer } from "../../components/Footer/Footer";
 import { NavBar } from "../../components/NavBar/NavBar";
+import { HardforkBanner } from "@/components/HardforkBanner/HardforkBanner";
 
 export function MainLayout({ children }: { children: React.ReactNode }) {
   return (
     <Flex direction="column" alignItems="stretch" minHeight="100svh">
+      <HardforkBanner />
       <NavBar />
       <chakra.main
         flexGrow={1}