From cc370f6010dd59a5995e6d20137921f819fcba51 Mon Sep 17 00:00:00 2001
From: Amir Mohammad Fakhimi <fakhimi.amirmohamad@gmail.com>
Date: Wed, 20 Dec 2023 19:14:05 +0330
Subject: [PATCH] Staff Header Added

---
 frontend/src/app/Staff.js                      |  4 ----
 frontend/src/app/page.js                       |  4 ++--
 .../{seminars => seminar}/NextPreButton.tsx    |  0
 .../src/app/{seminars => seminar}/Seminar.tsx  |  2 +-
 .../app/{seminars => seminar}/SeminarCard.tsx  |  0
 .../app/{seminars => seminar}/SeminarLine.tsx  |  0
 .../app/{seminars => seminar}/SeminarLogo.tsx  |  0
 .../SminarHeader.tsx}                          |  0
 .../{seminars => seminar}/ViewAllButton.tsx    |  0
 .../{seminars => seminar}/assets/Sample.svg    |  0
 .../assets/background.svg                      |  0
 .../{seminars => seminar}/assets/facebook.svg  |  0
 .../{seminars => seminar}/assets/instagram.svg |  0
 .../{seminars => seminar}/assets/linkedin.svg  |  0
 .../assets/next arrow.svg                      |  0
 .../{seminars => seminar}/assets/pre arrow.svg |  0
 .../assets/view all arrow.svg                  |  0
 frontend/src/app/staff/Staff.tsx               | 10 ++++++++++
 frontend/src/app/staff/StaffHeader.tsx         | 18 ++++++++++++++++++
 frontend/src/app/staff/ViewAllButton.tsx       | 14 ++++++++++++++
 .../src/app/staff/assets/view all arrow.svg    |  4 ++++
 21 files changed, 49 insertions(+), 7 deletions(-)
 delete mode 100644 frontend/src/app/Staff.js
 rename frontend/src/app/{seminars => seminar}/NextPreButton.tsx (100%)
 rename frontend/src/app/{seminars => seminar}/Seminar.tsx (93%)
 rename frontend/src/app/{seminars => seminar}/SeminarCard.tsx (100%)
 rename frontend/src/app/{seminars => seminar}/SeminarLine.tsx (100%)
 rename frontend/src/app/{seminars => seminar}/SeminarLogo.tsx (100%)
 rename frontend/src/app/{seminars/SminarsHeader.tsx => seminar/SminarHeader.tsx} (100%)
 rename frontend/src/app/{seminars => seminar}/ViewAllButton.tsx (100%)
 rename frontend/src/app/{seminars => seminar}/assets/Sample.svg (100%)
 rename frontend/src/app/{seminars => seminar}/assets/background.svg (100%)
 rename frontend/src/app/{seminars => seminar}/assets/facebook.svg (100%)
 rename frontend/src/app/{seminars => seminar}/assets/instagram.svg (100%)
 rename frontend/src/app/{seminars => seminar}/assets/linkedin.svg (100%)
 rename frontend/src/app/{seminars => seminar}/assets/next arrow.svg (100%)
 rename frontend/src/app/{seminars => seminar}/assets/pre arrow.svg (100%)
 rename frontend/src/app/{seminars => seminar}/assets/view all arrow.svg (100%)
 create mode 100644 frontend/src/app/staff/Staff.tsx
 create mode 100644 frontend/src/app/staff/StaffHeader.tsx
 create mode 100644 frontend/src/app/staff/ViewAllButton.tsx
 create mode 100644 frontend/src/app/staff/assets/view all arrow.svg

