From 6ed5e4a6a2bac763c1c55a389d55be20a5384ea7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Lucas=20Silva=20Mayer?= <josemayer@usp.br>
Date: Wed, 7 Feb 2024 17:48:40 -0400
Subject: [PATCH] Fix bug of right bar of pages "O IME" and "Kit Bixe"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: José Lucas Silva Mayer <josemayer@usp.br>
---
 pages/ime.vue     | 272 +++++++++++++++++++++++-----------------------
 pages/kitbixe.vue | 211 ++++++++++++++++++-----------------
 2 files changed, 239 insertions(+), 244 deletions(-)

diff --git a/pages/ime.vue b/pages/ime.vue
index ce59c76..16a2e05 100644
--- a/pages/ime.vue
+++ b/pages/ime.vue
@@ -1,142 +1,140 @@
 <template>
-  <v-row xs-12>
-    <v-col>
-      <PageBar background-colored border-bottom>
-        <template #left>
-          <div class="my-10">
-            <ImagesCarrossel
-              :largura="570"
-              :altura="360"
-              image-path="atletica"
-              image-name="atletica"
-              number-of-images="4"
-              extension="jpg"
-              border
-              border-color="white"
-            />
-          </div>
-        </template>
-        <template #right>
-          <div class="my-10">
-            <h1 class="titulo txtWhite text-md-left">
-              Associação Atlética Acadêmica da Matemática
-            </h1>
-            <p class="descricao txtWhite text-md-left">
-              A Associação Atlética Acadêmica da Matemática é uma instituição
-              gerenciada por um grupo de alunos do IME que cuidam da organização
-              de todas as modalidades esportivas, campeonatos e inters. Além
-              disso, realizam festas e eventos de integração e também vendem
-              produtos personalizados do instituto. Se você tem interesse em
-              participar de alguma modalidade ou tem alguma dúvida é só entrar
-              em contato pelas redes sociais.
-            </p>
-            <p class="descricao text-md-left">
-              <v-btn
-                color="#626262"
-                icon
-                href="https://www.facebook.com/aaamat.ime"
-                ><v-icon class="txtWhite" size="30px"
-                  >fa-brands fa-facebook</v-icon
-                >
-              </v-btn>
-
-              <v-btn
-                color="#626262"
-                icon
-                href="https://www.instagram.com/atleticaimeusp"
-                ><v-icon class="txtWhite" size="30px"
-                  >fa-brands fa-instagram</v-icon
-                ></v-btn
-              >
-            </p>
-          </div>
-        </template>
-      </PageBar>
-      <PageBar>
-        <template #left>
-          <div class="my-10">
-            <h1 class="titulo txtBlack text-md-left">
-              O Instituto de Matemática e Estatística da USP
-            </h1>
-            <p class="descricao txtBlack text-md-left">
-              O Instituto de Matemática e Estatística é uma unidade de ensino,
-              pesquisa e extensão da Universidade de São Paulo. Possui cursos de
-              graduação e pós-graduação nas áreas de matemática, matemática
-              aplicada, estatística e ciência da computação. Além disso, com
-              corpo docente e discente qualificado, realiza pesquisas
-              científicas em suas áreas-chave e áreas relacionadas, como
-              bioinformática, neuromatemática e educação em matemática.
-            </p>
-            <p class="descricao text-md-left">
-              <Button link="http://ime.usp.br"> Visite o site do IME </Button>
-            </p>
-          </div>
-        </template>
-        <template #right>
-          <div class="my-10">
-            <ImagesCarrossel
-              :largura="570"
-              :altura="360"
-              image-path="ime"
-              image-name="ime"
-              number-of-images="8"
-              extension="jpg"
-              border
-              border-color="black"
-            />
-          </div>
-        </template>
-      </PageBar>
-      <PageBar background-colored border-top>
-        <template #left>
-          <div class="my-10">
-            <ImagesCarrossel
-              :largura="570"
-              :altura="370"
-              image-path="mapinha"
-              image-name="mapinha"
-              number-of-images="9"
-              extension="png"
-              border
-              border-color="white"
-            />
-          </div>
-        </template>
-        <template #right>
-          <div class="my-10">
-            <h1 class="titulo txtWhite text-md-left">O Mapinha do IME</h1>
-            <p class="descricao txtWhite text-md-left">
-              Bem-vindes ao Mapinha do IME! Como vocês ainda não conhecem o IME
-              muito bem, fizemos um Mapinha no estilo do Pokémon para conhecerem
-              melhor o instituto que vão aprender a amar! Além de poderem andar
-              livremente por (quase) todo o IME, poderão conversar com várias
-              pessoas da comunidade IMEana no caminho que vão te apresentar como
-              é a vida de um IMEano. Esperamos que aproveitem, explorem bastante
-              e conheçam todos os cantos do Mapinha, porque nós deixamos vários
-              segredinhos espalhados!
-            </p>
-            <p class="font-weight-bold descricao txtWhite text-md-left">
-              Para executar o mapinha vocês devem seguir os seguintes passos:
-            </p>
-            <ol class="descricao txtWhite text-md-left">
-              <li>Extraia o arquivo zip chamado "mapinha.zip"</li>
-              <li>Execute o arquivo "Game.exe" dentro da pasta extraida</li>
-            </ol>
-            <p class="descricao text-md-left">
-              <Button
-                link="/mapinha.zip"
-                color="white"
-                :dark="false"
-                class="mt-5"
+  <div>
+    <PageBar background-colored border-bottom>
+      <template #left>
+        <div class="my-10">
+          <ImagesCarrossel
+            :largura="570"
+            :altura="360"
+            image-path="atletica"
+            image-name="atletica"
+            number-of-images="4"
+            extension="jpg"
+            border
+            border-color="white"
+          />
+        </div>
+      </template>
+      <template #right>
+        <div class="my-10">
+          <h1 class="titulo txtWhite text-md-left">
+            Associação Atlética Acadêmica da Matemática
+          </h1>
+          <p class="descricao txtWhite text-md-left">
+            A Associação Atlética Acadêmica da Matemática é uma instituição
+            gerenciada por um grupo de alunos do IME que cuidam da organização
+            de todas as modalidades esportivas, campeonatos e inters. Além
+            disso, realizam festas e eventos de integração e também vendem
+            produtos personalizados do instituto. Se você tem interesse em
+            participar de alguma modalidade ou tem alguma dúvida é só entrar em
+            contato pelas redes sociais.
+          </p>
+          <p class="descricao text-md-left">
+            <v-btn
+              color="#626262"
+              icon
+              href="https://www.facebook.com/aaamat.ime"
+              ><v-icon class="txtWhite" size="30px"
+                >fa-brands fa-facebook</v-icon
               >
