Merge pull request #141 from AnaRangel/zyruks/feature/add-page-latam-…

…airlines

Feature: add page latam airlines

src/pages/_Sections/StudyCases/StudyCases.astro

@@ -23,7 +23,7 @@ import { SimpleCard } from '@components';
     cardText="Mira más sobre el proyecto"
     cardImage="/svg/latam-airlines.svg"
     isInverted={true}
-    url="#"
+    url="/latam-airlines"
     hasHover
   />
 </div>

src/pages/latam-airlines/_sections/ABTesting.astro

@@ -0,0 +1,97 @@
+---
+import { CardWrapper } from '@components';
+---
+
+<section>
+  <div class="container | flow">
+    <!-- Card: A/B Testing description -->
+    <CardWrapper class="card | flow">
+      <div class="card__title-container | flow">
+        <img src="/assets/images/latam-airways-abtesting-1.png" alt="AB Testing Logo" />
+        <h3>Test A/B</h3>
+      </div>
+      <p>
+        Como última etapa se hizo un A/B testing para iterar los diseños con IA, esta nos permite
+        predecir donde hay puntos focales en los diseños que tengan mas relevancia y carga cognitiva
+        se iteraron los diseños hasta llegar a una mayor puntuación en la claridad del contenido
+      </p>
+    </CardWrapper>
+
+    <!-- Container for additional images related to A/B Testing -->
+    <div class="images-container even-columns">
+      <img
+        src="/assets/images/latam-airways-abtesting-2.png"
+        alt="Mapa de calor de la pantalla de selección de vuelo de ida en el sitio web de LATAM Airlines, mostrando las áreas de mayor atención del usuario"
+      />
+      <img
+        src="/assets/images/latam-airways-abtesting-3.png"
+        alt="Mapa de calor de la pantalla de selección de vuelo de ida y regreso en el sitio web de LATAM Airlines, mostrando las áreas de mayor atención del usuario en la propuesta"
+      />
+    </div>
+  </div>
+</section>
+
+<style>
+  section .container {
+    --flow-spacer: 3rem;
+    padding-block-start: 4rem;
+    padding-inline: 2rem;
+  }
+
+  .card {
+    --flow-spacer: 1.5rem;
+  }
+
+  .card__title-container {
+    --flow-spacer: 1rem;
+    img {
+      margin-inline: auto;
+    }
+
+    h3 {
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1.3;
+      text-align: center;
+    }
+  }
+  .text-container {
+    display: grid;
+    gap: 1.5rem;
+  }
+
+  p {
+    text-align: center;
+    line-height: 1.5;
+    color: hsla(236, 25%, 75%, 1);
+
+    margin-inline: auto;
+  }
+
+  .images-container {
+    gap: 4rem;
+  }
+
+  @media (min-width: 48em) {
+    .card__title-container {
+      --flow-spacer: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.625rem;
+      img {
+        margin-inline: unset;
+      }
+
+      h3 {
+        font-size: 4rem;
+      }
+    }
+
+    p {
+      font-size: 1.25rem;
+      max-inline-size: 80ch;
+    }
+  }
+</style>

src/pages/latam-airlines/_sections/Context.astro

