Merge pull request #176 from AnaRangel/zyruks/feature/add-page-banco-…

…replay

Feature: add page banco replay

src/pages/banco-replay/_sections/Analysis.astro

@@ -0,0 +1,82 @@
+---
+import { CardWrapper } from '@components';
+---
+
+<div class="container">
+  <h2 class="section-title">Análisis final</h2>
+
+  <div class="grid-auto-fit">
+    <CardWrapper class="card | flow">
+      <h2 class="card-title">1</h2>
+      <p class="card-description">
+        La competencia mantiene al menos dos capas de información, la primera con un historial de
+        los DAPs en cards con la información mínima necesaria y la segunda capa con el detalle
+      </p>
+    </CardWrapper>
+    <CardWrapper class="card | flow">
+      <h2 class="card-title">2</h2>
+      <p class="card-description">
+        Se integró recientemente cuenta corriente como opción de origen de la inversión a realizar.
+        Antes sólo un cliente con cuenta vista podía realizar un depósito a plazo.
+      </p>
+    </CardWrapper>
+    <CardWrapper class="card | flow">
+      <h2 class="card-title">3</h2>
+      <p class="card-description">
+        Se le notifica al usuario por correo electrónico cuando se hace la renovación automática y
+        se envía un documento detallado con las condiciones de la renovación
+      </p>
+    </CardWrapper>
+    <CardWrapper class="card | flow">
+      <h2 class="card-title">4</h2>
+      <p class="card-description">
+        Se le notifica al usuario por correo electrónico cuando se hace la renovación automática y
+        se envía un documento detallado con las condiciones de la renovación
+      </p>
+    </CardWrapper>
+  </div>
+</div>
+
+<style>
+  .container {
+    padding-block-start: 2rem;
+    display: grid;
+    gap: 1.5rem;
+    place-items: center;
+    padding-inline: 2rem;
+  }
+
+  .section-title {
+    margin-block: 2rem;
+    font-size: 3rem;
+    font-weight: 500;
+  }
+
+  .grid-auto-fit {
+    --min-item-width: 15rem;
+  }
+
+  .card {
+    --flow-spacer: 1.4375rem;
+    width: 100%;
+    background-color: hsl(240, 4%, 5%);
+    padding: 3.5rem 1.5rem 2.25rem 1.5rem;
+    margin-inline: auto;
+  }
+
+  .card-title {
+    font-size: 3rem;
+    font-weight: 500;
+  }
+
+  .card-description {
+    color: hsl(236, 25%, 75%);
+    line-height: 1.5;
+  }
+
+  @media (min-width: 48em) {
+    .section-title {
+      font-size: 64px;
+    }
+  }
+</style>

src/pages/banco-replay/_sections/Benchmarks.astro

@@ -0,0 +1,138 @@
+---
+import { CardWrapper } from '@components';
+---
+
+<section class="hero">
+  <div class="container">
+    <h2 class="section-title">Benchmarks</h2>
+    <p class="section-description">
+      Debido al tiempo y alcance, se definió realizar dos benchmarks evaluando competencia directa.
+    </p>
+
+    <!-- Container for the cards -->
+    <div class="cards-container | grid-auto-fit">
+      <!-- Card 1: Methodology used -->
+      <CardWrapper class="card | flow">
+        <h2 class="card-title">Cant. de bancos estudiados</h2>
+        <span>8</span>
+      </CardWrapper>
+
+      <!-- Card 2: Time taken -->
+      <CardWrapper class="card | flow">
+        <h2 class="card-title">Objetivo 1</h2>
+        <p class="subtitle">
+          Mapear cómo la competencia aborda este flujo a nivel general en arquitectura,
+          priorización, forma de mostrar información y que componentes y recursos visuales utilizan.
+        </p>
+      </CardWrapper>
+
+      <!-- Card 3: Devices used -->
+      <CardWrapper class="card | flow">
+        <h2 class="card-title">Objetivo 2</h2>
+        <p class="subtitle">
+          Estudiar cómo la competencia le facilita al usuario la información comparativa al momento
+          de simular entre distintos plazos al invertir y si estos plazos vienen predefinidos o no.
+        </p>
+      </CardWrapper>
+    </div>
+  </div>
+</section>
+
+<style>
+  .hero .container {
+    padding-block-start: 2rem;
+    display: grid;
+    gap: 1.5rem;
+    place-items: center;
+    padding-inline: 2rem;
+  }
+
+  .flow {
+    --flow-spacer: 1.5rem;
+  }
+
+  .section-title {
+    font-size: var(--font-size-fluid-3);
+    line-height: 1.4;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  .section-description {
+    color: hsl(236, 25%, 75%);
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  .cards-container {
+    --min-item-width: 20rem;
+
+    margin-block-start: 3rem;
+    inline-size: 100%;
+  }
+
+  .card {
+    --flow-spacer: 1.4375rem;
+    width: 100%;
+    background-color: hsla(240, 4%, 5%, 1);
+    padding: 3.5rem 1.5rem 2.25rem 1.5rem;
+    margin-inline: auto;
+
+    h2 {
+      font-size: 1.25rem;
+      line-height: 1.5;
+      font-weight: 400;
+      text-align: center;
+    }
+
+    p {
+      line-height: 24px;
+      letter-spacing: -1%;
+      color: hsla(236, 25%, 75%, 1);
+    }
+
+    span {
+      display: block;
+      font-size: 4rem;
+      text-align: center;
+      font-weight: 700;
+    }
+  }
+
+  @media (min-width: 48em) {
+    .hero .container {
+      padding-block-start: 8rem;
+    }
+
+    .section-title {
+      font-size: 4rem;
+    }
+    .section-description {
+      font-size: 1.25rem;
+      max-inline-size: 78ch;
+      margin-inline: auto;
+      line-height: 1.875rem;
+    }
+
+    .card {
+      padding: 3rem;
+      text-align: start;
+
+      h2 {
+        font-size: 2rem;
+        line-height: 1.5;
+        font-weight: 400;
+        text-align: start;
+      }
+
+      span {
+        text-align: start;
+      }
+    }
+
+    .subtitle {
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+  }
+</style>

src/pages/banco-replay/_sections/Context.astro

@@ -0,0 +1,83 @@
+<section class="context">
+  <div class="container flow">
+    <h2 class="title">Importancia</h2>
+
+    <!-- Section Description: Explanation of the problem and solution -->
+    <p class="description">
+      Indagando algunos KPI, se supo que en promedio en el año 2022 el 86% eran usuarios online. En
+      DAP mensualmente se generaban más de 1900 transacciones en promedio, lo cual se traducía en
+      una gran cantidad de dinero para el banco , en ese año había una alza de la inversiones de los
+      clientes, lo cual muestra el aporte que hace este producto al banco
+    </p>
+
+    <!-- Section Image: Illustrating the context -->
+    <img
+      src="/assets/images/banco-replay-context-1.png"
+      alt="Promoción de agencia de viajes ofreciendo paquetes estacionales"
+      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>