feat(cms): about page migration to payload

src/app/(app)/(pages)/about/page.tsx

@@ -1,87 +1,92 @@
-import TeamSection from "./components/TeamSection";
-import Hr from "../../components/Hr";
-import Image from "next/image";
-import { Metadata } from "next";
+import { RefreshRouteOnSave } from "@/app/(app)/components/RefreshRouteOnSave";
+import { Fragment } from "react";
+import { getPayloadClient } from "@/payloadClient";
 import { getPageFromCMS } from "@/lib/getPageFromCMS";
+import { Metadata } from "next";
+import { RichText } from "@payloadcms/richtext-lexical/react";
+import { SerializedEditorState } from "@payloadcms/richtext-lexical/lexical";
+import Image from "next/image";
+import Hr from "../../components/Hr";
+import styles from "./styles.module.css";
+import { About, Media } from "@/payload-types";
 
-const teams = {
-    leadership: [
-        { role: "Senior Advisor", name: "Charlotte Rotstein", pronouns: "she/they", image: "/team/charlotte.webp" },
-        { role: "Co-President", name: "Kristie Lam", pronouns: "she/her", image: "/team/kristie.webp" },
-        { role: "Co-President", name: "Abbie Carnahan", pronouns: "she/her", image: "/team/abbie.webp" },
-    ],
-    events: [
-        { role: "Events Coordinator", name: "Catherine McCourt  ", pronouns: "she/her", image: "/team/catherine.webp" },
-        { role: "Events Coordinator", name: "Sandrine Huard", pronouns: "she/her", image: "/team/sandrine.webp" },
-    ],
-    finance: [
-        { role: "Sponsorship Coordinator", name: "Julia Rotiroti", pronouns: "she/her", image: "/team/julia.webp" },
-        { role: "Finance Coordinator", name: "Christina Huan", pronouns: "she/her", image: "/team/christina.webp" },
-    ],
-    marketing: [
-        { role: "Social Media Coordinator", name: "Amanda Borja", pronouns: "she/her" },
-        { role: "Marketing & Outreach Coordinator", name: "Paige Metcalf", pronouns: "she/her", image: "/team/paige.webp" },
-        { role: "TikTok & Video Content Creator", name: "Naomi Harmel", pronouns: "she/her", image: "/team/naomi.webp" },
-    ],
-    website: [
-        { role: "Website Content Creator", name: "Julie Burke", pronouns: "she/her", image: "/team/julie.webp" },
-        { role: "Website Developer", name: "Atlas Gong", pronouns: "he/him", image: "/team/atlas.webp" },
-        { role: "Website Developer", name: "Murad Novruzov", pronouns: "he/him", image: "/team/murad.webp" },
-    ],
-    content: [
-        { role: "Newsletter Content Creator", name: "Gianluca Caporicci", pronouns: "he/him", image: "/team/gianluca.webp" },
-        { role: "French Coordinator", name: "Alizée Cyr-Comeault", pronouns: "she/her", image: "/team/alizee.webp" },
-    ],
-    founders: [
-        { role: "Founder", name: "Safiia Abdulkadyrova", pronouns: "she/her", image: "/team/safiia-abdulkadyrova.webp" },
-        { role: "Founder", name: "Lauren Harrison", pronouns: "she/her", image: "/team/lauren-harrison.webp" },
-        { role: "Founder", name: "Hana Jamal", pronouns: "she/her", image: "/team/hana-jamal.webp" },
-    ],
-};
+type TeamMember = About["teams"][number]["members"][number];
+type TeamSection = About["teams"][number];
 