diff --git a/frontend/src/app/Staff.js b/frontend/src/app/Staff.js
deleted file mode 100644
index 21fb7af4..00000000
--- a/frontend/src/app/Staff.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default function Staff() {
-  // TODO
-  return <></>;
-}
diff --git a/frontend/src/app/page.js b/frontend/src/app/page.js
index 04e80f05..913a28cd 100644
--- a/frontend/src/app/page.js
+++ b/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 (
diff --git a/frontend/src/app/seminars/NextPreButton.tsx b/frontend/src/app/seminar/NextPreButton.tsx
similarity index 100%
rename from frontend/src/app/seminars/NextPreButton.tsx
rename to frontend/src/app/seminar/NextPreButton.tsx
diff --git a/frontend/src/app/seminars/Seminar.tsx b/frontend/src/app/seminar/Seminar.tsx
similarity index 93%
rename from frontend/src/app/seminars/Seminar.tsx
rename to frontend/src/app/seminar/Seminar.tsx
index b84dc488..357f3add 100644
--- a/frontend/src/app/seminars/Seminar.tsx
+++ b/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';
diff --git a/frontend/src/app/seminars/SeminarCard.tsx b/frontend/src/app/seminar/SeminarCard.tsx
similarity index 100%
rename from frontend/src/app/seminars/SeminarCard.tsx
rename to frontend/src/app/seminar/SeminarCard.tsx
diff --git a/frontend/src/app/seminars/SeminarLine.tsx b/frontend/src/app/seminar/SeminarLine.tsx
similarity index 100%
rename from frontend/src/app/seminars/SeminarLine.tsx
rename to frontend/src/app/seminar/SeminarLine.tsx
diff --git a/frontend/src/app/seminars/SeminarLogo.tsx b/frontend/src/app/seminar/SeminarLogo.tsx
similarity index 100%
rename from frontend/src/app/seminars/SeminarLogo.tsx
rename to frontend/src/app/seminar/SeminarLogo.tsx
diff --git a/frontend/src/app/seminars/SminarsHeader.tsx b/frontend/src/app/seminar/SminarHeader.tsx
similarity index 100%
rename from frontend/src/app/seminars/SminarsHeader.tsx
rename to frontend/src/app/seminar/SminarHeader.tsx
diff --git a/frontend/src/app/seminars/ViewAllButton.tsx b/frontend/src/app/seminar/ViewAllButton.tsx
similarity index 100%
rename from frontend/src/app/seminars/ViewAllButton.tsx
rename to frontend/src/app/seminar/ViewAllButton.tsx
diff --git a/frontend/src/app/seminars/assets/Sample.svg b/frontend/src/app/seminar/assets/Sample.svg
similarity index 100%
rename from frontend/src/app/seminars/assets/Sample.svg
rename to frontend/src/app/seminar/assets/Sample.svg
diff --git a/frontend/src/app/seminars/assets/background.svg b/frontend/src/app/seminar/assets/background.svg
similarity index 100%
rename from frontend/src/app/seminars/assets/background.svg
rename to frontend/src/app/seminar/assets/background.svg
diff --git a/frontend/src/app/seminars/assets/facebook.svg b/frontend/src/app/seminar/assets/facebook.svg
similarity index 100%
rename from frontend/src/app/seminars/assets/facebook.svg
rename to frontend/src/app/seminar/assets/facebook.svg
diff --git a/frontend/src/app/seminars/assets/instagram.svg b/frontend/src/app/seminar/assets/instagram.svg
similarity index 100%
rename from frontend/src/app/seminars/assets/instagram.svg
rename to frontend/src/app/seminar/assets/instagram.svg
diff --git a/frontend/src/app/seminars/assets/linkedin.svg b/frontend/src/app/seminar/assets/linkedin.svg
similarity index 100%
rename from frontend/src/app/seminars/assets/linkedin.svg
rename to frontend/src/app/seminar/assets/linkedin.svg
diff --git a/frontend/src/app/seminars/assets/next arrow.svg b/frontend/src/app/seminar/assets/next arrow.svg
similarity index 100%
rename from frontend/src/app/seminars/assets/next arrow.svg
rename to frontend/src/app/seminar/assets/next arrow.svg
diff --git a/frontend/src/app/seminars/assets/pre arrow.svg b/frontend/src/app/seminar/assets/pre arrow.svg
similarity index 100%
rename from frontend/src/app/seminars/assets/pre arrow.svg
rename to frontend/src/app/seminar/assets/pre arrow.svg
diff --git a/frontend/src/app/seminars/assets/view all arrow.svg b/frontend/src/app/seminar/assets/view all arrow.svg
similarity index 100%
rename from frontend/src/app/seminars/assets/view all arrow.svg
rename to frontend/src/app/seminar/assets/view all arrow.svg
diff --git a/frontend/src/app/staff/Staff.tsx b/frontend/src/app/staff/Staff.tsx
new file mode 100644
index 00000000..f47c7041
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/src/app/staff/StaffHeader.tsx b/frontend/src/app/staff/StaffHeader.tsx
new file mode 100644
index 00000000..12f5f90f
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file
diff --git a/frontend/src/app/staff/ViewAllButton.tsx b/frontend/src/app/staff/ViewAllButton.tsx
new file mode 100644
index 00000000..c2c79a20
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/staff/assets/view all arrow.svg b/frontend/src/app/staff/assets/view all arrow.svg
new file mode 100644
index 00000000..93804d63
--- /dev/null
+++ b/frontend/src/app/staff/assets/view all arrow.svg	
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.75 11.7256L4.75 11.7256" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.7002 5.70124L19.7502 11.7252L13.7002 17.7502" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>