feat: banner update and new post pahse2 result (#73)

* feat: banner update and new post pahse2 result

* feat: lint

* feat: lint endof line

_includes/sections/OII.html

@@ -0,0 +1,52 @@
+<div>
+    <div class="oii-wrapper">
+        <div class="oii-content">
+            <div class="oii-image">
+                <img src="/assets/images/oii-banner.png" alt="OII image">
+            </div>
+        </div>
+        <div class="oii-description">
+            <p class="oii-title">
+                Olimpíada Iberoamericana de Informática (OII)
+            </p>
+            <p>
+                Para
+                <strong>
+                    jóvenes estudiantes
+                </strong>
+                matriculados en un colegio secundario de países de Iberoamérica, la OII es una competencia de programación anual. Los estudiantes compiten individualmente y pueden participar hasta quince estudiantes de cada país.
+            </p>
+            <p style="margin-bottom: 0px;">
+                La competencia tiene una sola ronda, que tiene lugar entre
+                <strong>
+                    junio y julio
+                </strong>
+                de cada año y se lleva a cabo en línea. Por lo general, a los estudiantes se les dan cuatro problemas algorítmicos que deben resolver en
+                <strong>
+                    cinco horas.
+                </strong>
+            </p>
+        </div>
+    </div>
+    <div class="oii-calendar">
+        <div>
+            <img src="/assets/images/calendar.png" alt="OII image">
+        </div>
+        <div style="margin: auto 0;">
+            <div>
+                <p style="color: #f03737; font-size: 20px; font-weight: 400; margin-bottom: 0px">
+                    ¡No te pierdas ninguna fecha importante!
+                </p>
+                <p>
+                    Visita nuestro calendario de eventos para conocer más detalles sobre la OII y otras competencias de programación.
+                </p>
+            </div>
+            <a href="/calendar">
+                Ir al calendario
+                <svg width="24" height="18" xmlns="http://www.w3.org/2000/svg" fill="#0056AC" fill-rule="evenodd" clip-rule="evenodd">
+                    <path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/>`
+                </svg>
+            </a>
+        </div>
+    </div>
+</div>

_includes/sections/banner.html

@@ -3,10 +3,13 @@
         <div class="banner-phase">
             <h1 class="site-title">Olimpiada Peruana de Informática 2024</h1>
             <h2 class="site-subtitle">
-                SEGUNDA FASE
+                SEGUNDA FASE ¡CONCLUIDA!
             </h2>
-            <p>
-                18 de Febrero 2024<br>
+            <p style="font-size: 18px;">
+                Conoce los resultados
+                <strong>
+                    <a href="historia/2024/01/26/fase-2-results">aquí</a>
+                </strong>
             </p>
         </div>
         <div class="banner-base">

_includes/sections/winners-phase-2.html

@@ -0,0 +1,82 @@
+<div class="winners-wrapper">
+    <div class="winners-text">
+        <h2 class="title">
+            Conoce a los ganadores de la Segunda Fase de la Olimpiada Peruana de Informática 2024 🏆
+        </h2>
+        <p style="font-size: 15px;">
+            Estos talentosos competidores han demostrado habilidades increíbles en programación y resolución de problemas, estamos emocionados de ver cómo continúan brillando en futuras competiciones!
+            ¡Agradecemos a todos los participantes por su entusiasmo y dedicación 
+        </p>
+        <strong style="font-size: 17px; margin-bottom: 16px; text-align: center;">
+            🎉 ¡Felicidades a todos los participantes por su dedicación y esfuerzo! 🎉
+        </strong>
+        <p style="margin-bottom: 0px;">
+            Informate de todos los detalles de los resultados de la Olimpiada Peruana de Informática 2024 en nuestra
+            <a href="historia/2024/01/26/fase-2-results.html">publicación resultados</a>
+        </p>
+        <img src="/assets/images/winners-phase-2.png" alt="Winners image">
+    </div>
+    <div class="winners-table">
+        <table style="margin-bottom: 0px;">
+            <caption style="caption-side:bottom; margin-top: 14px; font-size: 17px">
+                Primeros
+                <strong>
+                    12 ganadores
+                </strong>
+                del concurso
+            </caption>
+            <tr>
+                <th>Posición</th>
+                <th style="width: 260px;">Ganadores</th>
+            </tr>
+            <tr>
+                <td class="position">1</td>
+                <td>Angie Alcantara Castillo</td>
+            </tr>
+            <tr>
+                <td class="position">2</td>
+                <td>Alejandro David Pineda Miranda</td>
+            </tr>
+            <tr>
+                <td class="position">3</td>
+                <td>Rosangel Alexandra Bullon Linares</td>
+            </tr>
+            <tr>
+                <td class="position">3</td>
+                <td>Jhojhan Karol Vilcanqui Apaza</td>
+            </tr>
+            <tr>
+                <td class="position">5</td>
+                <td>Sergio Daniel Alcantara Miranda</td>
+            </tr>
+            <tr>
+                <td class="position">6</td>
+                <td>Angelo D'steffano Farfán Oré</td>
+            </tr>
+            <tr>
+                <td class="position">7</td>
+                <td>Daniel Javier Fernandez Cruz</td>
+            </tr>
+            <tr>
+                <td class="position">8</td>
+                <td>Michael Francesc Alexis Apaza Cayo</td>
+            </tr>
+            <tr style="height: 5px;">
+                <td class="position">9</td>
+                <td>Adriana Celeste Alvarado León</td>
+            </tr>
+            <tr>
+                <td class="position">10</td>
+                <td>Angeles Juleysi Ramirez Cabrera</td>
+            </tr>
+            <tr>
+                <td class="position">11</td>
+                <td>Camila Ochoa Huamán</td>
+            </tr>
+            <tr>
+                <td class="position">12</td>
+                <td>Diana Esmeralda Huacasi Durand</td>
+            </tr>
+        </table>
+    </div>
+</div>

_layouts/home.html

@@ -19,6 +19,8 @@ <h1 class="full-title">
 
       <div class="wrapper-home">
         {%- include sections/banner.html -%}
+        {%- include sections/winners-phase-2.html -%}
+        {%- include sections/OII.html -%}
         <!-- {%- include sections/description.html -%} -->
         {%- include latest_news.html limit=3 -%}
       </div>

_posts/2024-02-20-fase-2-results.markdown

@@ -0,0 +1,32 @@
+---
+layout: post
+title: "Olimpiada Peruana de Informática Fase 2"
+date: 2024-01-26 13:00:00 -0500
+categories: historia
+author: FOPI
+image: /assets/images/Phase-2-Results.png
+is_post: true
+avatar: /assets/images/fopi-logo.png
+author_company: FOPI
+---
+
+🌟 ¡Anunciamos los resultados de la Fase 2 de la Olimpiada Peruana de Informática! 🏆✨
+
+¡Querida comunidad FOPI!
+
+Es con gran emoción y orgullo que anunciamos a los destacados de la Fase 2 de la Olimpiada Peruana de Informática. ¡Felicidades a todos los participantes por su dedicación y esfuerzo! 🎉💻
+
+Estos talentosos competidores han demostrado habilidades excepcionales en programación y resolución de problemas, y estamos emocionados de ver cómo continúan brillando en futuras competiciones! 🌟💡
+
+Conoce los resultados de la Fase 2 en el siguiente [enlace](https://codeforces.com/spectator/ranklist/9fc85fe8e757296d089fca29cb8773d8)
+
+## ¡Importante!
+
+El desempate para la publicación final de los resultados se realizó tomando en cuenta las posiciones obtenidas en la Fase 1 🏆
+Siendo así, estos son los resultados finales del Concurso 🚀 [aquí](https://docs.google.com/spreadsheets/d/1v3BOWPF1sGZj6iSh6yX8pBdPDNlt3dnpY6698fkwBFs/edit?usp=sharing)
+
+Debido al pequeño margen de diferencia , se ha decidido enviar a los primeros 15 participantes a la Olimpiada Iberoamericana de Informática 2024
+
+¡Agradecemos a todos los participantes por su entusiasmo y dedicación durante la Fase 2, y les deseamos mucho éxito en sus futuros desafíos en el campo de la informática! 🚀🌐
+
+#FOPI #OlimpiadaInformática #GanadoresFase2 #OII #Programación #Desafío

_sass/sections/OII.scss

@@ -0,0 +1,49 @@
+.oii-wrapper {
+    display: grid;
+    background-color: $secondary-1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    .oii-content {
+        display: flex;
+        background-color: white;
+
+        .oii-image {
+            padding: 2rem;
+            margin: auto;
+
+            img {
+                margin: auto;
+                width: 350px;
+            }
+        }
+    }
+
+    .oii-description {
+        background-color: $secondary-1;
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+        margin: auto;
+        padding: 4rem 3rem;
+
+        .oii-title {
+            color: $primary-2;
+            font-size: 24px;
+            font-weight: 600;
+        }
+    }
+}
+
+.oii-calendar {
+    background-color: $secondary-1;
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    padding: 2rem 4rem;
+    margin: auto;
+
+    img {
+        margin: auto;
+        width: 180px;
+    }
+}

_sass/sections/banner.scss

@@ -14,7 +14,7 @@
     }
 
     .site-subtitle {
-        font-size: 30px;
+        font-size: 23px;
         font-weight: 500;
         margin: 8px 0;
         color: #013e8f;

_sass/sections/winners-phase-2.scss

@@ -0,0 +1,33 @@
+.winners-wrapper {
+    display: grid;
+    padding: 40px 90px;
+    background-color: white;
+    grid-template-columns: repeat(2, minmax(0, 1fr));   
+
+    .winners-text {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        text-align: right;
+
+        img {
+            margin: auto;
+            width: 350px;
+        }
+    }
+
+    .winners-table {
+        display: flex;
+        font-size: 14px;
+        flex-direction: column;
+        margin: auto;
+        padding: 0.5rem;
+        border-radius: 10px;
+        background-color: white;
+
+        .position {
+            text-align: center;
+            font-weight: 600;
+        }
+    }
+}

assets/css/styles.scss

@@ -11,6 +11,8 @@
 @import "contest";
 @import "latest_news";
 @import "sections/description";
+@import "sections/winners-phase-2";
+@import "sections/OII";
 @import "sections/banner";
 @import "sections/newsletter";
 @import "about";