← back to Lawyer Directory Builder

public/og.svg

60 lines

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#131316"/>
      <stop offset="60%" stop-color="#0a0a0c"/>
      <stop offset="100%" stop-color="#050507"/>
    </linearGradient>
    <linearGradient id="metal" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#d4b683"/>
      <stop offset="50%" stop-color="#b89968"/>
      <stop offset="100%" stop-color="#8a7044"/>
    </linearGradient>
    <linearGradient id="rule" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="rgba(184,153,104,0)"/>
      <stop offset="50%" stop-color="rgba(184,153,104,1)"/>
      <stop offset="100%" stop-color="rgba(184,153,104,0)"/>
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="1200" height="630" fill="url(#bg)"/>

  <!-- Subtle italic-watermark "I" in the deep right -->
  <text x="1080" y="600" font-family="Cormorant Garamond, Georgia, serif" font-style="italic" font-weight="300"
        font-size="780" fill="#b89968" opacity="0.04" text-anchor="middle" letter-spacing="-30">I</text>

  <!-- Volume strip: rule + Volume I + edition meta -->
  <line x1="80" y1="105" x2="160" y2="105" stroke="url(#rule)" stroke-width="1"/>
  <text x="180" y="111" font-family="Cormorant Garamond, Georgia, serif" font-style="italic" font-weight="400"
        font-size="22" fill="#b89968" letter-spacing="0.5">Volume I</text>
  <text x="290" y="111" font-family="Inter, system-ui, sans-serif" font-weight="500"
        font-size="14" fill="#8b857a" letter-spacing="4" text-transform="uppercase">EDITION 2026 · COUNSEL &amp; BAR</text>

  <!-- Monogram top-right -->
  <g transform="translate(1080,75)">
    <circle cx="20" cy="20" r="19" fill="none" stroke="url(#metal)" stroke-width="1.2"/>
    <text x="20" y="27" font-family="Cormorant Garamond, Georgia, serif" font-weight="500" font-size="20"
          fill="url(#metal)" text-anchor="middle">CB</text>
  </g>

  <!-- Headline: massive italic-metal display -->
  <text x="80" y="280" font-family="Cormorant Garamond, Georgia, serif" font-weight="300"
        font-size="100" fill="#f4f1ea" letter-spacing="-2">Every California-licensed</text>
  <text x="80" y="385" font-family="Cormorant Garamond, Georgia, serif" font-weight="300"
        font-size="100" fill="#f4f1ea" letter-spacing="-2">attorney, <tspan font-style="italic" font-weight="400" fill="url(#metal)">indexed.</tspan></text>

  <!-- Lede: smaller ink-soft -->
  <text x="80" y="455" font-family="Inter, system-ui, sans-serif" font-weight="300"
        font-size="24" fill="#d8d2c5" letter-spacing="0.2">Drawn from the State Bar of California public roll.</text>
  <text x="80" y="490" font-family="Inter, system-ui, sans-serif" font-weight="300"
        font-size="24" fill="#d8d2c5" letter-spacing="0.2">Independently audited. Methodology v1.0 published.</text>

  <!-- Bottom strip: domain + §6155 disclaimer -->
  <line x1="80" y1="555" x2="1120" y2="555" stroke="#2a2724" stroke-width="1"/>
  <text x="80" y="588" font-family="Cormorant Garamond, Georgia, serif" font-style="italic" font-weight="400"
        font-size="22" fill="#b89968">lawyers.agentabrams.com</text>
  <text x="1120" y="588" font-family="Inter, system-ui, sans-serif" font-weight="500"
        font-size="13" fill="#8b857a" letter-spacing="3" text-anchor="end">A DIRECTORY · NOT A REFERRAL SERVICE · NOT THE STATE BAR</text>
</svg>