-export default function AboutPage() {
+/**
+ * Inline TeamSection component – purely presentational.
+ */
+function TeamSection({ title, members }: TeamSection) {
     return (
-        <div className="container mx-auto max-w-7xl px-6 pb-12 pt-20">
-            {/* Group Photo */}
-            <div className="group relative mb-16 aspect-[16/9] w-full overflow-hidden rounded-xl shadow-lg transition-all duration-300">
-                <Image unoptimized priority src="/team/group-photo.webp" alt="MindVista Team" width={1920} height={1280} className="h-full w-full object-cover brightness-90 transition-transform duration-500 group-hover:scale-105 group-hover:brightness-100" />
-                <div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-blue-500/20 opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
-                <div className="absolute bottom-0 left-0 right-0 bg-black/40 p-4 text-white opacity-0 transition-opacity duration-500 group-hover:opacity-100">
-                    <h3 className="text-xl font-semibold">MindVista Team 2024-2025</h3>
-                    <p className="text-sm">Committed to student wellness and engagement.</p>
-                </div>
+        <section className={styles.teamSection}>
+            <h2 className={styles.teamTitle}>{title}</h2>
+            <div className={styles.teamGrid}>
+                {members.map((member: TeamMember) => (
+                    <div key={member.name} className={styles.teamCard}>
+                        <div className={styles.teamImageWrapper}>
+                            <Image src={(member.image as Media)?.url || "/team/avatarPlaceholder.png"} alt={(member.image as Media)?.url || member.name} width={500} height={500} className={styles.teamImage} />
+                        </div>
+                        <div className={styles.memberInfo}>
+                            <h3 className={styles.memberName}>{member.name}</h3>
+                            {member.pronouns && <span className={styles.memberPronouns}>({member.pronouns})</span>}
+                            <p className={styles.memberRole}>{member.role}</p>
+                        </div>
+                    </div>
+                ))}
             </div>
+        </section>
+    );
+}
+
+export default async function AboutPage() {
+    // Fetch the global "about" content from Payload
+    const content = await (await getPayloadClient()).findGlobal({ slug: "about" });
 
-            {/* About Content */}
-            <div className="mx-auto mb-16 max-w-4xl space-y-6">
-                <h1 className="mb-4 bg-gradient-to-r from-purple-500 to-blue-400 bg-clip-text text-center text-3xl font-bold text-transparent md:text-4xl dark:from-purple-400 dark:to-blue-300">About MindVista&apos;s Initiative</h1>
+    const groupPhotoUrl = (content?.groupPhoto as Media)?.url;
 
-                <p className="text-base font-medium leading-relaxed text-cTextOffset">Established in 2023, MindVista emerged from the collaborative as part of the Integrated Management Student Fellowship (IMSF) at McGill University. Rooted in a commitment to enhancing mental wellness, our group functions as a student, volunteer-run initiative that envisions a holistic approach to fostering well-being for every McGill student.</p>
+    return (
+        <Fragment>
+            <RefreshRouteOnSave />
+            <div className={styles.container}>
+                <div className={styles.mainContent}>
+                    {/* Hero Section */}
+                    <section className={`${styles.section} ${styles.heroSection}`}>
+                        {/* Add "group" class here so children can use group-hover */}
+                        <div className={`${styles.heroImageWrapper} group`}>
+                            {groupPhotoUrl ? <Image src={(content.groupPhoto as Media).url as string} alt="MindVista Team" width={1920} height={1280} className={styles.heroImage} /> : <div>Error: Group photo is not set in Payload.</div>}
+                            <div className={styles.heroOverlay}></div>
+                            <div className={styles.heroCaption}>
+                                <h3 className={styles.heroCaptionTitle}>MindVista Team 2024-2025</h3>
+                                <p className={styles.heroCaptionSubtitle}>Committed to student wellness and engagement.</p>
+                            </div>
+                        </div>
+                    </section>
 
-                <p className="text-base font-medium leading-relaxed text-cTextOffset">Dedicated to creating a positive impact on campus mental health, MindVista provides a range of initiatives, including:</p>
+                    <Hr className="mx-auto" />
 
-                <ul className="my-6 list-inside list-disc space-y-1 pl-4 text-base font-semibold text-cText">
-                    <li>Comprehensive Mental Wellness Resources</li>
-                    <li>Club Directory for Increased Engagement</li>
-                    <li>Weekly Wellness Newsletter</li>
-                    <li>Host Wellness Events</li>
-                    <li>Wellness Challenges and Giveaways with Epic Rewards</li>
-                </ul>
+                    {/* Introduction Section */}
+                    <section className={styles.section}>
+                        <div className={styles.textContent}>
+                            <RichText data={content?.introduction as SerializedEditorState} />
+                        </div>
+                    </section>
 
-                <p className="text-base font-medium leading-relaxed text-cTextOffset">Join MindVista on our mission to cultivate a campus culture that prioritizes mental wellness and fosters a sense of community among McGill students. Together, let&apos;s embark on a journey towards a healthier and more connected student experience.</p>
-            </div>
+                    <Hr className="mx-auto" />
 
-            <Hr className="mb-16" />
+                    {/* Initiative Details Section */}
+                    <section className={styles.section}>
+                        <div className={styles.textContent}>
+                            <RichText data={content?.initiativeDetails as SerializedEditorState} />
+                        </div>
+                    </section>
 
-            {/* Photos sectioned by Team */}
-            <TeamSection title="Leadership & Coordination Team" members={teams.leadership} />
-            <TeamSection title="Events Team" members={teams.events} />
-            <TeamSection title="Finance Team" members={teams.finance} />
-            <TeamSection title="Marketing & Social Media Team" members={teams.marketing} />
-            <TeamSection title="Website Team" members={teams.website} />
-            <TeamSection title="Newsletter Content Creators" members={teams.content} />
-            <TeamSection title="Founders" members={teams.founders} />
-        </div>
+                    <Hr className="mx-auto" />
+
+                    {/* Team Sections */}
+                    {content?.teams?.map((team, index) => <TeamSection key={index} title={team.title} members={team.members} />)}
+                </div>
+            </div>
+        </Fragment>
     );
 }
 

src/app/(app)/(pages)/about/styles.module.css

@@ -0,0 +1,130 @@
+/* Container for the entire page */
+.container {
+    @apply mx-auto max-w-7xl px-6 pb-12 pt-20;
+}
+
+/* Main content wrapper */
+.mainContent {
+    @apply relative;
+}
+
+/* Section spacing */
+.section {
+    @apply mb-16;
+}
+
+/* Hero Section styles */
+.heroSection {
+    /* Additional adjustments if needed can be added here */
+}
+
+/* Wrapper for the hero image (group photo container) */
+.heroImageWrapper {
+    @apply relative mb-16 aspect-[16/9] w-full overflow-hidden rounded-xl shadow-lg transition-all duration-300;
+}
+
+/* Hero image styling */
+.heroImage {
+    @apply h-full w-full object-cover brightness-90 transition-transform duration-500 group-hover:scale-105 group-hover:brightness-100;
+}
+
+/* Purple-to-blue overlay that appears on hover */
+.heroOverlay {
+    @apply absolute inset-0 bg-gradient-to-r from-purple-500/20 to-blue-500/20 opacity-0 transition-opacity duration-500 group-hover:opacity-100;
+}
+
+/* Caption area at the bottom with dark background */
+.heroCaption {
+    @apply absolute bottom-0 left-0 right-0 bg-black/40 p-4 text-white opacity-0 transition-opacity duration-500 group-hover:opacity-100;
+}
+
+/* Caption title text */
+.heroCaptionTitle {
+    @apply text-xl font-semibold;
+}
+
+/* Caption subtitle text */
+.heroCaptionSubtitle {
+    @apply text-sm;
+}
+
+/* Text content container for various sections */
+.textContent {
+    @apply space-y-4;
+}
+
+/* Page title styling */
+.title {
+    @apply mb-4 bg-gradient-to-r from-purple-500 to-blue-400 bg-clip-text text-center text-3xl font-bold text-transparent md:text-4xl dark:from-purple-400 dark:to-blue-300;
+}
+
+/* Subtitle styling */
+.subtitle {
+    @apply text-base font-medium leading-relaxed text-cTextOffset;
+}
+
+/* ------------------- */
+/* Team Section Styles */
+/* ------------------- */
+
+/* Container for each team section */
+.teamSection {
+    @apply mb-16;
+}
+
+/* Team section title styling */
+.teamTitle {
+    @apply mb-8 text-center text-3xl font-bold text-cText;
+}
+
+/* Grid layout for team member cards */
+.teamGrid {
+    @apply flex flex-wrap justify-center gap-8;
+}
+
+/* Individual team card styling */
+.teamCard {
+    @apply flex w-full flex-col items-center rounded-xl bg-cBackgroundOffset p-6 text-center shadow-lg;
+}
+
+@media (min-width: 640px) {
+    .teamCard {
+        width: calc(50% - 1rem);
+    }
+}
+
+@media (min-width: 1024px) {
+    .teamCard {
+        width: calc(33.333% - 1rem);
+    }
+}
+
+/* Wrapper for the team member image */
+.teamImageWrapper {
+    @apply mb-4 h-40 w-40 overflow-hidden rounded-full;
+}
+
+/* Team member image styling */
+.teamImage {
+    @apply h-full w-full object-cover;
+}
+
+/* Container for team member information */
+.memberInfo {
+    @apply flex flex-col items-center;
+}
+
+/* Team member name styling */
+.memberName {
+    @apply text-xl font-semibold text-cText;
+}
+
+/* Team member pronouns styling */
+.memberPronouns {
+    @apply ml-1 text-sm italic text-cTextOffset;
+}
+
+/* Team member role styling */
+.memberRole {
+    @apply font-medium text-cTextOffset;
+}