`views/public/firm.ejs`

92 lines
<%- include('../partials/head', { title: title, meta_desc_override: typeof meta_desc_override !== 'undefined' ? meta_desc_override : undefined }) %>
<%- include('../partials/header') %>

<main class="designer">
  <article class="profile wrap">

    <header class="profile-head">
      <div class="profile-photo">
        <img src="<%= firm.logo %>" alt="<%= firm.name %> logo" loading="lazy" decoding="async" style="width:200px;height:200px;border-radius:12px;object-fit:contain;border:1px solid var(--line,#2a2620);padding:12px;background:#fff">
      </div>
      <div class="profile-meta">
        <h1>
          <%= firm.name %>
          <% if (firm.claimed) { %><span class="chip gold" style="font-size:11px;letter-spacing:0.12em;margin-left:8px">VERIFIED</span><% } %>
        </h1>

        <% if (firm.city || firm.state) { %>
          <p class="lede"><%= [firm.city, firm.state].filter(Boolean).join(', ') %></p>
        <% } %>

        <p class="muted">
          <% if (firm.founded_year) { %>est. <%= firm.founded_year %><% } %>
          <% if (firm.size_band) { %> · <%= firm.size_band %> people<% } %>
          <% if (firm.designer_count > 0) { %> · <%= firm.designer_count %> principal<%= firm.designer_count === 1 ? '' : 's' %><% } %>
        </p>

        <% if (firm.styles && firm.styles.length) { %>
          <h3 style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint,#7a706a);margin:24px 0 8px">Practice areas</h3>
          <ul class="tags">
            <% firm.styles.forEach(function(s) { %><li><%= s %></li><% }); %>
          </ul>
        <% } %>

        <% if (firm.areas && firm.areas.length) { %>
          <h3 style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint,#7a706a);margin:24px 0 8px">Geographic reach</h3>
          <ul class="tags">
            <% firm.areas.forEach(function(a) { %><li><%= a %></li><% }); %>
          </ul>
        <% } %>

        <% var hasLinks = firm.links && (firm.links.linkedin || firm.links['firm-site'] || firm.links.instagram); %>
        <% if (hasLinks) { %>
          <h3 style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint,#7a706a);margin:24px 0 8px">Links</h3>
          <ul class="link-list" style="list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px">
            <% (firm.links['firm-site'] || []).slice(0,2).forEach(function(u) { %>
              <li><a href="<%= u %>" rel="nofollow noopener noreferrer" target="_blank">Website ↗</a></li>
            <% }); %>
            <% (firm.links.linkedin || []).slice(0,2).forEach(function(u) { %>
              <li><a href="<%= u %>" rel="nofollow noopener noreferrer" target="_blank">LinkedIn ↗</a></li>
            <% }); %>
            <% (firm.links.instagram || []).slice(0,2).forEach(function(u) { %>
              <li><a href="<%= u %>" rel="nofollow noopener noreferrer" target="_blank">Instagram ↗</a></li>
            <% }); %>
          </ul>
        <% } %>

        <% if (!firm.claimed) { %>
          <p style="margin-top:32px">
            <a href="/submit" class="btn primary">Claim this firm →</a>
          </p>
        <% } %>
      </div>
    </header>

    <% if (firm.bio) { %>
      <section style="margin-top:48px">
        <h2 class="muted" style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase">About</h2>
        <p class="prose"><%= firm.bio %></p>
      </section>
    <% } %>

    <% if (firm.designers && firm.designers.length) { %>
      <section style="margin-top:48px">
        <h2 class="muted" style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase">Principals</h2>
        <ul class="link-list" style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px">
          <% firm.designers.forEach(function(d) { %>
            <li>
              <a href="/clients/<%= d.slug %>"><strong><%= d.full_name %></strong></a>
              <% if (d.role) { %> <span class="muted">· <%= d.role %></span><% } %>
              <% if (d.city || d.state) { %> <span class="muted">· <%= [d.city, d.state].filter(Boolean).join(', ') %></span><% } %>
            </li>
          <% }); %>
        </ul>
      </section>
    <% } %>

    <p style="margin-top:64px"><a href="/firms" class="muted">← Back to all firms</a></p>
  </article>
</main>

<%- include('../partials/footer') %>