feat: initial implementation

app/members/memberFlipCard.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+// Source: https://github.com/mematthew123/3dFlipCards-demo
+
+const steps = [
+  {
+    step: "01",
+    name: "Initial Onboarding",
+    gradient: "bg-gradient-to-r from-purple-900 via-purple-800 to-purple-700",
+    description:
+      "Dive right into an onboarding weekend where you’ll get acquainted with your batch, familiarize yourself with the internal TUM.ai frameworks, hone your ideation skills, and discover various opportunities TUM.ai offers.",
+  },
+  {
+    step: "02",
+    name: "ML Project",
+    gradient: "bg-gradient-to-r from-purple-700 via-purple-600 to-purple-500",
+    description:
+      "Over a semester, immerse yourself in an ML project based on your skill set. This period is not just about project tasks but also about community engagement. You’ll be able to develop new skills, participate in various learning opportunities, and even join trips and other special events.",
+  },
+  {
+    step: "03",
+    name: "Growth Opportunities",
+    gradient: "bg-gradient-to-r from-purple-500 via-purple-400 to-purple-300",
+    description:
+      "After completing a semester, you aren’t limited to your initial project. You can shape tum.ai by creating or joining a strategic task force.",
+  },
+  {
+    step: "04",
+    name: "Research Exchange",
+    gradient: "bg-gradient-to-r from-purple-400 via-purple-300 to-purple-200",
+    description:
+      "Now, we can send you off into research at prestigious institutions such as MIT, Harvard, or Berkeley. Through our network of alumni, we will not only help you find the right topic but also support you with the bureaucracy.",
+  },
+  {
+    step: "05",
+    name: "Alumni Program",
+    gradient: "bg-gradient-to-r from-purple-300 via-purple-200 to-purple-100",
+    description:
+      "Once you’ve been with us for two semesters, you’re eligible to join the TUM.ai Alumni Program, marking an important milestone in your journey and opening up further opportunities for collaboration and networking.",
+  },
+];
+
+const MemberFlipCardComponent = () => {
+  return (
+    <section className="py-10 mx-auto sm:py-14">
+      <div className="mx-auto flex justify-center object-center px-2 sm:px-2 py-10 sm:py-14 lg:max-w-full">
+        <div className="flex justify-center object-center flex-col gap-6 sm:gap-8">
+          <div className="mx-auto grid grid-cols-5 gap-4">
+            {steps.map((step) => (
+              <div
+                key={step.name}
+                className="group h-64 w-64 [perspective:1000px]"
+              >
+                <div className="relative h-full w-full rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
+                  <div
+                    className={`absolute inset-0 h-full w-full rounded-xl ${step.gradient} [backface-visibility:hidden] flex flex-col items-center justify-center text-white px-2 text-center`}
+                  >
+                    <p className="text-xl font-bold">{step.name}</p>
+                  </div>
+                  <div className="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-4 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
+                    <div className="flex min-h-full flex-col items-center justify-center">
+                      <p className="text-sm text-center">{step.description}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default MemberFlipCardComponent;

app/members/page.tsx

@@ -4,11 +4,14 @@ import { cx } from "class-variance-authority";
 import Hero from "@components/Hero";
 import { DepartmentList } from "./departments";
 import type { Metadata } from "next";
+import MemberFlipCardComponent from "./memberFlipCard";
 
 export const metadata: Metadata = {
   title: "TUM.ai - Members",
 };
 
+//TODO: add member journey (with implact projects and more)
+
 export default function Members() {
   return (
     <>
@@ -20,44 +23,14 @@ export default function Members() {
 
       <Section>
         <h2 className={cx("mb-12 text-4xl font-semibold", bitter.className)}>
-          The TUM.ai Leadership Journey
+          The TUM.ai Member Journey
         </h2>
-
-        <div className="flex flex-wrap items-center justify-center">
-          <div className="clip-point-down xl:clip-point-right w-full rounded bg-white bg-gradient-to-b from-blue-300 to-blue-400 p-8 pb-16 text-center text-white xl:w-max xl:bg-gradient-to-r xl:pb-8 xl:pr-16">
-            <h3 className="text-xl font-bold">Member</h3>
-            <p>Once you are accepted</p>
-          </div>
-
-          <div className="clip-chev-down xl:clip-chev-right w-full rounded bg-white bg-gradient-to-b from-blue-400 to-blue-500 p-8 py-16 text-center text-white xl:w-max xl:bg-gradient-to-r xl:px-16 xl:py-8">
-            <h3 className="text-xl font-bold">Teamlead</h3>
-            <p>max. for 2 semesters</p>
-          </div>
-
-          <div className="clip-chev-down xl:clip-chev-right w-full rounded bg-white bg-gradient-to-b from-blue-500 to-blue-600 p-8 py-16 text-center text-white xl:w-max xl:bg-gradient-to-r xl:px-16 xl:py-8">
-            <h3 className="text-xl font-bold">Mentor</h3>
-            <p>strategic advisors</p>
-          </div>
-
-          <div className="clip-enter-down xl:clip-enter-right w-full rounded bg-white bg-gradient-to-b from-blue-600 to-blue-700 p-8 pt-16 text-center text-white xl:w-max xl:bg-gradient-to-r xl:py-8 xl:pl-16">
-            <h3 className="text-xl font-bold">President</h3>
-            <p>max. for 2 semesters</p>
-          </div>
-        </div>
-      </Section>
-
-      <Section>
         <div className="mb-8">
-          <h2 className={cx("mb-4 text-4xl font-semibold", bitter.className)}>
-            Departments
-          </h2>
           <p>
-            All of our active members contribute to one or more of the following
-            organizational departments.
+            All of our active members go though an exiting journey, involving project work, contibuting to AI innovation, building of TUMai community, and more. There is always room for growth and development, and our community supports its members in every step of the way.
           </p>
         </div>
-
-        <DepartmentList />
+        <MemberFlipCardComponent />
       </Section>
     </>
   );

package.json

@@ -14,6 +14,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@heroicons/react": "^2.1.5",
     "@hookform/resolvers": "^3.3.2",
     "@notionhq/client": "^2.2.5",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -44,7 +45,8 @@
     "schema-dts": "^1.1.2",
     "sharp": "^0.33.2",
     "tailwind-merge": "^2.5.2",
-    "three": "^0.153.0",
+    "three": "^0.169.0",
+    "three-mesh-bvh": "^0.8.2",
     "typescript": "^4.9.4",
     "zod": "^3.22.4"
   },