feat:devsoc banner

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { GeistSans } from "geist/font/sans";
 import Script from "next/script";
 import type { Metadata } from "next";
+import Banner from "@/components/Banner";
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://papers.codechefvit.com/"),
@@ -115,6 +116,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <Toaster position="top-right" reverseOrder={false} />
+          <Banner />
           {children}
         </ThemeProvider>
       </body>

src/components/Banner.tsx

@@ -0,0 +1,54 @@
+import { Button } from "./ui/button";
+import Image from "next/image";
+import devsoc from "@/assets/DEVSOC.svg";
+import Link from "next/link";
+
+export default function Banner() {
+  return (
+    <>
+      <div className="flex h-fit w-full items-center justify-center bg-[#434dba] px-6 py-3 text-center text-white sm:h-14 sm:py-0 md:sticky md:top-0 md:justify-between md:text-left z-50">
+        <div className="flex items-center gap-x-2">
+          <Image
+            src={devsoc as HTMLImageElement}
+            alt="devsoclogo"
+            height={40}
+            width={40}
+            className="md:hidden"
+          />
+          <span className="hidden md:block">
+            Master Exams with Papers and gear up to Build Beyond Limits at
+            DevSOC&apos;25
+          </span>
+          <Link
+            href="https://devsoc.codechefvit.com/"
+            className="block md:hidden"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Register for DevSOC&apos;25
+          </Link>
+        </div>
+        <div className="hidden md:block">
+          <Button className="bg-[#AA7AE7]">
+            <Link
+              className="flex gap-x-2 items-center"
+              href="https://devsoc.codechefvit.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span>
+                <Image
+                  src={devsoc as HTMLImageElement}
+                  alt="devsoclogo"
+                  height={20}
+                  width={20}
+                />
+              </span>
+              <span className="font-yerk text-xs">Register</span>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}

src/styles/globals.css

@@ -133,4 +133,11 @@
 
 .rpv-full-screen__overlay {
   display: none !important;
+}
+
+@font-face {
+  font-family: "Yerk";
+  src: url("/fonts/yerk.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
 }

tailwind.config.ts

@@ -7,7 +7,8 @@ export default {
   theme: {
   	extend: {
   		fontFamily: {
-  			sans: ["var(--font-geist-sans)", ...fontFamily.sans]
+  			sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+			yerk: ['"Yerk"', 'sans-serif'],
   		},
   		borderRadius: {
   			lg: 'var(--radius)',