Bottom section of about us

src/components/about/member.astro

@@ -0,0 +1,36 @@
+---
+import { Image } from "astro:assets";
+import { Icon } from "astro-icon/components";
+
+export interface MemberProps {
+  name: string;
+  x_handle: string;
+  profile_image: string;
+  status: "active" | "past";
+}
+
+const { name, x_handle, profile_image } = Astro.props;
+---
+
+<div class="md:mb mb-2">
+  <Image
+    class="mx-auto overflow-hidden rounded-t-[4px]"
+    src={profile_image}
+    alt={name}
+    width={297}
+    height={330}
+    loading="lazy"
+  />
+  <div class="mx-auto rounded-b-[4px] bg-neutral-dark-0 p-4">
+    <h3 class="mb-2 truncate text-label-sm text-neutral-light-50">{name}</h3>
+    <div class="flex items-center space-x-2">
+      <Icon name="x" class="h-5 w-5 text-neutral-light-30" />
+      <a
+        href={`https://x.com/${x_handle}`}
+        class="text-neutral-light-50 hover:text-neutral-light-0"
+      >
+        <p>{x_handle}</p>
+      </a>
+    </div>
+  </div>
+</div>

src/components/about/team-members.json

@@ -0,0 +1,65 @@
+[
+    {
+        "id": 1,
+        "name": "Youssef El Azizi",
+        "x_handle": "@ElaziziYoussouf",
+        "profile_image": "/about/images/team/yosef.jpg",
+        "status": "active"
+    },
+    {
+        "id": 2,
+        "name": "Mohammed Aboullaite",
+        "x_handle": "@laytoun",
+        "profile_image": "/about/images/team/laytoun.jpg",
+        "status": "active"
+    },
+    {
+        "id": 3,
+        "name": "Mriem Zaid",
+        "x_handle": "@_iMeriem",
+        "profile_image": "/about/images/team/imeriem.jpg",
+        "status": "active"
+    },
+    {
+        "id": 4,
+        "name": "Abderrahim SOUBAI-ELIDRISI",
+        "x_handle": "@soub4i",
+        "profile_image": "/about/images/team/isoubei.jpg",
+        "status": "active"
+    },
+    {
+        "id": 5,
+        "name": "Otmane Fettal",
+        "x_handle": "@OFettal",
+        "profile_image": "/about/images/team/ofettal.jpg",
+        "status": "active"
+    },
+    {
+        "id": 6,
+        "name": "Adnan M'RAKCHI",
+        "x_handle": "@_admerra",
+        "profile_image": "/about/images/team/adnan.jpg",
+        "status": "active"
+    },
+    {
+        "id": 7,
+        "name": "Chaimaa BRITEL",
+        "x_handle": "@ChaimaaBritel",
+        "profile_image": "/about/images/team/britel.jpg",
+        "status": "active"
+    },
+    {
+        "id": 8,
+        "name": "Abdelati EL ASRI",
+        "x_handle": "@kaizendae",
+        "profile_image": "/about/images/team/kaizendae.jpg",
+        "status": "active"
+    },
+    {
+        "id": 9,
+        "name": "Soufyan El Foukahi",
+        "x_handle": "@soufyanAI",
+        "profile_image": "/about/images/team/soufyan.jpg",
+        "status": "past"
+    }
+]

src/components/about/team.astro

@@ -0,0 +1,68 @@
+---
+import Member from "./member.astro";
+import type { MemberProps } from "./member.astro";
+import { getCollection } from "astro:content";
+
+const teamCollection = await getCollection("team");
+const teamMembers: MemberProps[] = teamCollection.map(member => ({
+  name: member.data.name,
+  x_handle: member.data.x_handle,
+  profile_image: member.data.profile_image,
+  status: member.data.status,
+}));
+
+const activeMembers = teamMembers.filter(member => member.status === "active");
+const pastMembers = teamMembers.filter(member => member.status === "past");
+---
+
+<section id="team" class="bg-neutral-dark-20 py-16">
+  <div class="container mx-auto">
+    <!-- Active Team Members -->
+    <h2
+      class="mb-6 text-center text-heading-sm text-neutral-light-50 md:text-left"
+    >
+      Meet Our Team
+    </h2>
+    <div
+      class="mb-10 grid grid-cols-2 gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+    >
+      {
+        activeMembers.map(member => (
+          <Member
+            key={member.name}
+            name={member.name}
+            x_handle={member.x_handle}
+            profile_image={member.profile_image}
+          />
+        ))
+      }
+    </div>
+
+    <!-- Past Members -->
+    <h2
+      class="mb-2 text-center text-heading-sm text-neutral-light-50 md:text-left"
+    >
+      Former Team Members
+    </h2>
+    <p
+      class="mb-6 text-center text-paragraph-sm text-neutral-light-0 md:text-left"
+    >
+      No effort goes unappreciated. On behalf of the community, we thank our
+      ex-team members for their contributions and lasting impact. 🙏
+    </p>
+    <div
+      class="grid grid-cols-2 gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+    >
+      {
+        pastMembers.map(member => (
+          <Member
+            key={member.name}
+            name={member.name}
+            x_handle={member.x_handle}
+            profile_image={member.profile_image}
+          />
+        ))
+      }
+    </div>
+  </div>
+</section>

src/components/footer.astro

@@ -12,7 +12,7 @@ import { Icon } from "astro-icon/components";
         href="https://github.com/your-repo-link"
         class="text-gray-400 hover:text-white"
       >
-        > This website's sourced code is on GitHub ↗
+        > Source code is on GitHub ↗
       </a>
     </div>
 

src/content/config.ts

@@ -29,4 +29,8 @@ const gallery = !import.meta.env.PUBLIC_CLOUDINARY_CLOUD_NAME
       }),
     });
 
-export const collections = { podcast, gallery };
+const team = defineCollection({
+  loader: file("src/components/about/team-members.json"),
+});
+
+export const collections = { podcast, gallery, team };

src/pages/about.astro

@@ -1,11 +1,10 @@
 ---
 import Layout from "@/components/layout.astro";
 import Header from "@/components/header.astro";
+import Team from "@/components/about/team.astro";
 ---
 
 <Layout title="About">
   <Header />
-  <div class="container mx-auto px-4">
-    <h1>About</h1>
-  </div>
+  <Team />
 </Layout>