navbar component and some main.css changes

assets/css/main.css

@@ -35,12 +35,79 @@
   --color-error: #B40502;
   --color-success: #039B65;
 
-  /* Breakpoints */
-  --breakpoint-large: 480rem; /* Super desktop 1920px */
-
   /* Font sizes */
   --text-5.5: 1.375rem; /* 22px */
   --text-8: 2rem; /* 32px */
+
+  /* Shadow */
+  --shadow-button: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+}
+
+
+/* Breakpoints */
+/* Desktop < 1920px; */
+/* Tablet < 1024px; */
+/* Mobile < 640px; */
+
+/* Super desktop */
+@media screen and (min-width: 1920px) {
+  :root {
+    --default-font-size: var(--font-size-lg); /* 18px */
+    --layout-padding-x: 2rem; /* 32px */
+
+    --font-size-Hero: 48px;
+    --font-size-H1: 48px;
+    --font-size-H2: 36px;
+    --font-size-H3: 32px;
+    --font-size-H4: 22px;
+    --font-size-H5: 16px;
+    --font-size-2xl: 24px;
+    --font-size-lg: 18px;
+    --font-size-base: 16px;
+    --font-size-sm: 14px;
+    --font-size-xs: 12px;
+    --font-size-button-base: 16px;
+  }
+}
+/* Tablet */
+@media screen and (max-width: 1023px) {
+  :root {
+    --default-font-size: var(--font-size-lg); /* 16px */
+    --layout-padding-x: 1rem; /* 16px */
+
+    --font-size-Hero: 40px;
+    --font-size-H1: 40px;
+    --font-size-H2: 32px;
+    --font-size-H3: 24px;
+    --font-size-H4: 22px;
+    --font-size-H5: 16px;
+    --font-size-2xl: 20px;
+    --font-size-lg: 16px;
+    --font-size-base: 16px;
+    --font-size-sm: 14px;
+    --font-size-xs: 12px;
+    --font-size-button-base: 14px;
+  }
+}
+/* Mobile */
+@media screen and (max-width: 640px) {
+  :root {
+    --default-font-size: var(--font-size-lg); /* 16px */
+    --layout-padding-x: 0.5rem; /* 8px */
+
+    --font-size-Hero: 32px;
+    --font-size-H1: 32px;
+    --font-size-H2: 30px;
+    --font-size-H3: 24px;
+    --font-size-H4: 22px;
+    --font-size-H5: 16px;
+    --font-size-2xl: 18px;
+    --font-size-lg: 16px;
+    --font-size-base: 16px;
+    --font-size-sm: 14px;
+    --font-size-xs: 12px;
+    --font-size-button-base: 14px;
+  }
 }
 
 @font-face {
@@ -86,9 +153,11 @@
 html,
 body {
   font-family: var(--font-barlow);
-  font-size: 18px;
+  font-size: var(--default-font-size, 16px);
   height: 100dvh;
   color: var(--color-black);
+  margin: 0 var(--layout-padding-x, 32px);
+  background-color: var(--color-background-extra-light);
 }
 
 body footer {
@@ -111,3 +180,12 @@ html {
 .body-overflow-hidden {
   overflow: hidden;
 }
+
+.bg-gradient-conic {
+  background: conic-gradient(
+    from 179deg at -5.88% 52.83%, 
+    var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg, 
+    var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg, 
+    var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg), 
+    var(--Background--bg-light, #F9F4F2);
+}

components/ButtonCTA.vue

@@ -0,0 +1,51 @@
+<template>
+  <button type="button" class="flex items-center justify-center cursor-pointer"
+    :disabled="disabled" :class="buttonClasses" @click="handleClick">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: "button",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "md",
+    }
+  },
+  computed: {
+    buttonClasses() {
+      return {
+        "px-3.5 py-2 gap-x-2 text-sm": this.size === "sm",
+        "px-4 py-2.5 gap-x-2 text-sm": this.size === "md",
+        "px-6 py-4 gap-x-1 text-md": this.size === "lg",
+
+        "bg-button hover:bg-button-hover text-white rounded-xl shadow-button":
+          this.color === "button" && !this.disabled,
+        "cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
+          this.color === "button" && this.disabled,
+
+        "bg-aula-base hover:bg-button hover:text-white rounded-xl shadow-button":
+          this.color === "aula-base" && !this.disabled,
+        "cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
+          this.color === "aula-base" && this.disabled,
+      };
+    }
+  },
+  methods: {
+    handleClick($ev) {
+      if (this.disabled) {
+        $ev.stopPropagation();
+      }
+    },
+  },
+};
+</script>

components/NavBar.vue

@@ -0,0 +1,124 @@
+<template>
+  <nav class="relative">
+    <div class="mx-auto flex justify-between items-center h-20">
+      <!-- Logo -->
+      <NuxtLink to="/">
+        <img
+          width="121.22628021240234"
+          height="48"
+          alt="logo-kit-economia-social"
+          src="/assets/img/LOGO-KIT_horizontal_positivo_color.jpg"
+        />
+      </NuxtLink>
+
+      <!-- Desktop menu -->
+      <ul class="hidden lg:flex items-center gap-6 font-semibold text-sm">
+        <li><NuxtLink to="/" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">INICIO</NuxtLink></li>
+        <li><NuxtLink to="/nosotras" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">NOSOTRAS</NuxtLink></li>
+
+        <!-- Dropdown -->
+        <li class="relative" ref="dropdownRef">
+          <button 
+            class="hover:bg-button-hover hover:text-white p-2 rounded-lg cursor-pointer"
+            @click="handleDropdown">
+            HERRAMIENTAS
+          </button>
+          <transition
+            enter-active-class="transition duration-300 ease-out"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-200 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+          >
+            <ul
+              v-show="dropdownOpen"
+              class="absolute right-0 mt-2 w-56 bg-white rounded-3xl shadow-lg p-4 space-y-2 z-50 text-sm text-center"
+            >
+              <li><NuxtLink to="/consumo" class="block hover:bg-button hover:text-white px-2 py-1 rounded-t-2xl">CONSUMO CUIDADO</NuxtLink></li>
+              <li><NuxtLink to="/aula-virtual" class="block hover:bg-button hover:text-white px-2 py-1">AULA VIRTUAL</NuxtLink></li>
+              <li><NuxtLink to="/iguales" class="block hover:bg-button hover:text-white px-2 py-1">IGUALES</NuxtLink></li>
+              <li><NuxtLink to="/ods" class="block hover:bg-button hover:text-white px-2 py-1">ODS</NuxtLink></li>
+              <li><NuxtLink to="/certifica" class="block hover:bg-button hover:text-white px-2 py-1">CERTIFICA-T</NuxtLink></li>
+              <li><NuxtLink to="/foro" class="block hover:bg-button hover:text-white px-2 py-1 rounded-b-2xl">FORO</NuxtLink></li>
+            </ul>
+          </transition>
+        </li>
+
+        <!-- CTA -->
+        <li>
+          <NuxtLink to="/aula" >
+            <ButtonCTA color="aula-base" size="lg">
+              AULA VIRTUAL
+            </ButtonCTA>
+          </NuxtLink>
+        </li>
+      </ul>
+
+      <!-- Mobile menu toggle -->
+      <button 
+        class="lg:hidden focus:outline-none"
+        @click="handleMenu">
+          <svg v-if="!menuIsOpen" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18"/><path d="M3 18h18"/><path d="M3 6h18"/></svg>
+          <svg v-if="menuIsOpen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
+      </button>
+    </div>
+
+    <!-- Mobile menu -->
+    <transition
+      enter-active-class="transition duration-300 ease-out"
+      enter-from-class="opacity-0 translate-x-2"
+      enter-to-class="opacity-100 translate-x-0"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="opacity-100 translate-x-0"
+      leave-to-class="opacity-0 translate-x-2"
+    >
+    <div v-show="menuIsOpen" class="lg:hidden p-5 bg-gradient-conic rounded-3xl min-h-svh">
+        <ul class="space-y-4 text-sm text-end w-fit ml-auto">
+          <li class="p-2"><NuxtLink to="/">INICIO</NuxtLink></li>
+          <li class="p-2"><NuxtLink to="/nosotras">NOSOTRAS</NuxtLink></li>
+          <li class="p-2 border-b">HERRAMIENTAS</li>
+          <li class="p-2"><NuxtLink to="/consumo">CONSUMO CUIDADO</NuxtLink></li>
+          <li class="p-2"><NuxtLink to="/aula">AULA VIRTUAL</NuxtLink></li>
+          <li class="p-2"><NuxtLink to="/iguales">IGUALES</NuxtLink></li>
+          <li class="p-2"><NuxtLink to="/ods">ODS</NuxtLink></li>
+          <li class="p-2"><NuxtLink to="/certifica">CERTIFICA-T</NuxtLink></li>
+          <li class="p-2"><NuxtLink to="/foro">FORO</NuxtLink></li>
+        </ul>
+      </div>
+    </transition>
+  </nav>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      dropdownOpen: false,
+      // mobileMenuOpen: false,
+      menuIsOpen: false,
+    };
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside);
+  },
+  methods: {
+    handleDropdown() {
+      this.dropdownOpen = !this.dropdownOpen;
+    },
+    handleClickOutside(e) {
+      const dropdown = this.$refs.dropdownRef;
+      if (dropdown && !dropdown.contains(e.target)) {
+        this.dropdownOpen = false;
+      }
+    },
+    handleMenu() {
+      this.menuIsOpen = !this.menuIsOpen;
+    }
+  },
+};
+</script>

layouts/default.vue

@@ -1,11 +1,15 @@
 <template>
-  <div>
+  <body>
-    <header></header>
+    <header>
+      <NavBar />
+    </header>
 
     <main>
       <slot />
     </main>
 
-    <footer></footer>
+    <footer>
-  </div>
+      <!-- <Footer /> -->
+    </footer>
+  </body>
 </template>