Bento.astro

---
import Card from '@components/ui/Card.astro'
import jscDia2Acreditacion from '@images/assets/jsconf-chile-2023-dia-2-acreditacion.png'
import jscDia2Evento from '@images/assets/jsconf-chile-2024-dia-2-evento.png'
import { Picture } from 'astro:assets'

const bento1 = [
  {
    id: 1,
    title: '¿Qué es JSConf Chile?',
    description:
      'JSConf Chile no es solo una conferencia, es un punto de encuentro donde la pasión por JavaScript se convierte en innovación, donde las ideas encuentran su propósito y donde una comunidad unida marca la diferencia.'
  },
  {
    id: 2,
    title: 'Sé parte de algo grande',
    description:
      'JSConf Chile 2025 es más que un evento. Es el lugar donde todo comienza. ¿Estás listo para ser parte del cambio?'
  }
]

const bento2 = [
  {
    id: 1,
    title: 'Charlas que inspiran',
    description:
      'Escucha a quienes están reimaginando el futuro del desarrollo web a nivel mundial.'
  },
  {
    id: 2,
    title: 'Conexiones que trascienden',
    description:
      'Rodéate de personas que comparten tu visión y tu pasión por el código.'
  },
  {
    id: 3,
    title: 'Talleres que transforman',
    description:
      'Aprende practicando, desde los fundamentos hasta las ideas más avanzadas.'
  },
  {
    id: 4,
    title: 'Un entorno para crecer',
    description:
      ' Siente la energía de un espacio diseñado para colaborar, crear y soñar en grande.'
  }
];
---

<section class="bento-1">
  {
    bento1.map(({ id, title, description }) => (
      <article class={`bento1-card${id}`}>
        <Card body={description} title={title} />
      </article>
    ))
  }
  <div class="bento1-image">
    <Picture
      alt="JSConf Chile 2024 Día 2 - Evento"
      fetchpriority="low"
      formats={['avif', 'webp']}
      height={446}
      src={jscDia2Evento}
      width={609}
    />
  </div>
</section>

<section class="bento-2">
  <div class="bento2-image">
    <Picture
      alt="JSConf Chile 2023 Día 2 - Acreditación del Evento"
      fetchpriority="low"
      formats={['avif', 'webp']}
      height={508}
      src={jscDia2Acreditacion}
      width={408}
    />
  </div>
  {
    bento2.map(({ id, title, description }) => (
      <article class={`bento2-card${id}`}>
        <Card body={description} title={title} />
      </article>
    ))
  }
</section>

<style>
  .bento-1 {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 8;
    gap: 3rem;
    padding-inline: 68px;
  }
  article {
    display: flex;
    width: 100%;
    height: 100%;
  }
  .bento1-card1 {
    grid-area: 1 / 1 / 5 / 6;
  }
  .bento1-card2 {
    grid-area: 5 / 1 / 8 / 6;
  }
  .bento1-image {
    grid-area: 1 / 6 / 8 / 13;
    width: 100%;
    height: 100%;
    margin: 0;
    & img {
      width: 100%;
      height: 100%;
      border-radius: var(--rounded-lg);
      aspect-ratio: 609/446;
      object-fit: cover;
    }
  }
  figcaption {
    display: none;
  }
  .bento-2 {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(17, 1fr);
    grid-template-rows: 8;
    margin-top: 100px;
    gap: 3rem;
    padding-inline: 68px;
  }
  .bento2-image {
    grid-area: 1 / 1 / 8 / 8;
    width: 100%;
    height: 100%;
    margin: 0;

    & img {
      width: 100%;
      height: 100%;
      border-radius: var(--rounded-lg);
      aspect-ratio: 484/508;
      object-fit: cover;
    }
  }
  .bento2-card1 {
    grid-area: 1 / 8 / 4 / 13;
  }
  .bento2-card2 {
    grid-area: 1 / 13 / 4 / 18;
  }
  .bento2-card3 {
    grid-area: 4 / 8 / 8 / 13;
  }
  .bento2-card4 {
    grid-area: 4 / 13 / 8 / 18;
  }

  @media (width <= 1024px) {
    .bento-1 {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
      padding-inline: 48px;
    }
    .bento1-card1 {
      grid-area: 1 / 1 / 2 / 2;
    }
    .bento1-card2 {
      grid-area: 2 / 1 / 3 / 2;
    }
    .bento1-image {
      grid-area: 3 / 1 / 4 / 2;

      & img {
        aspect-ratio: 738/345;
      }
    }

    .bento-2 {
      grid-template-columns: repeat(2, auto);
      grid-template-rows: repeat(3, auto);
      padding-inline: 48px;
    }
    .bento2-card1 {
      grid-area: 1 / 1 / 2 / 2;
    }
    .bento2-card2 {
      grid-area: 2 / 1 / 3 / 2;
    }
    .bento2-card3 {
      grid-area: 1 / 2 / 2 / 3;
    }
    .bento2-card4 {
      grid-area: 2 / 2 / 3 / 3;
    }
    .bento2-image {
      grid-area: 3 / 1 / 4 / 3;

      & img {
        aspect-ratio: 738/362;
      }
    }
  }

  @media (width <= 768px) {
    .bento-1 {
      padding-inline: 24px;
    }

    .bento1-image {
      & img {
        aspect-ratio: 1/1;
      }
    }
    .bento-2 {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, auto);
      padding-inline: 24px;
    }

    .bento2-card1 {
      grid-area: 1 / 1 / 2 / 2;
    }
    .bento2-card2 {
      grid-area: 2 / 1 / 3 / 2;
    }
    .bento2-card3 {
      grid-area: 3 / 1 / 4 / 2;
    }
    .bento2-card4 {
      grid-area: 4 / 1 / 5 / 2;
    }
    .bento2-image {
      grid-area: 5 / 1 / 6 / 2;

      & img {
        aspect-ratio: 738/362;
      }
    }
  }
</style>