Website Redesign: Banner component (#727)

### Summary <!-- Required -->
Created a reusable Full Width Banner component with the three variants
from the figma below (We can add more variants in the future or change
this as necessary). I also added disabled buttons instead of omitting
them when the application is not open to keep it consistent.

### Notion/Figma Link 

https://www.figma.com/design/ttAGEX3pHmzuhMzp8uAyhz/DTI-New-Landing-Website?node-id=7-45&node-type=canvas


https://github.com/user-attachments/assets/66be0777-0ae9-49e5-bbe9-f59771b22906

new-dti-website/components/apply/Banner.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import useScrollPosition from '../../src/hooks/useScrollPosition';
+
+interface BannerProps {
+  message: string;
+  variant?: 'info' | 'alert' | 'success';
+  className?: string;
+  navbarHeight?: number;
+}
+
+const variantStyles: Record<NonNullable<BannerProps['variant']>, string> = {
+  info: 'bg-neutral-800',
+  alert: 'bg-red-700',
+  success: 'bg-black border-b-2 border-t-2 border-t-neutral-800 border-b-neutral-800'
+};
+
+export default function Banner({
+  message,
+  variant = 'info',
+  className = '',
+  navbarHeight = 130
+}: BannerProps) {
+  const { scrollY } = useScrollPosition();
+
+  const isFixed = scrollY > navbarHeight;
+
+  const variantClass = variantStyles[variant] || '';
+
+  return (
+    <div
+      className={`${
+        isFixed ? 'fixed' : 'absolute'
+      } top-0 left-0 w-full text-white text-center text-xs sm:text-sm md:text-md lg:text-lg xl:text-xl 2xl:text-2xl px-6 py-4 z-50 ${variantClass} ${className}`}
+    >
+      {message}
+    </div>
+  );
+}

new-dti-website/components/apply/RoleDescription.tsx

@@ -103,7 +103,15 @@ const RoleDescriptions = () => {
             Apply now
           </Link>
         ) : (
-          <></>
+          <Link
+            key="Apply Page"
+            href="#"
+            className="primary-button opacity-50 cursor-not-allowed"
+            onClick={(e) => e.preventDefault()}
+            aria-disabled="true"
+          >
+            Apply now
+          </Link>
         )}
       </div>
       <RedBlob className="bottom-[-300px] left-[-350px] z-0" intensity={0.5} />

new-dti-website/src/app/apply/page.tsx

@@ -6,19 +6,21 @@ import config from '../../../config.json';
 import RoleDescriptions from '../../../components/apply/RoleDescription';
 import RedBlob from '../../../components/blob';
 import ApplyFAQ from '../../../components/apply/ApplyFAQ';
+import Banner from '../../../components/apply/Banner';
 import useThemeContext from '../../hooks/useThemeContext';
 import { isAppOpen } from '../../utils/dateUtils';
 
 const ApplyHero = () => (
-  <div className="text-[#FEFEFE] min-h-[calc(100vh-136px)] flex items-center">
+  <div className="text-[#FEFEFE] min-h-[calc(100vh-136px)] flex items-center relative">
+    <Banner
+      message={`We're no longer accepting applications for ${config.semester}. Stay tuned for opportunities next semester!`}
+      variant={'alert'}
+    />
     <div
       className="flex lg:flex-row xs:flex-col gap-x-[60px] lg:ml-[90px] lg:mr-[169px]
       xs:mx-6 md:mx-[65px]"
     >
-      <h1
-        className="flex items-center md:text-[100px] xs:text-[48px] md:leading-[120px] 
-        xs:text-[48px] font-semibold"
-      >
+      <h1 className="flex items-center md:text-[100px] md:leading-[120px] xs:text-[48px] font-semibold">
         <div>
           JOIN OUR <span className="text-[#FF4C4C]">COMMUNITY</span>
         </div>
@@ -39,10 +41,15 @@ const ApplyHero = () => (
             Apply now
           </Link>
         ) : (
-          <p className="md:text-lg xs:text-sm">
-            We're no longer accepting applicants for {config.semester}. Stay tuned for opportunities
-            next semester!
-          </p>
+          <Link
+            key="Apply Page"
+            href="#"
+            className="primary-button opacity-50 cursor-not-allowed"
+            onClick={(e) => e.preventDefault()}
+            aria-disabled="true"
+          >
+            Apply now
+          </Link>
         )}
       </div>
     </div>

new-dti-website/src/app/globals.css

@@ -168,6 +168,10 @@
   background-color: #a52424;
 }
 
+.primary-button[aria-disabled='true']:hover {
+  background-color: #d63d3d;
+}
+
 .secondary-button {
   color: #fefefe;
   background-color: black;