✨ Add who's involved people

src/app/about.tsx

@@ -1,6 +1,6 @@
 export default function About() {
   return (
-    <section className="-top-8 relative -mb-8">
+    <section className="-top-8 relative mb-4">
       <h2>What is WSAF?</h2>
       <p>
         Warwick Student Arts Festival (WSAF) is a 3 day showcase and celebration

src/app/components/id-card.tsx

@@ -0,0 +1,55 @@
+import { StaticImageData } from 'next/image';
+import Image from 'next/image';
+
+export type IdCardProps = {
+  name: string;
+  description?: string;
+  role?: string;
+  image?: StaticImageData;
+};
+
+export default function IdCard({
+  name,
+  description,
+  role,
+  image,
+  organisation,
+}: {
+  name: string;
+  description?: string;
+  role?: string;
+  image?: StaticImageData;
+  organisation?: boolean;
+}) {
+  return (
+    <article
+      className={`rounded-xl m-2 overflow-hidden w-56 flex flex-col ${organisation ? 'bg-secondary' : 'bg-accent'}`}
+    >
+      <header className="bg-secondary h-10 flex justify-center items-center">
+        <div
+          className={`rounded-2xl w-12 h-3 mt-1 ${organisation ? 'bg-primary' : 'bg-accent'}`}
+        />
+      </header>
+      <main
+        className={`flex-grow flex flex-col px-4 py-2 ${organisation ? 'mb-2' : 'text-black'}`}
+      >
+        {image && (
+          <Image
+            src={image}
+            alt={`Image of ${name}`}
+            className={`mx-auto mb-2 ${organisation ? 'h-20 w-auto' : 'w-36 h-auto'}`}
+          />
+        )}
+        <h3 className="mt-auto text-xl font-bold leading-tight">{name}</h3>
+        {description && (
+          <span className="block text-sm leading-tight">{description}</span>
+        )}
+      </main>
+      {role && (
+        <footer className="bg-secondary text-xl uppercase font-bold pt-1 pb-2 px-2 mt-auto">
+          {role}
+        </footer>
+      )}
+    </article>
+  );
+}

src/app/faq.tsx

@@ -1,6 +1,6 @@
 export default function Faq() {
   return (
-    <section>
+    <section className="mb-12">
       <h2>FAQ</h2>
     </section>
   );

src/app/key-dates.tsx

@@ -1,6 +1,6 @@
 export default function KeyDates() {
   return (
-    <section>
+    <section className="mb-12">
       <h2>Key Dates</h2>
     </section>
   );

src/app/who-involved.tsx

@@ -1,31 +1,92 @@
-import PersonIdCard from '@/app/components/person-id-card';
+import IdCard, { IdCardProps } from '@/app/components/id-card';
+import WarwickTechCrewLogo from '@/assets/organisations/warwick-tech-crew.png';
+import WarwickSuLogo from '@/assets/organisations/warwick-su.png';
+import AdamPhoto from '@/assets/people/adam.jpg';
+import AlexPhoto from '@/assets/people/alex.jpg';
+import MaximusPhoto from '@/assets/people/maximus.jpg';
+import JoshPhoto from '@/assets/people/josh.jpg';
+import ElliePhoto from '@/assets/people/ellie.jpg';
+
+const organisations: IdCardProps[] = [
+  {
+    name: 'Warwick Tech Crew',
+    image: WarwickTechCrewLogo,
+  },
+  {
+    name: 'Warwick Presents',
+  },
+  {
+    name: 'Warwick SU',
+    image: WarwickSuLogo,
+  },
+];
+
+const people: IdCardProps[] = [
+  {
+    name: 'Adam',
+    role: 'Coordinator',
+    description: '4th Year Computer Systems Engineering',
+    image: AdamPhoto,
+  },
+  {
+    name: 'Alexander',
+    role: 'Coordinator',
+    description: '',
+    image: AlexPhoto,
+  },
+  {
+    name: 'Dae',
+    role: 'Coordinator',
+    description: '',
+  },
+  {
+    name: 'Maximus',
+    role: 'Coordinator',
+    description: '1st Year Mathematics',
+    image: MaximusPhoto,
+  },
+  {
+    name: 'Josh',
+    role: 'Webmaster',
+    description: '2nd Year Computer Science',
+    image: JoshPhoto,
+  },
+  {
+    name: 'Ellie',
+    role: 'Design Officer',
+    description: '2nd Year English and Theatre Studies',
+    image: ElliePhoto,
+  },
+];
 
 export default function KeyDates() {
   return (
-    <section>
+    <section className="mb-12">
       <h2>Who's Involved?</h2>
+      <p>Some random text goes here</p>
+
+      <div className="flex justify-center flex-wrap mb-8">
+        {organisations.map((organisation) => (
+          <IdCard
+            key={organisation.name}
+            name={organisation.name}
+            description={organisation.description}
+            image={organisation.image}
+            organisation={true}
+          />
+        ))}
+      </div>
 
       <div className="flex justify-center flex-wrap mb-8">
-        <PersonIdCard
-          name="Adam"
-          description="5th Year Computer Systems Engineering"
-          role="Role"
-        />
-        <PersonIdCard
-          name="Adam"
-          description="5th Year Computer Systems Engineering"
-          role="Role"
-        />
-        <PersonIdCard
-          name="Adam"
-          description="5th Year Computer Systems Engineering"
-          role="Role"
-        />
-        <PersonIdCard
-          name="Adam"
-          description="5th Year Computer Systems Engineering"
-          role="Role"
-        />
+        {people.map((person) => (
+          <IdCard
+            key={person.name}
+            name={person.name}
+            description={person.description}
+            role={person.role}
+            image={person.image}
+          />
+        ))}
       </div>
     </section>
   );