feat: adding newsletter seccions and improve about tab (#67)

FOPInformatica · Dec 28, 2023 · af489ec · af489ec
1 parent 8e171a7
commit af489ec
Show file tree

Hide file tree

Showing 14 changed files with 278 additions and 21 deletions.
diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -6,3 +6,5 @@
   link: /blog
 - name: Prepárate
   link: /material
+- name: Concursos Pasados
+  link: /contest
diff --git a/_data/social.yml b/_data/social.yml
@@ -13,3 +13,6 @@
 - name: Instagram
   link: https://www.instagram.com/olimp_pe/
   icon: fa-instagram
+- name: Discord
+  link: https://discord.gg/SANdn2Sk
+  icon: fab fa-discord
diff --git a/_includes/sections/banner.html b/_includes/sections/banner.html
@@ -3,13 +3,13 @@
         <div class="banner-phase">
             <h1 class="site-title">Olimpiada Peruana de Informática 2024</h1>
             <h2 class="site-subtitle">
-                Segunda Fase
+                Last Chance Qualifier (LCQ) Primera Fase
             </h2>
             <p>
-                Fecha: 18 de Febrero 2024<br>
+                Fecha: 28 de Enero 2024<br>
             </p>
-            <a class="banner-btn" href="/historia/2023/11/10/primera-fase-opi-2023.html">
-                Ir a la publicación
+            <a class="banner-btn" href="/historia/2023/11/26/resultados-oficiales-2023.html">
+                Resultados Primera Fase
             </a>
         </div>
         <div class="banner-base">

diff --git a/_includes/sections/newsletter.html b/_includes/sections/newsletter.html
@@ -0,0 +1,20 @@
+<div class="site-newsletter">
+    <div class="news-wrapper">
+        <p class="news-title">
+            Suscribete a nuestro boletín de noticias.
+        </p>
+        <p class="news-subtitle">
+            Conoce las últimas noticias de la Olimpiada Informática Internacional.
+        </p>
+        <p class="news-text">
+            Ingresa al siguiente
+            <a href="https://forms.gle/Gj5wcERpwWNY4geA8" target="_blank" class="news-link">
+                enlace
+            </a>
+            y completa el formulario.
+        </p>
+    </div>
+    <div class="news-picture">
+        <img src="/assets/images/mailbox.png" alt="Mailbox">
+    </div>
+</div>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -25,6 +25,7 @@ <h1 class="full-title">
     </main>
 
     {%- include sections/partners.html -%}
+    {%- include sections/newsletter.html -%}
     {%- include footer.html -%}
 
   </body>

diff --git a/_sass/about.scss b/_sass/about.scss
@@ -44,21 +44,39 @@
     display: flex;
     flex-direction: column;
     text-align: center;
+    align-items: center;
     background-color: white;
-    padding-bottom: 40px;
-    font-size: 18px;
+    padding: 0 100px 50px 100px;
+    font-size: 16px;
 
-    .about-slack-link {
-      margin: 22px;
-      padding: 0px;
+    .about-btn-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px;
+      font-size: 20px;
+      font-weight: 500;
+      gap: 20px;
+
+      // img {
+      //   width: 150px;
+      // }
+    }
 
-      img {
-        height: 25px;
-      }
+    a {
+      border: 2px solid white;
+      transition: all 0.4s ease-in-out;
+    }
+
+    .about-slack-link {
+      // width: 120px;
+      padding: 12px 18px;
+      border-radius: 22px;
     }
 
     a:hover {
       text-decoration: none;
+      border: 2px solid $secondary-6;
     }
   }
 