-                Conheça o mapinha!
-              </Button>
-            </p>
-          </div>
-        </template>
-      </PageBar>
-    </v-col>
-  </v-row>
+            </v-btn>
+
+            <v-btn
+              color="#626262"
+              icon
+              href="https://www.instagram.com/atleticaimeusp"
+              ><v-icon class="txtWhite" size="30px"
+                >fa-brands fa-instagram</v-icon
+              ></v-btn
+            >
+          </p>
+        </div>
+      </template>
+    </PageBar>
+    <PageBar>
+      <template #left>
+        <div class="my-10">
+          <h1 class="titulo txtBlack text-md-left">
+            O Instituto de Matemática e Estatística da USP
+          </h1>
+          <p class="descricao txtBlack text-md-left">
+            O Instituto de Matemática e Estatística é uma unidade de ensino,
+            pesquisa e extensão da Universidade de São Paulo. Possui cursos de
+            graduação e pós-graduação nas áreas de matemática, matemática
+            aplicada, estatística e ciência da computação. Além disso, com corpo
+            docente e discente qualificado, realiza pesquisas científicas em
+            suas áreas-chave e áreas relacionadas, como bioinformática,
+            neuromatemática e educação em matemática.
+          </p>
+          <p class="descricao text-md-left">
+            <Button link="http://ime.usp.br"> Visite o site do IME </Button>
+          </p>
+        </div>
+      </template>
+      <template #right>
+        <div class="my-10">
+          <ImagesCarrossel
+            :largura="570"
+            :altura="360"
+            image-path="ime"
+            image-name="ime"
+            number-of-images="8"
+            extension="jpg"
+            border
+            border-color="black"
+          />
+        </div>
+      </template>
+    </PageBar>
+    <PageBar background-colored border-top>
+      <template #left>
+        <div class="my-10">
+          <ImagesCarrossel
+            :largura="570"
+            :altura="370"
+            image-path="mapinha"
+            image-name="mapinha"
+            number-of-images="9"
+            extension="png"
+            border
+            border-color="white"
+          />
+        </div>
+      </template>
+      <template #right>
+        <div class="my-10">
+          <h1 class="titulo txtWhite text-md-left">O Mapinha do IME</h1>
+          <p class="descricao txtWhite text-md-left">
+            Bem-vindes ao Mapinha do IME! Como vocês ainda não conhecem o IME
+            muito bem, fizemos um Mapinha no estilo do Pokémon para conhecerem
+            melhor o instituto que vão aprender a amar! Além de poderem andar
+            livremente por (quase) todo o IME, poderão conversar com várias
+            pessoas da comunidade IMEana no caminho que vão te apresentar como é
+            a vida de um IMEano. Esperamos que aproveitem, explorem bastante e
+            conheçam todos os cantos do Mapinha, porque nós deixamos vários
+            segredinhos espalhados!
+          </p>
+          <p class="font-weight-bold descricao txtWhite text-md-left">
+            Para executar o mapinha vocês devem seguir os seguintes passos:
+          </p>
+          <ol class="descricao txtWhite text-md-left">
+            <li>Extraia o arquivo zip chamado "mapinha.zip"</li>
+            <li>Execute o arquivo "Game.exe" dentro da pasta extraida</li>
+          </ol>
+          <p class="descricao text-md-left">
+            <Button
+              link="/mapinha.zip"
+              color="white"
+              :dark="false"
+              class="mt-5"
+            >
+              Conheça o mapinha!
+            </Button>
+          </p>
+        </div>
+      </template>
+    </PageBar>
+  </div>
 </template>
 
 <script>
