added banner

Author: SamGu-NRX

frontend/index.html

@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Bebas+Neue&display=swap" rel="stylesheet">
-
+    <link href="https://fonts.googleapis.com/css2?family=League+Spartan:[email protected]&display=swap" rel="stylesheet">
 
     <title>LuminAI</title>
   </head>

frontend/src/components/ApplicationBanner/ApplicationBanner.tsx

@@ -0,0 +1,37 @@
+// src/components/ApplicationBanner.jsx
+import './styles.scss';
+// src/components/ApplicationBanner.jsx
+import  { useEffect } from 'react';
+import { useBanner } from '@/context/BannerContext';
+
+const ApplicationBanner = () => {
+  const { setBannerVisible } = useBanner();
+
+  useEffect(() => {
+    setBannerVisible(true);
+    return () => setBannerVisible(false);
+  }, [setBannerVisible]);
+
+  return (
+    <div className="fixed top-0 left-0 w-full bg-blue-500 text-white text-center p-2 z-100">
+      <span className="font-bold">Last-minute call for our 2024 summer application!</span>
+      <button onClick={() => window.location.href='/application-form'}
+        aria-label="Apply Now"
+        className="ml-6 inline-flex h-8 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-200 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 hover:bg-[linear-gradient(90deg, #6366f1, #a855f7)]" >
+          Apply Now
+        </button>
+    </div>
+  );
+};
+
+export default ApplicationBanner;
+
+
+<button className="p-[3px] relative">
+<div className="ml-6 inline-flex h-8 px-6 justify-center rounded-lg absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500">
+    <div onClick={() => window.location.href='/application-form'} 
+        className="px-8 py-2 rounded-[6px] relative group transition duration-200 hover:bg-transparent animate-shimmer items-center border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
+        Apply Now
+    </div>
+</div>
+</button>

frontend/src/components/ApplicationBanner/styles.scss

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+.gradient-border:hover {
+    border-image: linear-gradient(to right, #6366f1, #a855f7) 1;
+    border-width: 3px;
+    border-style: solid;
+}
+
+.custom-bg-gradient {
+    background: linear-gradient(110deg, #000103 45%, #1e2631 55%, #000103);
+}

frontend/src/components/ContactUs.tsx

@@ -35,6 +35,8 @@ const ContactSection = () => {
           </svg>
         </a>
         <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-white group-hover:bg-transparent transition-all duration-300"></div>
+
+        {/* <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-white group-hover:bg-transparent transition-all duration-300"></div> This is the white line that appears on the top of the page */}
       </div>
     );
   };

frontend/src/components/Header/Header.tsx

@@ -2,10 +2,14 @@ import "../../styles/App.scss";
 import "./Header.scss";
 import getMode from "../../utils/getMode";
 import { Link } from "@tanstack/react-router";
+import { useBanner } from "@/context/BannerContext";
 
 const Header = () => {
   const mode = getMode();
-  const headerClass = ` p-4 ${mode === "dark" ? "header-dark text-white" : "header-light text-black"} hidden`;
+  const { isBannerVisible } = useBanner();
+
+  //TODO: remove this and change to dark:text-white, etc.
+  const headerClass = ` p-4 ${isBannerVisible ? 'mt-16' : ''} hidden `;
   const navClass = `mt-2 ${mode === "dark" ? "header-text-dark text-white" : "header-text-light text-black"}`; // add fonts
 
   return (

frontend/src/context/BannerContext.tsx

@@ -0,0 +1,27 @@
+// src/context/BannerContext.tsx
+import React, { createContext, useState, useContext, ReactNode } from 'react';
+
+interface BannerContextType {
+  isBannerVisible: boolean;
+  setBannerVisible: (visible: boolean) => void;
+}
+
+const BannerContext = createContext<BannerContextType | undefined>(undefined);
+
+export const BannerProvider = ({ children }: { children: ReactNode }) => {
+  const [isBannerVisible, setBannerVisible] = useState(false);
+
+  return (
+    <BannerContext.Provider value={{ isBannerVisible, setBannerVisible }}>
+      {children}
+    </BannerContext.Provider>
+  );
+};
+
+export const useBanner = () => {
+  const context = useContext(BannerContext);
+  if (!context) {
+    throw new Error('useBanner must be used within a BannerProvider');
+  }
+  return context;
+};

frontend/src/main.tsx

@@ -7,6 +7,7 @@ import './styles/App.scss';
 import { HelmetProvider } from 'react-helmet-async';
 import { AuthContextProvider } from './context/AuthContext';
 import { ChakraProvider } from '@chakra-ui/react';
+import { BannerProvider } from './context/BannerContext';
 
 const router = createRouter({
   routeTree,
@@ -21,7 +22,9 @@ if (!rootElement?.innerHTML) {
       <HelmetProvider>
         <ChakraProvider>
           <AuthContextProvider>  
-            <RouterProvider router={router} />
+            <BannerProvider>
+              <RouterProvider router={router} />
+            </BannerProvider>
           </AuthContextProvider>
         </ChakraProvider>
       </HelmetProvider>