updated team page

src/app/the-team/page.tsx

@@ -1,50 +1,81 @@
-"use client"; // Required for components in Next.js (using client-side rendering)
+"use client";
-import styles from './page.module.css';
 
 const teamMembers = [
-    { name: "Tim Howitz", 
+  {
+    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.", 
+    description:
-        image: "/Timthescientist.PNG" },
+      "Tim is responsible for analysing structures on a day-to-day basis. In his home life he is a keen outdoors enthusiast, with three kids and a dog.",
-    { name: "Emily Neighbour", 
+    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", 
+    description:
-        image: "/Emilythescientist.PNG" },
+      "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching, and becoming a mute.",
-    { name: "Izzy Patterson", 
+    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", 
+    description:
-        image: "/Izzythescientist.PNG" },
+      "Izzy's 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.",
-    { name: "Lukeshan Thananchayan", 
+    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", 
+    description:
-        image: "/Lukeshanthescientist.PNG" },
+      "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 he'll get a hotel!",
+    image: "/Lukeshanthescientist.PNG",
+  },
 ];
 
-export default function Page() {
+export default function TeamPage() {
   return (
-        <div className={styles.container}>
+    <div className="relative min-h-screen py-12 px-4 flex items-center justify-center">
-            {/* Header */}
+      {/* Background */}
-            <h1 className={styles.header}>Meet The Team</h1>
+      <div
-            <p className={styles.subheader}>
+        className="absolute inset-0 bg-cover bg-center z-0"
-                Our expert team is made up of scientists around the globe. Our heads of department are shown below.
+        style={{
+          backgroundImage: 'url("/background.PNG")',
+        }}
+        aria-hidden="true"
+      />
+        aria-hidden="true"
+      />
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black bg-opacity-40 z-10" aria-hidden="true" />
+
+      {/* Main Content */}
+      <div className="max-w-4xl mx-auto w-full relative z-20">
+        <h1 className="text-3xl md:text-4xl font-extrabold text-center text-white mb-4 drop-shadow-lg">
+          Meet The Team
+        </h1>
+        <p className="text-lg text-gray-200 text-center mb-12 drop-shadow">
+          Our global team is made up of dedicated scientists and professionals.  
+          Meet our department heads below.
         </p>
-
+        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
-            {/* Team Members Section */}
+          {teamMembers.map((member, idx) => (
-            <div className={styles.team}>
+            <div
-                {teamMembers.map((member, index) => (
+              key={idx}
-                    <div key={index} className={styles.card}>
+              className="bg-white/90 rounded-lg shadow p-6 flex flex-col items-center hover:shadow-xl transition-shadow"
-                        {/* Image */}
+            >
-                        <img src={member.image} alt={member.name} className={styles.image} />
+              <img
-                        
+                src={member.image}
-                        {/* Text Content */}
+                alt={member.name}
-                        <div className={styles.text}>
+                className="w-28 h-28 object-cover rounded-full border-4 border-blue-100 mb-4"
-                            <h2 className={styles.name}>{member.name}</h2>
+              />
-                            <p className={styles.title}>{member.title}</p>
+              <h2 className="text-lg font-bold text-gray-800 text-center">{member.name}</h2>
-                            <p className={styles.description}>{member.description}</p>
+              <p className="text-sm font-semibold text-blue-600 text-center mb-2 uppercase tracking-wide">
-                        </div>
+                {member.title}
+              </p>
+              <p className="text-gray-600 text-sm text-center">{member.description}</p>
             </div>
           ))}
         </div>
       </div>
+    </div>
   );
 }