From e81242395a64f47270e585095ac70a3e711c1853 Mon Sep 17 00:00:00 2001
From: Rubem Neto <rubemviscard2635@gmail.com>
Date: Tue, 4 Feb 2025 22:12:02 +0000
Subject: [PATCH 1/2] fix:about us page fixes

---
 app/(site)/(aefeup)/about/MenuDescription.tsx | 13 +++---
 components/Avatar/index.tsx                   | 40 ++++++++++---------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/(site)/(aefeup)/about/MenuDescription.tsx b/app/(site)/(aefeup)/about/MenuDescription.tsx
index 405a7c5..b5dd8fa 100644
--- a/app/(site)/(aefeup)/about/MenuDescription.tsx
+++ b/app/(site)/(aefeup)/about/MenuDescription.tsx
@@ -27,8 +27,7 @@ const MenuDescription = ({ sections }: Props) => {
   return (sections.length > 0 &&
     <div className="mx-auto max-w-7xl">
       <SectionHeader
-        title="Departamentos"
-        subtitle="Departamentos"
+        title="Pelouros"
       />
 
       <motion.div
@@ -51,9 +50,9 @@ const MenuDescription = ({ sections }: Props) => {
       >
         <div
           ref={menuRef}
-          className="w-full flex items-start gap-8 flex-col sm:flex-row"
+          className="w-full flex items-start gap-8 flex-col md:flex-row"
         >
-          <div className="flex flex-col gap-4 w-full sm:w-1/4">
+          <div className="flex flex-col gap-4 w-full md:w-1/4">
             {sections.map((section, index) => (
               <button
                 key={index}
@@ -80,8 +79,10 @@ const MenuDescription = ({ sections }: Props) => {
                 {sections[selected]?.description}
               </p>
 
-              <div className="flex flex-col sm:flex-row justify-center gap-4 mb-6">
-                {sections[selected].members.map((person) => (<Avatar person={person as Person} />))}
+              <div className="flex flex-col items-center">
+                <div className="flex flex-col items-center sm:grid sm:grid-cols-2 lg:flex lg:flex-row justify-center gap-4 mb-6">
+                  {sections[selected].members.map((person) => (<Avatar person={person as Person} />))}
+                </div>
               </div>
 
               <div className="space-y-6">
diff --git a/components/Avatar/index.tsx b/components/Avatar/index.tsx
index ace51cf..f77b986 100644
--- a/components/Avatar/index.tsx
+++ b/components/Avatar/index.tsx
@@ -21,7 +21,7 @@ const Avatar = ({ person }: Props) => {
   const photo = person.photo as Media;
 
   return (
-    <div className="animate_top group max-w-50 flex flex-col justify-between rounded-lg border border-stroke bg-white p-5 shadow-solid-10 dark:border-strokedark dark:bg-blacksection dark:shadow-none hover:shadow-solid-4 dark:hover:bg-hoverdark">
+    <div className="animate_top group min-h-72 w-50 flex flex-col justify-around rounded-lg border border-stroke bg-primary p-5 shadow-solid-10 dark:border-strokedark dark:bg-blacksection dark:shadow-none hover:shadow-solid-4 dark:hover:bg-hoverdark">
       <div>
         <Image
           src={photo?.url ?? DefaultAvatarImage.src}
@@ -30,25 +30,29 @@ const Avatar = ({ person }: Props) => {
           height={80}
           className="w-20 h-20 object-cover mx-auto rounded-full"
         />
-        <h6 className="text-para2 font-medium text-black dark:text-white text-center">
-          {person.name}
-        </h6>
-        {person.position && <p className="text-sm text-gray-500 dark:text-gray-400 text-center mt-1">
+        <div className="mt-3">
+          <h6 className="text-2xl font-medium text-white dark:text-white text-center">
+            {person.name}
+          </h6>
+        </div>
+      </div>
+      <div className="">
+        {person.position && <p className="text-sm text-gray-300 dark:text-gray-400 text-center mt-1">
           {(person.position as Position).name}
         </p>}
-      </div>
-      <div className="flex justify-center gap-2.5 mt-2">
-        {person.socials?.map((social) => (
-          <a
-            key={social.type}
-            href={social.link}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="group/btn inline-flex items-center gap-2.5 font-medium text-gray-400 dark:text-manatee transition-all duration-300 hover:text-primary dark:hover:text-primary"
-          >
-            {symbols[social.type]}
-          </a>
-        ))}
+        <div className="flex justify-center gap-2.5 mt-2">
+          {person.socials?.map((social) => (
+            <a
+              key={social.type}
+              href={social.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group/btn inline-flex items-center gap-2.5 font-medium text-gray-300 dark:text-manatee transition-all duration-300 hover:text-white dark:hover:text-primary"
+            >
+              {symbols[social.type]}
+            </a>
+          ))}
+        </div>
       </div>
     </div>
   );

From 6d685414ba6a890bfdb33525b56892e69b5c53cc Mon Sep 17 00:00:00 2001
From: Rubem Neto <rubemviscard2635@gmail.com>
Date: Wed, 5 Feb 2025 11:12:53 +0000
Subject: [PATCH 2/2] fix:section header subtitle

---
 app/(site)/(aefeup)/about/MenuDescription.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/(site)/(aefeup)/about/MenuDescription.tsx b/app/(site)/(aefeup)/about/MenuDescription.tsx
index b5dd8fa..0463fbe 100644
--- a/app/(site)/(aefeup)/about/MenuDescription.tsx
+++ b/app/(site)/(aefeup)/about/MenuDescription.tsx
@@ -28,6 +28,7 @@ const MenuDescription = ({ sections }: Props) => {
     <div className="mx-auto max-w-7xl">
       <SectionHeader
         title="Pelouros"
+        subtitle="Conhece os departamentos que compõem a tua AEFEUP e quais as suas áreas de atuação!"
       />
 
       <motion.div