diff --git a/_sass/contest.scss b/_sass/contest.scss
@@ -0,0 +1,12 @@
+.site-contest {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: white;
+    padding: 30px 90px;
+
+    .contest-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+}
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -56,7 +56,7 @@ main.page-content {
   padding: 0;
 
   .wrapper {
-    padding: 20px 0;
+    padding: 0;
     max-width: none;
     background-color: white;
 

diff --git a/_sass/sections/newsletter.scss b/_sass/sections/newsletter.scss
@@ -0,0 +1,39 @@
+.site-newsletter {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: white;
+    padding: 40px 90px;
+
+    .news-title {
+        font-size: 40px;
+        font-weight: 500;
+        color: $primary-2
+    }
+
+    .news-subtitle {
+        font-size: 20px;
+        font-weight: 400;
+        margin: 10px 0;
+        color: #515151;
+    }
+
+    .news-text {
+        font-size: 17px;
+        font-weight: 300;
+        margin: 10px 0;
+        color: #515151;
+    }
+
+    .news-link {
+        font-size: 18px;
+        font-weight: 600;
+        text-decoration: none;
+    }
+
+    .news-picture {
+        img {
+            width: 250px;
+        }
+    }
+}
diff --git a/about.html b/about.html
@@ -22,17 +22,21 @@
       </div>
     </div>
     <div class="about-slack">
+      <p style="margin-bottom: 5px;">
+        Sólo necesitas querer apoyar para poder ser parte de nosotros.
+      </p>
       <p>
-        Sólo necesitas querer apoyar para poder ser parte de nosotros. Únete a nuestro
-        Slack y preséntate para poder contactarnos.
+        Únete a nuestra comunidad en Slack y Discord para contactarte con nosotros y unirte a nuestra comunidad, conocer actividades y eventos.
       </p>
-      <btn class="about-slack-link">
-        <a class="btn" href="https://join.slack.com/t/federacion-opi/shared_invite/zt-19thx57zp-jrIMCwUHBfLeY1zlR6xu~g">
-            <span>Únete a</span>
-            &nbsp;
-            <img src="https://a.slack-edge.com/4f28/img/slack_logo.svg" alt="slack" />
+      <div class="about-btn-wrapper">
+        <p style="margin: 10px;">Únete a</p>
+        <a class="about-slack-link" target="_blank" href="https://join.slack.com/t/federacion-opi/shared_invite/zt-19thx57zp-jrIMCwUHBfLeY1zlR6xu~g">
+            <img src="https://a.slack-edge.com/4f28/img/slack_logo.svg" alt="slack" width="130" />
+        </a>
+        <a class="about-slack-link" target="_blank" href="https://discord.gg/eMeWfxb9">
+          <img src="/assets/images/discord.png" alt="discord" width="180" />
         </a>
-      </btn>
+      </div>
     </div>
     <div class="about-members-list">
       <div class="about-members-title">

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
@@ -7,9 +7,11 @@
 @import "blog";
 @import "author-card";
 @import "events";
+@import "contest.scss";
 @import "latest_news";
 @import "sections/description";
 @import "sections/banner";
+@import "sections/newsletter";
 @import "about";
 @import "promos";
 @import "utils/progressbar";

diff --git a/assets/images/discord.png b/assets/images/discord.png
diff --git a/assets/images/mailbox.png b/assets/images/mailbox.png
diff --git a/contest.html b/contest.html
@@ -0,0 +1,156 @@
+---
+layout: default
+permalink: /contest
+title: Concursos Pasados
+---
+<div class="site-contest">
+    <div class="contest-wrapper">
+        <h1 style="text-align: center;">
+            Concursos Pasados de la Olimpiada Peruana de Informatica (OPI)
+        </h1>
+        <p>
+            En esta sección podrás encontrar los concursos que se han realizado en el pasado.
+            Conoce los problemas que se han propuesto y las soluciones que se han dado.
+        </p>
+        <p>
+            Entra al repositorio de problemas en
+            <a href="https://codeforces.com/group/pK1VBURVmK/contests" target="_blank">
+                Codeforces
+            </a>
+            y resuelve los problemas que se han propuesto.
+            <br>
+            <br>
+        </p>
+    </div>
+    <div class="contest-table">
+        <table>
+            <tr>
+                <th>Contest</th>
+                <th>Duracion</th> 
+                <th>Resultados</th>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491495" target="_blank">
+                        Olimpiada Peruana de Informatica 2024 - Fase 1
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491495/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491225" target="_blank">
+                        Olimpiada Peruana de Informatica 2023 - Fase 2
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491225/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491224" target="_blank">
+                        Olimpiada Peruana de Informatica 2023 - Fase 1
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491224/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491223" target="_blank">
+                        Olimpiada Peruana de Informatica 2022 - Fase 2
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491223/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491222" target="_blank">
+                        Olimpiada Peruana de Informatica 2022 - Fase 1
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491222/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491221" target="_blank">
+                        Competencia Peruana de Informatica Online 2021
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491221/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491220" target="_blank">
+                        Competencia Peruana de Informatica Online 2020
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491220/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491219" target="_blank">
+                        Competencia Peruana de Informatica Online 2018
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491219/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491218" target="_blank">
+                        Competencia Peruana de Informatica Online 2017
+                    </a>
+                </td>
+                <td style="text-align: center;">5h</td>
+                <td>
+                    <a href="https://codeforces.com/group/pK1VBURVmK/contest/491218/standings/groupmates/true" target="_blank">
+                        Final standings
+                    </a>
+                </td>
+            </tr>
+          </table>
+    </div>
+    <div>
+        <p>
+            <b>Nota:</b> Los contest se realizan en la plataforma de <a href="https://codeforces.com/" target="_blank">Codeforces</a>.
+        </p>
+    </div>
+</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,6 +25,7 @@ <h1 class="full-title"> @@
         </main>
         {%- include sections/partners.html -%}
+        {%- include sections/newsletter.html -%}
         {%- include footer.html -%}
       </body>
@@ Expand Down @@