diff --git a/pages/kitbixe.vue b/pages/kitbixe.vue
index d3155b7..dae1a71 100644
--- a/pages/kitbixe.vue
+++ b/pages/kitbixe.vue
@@ -1,122 +1,119 @@
 <template>
-  <v-row xs-12>
-    <v-col>
-      <PageBar align-row="center" align-col="start">
-        <template #left>
-          <div
-            class="d-flex flex-column align-center justify-center mr-md-10 mr-lg-0"
+  <div>
+    <PageBar align-row="center" align-col="start">
+      <template #left>
+        <div
+          class="d-flex flex-column align-center justify-center mr-md-10 mr-lg-0"
+        >
+          <v-img
+            class="kitImg"
+            src="/kit.png"
+            alt="Kit Bixe"
+            :max-width="kitSize"
           >
-            <v-img
-              class="kitImg"
-              src="/kit.png"
-              alt="Kit Bixe"
-              :max-width="kitSize"
-            >
-              <div
-                class="pa-5 rounded-circle d-flex flex-column align-center justify-center priceKit txtWhite bgRed"
-              >
-                <span class="bigValue"
-                  >R$ <span class="number">{{ prices.kit.regular }}</span></span
-                >
-                <span class="text-center"
-                  >ou R$
-                  <span class="number">{{ prices.kit.creditCard }} </span> via
-                  cartão de crédito à vista</span
-                >
-              </div>
-            </v-img>
-          </div>
-        </template>
-        <template #right>
-          <div class="d-flex flex-column align-center align-md-start py-4">
-            <h1 class="mb-4 mx-10 mx-md-0 txtBlack">Kit Bixe</h1>
-            <div class="mx-10 mx-md-0 txtBlack desc">
-              <p>
-                Estar no primeiro semestre da faculdade é um momento repleto de
-                novas experiências e desafios. E para te ajudar a aproveitar ao
-                máximo essa fase, apresentamos o nosso incrível
-                <strong>Kit Bixe</strong>: Um conjunto elaborado com tudo o que
-                um estudante precisa para iniciar essa etapa. Nossos kits
-                oferecem itens-chave de materiais de estudo e outros produtos
-                gerais que são úteis para o dia a dia, tais como:
-              </p>
-              <ul class="mb-2">
-                <li>Caderno</li>
-                <li>Estojo</li>
-                <li>Camiseta</li>
-                <li>Caneca</li>
-                <li>Sacochila</li>
-                <li>Chaveiro</li>
-                <li>Cordão para cartão de ônibus</li>
-              </ul>
-              <p>
-                O Kit bixe pode ser encomendado previamente, utilizando o botão
-                abaixo, ou no estande presencial da Comissão durante a semana de
-                recepção, enquanto durarem os estoques! Caso você não tenha
-                interesse em adquirir todos os itens em conjunto, também é
-                possível adquiri-los separadamente ao longo da semana de
-                recepção.
-              </p>
-              <p>
-                Além disso, temos a iniciativa do Kit bixe acessível — uma forma
-                gratuita de adquirir o produto, destinado exclusivamente aos
-                ingressantes de baixa renda, que pode ser solicitado de acordo
-                com um comprovante de condição socioeconômica. Esses kits são
-                limitados e distribuídos de acordo com a ordem de solicitação.
-              </p>
-            </div>
             <div
