Updating content in many pages.

DemocraciaEnRed · Dec 18, 2024 · 63d67c4 · 63d67c4
1 parent 741e4c9
commit 63d67c4
Show file tree

Hide file tree

Showing 15 changed files with 486 additions and 275 deletions.
diff --git a/assets/css/navbar.css b/assets/css/navbar.css
@@ -1,5 +1,5 @@
 #navbar .navbar-item{
-  @apply text-white font-medium flex items-center;
+  @apply text-white font-medium flex flex-col items-center text-center;
   &:hover{
     @apply text-pumpkin-400;
   }

diff --git a/components/TheFooter.vue b/components/TheFooter.vue
@@ -6,17 +6,17 @@
   <footer class="the-footer">
     <div class="starbg"/>
     <UContainer class="the-content">
-      <div class="flex justify-center items-center my-5">
+      <div class="flex justify-center items-center my-5 flex-col md:flex-row space-y-5 md:space-y-0">
         <img src="/img/incidir-para-existir-logo.png" alt="Incidir Para Existir" class="h-10 px-6">
         <img src="/img/undef-logo.png" alt="UNDEF" class="h-11 px-6">
         <img src="/img/movilizatorio-logo.png" alt="Movilizatorio" class="h-8 px-6">
       </div>
       <hr>
-      <div class="flex justify-between items-center my-5">
-        <div class="w-1/4 text-center">¿Quienes somos?</div>
-        <div class="w-1/4 text-center">¿Quieres unirte y ser un agente de cambio?</div>
-        <div class="w-1/4 text-center">¿Quieres conocer/reportar los desafios de la juventud?</div>
-        <div class="w-1/4 text-center">¿En qué está la juventud?</div>
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-5 my-10 font-oswald uppercase">
+        <NuxtLink to="/quienes-somos" class="text-center hover:text-mindaro">¿Quiénes somos?</NuxtLink>
+        <NuxtLink to="/iniciativas" class="text-center hover:text-mindaro">Iniciativas de la juventud</NuxtLink>
+        <NuxtLink to="/desafios" class="text-center hover:text-mindaro">Desafios de la juventud</NuxtLink>
+        <NuxtLink to="/noticias" class="text-center hover:text-mindaro">¿En qué está la juventud?</NuxtLink>
       </div>
     </UContainer>
   </footer>

diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
@@ -17,17 +17,17 @@ const handleLogout = async () => {
   <nav id="navbar" class="bg-primary-800 py-4 rounded-br-2xl rounded-bl-2xl">
     <UContainer>
       <div class="flex justify-between items-center">
-        <NuxtLink to="/" class="">
-          <img src="/img/incidir-para-existir-logo.png" alt="Incidir para existir" class="h-12" >
+        <NuxtLink to="/" class="flex-1">
+          <img src="/img/incidir-para-existir-logo.png" alt="Incidir para existir" class="h-12 w-auto mx-auto md:mr-auto" >
         </NuxtLink>
-        <div class="flex space-x-3">
+        <div class="hidden md:flex items-center space-x-5 font-oswald uppercase">
           <NuxtLink to="/" class="navbar-item">Inicio</NuxtLink>
           <NuxtLink to="/quienes-somos" class="navbar-item">¿Quienes Somos?</NuxtLink>
-          <NuxtLink to="/iniciativas" class="navbar-item">Iniciativas de la juventud</NuxtLink>
-          <NuxtLink to="/desafios" class="navbar-item">Desafios de la juventud</NuxtLink>
-          <NuxtLink to="/noticias" class="navbar-item">Noticias </NuxtLink>
+          <NuxtLink to="/iniciativas" class="navbar-item leading-none text-center">Iniciativas<br><span class="text-sm font-normal">de la juventud</span></NuxtLink>
+          <NuxtLink to="/desafios" class="navbar-item leading-none text-center">Desafios<br><span class="text-sm font-normal">de la juventud</span></NuxtLink>
+          <NuxtLink to="/noticias" class="navbar-item">Noticias</NuxtLink>
           <UButton to="https://www.instagram.com/movilizatorio" target="_blank" color="mindaro" :ui="{ rounded: 'rounded-full' }">Contactános</UButton>
-          <UButton v-if="!loggedIn" to="/login" color="orange" variant="solid" icon="i-heroicons-arrow-left-end-on-rectangle-16-solid">Ingresa</UButton>
+          <UButton v-if="!loggedIn" to="/login" color="orange" variant="solid" :ui="{ rounded: 'rounded-full' }" icon="i-heroicons-arrow-left-end-on-rectangle-16-solid">Ingresa</UButton>
           <UButton v-if="loggedIn" color="orange" variant="solid" icon="i-heroicons-arrow-left-start-on-rectangle-16-solid" @click="handleLogout">Salir</UButton>
           <!-- <NuxtLink v-if="!loggedIn" to="/login" class="navbar-item">
             Ingresa<UIcon name="i-heroicons-arrow-left-end-on-rectangle-16-solid" class="size-6 ml-2" />

diff --git a/components/quienesSomos/Reel.vue b/components/quienesSomos/Reel.vue
@@ -60,24 +60,21 @@ const openModal = (item) => {
       <div class="w-full md:w-1/3">
         <img :src="theImage" class="w-full rounded-br-xl rounded-tl-xl" draggable="false">
         <div class="p-2">
-          <div class="flex justify-center text-3xl gap-3 mt-5">
-            <a v-if="theInstagram" :href="theInstagram" target="_blank" class="text-pumpkin-500">
-              <UIcon name="i-fa6-brands-instagram" size="lg" />
-            </a>
-            <a v-if="theFacebook" :href="theFacebook" target="_blank" class="text-pumpkin-500">
-              <UIcon name="i-fa6-brands-instagram" size="lg" />
-            </a>
-            <a v-if="theTwitter" :href="theTwitter" target="_blank" class="text-pumpkin-500">
-              <UIcon name="i-fa6-brands-x-twitter" size="lg" />
-            </a>
-            <a v-if="theLinkedin" :href="theLinkedin" target="_blank" class="text-pumpkin-500">
-              <UIcon name="i-fa6-brands-linkedin" size="lg" />
-            </a>
+          <div class="flex justify-center gap-3 my-5">
+            <UButton v-if="theInstagram" :to="theInstagram" target="_blank" color="mindaro" icon="i-fa6-brands-instagram" size="lg" class="px-3 rounded-full" />
+            <UButton v-if="theFacebook" :to="theFacebook" target="_blank" color="mindaro" icon="i-fa6-brands-facebook" size="lg" class="px-3 rounded-full" />
+            <UButton v-if="theTwitter" :to="theTwitter" target="_blank" color="mindaro" icon="i-fa6-brands-twitter" size="lg" class="px-3 rounded-full" />
+            <UButton v-if="theLinkedin" :to="theLinkedin" target="_blank" color="mindaro" icon="i-fa6-brands-linkedin" size="lg" class="px-3 rounded-full" />
+          </div>
+          <div class="flex justify-center">
+            <UButton color="pumpkin" variant="outline" size="lg" class="px-3 rounded-full" @click="isModalOpen = false">
+              Cerrar
+            </UButton>
           </div>
         </div>
       </div>
       <div class="w-full md:w-2/3 p-4 lg:p-6">
-        <h3 class="font-bold text-4xl mb-2">{{ theName }}</h3>
+        <h3 class="font-bold text-4xl mb-2 text-mindaro">{{ theName }}</h3>
         <p>{{ theBio }}</p>
       </div>
     </div>

diff --git a/components/quienesSomos/ReelMovilizatorio.vue b/components/quienesSomos/ReelMovilizatorio.vue
@@ -53,24 +53,22 @@ const openModal = (item) => {
         <div class="w-full md:w-1/3">
           <img :src="theImage" class="w-full rounded-br-xl rounded-tl-xl" draggable="false">
           <div class="p-2">
-            <div class="flex justify-center text-3xl gap-3 mt-5">
-              <a v-if="theInstagram" :href="theInstagram" target="_blank" class="text-pumpkin-500">
-                <UIcon name="i-fa6-brands-instagram" size="lg" />
-              </a>
-              <a v-if="theFacebook" :href="theFacebook" target="_blank" class="text-pumpkin-500">
-                <UIcon name="i-fa6-brands-instagram" size="lg" />
-              </a>
-              <a v-if="theTwitter" :href="theTwitter" target="_blank" class="text-pumpkin-500">
-                <UIcon name="i-fa6-brands-x-twitter" size="lg" />
-              </a>
-              <a v-if="theLinkedin" :href="theLinkedin" target="_blank" class="text-pumpkin-500">
-                <UIcon name="i-fa6-brands-linkedin" size="lg" />
-              </a>
+            <div class="flex justify-center text-3xl gap-3 my-5">
+              <UButton v-if="theInstagram" :to="theInstagram" target="_blank" color="mindaro" icon="i-fa6-brands-instagram" size="lg" class="px-3 rounded-full" />
+              <UButton v-if="theFacebook" :to="theFacebook" target="_blank" color="mindaro" icon="i-fa6-brands-facebook" size="lg" class="px-3 rounded-full" />
+              <UButton v-if="theTwitter" :to="theTwitter" target="_blank" color="mindaro" icon="i-fa6-brands-twitter" size="lg" class="px-3 rounded-full" />
+              <UButton v-if="theLinkedin" :to="theLinkedin" target="_blank" color="mindaro" icon="i-fa6-brands-linkedin" size="lg" class="px-3 rounded-full" />
             </div>
+            <!-- close button -->
+            <div class="flex justify-center">
+              <UButton color="pumpkin" variant="outline" size="lg" class="px-3 rounded-full" @click="isModalOpen = false">
+                Cerrar
+              </UButton>
+            </div>  
           </div>
         </div>
         <div class="w-full md:w-2/3 p-4 lg:p-6">
-          <h3 class="font-bold text-4xl mb-2">{{ theName }}</h3>
+          <h3 class="font-bold text-4xl mb-2 text-mindaro">{{ theName }}</h3>
           <p>{{ theBio }}</p>
         </div>
       </div>