took some code from Alice's branch

src/App.tsx

@@ -1,16 +1,7 @@
 import React from "react";
 import { Route, Routes } from "react-router-dom";
 import { Navbar } from "./components";
-import { Academics, Upload, Clubs, Careers, Instructions, Welcome, UploadEdit } from "./pages";
-import {UploadAcademics} from "./pages/UploadAcademics";
-// import Navbar from "./components/Navbar";
-// import Home from "./pages/Home";
-// import Academics from "./pages/Academics";
-// import Upload from "./pages/Upload";
-// import Clubs from "./pages/Clubs";
-// import Careers from "./pages/Careers";
-// import Instructions from "./pages/Instructions";
-// import Welcome from "./pages/Welcome";
+import { Academics, Clubs, Careers, Upload, UploadFile, UploadLink, UploadManual, UploadRevise, Support, Welcome } from "./pages";
 import "./App.css";
 
 
@@ -25,15 +16,16 @@ function App() {
           <Route path="/home/clubs" element={<Clubs />} />
           <Route path="/home/career" element={<Careers />} />
           <Route path="/upload" element={<Upload />} />
-          <Route path="/upload/academics" element={<UploadAcademics />} />
-          {/* <Route path="/upload/file" element={<UploadFile />} /> */}
-          <Route path="/upload/edit" element={<UploadEdit />} />
-          <Route path="/instructions" element={<Instructions />} />
+          <Route path="/upload/file" element={<UploadFile />} />
+          <Route path="/upload/link" element={<UploadLink />} />
+          <Route path="/upload/manual" element={<UploadManual />} />
+          <Route path="/upload/revise" element={<UploadRevise />} />
+          <Route path="/support" element={<Support />} />
           <Route path="/welcome" element={<Welcome />} />
         </Routes>
       </div>
     </>
   );
 }
 
-export {App};
+export {App};

src/pages/Support.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Support: React.FC = () => {
+  return (
+    <div>
+      <h1>Support</h1>
+    </div>
+  )
+}
+
+export {Support};

