forked from UKSOURCE/ipv6
feat: memberships page
This commit is contained in:
@@ -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<HTMLImageElement>(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 (
|
||||
<div className="flex flex-col items-center group w-full">
|
||||
{/* Card containing the logo image or fallback placeholder */}
|
||||
<div
|
||||
className={`w-full h-28 flex items-center justify-center bg-white/95 rounded-2xl border border-white/5 group-hover:scale-[1.03] transition-all duration-300 shadow-md ${
|
||||
hasLogo && isSquareOrTall ? "p-2.5" : "p-4.5"
|
||||
}`}
|
||||
>
|
||||
{hasLogo ? (
|
||||
/* Logo Container with background fill for high contrast */
|
||||
<div className="flex items-center justify-center w-full h-full">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={`${BASE}${item.logo}`}
|
||||
alt={item.name}
|
||||
className={`w-auto h-auto object-contain filter group-hover:scale-105 transition-all duration-300 ${
|
||||
isSquareOrTall
|
||||
? "max-h-[82%] max-w-[82%]"
|
||||
: "max-h-[55%] max-w-[85%]"
|
||||
}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
/* Fallback avatar badge */
|
||||
<div className="w-12 h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center">
|
||||
<span className="font-[var(--font-display-lg)] text-sm text-primary font-bold">
|
||||
{item.name.slice(0, 2).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Text details (outside on the dark background, larger text) */}
|
||||
<div className="mt-3.5 flex flex-col items-center text-center w-full">
|
||||
<span className="font-[var(--font-display-lg)] text-sm lg:text-base text-on-surface group-hover:text-primary transition-colors duration-300 tracking-wider uppercase leading-tight px-1">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="text-[10px] lg:text-[11px] text-on-surface-variant/50 leading-tight mt-1.5 max-w-full px-2 truncate block uppercase tracking-widest font-[var(--font-body-base)] select-none">
|
||||
{item.subtitle}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function MembersPageClient() {
|
||||
const { members } = useTranslation();
|
||||
|
||||
const categories = members.organizationalMembers.categories;
|
||||
|
||||
return (
|
||||
<main className="pt-16 lg:pt-20 min-h-screen bg-background text-on-surface">
|
||||
{/* Hero Header Section */}
|
||||
<section className="hero-glow py-20 lg:py-32 px-[var(--spacing-gutter)] text-center border-b border-white/5">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-4 lg:mb-6 tracking-[0.25em] uppercase animate-pulse">
|
||||
{members.hero.eyebrow}
|
||||
</span>
|
||||
<h1 className="font-[var(--font-display-lg)] text-on-surface text-[clamp(2.5rem,6vw+1rem,5.5rem)] leading-none tracking-tight">
|
||||
{members.hero.title}
|
||||
</h1>
|
||||
<p className="font-[var(--font-body-base)] text-on-surface-variant text-base lg:text-[20px] max-w-3xl mx-auto opacity-70 leading-relaxed mt-6">
|
||||
{members.hero.description}
|
||||
</p>
|
||||
|
||||
{/* Jump Anchors Navigation Menu */}
|
||||
<div className="flex flex-wrap justify-center gap-4 sm:gap-6 mt-10">
|
||||
<a
|
||||
href="#org-members"
|
||||
className="inline-flex items-center gap-2.5 px-6 py-3 rounded-full border border-primary/25 bg-primary/5 text-primary text-xs lg:text-sm font-bold uppercase tracking-widest hover:bg-primary/10 hover:border-primary/50 transition-all duration-300"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
{members.organizationalMembers.title}
|
||||
</a>
|
||||
<a
|
||||
href="#contrib-members"
|
||||
className="inline-flex items-center gap-2.5 px-6 py-3 rounded-full border border-primary/25 bg-primary/5 text-primary text-xs lg:text-sm font-bold uppercase tracking-widest hover:bg-primary/10 hover:border-primary/50 transition-all duration-300"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
{members.contributingMembers.title}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Organizational Members Section */}
|
||||
<section className="py-16 lg:py-24 px-[var(--spacing-gutter)] max-w-hd mx-auto" id="org-members">
|
||||
<div className="mb-12 lg:mb-20 text-center max-w-3xl mx-auto">
|
||||
<h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(1.75rem,3vw+1rem,3.5rem)] mb-4">
|
||||
{members.organizationalMembers.title}
|
||||
</h2>
|
||||
<p className="text-on-surface-variant/60 text-base lg:text-lg">
|
||||
{members.organizationalMembers.description}
|
||||
</p>
|
||||
<div className="h-[2px] w-24 bg-primary/50 mx-auto rounded-full mt-6" />
|
||||
</div>
|
||||
|
||||
{/* Subcategories */}
|
||||
<div className="space-y-20 lg:space-y-28">
|
||||
{Object.entries(categories).map(([key, cat]) => {
|
||||
const category = cat as Category;
|
||||
return (
|
||||
<div key={key} className="space-y-8 lg:space-y-12">
|
||||
{/* Subcategory title */}
|
||||
<h3 className="font-[var(--font-display-lg)] text-base lg:text-lg text-primary uppercase tracking-widest border-l-4 border-primary pl-4 leading-none">
|
||||
{category.title}
|
||||
</h3>
|
||||
{/* Logos Grid */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-x-6 gap-y-12">
|
||||
{category.items.map((item) => (
|
||||
<LogoCard key={item.name} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contributing Members Section */}
|
||||
<section className="py-16 lg:py-24 px-[var(--spacing-gutter)] max-w-hd mx-auto border-t border-white/5 bg-white/[0.01]" id="contrib-members">
|
||||
<div className="mb-12 lg:mb-20 text-center max-w-3xl mx-auto">
|
||||
<h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(1.75rem,3vw+1rem,3.5rem)] mb-4">
|
||||
{members.contributingMembers.title}
|
||||
</h2>
|
||||
<p className="text-on-surface-variant/60 text-base lg:text-lg">
|
||||
{members.contributingMembers.description}
|
||||
</p>
|
||||
<div className="h-[2px] w-24 bg-primary/50 mx-auto rounded-full mt-6" />
|
||||
</div>
|
||||
|
||||
{/* Individual Contributors Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
{members.contributingMembers.items.map((item: IndividualMember) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="glass-panel p-5 rounded-2xl flex items-center gap-4 hover:border-primary/50 hover:scale-[1.02] transition-all duration-300 shadow-md group"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors duration-300">
|
||||
<span className="material-symbols-outlined text-primary text-2xl" aria-hidden="true">
|
||||
person
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h4 className="font-[var(--font-display-lg)] text-sm lg:text-base text-on-surface leading-tight truncate mb-1 group-hover:text-primary transition-colors duration-300">
|
||||
{item.name}
|
||||
</h4>
|
||||
<p className="text-xs text-on-surface-variant/70 leading-normal truncate">
|
||||
{item.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ready To Join CTA Section (Reusing Visual Gallery CTA design) */}
|
||||
<ReadyToJoin data={members.join} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user