Merge pull request #14 from DSC-McMaster-U/feature/MB-21-club-members

Feature/mb 21 club members

app/components/MemberCard.tsx

@@ -0,0 +1,29 @@
+/*
+ * This component can be removed if we update the ImageCTACard
+ * to have a prop for custom styling
+ */
+
+
+interface MemberCardProps {
+    Image: React.ReactNode;
+    Content: React.ReactNode;
+    CTA: React.ReactNode;
+}
+
+const MemberCard = ({ Image, Content, CTA }: MemberCardProps) => {
+    return (
+        <div className="relative group w-full h-[26rem] bg-white dark:bg-google-grey dark:bg-opacity-10 rounded-md overflow-hidden shadow-lg p-1">
+            <div className="relative h-72 overflow-hidden rounded-md transition-all duration-200 ease-in-out hover-none:h-60 group-hover:h-60 bg-google-lightGrey dark:bg-google-black">
+                {Image}
+            </div>
+            <div className="p-4 flex flex-col gap-y-2">
+                {Content}
+            </div>
+            <div className="absolute bottom-0 left-0 w-full p-4 transition-transform duration-300 ease-in-out transform translate-y-full group-hover:translate-y-0 hover-none:translate-y-0">
+                {CTA}
+            </div>
+        </div>
+    );
+}
+
+export default MemberCard;

app/team/page.tsx

@@ -0,0 +1,147 @@
+import { Metadata } from "next";
+import Image from "next/image";
+import Header from "../components/Header";
+import MemberCard from "../components/MemberCard";
+
+export const metadata: Metadata = {
+  title: "Team | GDSC McMaster U",
+  description: "Our team @ GDSC McMaster U",
+};
+
+interface Team {
+  name: string;
+  sectionId: string;
+  members: Member[];
+}
+
+interface Member {
+  image: string;
+  name: string;
+  position: string;
+  hoverContent: string;
+}
+
+const teams : Team[] = [
+  {
+    name: "Marketing & Branding Team",
+    sectionId: "marketing-branding",
+    members: [
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information goes here. test test test test test test test test test \n test test test test test test?"
+      },
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information here"
+      },
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information here"
+      },
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information here"
+      },
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information here"
+      },
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information here"
+      },
+    ]
+  },
+  {
+    name: "Test Team",
+    sectionId: "test",
+    members: [
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information here"
+      },
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information here"
+      },
+      {
+        image: '',
+        name: "Test Name",
+        position: "Development Subteam",
+        hoverContent: "Additional information here"
+      },
+    ]
+  },
+];
+
+// will be async once fetching data
+const TeamPage = () => {
+  // await fetch team data
+  // temp using consts for team data
+
+  return (
+    <>
+      <Header />
+      <main className="pt-32">
+        <h3 className="text-center mb-8">Our Team @ GDSC McMaster U</h3>
+
+        {teams.map((team, idx) => (
+          <section id={team.sectionId} key={idx} className="px-8 sm:px-0 w-full">
+            <h5 className="mb-6">{team.name}</h5>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
+              {team.members.map((member, _idx) => (
+                <MemberCard
+                  key={idx * 100 + _idx}
+                  Image={
+                    <Image
+                        src={member.image}
+                        alt={member.name || "not available"}
+                        fill
+                        className="object-cover transition-opacity rounded-md duration-300"
+                    />
+                  }
+                  Content={
+                    <>
+                      <div className="transition-transform duration-300 ease-in-out">
+                        <h6>{member.name}</h6>
+                        <p className="text-google-grey dark:text-google-lightGrey">{member.position}</p>
+                      </div>
+                    </>
+                  }
+                  CTA={
+                    <div className="transition-transform duration-300 ease-in-out">
+                      <p className="px-1 text-google-grey dark:text-google-lightGrey hover:text-google-black dark:hover:text-white text-sm">{member.hoverContent}</p>
+                    </div>
+                  }
+                />
+              ))}
+            </div>
+
+            </section>
+        ))}
+
+
+
+      </main>
+    </>
+  )
+}
+
+export default TeamPage