---
import { Image } from "astro:assets";
import { LightboxImage } from "@components/LightboxImage";
import photoBureau from "@images/grand-bureau-tout-equipe.jpg";
---

<section
  class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
>
  <!-- Section heading and sub-heading -->
  <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
    <h2
      class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
    >
      Un grand bureau tout équipé
    </h2>
    <p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
      Bureau en chêne-liège massif, réglage en hauteur et motorisé, 16 prises de courant, 6 prises RJ-45, radiateur
      indépendant…
    </p>
  </div>
  <a href="/avec-un-grand-bureau">
    <Image
      src={photoBureau}
      alt="Grand bureau tout équipé, bois massif, bureau ajustable en hauteur, grande fresque murale"
      class="h-full w-full object-cover object-center"
      width={1600}
      densities={[1, 1.5, 2]}
      loading="eager"
    />
  </a>
  <LightboxImage client:idle image={photoBureau}
                 alt="Grand bureau tout équipé, bois massif, bureau ajustable en hauteur, grande fresque murale">

  </LightboxImage>
</section>