From bdc6c57b0de0ed6db6bd92f2b8cefcd421e59f1d Mon Sep 17 00:00:00 2001
From: "Kent Joseph T. Palima" <admin@upiecep.org>
Date: Thu, 30 Apr 2026 14:36:32 +0800
Subject: [PATCH] Edits on UP IECEP Family part

---
 src/components/Family/Family.astro | 21 +++++++++++++++---
 src/components/Family/family.scss  | 34 +++++++++++++++++++++++++++---
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/Family/Family.astro b/src/components/Family/Family.astro
index 84d1474..ba5c4b7 100644
--- a/src/components/Family/Family.astro
+++ b/src/components/Family/Family.astro
@@ -8,6 +8,7 @@ import family3 from '../../assets/images/family/family_3.png';
   <h2>UP IECEP Family</h2>
   <div class="members-panel">
     
+    <!-- Mobile Popup 1 (Retains arrow) -->
     <div class="image-panel">
       <img src={family1.src} alt="" />
       <div class="image-panel-popup">
@@ -18,9 +19,13 @@ import family3 from '../../assets/images/family/family_3.png';
       </div>
     </div>
     
+    <!-- Desktop Panel 1: Executive Committee -->
     <div class="text-panel">
       <a href="/executive-committee" class="cover" style="color: inherit; text-decoration: none;">
-        <h3>Executive Committee &rarr;</h3>
+        <div class="title-group">
+          <h3>Executive Committee</h3>
+          <span class="action-hint">View roster</span>
+        </div>
       </a>
       <a href="/executive-committee" class="under" style="color: inherit; text-decoration: none;">
         <h3>Executive Committee</h3>
@@ -28,6 +33,7 @@ import family3 from '../../assets/images/family/family_3.png';
       </a>
     </div>
     
+    <!-- Mobile Popup 2 (Retains arrow) -->
     <div class="image-panel">
       <img src={family2.src} alt="" />
       <div class="image-panel-popup">
@@ -38,9 +44,13 @@ import family3 from '../../assets/images/family/family_3.png';
       </div>
     </div>
     
+    <!-- Desktop Panel 2: Current Members -->
     <div class="text-panel">
       <a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
-        <h3>Current Members &rarr;</h3>
+        <div class="title-group">
+          <h3>Current Members</h3>
+          <span class="action-hint">View list</span>
+        </div>
       </a>
       <a href="/current-members" class="under" style="color: inherit; text-decoration: none;">
         <h3>Current Members</h3>
@@ -48,6 +58,7 @@ import family3 from '../../assets/images/family/family_3.png';
       </a>
     </div>
     
+    <!-- Mobile Popup 3 (Retains arrow) -->
     <div class="image-panel">
       <img src={family3.src} alt="" />
       <div class="image-panel-popup">
@@ -58,9 +69,13 @@ import family3 from '../../assets/images/family/family_3.png';
       </div>
     </div>
     
+    <!-- Desktop Panel 3: Notable Members -->
     <div class="text-panel">
       <a href="#" class="cover" style="color: inherit; text-decoration: none;">
-        <h3>Notable Members &rarr;</h3>
+        <div class="title-group">
+          <h3>Notable Members</h3>
+          <span class="action-hint">View profiles</span>
+        </div>
       </a>
       <a href="#" class="under" style="color: inherit; text-decoration: none;">
         <h3>Notable Members</h3>
diff --git a/src/components/Family/family.scss b/src/components/Family/family.scss
index 1c2534a..ce991d8 100644
--- a/src/components/Family/family.scss
+++ b/src/components/Family/family.scss
@@ -29,9 +29,9 @@
       position: relative;
       img {
         width: 100%;
-	height: 100%;
+        height: 100%;
         object-fit: cover;
-	display: block;
+        display: block;
       }
 
       .image-panel-popup {
@@ -73,8 +73,15 @@
         z-index: 2;
         cursor: pointer;
         transition: all 0.3s ease-in-out;
+        
+        .title-group {
+          width: 100%;
+          text-align: center;
+        }
+
         h3 {
           width: calc(3 / 4 * 100%);
+          margin: 0 auto; /* Added to keep it centered inside title-group */
           text-align: center;
           color: $text-light;
           text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
@@ -83,6 +90,21 @@
           letter-spacing: 0.0525rem;
         }
 
+        .action-hint {
+          display: block;
+          font-size: 0.85rem;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.1rem;
+          margin-top: 0.5rem;
+          opacity: 0.9;
+          color: $text-light;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+          padding-bottom: 2px;
+          margin-inline: auto;
+          width: max-content;
+        }
+
         &:hover {
           opacity: 0;
         }
@@ -130,6 +152,9 @@
           h3 {
             font-size: 1.75rem;
           }
+          .action-hint {
+            font-size: 0.75rem; /* Slightly smaller hint on tablets */
+          }
         }
         .under {
           width: 90%;
@@ -153,6 +178,9 @@
           h3 {
             font-size: 1rem;
           }
+          .action-hint {
+            font-size: 0.6rem;
+          }
         }
         .under {
           width: 90%;
@@ -245,4 +273,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file