src/pages/Upload.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 const AcademicButton: React.FC = () => {
   let navigate = useNavigate();
   const routeChange = () => {
-    let path = `/upload/academics`;
+    let path = `/upload/file`;
     navigate(path);
   };
 
@@ -21,14 +21,14 @@ const AcademicButton: React.FC = () => {
 const ClubButton: React.FC = () => {
   let navigate = useNavigate();
   const routeChange = () => {
-    let path = `/upload/academics`;
+    let path = `/upload/file`;
     navigate(path);
   };
 
   return (
     <button
-    onClick={routeChange}
-    className="rounded-[5px] border border-[#1F4C4C] px-14 py-2 text-[#1F4C4C]"
+      onClick={routeChange}
+      className="rounded-[5px] border border-[#1F4C4C] px-14 py-2 text-[#1F4C4C]"
     >
       Club
     </button>
@@ -38,17 +38,20 @@ const ClubButton: React.FC = () => {
 const Upload: React.FC = () => {
   return (
     <div>
-      <div className="text-black text-center font-bold font-sans text-4xl pt-48">
-        <h1>Can't find an upcoming event?</h1>
-        <h1>Add it to our database and help others find it!</h1>
-        <h1>What would you like to upload today?</h1>
-      </div>
-      <div className="flex justify-center gap-40 py-20">
-        <AcademicButton />
-        <ClubButton />
+      <div className="h-lvh">
+        <div className="text-black text-center font-bold font-sans text-4xl pt-48">
+          <h1>Can't find an upcoming event?</h1>
+          <h1>Add it to our database and help others find it!</h1>
+          <h1>What would you like to upload today?</h1>
+        </div>
+        <div className="flex justify-center gap-40 py-20">
+          <AcademicButton />
+          <ClubButton />
+        </div>
       </div>
+      <Footer />
     </div>
   );
 };
 
-export { Upload };
+export { Upload };

src/pages/UploadFile.tsx

@@ -1,12 +1,28 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { IoCloudUploadOutline } from "react-icons/io5";
+import { UploadNavBar, UploadButton } from "./index"
+import { Footer } from "../components";
 
-function UploadFile() {
-    return(
-        <>
-        <h1>File</h1>
-        </>
+const UploadFile: React.FC = () => {
+    return (
+        <div>
+            <div className="h-lvh">
+                <div className="flex flex-col justify-center items-center w-4/6 mx-auto">
+                    <UploadNavBar />
+                    <div className="bg-[#F1F1F1] w-full h-[550px] relative">
+                        <div className="bg-light-green h-96 w-5/6 mx-auto mt-14 rounded-xl outline-dashed outline-green outline-[2.5px] text-center flex flex-col justify-center items-center gap-10">
+                            <IoCloudUploadOutline className="text-[100px] text-green" />
+                            <h2 className="text-xl">Choose a file and drag it here</h2>
+                        </div>
+                        <div className="absolute bottom-10 right-10">
+                            <UploadButton />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
     )
 }
 
-export {UploadFile};
+export { UploadFile };

src/pages/UploadLink.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { UploadNavBar, UploadButton } from "./index";
+import { Footer } from "../components";
+
+const UploadLink: React.FC = () => {
+    return (
+        <div>
+            <div className="h-lvh">
+                <div className="flex flex-col justify-center items-center w-4/6 mx-auto">
+                    <UploadNavBar />
+                    <div className="bg-[#F1F1F1] w-full h-[250px] relative flex justify-center items-center gap-24">
+                        <form className="text-xl flex items-center">
+                            <label className="">Enter link here: </label>
+                            <input type="text" className="ml-4 w-[530px] h-[40px] border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 px-4"></input>
+                            <div className="ml-8"><UploadButton /></div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
+    );
+};
+
+export { UploadLink };

src/pages/UploadManual.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { UploadNavBar, UploadButton } from "./index";
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { Footer } from "../components";
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
+const UploadManual: React.FC = () => {
+    return (
+        <div>
+            <div className="h-lvh">
+
+                <div className="flex flex-col justify-center items-center w-4/6 mx-auto relative">
+                    <UploadNavBar />
+                    <div className="bg-[#F1F1F1] w-full h-[620px] px-20 pt-10">
+                        <form>
+                            <div className="mb-4">
+                                <label className="block text-gray-700">Course Number<span className="text-red">*</span></label>
+                                <input
+                                    type="text"
+                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                                    required
+                                />
+                            </div>
+                            <div className="mb-4">
+                                <label className="block text-gray-700">Event Type<span className="text-red">*</span></label>
+                                <select
+                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                                    required
+                                >
+                                    <option value="">Select Event Type</option>
+                                    <option value="Academics">Academics</option>
+                                    <option value="Club">Club</option>
+                                    <option value="Career">Career</option>
+                                </select>
+                            </div>
+                            <div className="mb-4">
+                                <div className="flex gap-4">
+                                    <div className="w-1/2">
+                                        <label className="block text-gray-700">From<span className="text-red">*</span></label>
+                                        <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                            <DateTimePicker className="w-full"/>
+                                        </LocalizationProvider>
+                                    </div>
+                                    <div className="w-1/2">
+                                        <label className="block text-gray-700">To<span className="text-red">*</span></label>
+                                        <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                            <DateTimePicker className="w-full"/>
+                                        </LocalizationProvider>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="mb-4">
+                                <label className="block text-gray-700">Location/Meeting Link<span className="text-red">*</span></label>
+                                <input
+                                    type="text"
+                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                                    required
+                                />
+                            </div>
+                            <div className="mb-4">
+                                <label className="block text-gray-700">Instructor/TA</label>
+                                <input
+                                    type="text"
+                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                                />
+                            </div>
+                            <div className="mb-4">
+                                <label className="block text-gray-700">Notes</label>
+                                <textarea
+                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                                    rows={2}
+                                ></textarea>
+                            </div>
+                            <div className="absolute bottom-5 right-20"><UploadButton /></div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
+
+    );
+};
+
+export { UploadManual };

src/pages/UploadNavBar.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+
+const UploadNavBar: React.FC = () => {
+    let navigate = useNavigate();
+    let location = useLocation();
+
+    const redirectTo = (path: string) => {
+        navigate(path);
+    };
+
+    return (
+        <div className="bg-green w-full h-4/6 mt-20 text-white flex gap-44 justify-center items-center text-xl py-4">
+            <div className={`cursor-pointer ${location.pathname === '/upload/file' ? 'text-teal font-medium' : 'text-white'}`} onClick={() => redirectTo('/upload/file')}>
+                Upload File
+            </div>
+            <div className={`cursor-pointer ${location.pathname === '/upload/link' ? 'text-teal font-medium' : 'text-white'}`} onClick={() => redirectTo('/upload/link')}>
+                Upload Link
+            </div>
+            <div className={`cursor-pointer ${location.pathname === '/upload/manual' ? 'text-teal font-medium' : 'text-white'}`} onClick={() => redirectTo('/upload/manual')}>
+                Upload Manually
+            </div>
+        </div>
+    );
+};
+
+const UploadButton: React.FC = () => {
+    let navigate = useNavigate();
+    const routeChange = () => {
+      let path = `/upload/revise`;
+      navigate(path);
+    };
+
+    return (
+      <button
+        onClick={routeChange}
+        className="w-[94px] h-[40px] rounded-md bg-teal text-white text-base text-center flex items-center justify-center"      >
+        Upload
+      </button>
+    );
+  };
+
+
+export { UploadNavBar, UploadButton };

src/pages/UploadRevise.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import {UploadNavBar} from "./index"
+
+const UploadRevise: React.FC = () => {
+    return (
+        <div className="flex flex-col justify-center items-center w-4/6 mx-auto">Revise
+        </div>
+    )
+}
+
+export { UploadRevise };

src/pages/index.ts

@@ -1,8 +1,11 @@
 export * from "./Academics";
 export * from "./Careers";
 export * from "./Clubs";
-export * from "./Instructions";
+export * from "./Support";
 export * from "./Upload";
 export * from "./UploadFile";
-export * from "./UploadEdit";
+export * from "./UploadLink";
+export * from "./UploadNavBar";
+export * from "./UploadManual";
+export * from "./UploadRevise";
 export * from "./Welcome";