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)
-import styles from './page.module.css';
+"use client";
 
 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" },
+  {
+    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 three 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'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.",
+    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 he'll 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>
+export default function TeamPage() {
+  return (
+    <div className="relative min-h-screen py-12 px-4 flex items-center justify-center">
+      {/* Background */}
+      <div
+        className="absolute inset-0 bg-cover bg-center z-0"
+        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" />
 
-            {/* 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>
-                ))}
+      {/* 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">
+          {teamMembers.map((member, idx) => (
+            <div
+              key={idx}
+              className="bg-white/90 rounded-lg shadow p-6 flex flex-col items-center hover:shadow-xl transition-shadow"
+            >
+              <img
+                src={member.image}
+                alt={member.name}
+                className="w-28 h-28 object-cover rounded-full border-4 border-blue-100 mb-4"
+              />
+              <h2 className="text-lg font-bold text-gray-800 text-center">{member.name}</h2>
+              <p className="text-sm font-semibold text-blue-600 text-center mb-2 uppercase tracking-wide">
+                {member.title}
+              </p>
+              <p className="text-gray-600 text-sm text-center">{member.description}</p>
             </div>
+          ))}
         </div>
-    );
+      </div>
+    </div>
+  );
 }