e.stopPropagation()}
>
@@ -337,7 +337,7 @@ export default function GalleryPageClient() {
{activeEvent.title}
- {lang === "vi"
+ {lang === "vi"
? `Hình ảnh ${lightboxImageIndex + 1} trên ${activeEvent.images.length}`
: `Image ${lightboxImageIndex + 1} of ${activeEvent.images.length}`
}
diff --git a/app/components/members/MembersPageClient.tsx b/app/components/members/MembersPageClient.tsx
new file mode 100644
index 0000000..9b067b4
--- /dev/null
+++ b/app/components/members/MembersPageClient.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useTranslation } from "@/app/hooks/useTranslation";
+import ReadyToJoin from "@/app/components/gallery/ReadyToJoin";
+
+const BASE = process.env.NEXT_PUBLIC_BASE_PATH || "";
+
+type MemberItem = {
+ name: string;
+ logo: string;
+ subtitle: string;
+};
+
+type Category = {
+ title: string;
+ items: MemberItem[];
+};
+
+type IndividualMember = {
+ name: string;
+ title: string;
+};
+
+/* Stateful Logo Card component to dynamically adjust padding & scaling based on image aspect ratio */
+const LogoCard = ({ item }: { item: MemberItem }) => {
+ const [isSquareOrTall, setIsSquareOrTall] = useState(false);
+ const imgRef = useRef(null);
+
+ useEffect(() => {
+ const img = imgRef.current;
+ if (!img) return;
+
+ // Reset aspect ratio state when logo path changes
+ setIsSquareOrTall(false);
+
+ const handleLoad = () => {
+ const { naturalWidth, naturalHeight } = img;
+ if (naturalHeight && naturalWidth) {
+ // If height-to-width ratio is close to square or taller (>= 0.75)
+ setIsSquareOrTall(naturalHeight / naturalWidth >= 0.75);
+ }
+ };
+
+ if (img.complete) {
+ handleLoad();
+ } else {
+ img.addEventListener("load", handleLoad);
+ return () => img.removeEventListener("load", handleLoad);
+ }
+ }, [item.logo]);
+
+ const hasLogo = item.logo && item.logo.trim() !== "";
+
+ return (
+
+ {/* Card containing the logo image or fallback placeholder */}
+
+ {hasLogo ? (
+ /* Logo Container with background fill for high contrast */
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ ) : (
+ /* Fallback avatar badge */
+
+
+ {item.name.slice(0, 2).toUpperCase()}
+
+
+ )}
+
+
+ {/* Text details (outside on the dark background, larger text) */}
+
+
+ {item.name}
+
+
+ {item.subtitle}
+
+
+
+
+ {members.hero.eyebrow}
+
+
+ {members.hero.title}
+
+
+ {members.hero.description}
+
+
+ {/* Jump Anchors Navigation Menu */}
+
+
+
+ {members.organizationalMembers.title}
+
+
+ {members.organizationalMembers.description}
+
+
+
+ {Object.entries(categories).map(([key, cat]) => {
+ const category = cat as Category;
+ return (
+
+ {/* Subcategory title */}
+
+ {category.title}
+
+ {/* Logos Grid */}
+
+ {category.items.map((item) => (
+
+ ))}
+
+
+ );
+ })}
+
+
+ {members.contributingMembers.title}
+
+
+ {members.contributingMembers.description}
+
+
+
+ {members.contributingMembers.items.map((item: IndividualMember) => (
+
+
+
+ person
+
+
+
+
+ {item.name}
+
+
+ {item.title}
+
+
+
+ ))}
+