Merge pull request #78 from AnaRangel/zyruks/feature/add-page-planograma

Zyruks/feature/add page planograma

src/pages/_Sections/Contact/Contact.astro

@@ -4,21 +4,25 @@ import { Button, ButtonDownloadCv } from '@components';
 
 <section class="container">
   <div class="contact">
-    <div class="contact__content">
-      <h2 class="contact__title">¿Listo para dar vida a tus ideas?</h2>
-      <p class="contact__description">
+    <div class="content">
+      <h2 class="title">¿Listo para dar vida a tus ideas?</h2>
+      <p class="description">
         Haz clic abajo para conversar conmigo o echa un vistazo a mi CV, para ver cómo puedo
         impulsar tu proyecto o formar parte de tu equipo
       </p>
     </div>
-    <div class="contact__actions">
+    <div class="actions">
       <Button tag="anchor" href="https://calendly.com/rangelana1221/30min">Contáctame</Button>
       <ButtonDownloadCv id="btn-contact-download" />
     </div>
   </div>
 </section>
 
 <style>
+  .container {
+    padding-inline: 1rem;
+  }
+
   .contact {
     margin: 0 auto;
     display: flex;
@@ -28,29 +32,29 @@ import { Button, ButtonDownloadCv } from '@components';
     gap: 24px;
     padding: 10rem 1rem;
   }
