Initial meet the team

src/app/the-team/page.module.css

@@ -0,0 +1,75 @@
+/* Container styling */
+.container {
+    font-family: Arial, sans-serif;
+    padding: 20px;
+    text-align: center;
+    color: #333;
+    background-color: #f9f9f9;
+}
+
+/* Header styling */
+.header {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.subheader {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 30px;
+}
+
+/* Team styling */
+.team {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: center; /* Centers team member cards */
+}
+
+/* Individual team member card styling */
+.card {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    width: 90%; /* Width relative to the viewport */
+    max-width: 800px; /* Prevent it from getting too large */
+    padding: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+}
+
+/* Team member image styling */
+.image {
+    width: 110px; /* Both width and height are equal */
+    height: 110px;
+    border-radius: 50%; /* Makes the image circular */
+    object-fit: cover; /* Ensures the image fits perfectly without distortion */
+}
+
+/* Card text styling */
+.text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.name {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #111;
+    margin-bottom: 5px;
+}
+
+.title {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 10px;
+}
+
+.description {
+    font-size: 1rem;
+    color: #777;
+}

src/app/the-team/page.tsx

@@ -1,6 +1,50 @@
-"use client";
+"use client"; // Required for components in Next.js (using client-side rendering)
+import styles from './page.module.css';
 
-export default function Page()
-{
-    return( <p>The Team</p>)
+const teamMembers = [
+    { name: "Tim Howitz", 
+        title: "Chief Crack Inspector", 
+        description: "Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.", 
+        image: "/Timthescientist.PNG" },
+    { name: "Emily Neighbour", 
+        title: "Chief Software Engineer", 
+        description: "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute", 
+        image: "/Emilythescientist.PNG" },
+    { name: "Izzy Patterson", 
+        title: "Chief Geologist", 
+        description: "Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them", 
+        image: "/Izzythescientist.PNG" },
+    { name: "Lukeshan Thananchayan", 
+        title: "Chief Duster", 
+        description: "Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel", 
+        image: "/Lukeshanthescientist.PNG" },
+];
+
+export default function Page() {
+    return (
+        <div className={styles.container}>
+            {/* Header */}
+            <h1 className={styles.header}>Meet The Team</h1>
+            <p className={styles.subheader}>
+                Our expert team is made up of scientists around the globe. Our heads of department are shown below.
+            </p>
+
+            {/* Team Members Section */}
+            <div className={styles.team}>
+                {teamMembers.map((member, index) => (
+                    <div key={index} className={styles.card}>
+                        {/* Image */}
+                        <img src={member.image} alt={member.name} className={styles.image} />
+                        
+                        {/* Text Content */}
+                        <div className={styles.text}>
+                            <h2 className={styles.name}>{member.name}</h2>
+                            <p className={styles.title}>{member.title}</p>
+                            <p className={styles.description}>{member.description}</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
 }