-              class="d-flex flex-column flex-sm-row align-center mx-10 buttons mx-md-0 mt-6"
+              class="pa-5 rounded-circle d-flex flex-column align-center justify-center priceKit txtWhite bgRed"
             >
-              <Button :href="links.formsKit" target="_blank"
-                >Encomende seu kit</Button
+              <span class="bigValue"
+                >R$ <span class="number">{{ prices.kit.regular }}</span></span
               >
-              <Button :href="links.formsAffordableKit" target="_blank"
-                >Solicite seu kit acessível</Button
+              <span class="text-center"
+                >ou R$
+                <span class="number">{{ prices.kit.creditCard }} </span> via
+                cartão de crédito à vista</span
               >
             </div>
+          </v-img>
+        </div>
+      </template>
+      <template #right>
+        <div class="d-flex flex-column align-center align-md-start py-4">
+          <h1 class="mb-4 mx-10 mx-md-0 txtBlack">Kit Bixe</h1>
+          <div class="mx-10 mx-md-0 txtBlack desc">
+            <p>
+              Estar no primeiro semestre da faculdade é um momento repleto de
+              novas experiências e desafios. E para te ajudar a aproveitar ao
+              máximo essa fase, apresentamos o nosso incrível
+              <strong>Kit Bixe</strong>: Um conjunto elaborado com tudo o que um
+              estudante precisa para iniciar essa etapa. Nossos kits oferecem
+              itens-chave de materiais de estudo e outros produtos gerais que
+              são úteis para o dia a dia, tais como:
+            </p>
+            <ul class="mb-2">
+              <li>Caderno</li>
+              <li>Estojo</li>
+              <li>Camiseta</li>
+              <li>Caneca</li>
+              <li>Sacochila</li>
+              <li>Chaveiro</li>
+              <li>Cordão para cartão de ônibus</li>
+            </ul>
+            <p>
+              O Kit bixe pode ser encomendado previamente, utilizando o botão
+              abaixo, ou no estande presencial da Comissão durante a semana de
+              recepção, enquanto durarem os estoques! Caso você não tenha
+              interesse em adquirir todos os itens em conjunto, também é
+              possível adquiri-los separadamente ao longo da semana de recepção.
+            </p>
+            <p>
+              Além disso, temos a iniciativa do Kit bixe acessível — uma forma
+              gratuita de adquirir o produto, destinado exclusivamente aos
+              ingressantes de baixa renda, que pode ser solicitado de acordo com
+              um comprovante de condição socioeconômica. Esses kits são
+              limitados e distribuídos de acordo com a ordem de solicitação.
+            </p>
           </div>