-  .contact__content {
+  .content {
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
-  .contact__title {
+  .title {
     font-family: Inter;
     font-size: 40px;
     font-weight: 500;
     line-height: 60px;
     color: white;
   }
-  .contact__description {
+  .description {
     font-family: Inter;
     font-size: 32px;
     font-weight: 300;
     line-height: 48px;
     color: white;
   }
 
-  .contact__actions {
+  .actions {
     width: fit-content;
     display: flex;
     flex-wrap: wrap;
@@ -59,24 +63,24 @@ import { Button, ButtonDownloadCv } from '@components';
     margin: 0 auto;
   }
 
-  @media (max-width: 400px) {
+  @media (max-width: 48em) {
     .contact {
       height: 512px;
       width: 90%;
       padding: 56px 0px 56px 0px;
       gap: 36px;
     }
-    .contact__title {
+    .title {
       font-size: 2rem;
       line-height: 3rem;
     }
-    .contact__description {
+    .description {
       font-size: 1.25rem;
       font-weight: 300;
       line-height: 1.875rem;
     }
 
-    .contact__actions {
+    .actions {
       flex-wrap: nowrap;
       flex-direction: column;
       align-items: center;

src/pages/index.astro

@@ -37,7 +37,7 @@ import Thunder from './_Sections/Thunder/Thunder.astro';
           cardImage="/svg/frame_4.svg"
           variant={CardVariant.tertiary}
           isInverted={true}
-          url="/"
+          url="/planograma"
           hasHover
         />
 

src/pages/planograma/_sections/Context.astro

@@ -0,0 +1,149 @@
+---
+import { CardWrapper } from '@components';
+---
+
+<section class="context">
+  <div class="container flow">
+    <!-- Section Title: Context -->
+    <h2 class="title">Contexto</h2>
+
+    <!-- Section Description: Explanation of the problem and solution -->
+    <p class="description">
+      Ya que había dos realidades, se encontró que uno de los problemas principales era la
+      comunicación entre el área que diseña y envía el planograma con la tienda quienes son los que
+      implementan, para que hubiera concientización de ambas partes se decidió realizar un workshop
+      donde se pudieran testear wireframes ya previamente diseñados, y verificar cuáles eran los
+      mayores puntos de dolor de los usuarios
+    </p>
+
+    <!-- Section Image: Illustrating the context -->
+    <img
+      src="/img/rangel-iphone.png"
+      alt="Ana Rangel conduciendo un taller con wireframes de planogramas exhibidos en la pared"
+      class="section-image"
+    />
+
+    <!-- Subsection Title: Workshop -->
+    <h3 class="sub-section__title">Workshop</h3>
+
+    <!-- Cards Container: Objectives of the workshop -->
+    <div class="card-container | grid-auto-fit">
+      <!-- Card 1: Objective 1 -->
+      <CardWrapper class="card" hasBorder>
+        <h2 class="card__title">Objetivo 1</h2>
+        <p class="card__description">
+          Detectar cuáles son los principales dolores a la hora de publicar e implementar
+          planogramas
+        </p>
+      </CardWrapper>
+
+      <!-- Card 2: Objective 2 -->
+      <CardWrapper class="card" hasBorder>
+        <h2 class="card__title">Objetivo 2</h2>
+        <p class="card__description">
+          Validar si la solución que se generó en wireframes previamente solventa los dolores
+          principales de los usuarios
+        </p>
+      </CardWrapper>
+
+      <!-- Card 3: Objective 3 -->
+      <CardWrapper class="card" hasBorder>
+        <h2 class="card__title">Objetivo 3</h2>
+        <p class="card__description">
+          Obtener insights de los usuarios para asi ver que otras mejoras se pueden añadir para un
+          primer MVP y para futuras versiones
+        </p>
+      </CardWrapper>
+    </div>
+  </div>
+</section>
+
+<style>
+  .context .container {
+    --flow-spacer: 1.5rem;
+
+    padding-block-start: 3rem;
+    padding-inline: 2rem;
+  }
+
+  .title {
+    font-size: 2.25rem;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  .description {
+    color: hsl(236, 25%, 75%);
+    text-align: center;
+    line-height: 1.2;
+  }
+
+  .section-image {
+    inline-size: 100%;
+    max-inline-size: 40rem;
+    margin-inline: auto;
+  }
+
+  .sub-section__title {
+    font-size: 2.25rem;
+    font-weight: 500;
+    text-align: center;
+    margin-block: 4.5rem;
+  }
+
+  .card-container {
+    gap: 2rem;
+    align-items: center;
+    justify-content: center;
+    margin-top: 4rem;
+    inline-size: 100%;
+  }
+  .card {
+    display: grid;
+    gap: 1.5rem;
+    background-color: hsla(240, 4%, 5%, 1);
+    padding: 1.5rem;
+    max-inline-size: 25rem;
+    inline-size: 100%;
+    margin-inline: auto;
+    block-size: 100%;
+  }
+
+  .card__title {
+    font-size: 1.25rem;
+  }
+
+  .card__description {
+    line-height: 1.5;
+    max-inline-size: 25ch;
+    color: hsla(236, 25%, 75%, 1);
+  }
+
+  @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;
+    }
+
+    .card {
+      padding-block-start: 3.5rem;
+    }
+
+    .card__title {
+      font-size: 2rem;
+    }
+
+    .card__description {
+      max-inline-size: none;
+    }
+  }
+</style>

src/pages/planograma/_sections/Designs.astro

@@ -0,0 +1,64 @@
+<section>
+  <div class="container | flow">
+    <!-- Image showing design process -->
+    <img
+      src="/assets/images/design-section-1.png"
+      alt="Diagrama de flujo de trabajo para la administración central y los empleados de Cencosud"
+    />
+
+    <!-- Text container explaining the design process -->
+    <div class="text-container">
+      <h2>Diseños</h2>
+      <p>
+        Se logró digitalizar todo el proceso de envío de planogramas, implementación y notificación
+        de que la tarea fue realizada por las tiendas, fue un flujo bastante denso y desafiante que
+        había que considerar tambien los dispositivos en los que cada usuario debía acceder, que
+        fuera rápido e intuitivo
+      </p>
+    </div>
+
+    <!-- Image showing further design details -->
+    <img
+      src="/assets/images/design-section-2.png"
+      alt="Interfaz de la plataforma Mi Local de Cencosud en una computadora portátil"
+    />
+  </div>
+</section>
+
+<style>
+  section .container {
+    --flow-spacer: 3rem;
+    padding-block-start: 4rem;
+    padding-inline: 2rem;
+  }
+  .text-container {
+    display: grid;
+    gap: 1.5rem;
+  }
+
+  h2 {
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 1.3;
+    text-align: center;
+  }
+
+  img {
+    width: 100%;
+    max-inline-size: 57.125rem;
+    margin-inline: auto;
+  }
+  p {
+    text-align: center;
+    line-height: 1.5;
+    color: hsla(236, 25%, 75%, 1);
+    max-inline-size: 78ch;
+    margin-inline: auto;
+  }
+
+  @media (min-width: 48em) {
+    section .container {
+      --flow-spacer: 4rem;
+    }
+  }
+</style>