@@ -0,0 +1,105 @@
+<section class="context">
+  <div class="container flow">
+    <h2 class="title">Contexto</h2>
+
+    <!-- Section Description: Explanation of the problem and solution -->
+    <p class="description">
+      Revisión y evaluación del proceso de compra en LATAM, con el objetivo de identificar puntos
+      críticos en el flujo y convertirlos en oportunidades de mejora para el usuario y el negocio
+    </p>
+
+    <!-- Section Image: Illustrating the context -->
+    <img
+      src="/assets/images/latam-airways-context.png"
+      alt="Promoción de agencia de viajes ofreciendo paquetes estacionales"
+      class="section-image"
+    />
+
+    <!-- Subsection Image: Jambot illustration -->
+    <img
+      alt="Ilustración de Jambot con iconos coloridos en una pantalla"
+      src="/assets/images/latam-airways-jambot.png"
+      class="jambot-img"
+    />
+
+    <!-- Subsection Title: Opportunity Search -->
+    <h3 class="title">Búsqueda de oportunidad</h3>
+
+    <!-- Subsection Description: Explanation of the first integration of AI -->
+    <p class="description">
+      El primer punto donde se integró IA en este proceso fue en un brainstorming inicial, con un
+      pluggin en la herramienta de Figjam, para así ser comparadas estas ideas con la opinión de
+      usuarios reales
+    </p>
+
+    <!-- Subsection Image: Post-Jambot illustration -->
+    <img
+      src="/assets/images/latam-airways-after-jambot.png"
+      alt="Diagrama de brainstorming con tarjetas de ideas organizadas en un flujo"
+      class="section-image"
+    />
+  </div>
+</section>
+
+<style>
+  .context .container {
+    --flow-spacer: 1.5rem;
+
+    padding-block-start: 3rem;
+    padding-inline: 2rem;
+  }
+
+  .jambot-img {
+    margin-block-start: 3rem;
+    margin-inline: auto;
+  }
+
+  .title {
+    font-size: 2.25rem;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  .description {
+    color: hsl(236, 25%, 75%);
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  .section-image {
+    inline-size: 100%;
+    max-inline-size: 68.75rem;
+    margin-inline: auto;
+
+    &:last-child {
+      max-inline-size: 49.375rem;
+    }
+  }
+
+  .sub-section__title {
+    font-size: 2.25rem;
+    font-weight: 500;
+    text-align: center;
+    margin-block: 4.5rem;
+  }
+
+  @media (min-width: 48em) {
+    .context .container {
+      padding-block-start: 8rem;
+    }
+    .title {
+      font-size: 4rem;
+      line-height: 1.2;
+    }
+
+    .description {
+      font-size: 1.25rem;
+      max-inline-size: 81ch;
+      margin-inline: auto;
+    }
+
+    .jambot-img {
+      margin-block-start: 8rem;
+    }
+  }
+</style>

src/pages/latam-airlines/_sections/Designs.astro

@@ -0,0 +1,171 @@
+---
+import { CardWrapper } from '@components';
+---
+
+<section>
+  <div class="container">
+    <div class="even-columns">
+      <!-- Card 1: Problem statement -->
+      <CardWrapper class="card">
+        <h3>Problema</h3>
+        <p>
+          A pesar de su rendimiento efectivo, la página actual de LATAM Airlines tiene un flujo de
+          compra de boletos que algunos usuarios perciben como algo largo y poco claro. Además, la
+          falta de claridad en la información detallada de los vuelos afecta el proceso de toma de
+          decisiones de compra.
+        </p>
+      </CardWrapper>
+
+      <!-- Card 2: Hypothesis statement -->
+      <CardWrapper class="card">
+        <h3>Hipótesis</h3>
+        <p>
+          Creo que simplificar el proceso de compra de boletos en el sitio web de LATAM Airlines y
+          hacer la información más visible aumentará la satisfacción del usuario, agilizará la toma
+          de decisiones y aumentará las conversiones, beneficiando finalmente al negocio.
+        </p>
+      </CardWrapper>
+    </div>
+
+    <!-- Image showing the user flow -->
+    <img
+      class="userflow-img"
+      src="/assets/images/latam-airways-userflow-1.png"
+      alt="Diagrama de flujo de usuario propuesto para el proceso de compra de boletos, desde la entrada en la página principal hasta la confirmación de vuelos seleccionados, incluyendo selección de asientos y pago"
+    />
+
+    <!-- Section highlighting the benefits -->
+    <div class="benefits | flow">
+      <h3>Benefits</h3>
+      <img
+        src="/assets/images/latam-airways-userflow-2.png"
+        alt="Matriz de beneficios del negocio y del usuario: Incluye aumentos en ventas, lealtad del cliente y reducción de abandono del carrito para el negocio; simplificación, ahorro de tiempo y conveniencia mejorada para el usuario."
+      />
+    </div>
+
+    <!-- Section showcasing the design process and images -->
+    <div class="designs | flow">
+      <!-- Card: Design process description -->
+      <CardWrapper class="card">
+        <h3>Diseños</h3>
+        <p>
+          Después de un proceso de entendimiento e ideación se lanzaron bocetos de baja fidelidad
+          inicialmente para crear y descartar ideas rápidamente, sobretodo en cuanto a
+          redistribución de los elementos
+        </p>
+      </CardWrapper>
+
+      <!-- Container for the design images -->
+      <div class="images-container | flow">
+        <div class="even-columns flow">
+          <img
+            src="/assets/images/latam-airways-userflow-3.png"
+            alt="Boceto de la interfaz de selección de vuelos para la ruta SCL-MIA, mostrando opciones de vuelos directos y detalles de precios"
+          />
+          <img
+            src="/assets/images/latam-airways-userflow-4.png"
+            alt="Boceto de la interfaz de selección de vuelos para la ruta SCL-MIA, mostrando detalles de vuelo, precios y opciones adicionales"
+          />
+        </div>
+        <img
+          src="/assets/images/latam-airways-userflow-5.png"
+          alt="Pantalla de selección de vuelo de regreso en el sitio web de LATAM Airlines, mostrando opciones de vuelo con detalles y precios"
+        />
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  section .container {
+    display: grid;
+    margin-block-start: 3rem;
+    padding-inline: 2rem;
+    gap: 2rem;
+  }
+
+  img {
+    inline-size: 100%;
+  }
+
+  .container .even-columns {
+    gap: 2rem;
+  }
+
+  .card {
+    padding: 2.25rem 1.5rem;
+    background-color: hsla(240, 4%, 5%, 1);
+
+    h3 {
+      font-size: 32px;
+      font-weight: 500;
+      line-height: 1.4;
+    }
+    p {
+      line-height: 1.5;
+      color: hsla(236, 25%, 75%, 1);
+    }
+  }
+
+  .userflow-img {
+    margin-block: 3rem;
+    max-inline-size: 1204px;
+    margin-inline: auto;
+  }
+
+  .benefits {
+    --flow-spacer: 3.5rem;
+
+    text-align: center;
+    font-size: 2.25rem;
+    line-height: 0.4;
+
+    h3 {
+      font-weight: 500;
+    }
+  }
+
+  .designs {
+    --flow-spacer: 4rem;
+
+    .even-columns {
+      gap: 0;
+    }
+  }
+
+  @media (min-width: 48em) {
+    .benefits {
+      --flow-spacer: 3.5rem;
+      font-size: 4rem;
+      line-height: 1;
+    }
+
+    .designs {
+      --flow-spacer: 4rem;
+      text-align: center;
+      margin-block-start: 7.5rem;
+
+      .card {
+        padding: 0;
+        background-color: unset;
+      }
+
+      h3 {
+        font-size: 4rem;
+        line-height: 1.2;
+      }
+      p {
+        font-size: 1.25rem;
+        max-inline-size: 80ch;
+        margin-inline: auto;
+      }
+    }
+
+    .images-container {
+      .even-columns {
+        --flow-spacer: 0;
+        gap: 2rem;
+      }
+    }
+  }
+</style>