Staff Completed (except continuous scroll)

frontend/src/app/seminar/Seminar.tsx

@@ -5,14 +5,14 @@ import SeminarLine from './SeminarLine';
 import ViewAllButton from './ViewAllButton';
 
 export type Person = {
-  name: string;
-  surname: string;
-  linkedin: string;
-  instagram: string;
-  facebook: string;
-  image: string;
-  position: string;
-  university: string;
+  name: string,
+  surname: string,
+  linkedin: string,
+  instagram: string,
+  facebook: string,
+  image: string,
+  position: string,
+  university: string,
 }
 
 export default function Seminar() {

frontend/src/app/seminar/SeminarCard.tsx

@@ -15,7 +15,7 @@ export default function SeminarCard({ key, person }: { key: number, person: Pers
           <SeminarLogo logo={instagram.src} alt={'instagram'} />
           <SeminarLogo logo={facebook.src} alt={'facebook'} />
         </div>
-        <Image src={person.image} alt={person.name} width={200} height={200} className={'relative z-0'}/>
+        <Image src={person.image} alt={person.name + ' ' + person.surname} width={200} height={200} className={'relative z-0'}/>
       </div>
       <div className={'bg-white rounded-lg font-manrope font-normal text-sm text-[#8A8998] w-[230px] pl-4 pt-[40%] pb-5 -translate-y-[50%] z-0'}>
         <div className={'font-semibold text-xl text-black pb-1 pt-3.5'}>

frontend/src/app/seminar/ViewAllButton.tsx

@@ -4,11 +4,11 @@ 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-white p-4 mb-3 font-manrope font-bold text-lg'}>
+    <button className={'flex justify-center items-center rounded-md m-auto bg-white py-5 px-8 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'} />
+      <Image src={Arrow} alt={'view all arrow'} width={width} height={width} className={'ml-3'} />
     </button>
   );
 }

frontend/src/app/staff/Staff.tsx

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

frontend/src/app/staff/StaffCard.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Staff } from './Staff';
+import Image from 'next/image';
+
+export default function StaffCard({ key, person }: { key: number, person: Staff }) {
+  return (
+    <div key={key} className={'flex flex-col justify-center items-center px-5 font-manrope'}>
+      <Image src={person.image} alt={person.name + ' ' + person.surname} width={200} height={200}
+             className={'rounded-full'} />
+      <div className={'font-semibold text-base text-black pt-3'}>
+        {person.name} {person.surname}
+      </div>
+      <div className={'font-normal text-xs text-[#8A8998]'}>
+        {person.team}
+      </div>
+    </div>
+  );
+}

frontend/src/app/staff/StaffLine.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Staff } from './Staff';
+import StaffCard from './StaffCard';
+import Sample from './assets/Sample.svg';
+
+export default function StaffLine() {
+  const staff: Staff[] = [
+    {
+      name: 'John Doe',
+      surname: 'Doe',
+      team: 'Team',
+      image: Sample.src,
+    },
+    {
+      name: 'John Doe',
+      surname: 'Doe',
+      team: 'Team',
+      image: Sample.src,
+    },
+    {
+      name: 'John Doe',
+      surname: 'Doe',
+      team: 'Team',
+      image: Sample.src,
+    },
+    {
+      name: 'John Doe',
+      surname: 'Doe',
+      team: 'Team',
+      image: Sample.src,
+    },
+    {
+      name: 'John Doe',
+      surname: 'Doe',
+      team: 'Team',
+      image: Sample.src,
+    },
+    {
+      name: 'John Doe',
+      surname: 'Doe',
+      team: 'Team',
+      image: Sample.src,
+    },
+  ];
+
+  return (
+    <div className={'flex flex-wrap justify-center items-center pt-10'}>
+      {
+        staff.map((person, index) => (
+          <StaffCard key={index} person={person} />
+        ))
+      }
+    </div>
+  );
+}

frontend/src/app/staff/ViewAllButton.tsx

@@ -4,11 +4,11 @@ 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'}>
+    <button className={'flex justify-center items-center rounded-md bg-[#0B3678] py-5 px-8 mb-3 font-manrope font-bold text-lg text-white'}>
       <div>
         {text}
       </div>
-      <Image src={Arrow} alt={'view all arrow'} width={width} height={width} className={'ml-5'} />
+      <Image src={Arrow} alt={'view all arrow'} width={width} height={width} className={'ml-3'} />
     </button>
   );
 }