From 4730439e3894a6b7c8a8f2f47bd3104a3d30cb6e Mon Sep 17 00:00:00 2001
From: Local Administrator <ryan.salazar@relevantmediaproperties.com>
Date: Sat, 27 Jun 2026 00:29:35 +0000
Subject: [PATCH] Team page: table layout without photos

---
 src/app/about/team/page.tsx | 255 ++++++++++++++++++------------------
 1 file changed, 125 insertions(+), 130 deletions(-)

diff --git a/src/app/about/team/page.tsx b/src/app/about/team/page.tsx
index 267633c..baf7619 100644
--- a/src/app/about/team/page.tsx
+++ b/src/app/about/team/page.tsx
@@ -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>
@@ -275,4 +270,4 @@ export default async function TeamPage() {
       <Footer />
     </div>
   );
-}
+}
\ No newline at end of file