design: added banner

src/layouts/MainLayout/MainLayout.tsx

@@ -1,3 +1,4 @@
+import Banner from "./components/Banner";
 import TopBar from "./components/Topbar";
 
 function MainLayout({ children }: any) {
@@ -7,7 +8,10 @@ function MainLayout({ children }: any) {
         <TopBar />
       </div>
 
-      <main className="pt-20">{children}</main>
+      <main className="pt-20">
+        <Banner />
+        {children}
+      </main>
     </>
   );
 }

src/layouts/MainLayout/components/Banner.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Banner = () => {
+  return (
+    <div className="w-full h-9 flex items-center justify-center bg-olive">
+      <p className="text-white text-sm">
+        Please use on a Desktop - Mobile version coming soon?
+      </p>
+    </div>
+  );
+};
+
+export default Banner;

tailwind.config.ts

@@ -64,6 +64,10 @@ const config = {
           DEFAULT: "#162D25",
           foreground: "hsl(var(--hunterGreen-foreground))",
         },
+        olive: {
+          DEFAULT: "#0E1A16",
+          foreground: "hsl(var(--olive-foreground))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",