Staff Header Added

frontend/src/app/page.js

@@ -1,8 +1,8 @@
 import Footer from './Footer';
 import Header from './Header';
 import Programs from './Programs';
-import Seminar from './seminars/Seminar';
-import Staff from './Staff';
+import Seminar from './seminar/Seminar';
+import Staff from './staff/Staff';
 
 export default function Home() {
   return (

frontend/src/app/seminars/Seminar.tsx → frontend/src/app/seminar/Seminar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SeminarHeader from './SminarsHeader';
+import SeminarHeader from './SminarHeader';
 import Background from './assets/background.svg';
 import SeminarLine from './SeminarLine';
 import ViewAllButton from './ViewAllButton';

frontend/src/app/staff/Staff.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import StaffHeader from './StaffHeader';
+
+export default function Staff() {
+  return (
+    <div className={'flex-col justify-center items-center bg-no-repeat bg-cover bg-center pb-14'}>
+         <StaffHeader/>
+    </div>
+  );
+}

frontend/src/app/staff/StaffHeader.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ViewAllButton from './ViewAllButton';
+
+export default function StaffHeader() {
+  return (
+    <div className={'flex justify-between items-center px-32 pt-20'}>
+      <div>
+        <div className={'font-manrope font-medium text-lg text-[#8A8998]'}>
+          Overline Goes Here
+        </div>
+        <div className={'font-manrope font-bold text-[64px] text-[#1F2B3D] -mt-2'}>
+          Staff Members
+        </div>
+      </div>
+      <ViewAllButton text={'View All'} width={20} />
+    </div>
+  )
+}

frontend/src/app/staff/ViewAllButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Arrow from './assets/view all arrow.svg';
+import Image from 'next/image';
+
+export default function ViewAllButton({ text, width }: { text: string, width?: number }) {
+  return (
+    <button className={'flex justify-center items-center rounded-md m-auto bg-[#0B3678] p-4 mb-3 font-manrope font-bold text-lg'}>
+      <div>
+        {text}
+      </div>
+      <Image src={Arrow} alt={'view all arrow'} width={width} height={width} className={'ml-5'} />
+    </button>
+  );
+}