-        </template>
-      </PageBar>
-      <PageBar align-row="center" align-col="start">
-        <template #left>
-          <div class="d-flex justify-center">
-            <v-img
-              class="kitImg"
-              src="/bottons.png"
-              alt="Bottons"
-              :max-width="bottonsSize"
+          <div
+            class="d-flex flex-column flex-sm-row align-center mx-10 buttons mx-md-0 mt-6"
+          >
+            <Button :href="links.formsKit" target="_blank"
+              >Encomende seu kit</Button
+            >
+            <Button :href="links.formsAffordableKit" target="_blank"
+              >Solicite seu kit acessível</Button
             >
-              <div
-                class="pa-5 rounded-circle d-flex flex-column align-center justify-center priceBottons txtWhite bgRed"
-              >
-                <span class="bigValue"
-                  >R$ <span class="number">{{ prices.bottons }}</span></span
-                >
-                <span class="text-center">por unidade</span>
-              </div>
-            </v-img>
           </div>
-        </template>
-        <template #right>
-          <div class="d-flex flex-column align-center align-md-start py-4">
-            <h1 class="mb-4 mx-10 mx-md-0 txtBlack">Bottons</h1>
-            <div class="mx-10 mx-md-0 txtBlack desc">
-              <p>
-                Agora que você é IMEane, é hora de mostrar para o mundo! Com
-                nossos bottons, você pode personalizar mochilas, jaquetas e
-                camisetas, além de colecioná-los para usar de acordo com o seu
-                humor do dia. São 8 modelos diferentes, cada um com uma estampa
-                exclusiva, que você pode adquirir separadamente ou em conjunto,
-                apenas durante a semana de recepção, no estande da Comissão. As
-                unidades são limitadas, então garanta o seu o quanto antes!
-              </p>
+        </div>
+      </template>
+    </PageBar>
+    <PageBar align-row="center" align-col="start">
+      <template #left>
+        <div class="d-flex justify-center">
+          <v-img
+            class="kitImg"
+            src="/bottons.png"
+            alt="Bottons"
+            :max-width="bottonsSize"
+          >
+            <div
+              class="pa-5 rounded-circle d-flex flex-column align-center justify-center priceBottons txtWhite bgRed"
+            >
+              <span class="bigValue"
+                >R$ <span class="number">{{ prices.bottons }}</span></span
+              >
+              <span class="text-center">por unidade</span>
             </div>
+          </v-img>
+        </div>
+      </template>
+      <template #right>
+        <div class="d-flex flex-column align-center align-md-start py-4">
+          <h1 class="mb-4 mx-10 mx-md-0 txtBlack">Bottons</h1>
+          <div class="mx-10 mx-md-0 txtBlack desc">
+            <p>
+              Agora que você é IMEane, é hora de mostrar para o mundo! Com
+              nossos bottons, você pode personalizar mochilas, jaquetas e
+              camisetas, além de colecioná-los para usar de acordo com o seu
+              humor do dia. São 8 modelos diferentes, cada um com uma estampa
+              exclusiva, que você pode adquirir separadamente ou em conjunto,
+              apenas durante a semana de recepção, no estande da Comissão. As
+              unidades são limitadas, então garanta o seu o quanto antes!
+            </p>
           </div>
-        </template>
-      </PageBar>
-    </v-col>
-  </v-row>
+        </div>
+      </template>
+    </PageBar>
+  </div>
 </template>
 
 <script>