Press and media contact

Create a press contact section with Tailwind CSS in two columns. The left column holds a small "Press" label, a heading, a paragraph about what the team can help with, a direct press email as a large link, and a bordered card with a spokesperson: an avatar, name, title, and a line giving availability for interviews with a timezone. The right column is a stack of three download cards for the press kit, the logo pack and product screenshots: each a bordered rounded-xl row with a file glyph tile, a title, a muted line giving format and file size, and a download arrow on the right. Under them, a small bordered note about trademark usage with a link to the brand guidelines. Below both columns, a full-width row of three recent coverage links, each showing a publication name in uppercase, a headline and a date.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="grid gap-12 lg:grid-cols-2">
    <div>
      <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Press</p>
      <h1 class="mt-3 text-3xl font-semibold tracking-tight text-neutral-900">Media enquiries</h1>
      <p class="mt-4 leading-relaxed text-neutral-500">
        We can help with product detail, customer introductions, funding history and technical background. For anything under embargo, say so in the first line and we will treat it that way.
      </p>

      <a href="#" class="mt-6 inline-block text-lg font-medium text-neutral-900 underline underline-offset-4">[email protected]</a>
      <p class="mt-1 text-sm text-neutral-500">We reply to journalists within one working day.</p>

      <div class="mt-8 flex items-start gap-4 rounded-xl border border-neutral-200 p-5">
        <span class="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-neutral-900 text-sm font-medium text-white">EV</span>
        <div>
          <p class="text-sm font-medium text-neutral-900">Elena Vasquez</p>
          <p class="text-xs text-neutral-500">Chief Executive · spokesperson</p>
          <p class="mt-2 text-sm leading-relaxed text-neutral-600">Available for interviews Tuesdays and Thursdays, 13:00–17:00 CET, remote or in Rotterdam.</p>
        </div>
      </div>
    </div>

    <div>
      <div class="space-y-3">
        <a href="#" class="flex items-center gap-4 rounded-xl border border-neutral-200 p-5 transition hover:border-neutral-300 hover:bg-neutral-50">
          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></svg></span>
          <span class="min-w-0 flex-1">
            <span class="block text-sm font-medium text-neutral-900">Press kit</span>
            <span class="block text-xs text-neutral-500">Boilerplate, founder bios, milestones · PDF, 1.2 MB</span>
          </span>
          <span class="text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 16V4m0 0L7 9m5-5 5 5"/><path d="M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5"/></svg></span>
        </a>
        <a href="#" class="flex items-center gap-4 rounded-xl border border-neutral-200 p-5 transition hover:border-neutral-300 hover:bg-neutral-50">
          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></span>
          <span class="min-w-0 flex-1">
            <span class="block text-sm font-medium text-neutral-900">Logo pack</span>
            <span class="block text-xs text-neutral-500">SVG and PNG, light and dark · ZIP, 840 KB</span>
          </span>
          <span class="text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 16V4m0 0L7 9m5-5 5 5"/><path d="M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5"/></svg></span>
        </a>
        <a href="#" class="flex items-center gap-4 rounded-xl border border-neutral-200 p-5 transition hover:border-neutral-300 hover:bg-neutral-50">
          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span>
          <span class="min-w-0 flex-1">
            <span class="block text-sm font-medium text-neutral-900">Product screenshots</span>
            <span class="block text-xs text-neutral-500">12 images, 2560px wide · ZIP, 18 MB</span>
          </span>
          <span class="text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 16V4m0 0L7 9m5-5 5 5"/><path d="M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5"/></svg></span>
        </a>
      </div>

      <p class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 text-xs leading-relaxed text-neutral-500">
        Please do not alter the logo, add effects, or use the wordmark in a way that implies partnership. Everything else is covered in the <a href="#" class="underline underline-offset-2 hover:text-neutral-900">brand guidelines</a>.
      </p>
    </div>
  </div>

  <div class="mt-14 border-t border-neutral-200 pt-8">
    <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Recent coverage</p>
    <div class="mt-5 grid gap-4 sm:grid-cols-3">
      <a href="#" class="group">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-400">The Ledger</p>
        <p class="mt-2 text-sm font-medium leading-snug text-neutral-900 underline-offset-4 group-hover:underline">The quiet company rebuilding the data stack from the storage layer up</p>
        <p class="mt-2 text-xs text-neutral-400">04 August 2026</p>
      </a>
      <a href="#" class="group">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-400">Fieldnotes</p>
        <p class="mt-2 text-sm font-medium leading-snug text-neutral-900 underline-offset-4 group-hover:underline">Why Northwind published its own outage postmortems in full</p>
        <p class="mt-2 text-xs text-neutral-400">21 July 2026</p>
      </a>
      <a href="#" class="group">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-400">Rotterdam Tech</p>
        <p class="mt-2 text-sm font-medium leading-snug text-neutral-900 underline-offset-4 group-hover:underline">Series B and 40 hires: a local infrastructure firm grows up</p>
        <p class="mt-2 text-xs text-neutral-400">12 June 2026</p>
      </a>
    </div>
  </div>
</section>