Team page: table layout without photos
This commit is contained in:
@@ -44,7 +44,6 @@ export default async function TeamPage() {
|
||||
.select("slug, name, bio, beat, avatar_url")
|
||||
.eq("active", true);
|
||||
const raw = (data || []) as Persona[];
|
||||
// Ryan Salazar pinned first as Founder / Editor-in-Chief; rest alphabetical.
|
||||
const team = [
|
||||
...raw.filter((p) => p.slug === "ryan-salazar"),
|
||||
...raw
|
||||
@@ -52,8 +51,6 @@ export default async function TeamPage() {
|
||||
.sort((a, b) => a.name.localeCompare(b.name)),
|
||||
];
|
||||
|
||||
// Operations staff — pulsedesk personas (accounts receivable, support).
|
||||
// Only the company-wide RMP roles, not property-specific auto-attendants.
|
||||
const sbOps = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
|
||||
@@ -67,18 +64,8 @@ export default async function TeamPage() {
|
||||
const ops = (opsData || []) as OpsPersona[];
|
||||
|
||||
const displayBeat = (p: Persona) =>
|
||||
p.slug === "ryan-salazar" ? "FOUNDER / EDITOR-IN-CHIEF" : p.beat?.replace(/-/g, " ");
|
||||
p.slug === "ryan-salazar" ? "Founder / Editor-in-Chief" : p.beat?.replace(/-/g, " ") ?? "";
|
||||
|
||||
const initials = (name: string) =>
|
||||
name
|
||||
.split(" ")
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((w) => w.charAt(0).toUpperCase())
|
||||
.join("");
|
||||
|
||||
// Format an E.164 US number as (XXX) XXX-XXXX. Falls back to the raw
|
||||
// string for international or non-standard inputs.
|
||||
const formatPhone = (raw: string): string => {
|
||||
const digits = raw.replace(/[^0-9]/g, "");
|
||||
const local = digits.startsWith("1") && digits.length === 11 ? digits.slice(1) : digits;
|
||||
@@ -86,8 +73,6 @@ export default async function TeamPage() {
|
||||
return `(${local.slice(0, 3)}) ${local.slice(3, 6)}-${local.slice(6)}`;
|
||||
};
|
||||
|
||||
// Derive @avbeat.com email from the persona slug. Real mailboxes
|
||||
// are set up centrally; this is the authoring address surfaced to readers.
|
||||
const editorialEmail = (p: Persona): { user: string; domain: string } | null => {
|
||||
if (!p.slug) return null;
|
||||
return { user: p.slug.replace(/-/g, "."), domain: "avbeat.com" };
|
||||
@@ -99,13 +84,19 @@ export default async function TeamPage() {
|
||||
return { user: email.slice(0, at), domain: email.slice(at + 1) };
|
||||
};
|
||||
|
||||
const tableWrap = "overflow-x-auto rounded-xl border border-[#1a1f2a] bg-[#0b0f17]";
|
||||
const tableClass = "w-full min-w-[640px] text-sm text-left border-collapse";
|
||||
const thClass =
|
||||
"px-4 py-3 text-[10px] font-mono uppercase tracking-[0.14em] text-[#93C5FD] bg-[#141a25] border-b border-[#1a1f2a] whitespace-nowrap";
|
||||
const tdClass = "px-4 py-4 align-top border-b border-[#1a1f2a] text-[#aab1bd]";
|
||||
const trHover = "hover:bg-[#111827]/60 transition-colors";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<div className="max-w-container mx-auto px-4 py-12 text-[#0F172A]">
|
||||
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
||||
<main>
|
||||
{/* Hero — brand-gradient (animated sheen) */}
|
||||
<header className="brand-gradient rounded-xl mb-10">
|
||||
<div className="px-6 py-10 sm:px-10 sm:py-14">
|
||||
<div className="inline-flex items-center gap-2 text-[10px] font-mono uppercase tracking-[0.22em] text-white/85 mb-3">
|
||||
@@ -122,7 +113,6 @@ export default async function TeamPage() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Editorial team — three-col grid on desktop, larger portraits */}
|
||||
<section className="mb-14">
|
||||
<div className="flex items-baseline justify-between mb-5">
|
||||
<h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight">Editorial</h2>
|
||||
@@ -131,75 +121,68 @@ export default async function TeamPage() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
|
||||
{team.map((p) => {
|
||||
const e = editorialEmail(p);
|
||||
return (
|
||||
<li
|
||||
key={p.slug}
|
||||
className="group relative rounded-xl border border-[#1a1f2a] bg-[#0b0f17] p-5 hover:border-[#1D4ED8]/50 hover:shadow-[0_0_0_1px_rgba(29,78,216,0.20)] transition-all"
|
||||
>
|
||||
{/* Top accent */}
|
||||
<div className="absolute top-0 left-5 right-5 h-px bg-gradient-to-r from-transparent via-[#1D4ED8]/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden />
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
{p.avatar_url ? (
|
||||
<a href={`/authors/${p.slug}`} className="flex-shrink-0">
|
||||
<img
|
||||
src={p.avatar_url}
|
||||
alt={p.name}
|
||||
width={96}
|
||||
height={96}
|
||||
className="w-24 h-24 rounded-full border-2 border-[#1a1f2a] group-hover:border-[#1D4ED8]/40 transition-colors object-cover"
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
<div className="w-24 h-24 rounded-full border-2 border-[#1a1f2a] bg-[#141a25] flex items-center justify-center font-display font-bold text-2xl text-[#6c7686] flex-shrink-0">
|
||||
{initials(p.name)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<a href={`/authors/${p.slug}`} className="block hover:underline">
|
||||
<h3 className="font-display text-xl font-bold leading-tight text-white">{p.name}</h3>
|
||||
</a>
|
||||
{(p.beat || p.slug === "ryan-salazar") && (
|
||||
<div className="inline-block mt-1.5 px-2 py-0.5 rounded-sm bg-[#1D4ED8]/15 border border-[#1D4ED8]/35 text-[10px] font-mono uppercase tracking-[0.12em] text-[#93C5FD]">
|
||||
{displayBeat(p)}
|
||||
<div className={tableWrap}>
|
||||
<table className={tableClass}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={thClass}>Name</th>
|
||||
<th className={thClass}>Role</th>
|
||||
<th className={thClass}>Focus</th>
|
||||
<th className={thClass}>Contact</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{team.map((p) => {
|
||||
const e = editorialEmail(p);
|
||||
return (
|
||||
<tr key={p.slug} className={trHover}>
|
||||
<td className={tdClass}>
|
||||
<a
|
||||
href={`/authors/${p.slug}`}
|
||||
className="font-display text-base font-bold text-white hover:text-[#7DD3FC] hover:underline"
|
||||
>
|
||||
{p.name}
|
||||
</a>
|
||||
</td>
|
||||
<td className={tdClass}>
|
||||
{(p.beat || p.slug === "ryan-salazar") && (
|
||||
<span className="inline-block px-2 py-0.5 rounded-sm bg-[#1D4ED8]/15 border border-[#1D4ED8]/35 text-[10px] font-mono uppercase tracking-[0.12em] text-[#93C5FD]">
|
||||
{displayBeat(p)}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={`${tdClass} max-w-md`}>
|
||||
{p.bio ? (
|
||||
<p className="leading-relaxed">{p.bio}</p>
|
||||
) : (
|
||||
<span className="text-[#6c7686]">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={tdClass}>
|
||||
<div className="space-y-2">
|
||||
{e && (
|
||||
<ObfuscatedEmail
|
||||
user={e.user}
|
||||
domain={e.domain}
|
||||
className="text-[#aab1bd] hover:text-[#7DD3FC] font-mono block"
|
||||
/>
|
||||
)}
|
||||
<a
|
||||
href={`/authors/${p.slug}`}
|
||||
className="inline-block text-[10px] font-mono uppercase tracking-[0.12em] text-[#6c7686] hover:text-[#7DD3FC]"
|
||||
>
|
||||
Profile →
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{p.bio && (
|
||||
<p className="text-sm text-[#aab1bd] mt-4 leading-relaxed line-clamp-4">
|
||||
{p.bio}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{e && (
|
||||
<div className="mt-4 pt-4 border-t border-[#1a1f2a] flex items-center justify-between gap-3 text-xs">
|
||||
<div className="min-w-0 flex-1">
|
||||
<ObfuscatedEmail
|
||||
user={e.user}
|
||||
domain={e.domain}
|
||||
className="text-[#aab1bd] hover:text-[#7DD3FC] font-mono block truncate"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
href={`/authors/${p.slug}`}
|
||||
className="flex-shrink-0 text-[10px] font-mono uppercase tracking-[0.12em] text-[#6c7686] hover:text-[#7DD3FC]"
|
||||
>
|
||||
View →
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Operations — denser layout */}
|
||||
{ops.length > 0 && (
|
||||
<section>
|
||||
<div className="flex items-baseline justify-between mb-5">
|
||||
@@ -215,52 +198,64 @@ export default async function TeamPage() {
|
||||
general support questions — these are the people to reach.
|
||||
</p>
|
||||
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{ops.map((p) => (
|
||||
<li
|
||||
key={p.id}
|
||||
className="rounded-xl border border-[#1a1f2a] bg-[#0b0f17] p-5 flex gap-4 hover:border-[#1D4ED8]/40 transition-colors"
|
||||
>
|
||||
{p.avatar_url ? (
|
||||
<img
|
||||
src={p.avatar_url}
|
||||
alt={p.display_name}
|
||||
width={80}
|
||||
height={80}
|
||||
className="w-20 h-20 rounded-full border-2 border-[#1a1f2a] flex-shrink-0 object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-20 h-20 rounded-full border-2 border-[#1a1f2a] flex-shrink-0 bg-[#141a25] flex items-center justify-center font-display font-bold text-xl text-[#6c7686]">
|
||||
{initials(p.display_name)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-display text-lg font-bold leading-tight text-white">{p.display_name}</h3>
|
||||
<div className="inline-block mt-1 px-2 py-0.5 rounded-sm bg-[#1D4ED8]/15 border border-[#1D4ED8]/35 text-[10px] font-mono uppercase tracking-[0.12em] text-[#93C5FD]">
|
||||
{p.role}
|
||||
</div>
|
||||
<div className="text-xs text-[#aab1bd] mt-3 space-y-1">
|
||||
{p.email && (() => {
|
||||
const e = splitEmail(p.email);
|
||||
if (!e) return null;
|
||||
return (
|
||||
<div className="font-mono min-w-0">
|
||||
<ObfuscatedEmail user={e.user} domain={e.domain} className="hover:text-[#7DD3FC] block truncate" />
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{p.phone && (
|
||||
<div>
|
||||
<a href={`tel:${p.phone.replace(/[^\d+]/g, '')}${p.extension ? ',' + p.extension : ''}`} className="hover:text-[#7DD3FC] font-mono">
|
||||
{formatPhone(p.phone)}{p.extension ? `, Ext. ${p.extension}` : ''}
|
||||
<div className={tableWrap}>
|
||||
<table className={tableClass}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={thClass}>Name</th>
|
||||
<th className={thClass}>Role</th>
|
||||
<th className={thClass}>Email</th>
|
||||
<th className={thClass}>Phone</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ops.map((p) => (
|
||||
<tr key={p.id} className={trHover}>
|
||||
<td className={tdClass}>
|
||||
<span className="font-display text-base font-bold text-white">
|
||||
{p.display_name}
|
||||
</span>
|
||||
</td>
|
||||
<td className={tdClass}>
|
||||
<span className="inline-block px-2 py-0.5 rounded-sm bg-[#1D4ED8]/15 border border-[#1D4ED8]/35 text-[10px] font-mono uppercase tracking-[0.12em] text-[#93C5FD]">
|
||||
{p.role}
|
||||
</span>
|
||||
</td>
|
||||
<td className={tdClass}>
|
||||
{p.email ? (
|
||||
(() => {
|
||||
const e = splitEmail(p.email!);
|
||||
if (!e) return null;
|
||||
return (
|
||||
<ObfuscatedEmail
|
||||
user={e.user}
|
||||
domain={e.domain}
|
||||
className="text-[#aab1bd] hover:text-[#7DD3FC] font-mono block"
|
||||
/>
|
||||
);
|
||||
})()
|
||||
) : (
|
||||
<span className="text-[#6c7686]">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={tdClass}>
|
||||
{p.phone ? (
|
||||
<a
|
||||
href={`tel:${p.phone.replace(/[^\d+]/g, "")}${p.extension ? "," + p.extension : ""}`}
|
||||
className="hover:text-[#7DD3FC] font-mono text-[#aab1bd]"
|
||||
>
|
||||
{formatPhone(p.phone)}
|
||||
{p.extension ? `, Ext. ${p.extension}` : ""}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<span className="text-[#6c7686]">—</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user