feat: modifica estilização dos componentes dos membros

Author: dougdomingos

src/components/member/MemberCard.astro

@@ -16,7 +16,7 @@ const member = Astro.props;
 <div class="flex flex-col text-center items-center">
   <img src={member.imgSrc} alt="member photo" class="w-32 h-32 object-cover rounded-full" />
   <p class="text-lg">{member.name}</p>
-  <span class="font-bold text-main">{member.role}</span>
+  <span class="font-bold text-accent-500">{member.role}</span>
   <ul class="w-full flex justify-around mt-2">
     {
       member.github && (

src/components/member/MemberList.astro

@@ -17,9 +17,9 @@ interface Props {
 const { title, members } = Astro.props;
 ---
 
-<div class="py-6">
-  <h2 class="text-2xl font-bold font-mono text-main mb-4">{title}</h2>
-  <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
+<div class="mb-4">
+  <h2 class="text-xl md:text-3xl text-center font-bold mb-4">{title}</h2>
+  <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
     {members.map(item => <MemberCard {...item} />)}
   </div>
 </div>

src/pages/members.astro

@@ -4,10 +4,11 @@ import Layout from "../layouts/Layout.astro";
 
 import Leaders from "../../public/members/leaders.json";
 import ActiveMembers from "../../public/members/members.json";
+import Container from "../components/layout/Container.astro";
 ---
 
 <Layout title="Iniciativa DevOps - Membros">
-  <section class="flex flex-col mt-20">
+  <Container class="flex flex-col py-4 gap-6">
     <MemberList
       title="Líderes e Monitores"
       members={Leaders}
@@ -16,5 +17,5 @@ import ActiveMembers from "../../public/members/members.json";
       title="Membros"
       members={ActiveMembers}
     />
-  </section>
+  </Container>
 </Layout>