feat: improve website

menthorlabs · Sep 23, 2023 · fab133d · fab133d
1 parent 981edc3
commit fab133d
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 78 deletions.
diff --git a/apps/app/pages/index.vue b/apps/app/pages/index.vue
@@ -37,7 +37,11 @@ useSeoMeta({
           v-for="item of navigation"
           :key="item._path"
           :nav-item="item"
-          :href="item.children[0].children[0]._path"
+          :href="
+            item.children && item.children[0].children
+              ? item.children[0].children[0]._path
+              : ''
+          "
         >
           <CourseCard
             :title="item.title"

diff --git a/apps/www/components/home/WhyUs.vue b/apps/www/components/home/WhyUs.vue
@@ -200,11 +200,21 @@ const stacks: { logo: string; name: string; link: string }[] = [
             <h3 class="relative mb-6">Networking com todo o Brasil</h3>
           </div>
           <div
-            class="hidden min-h-[200px] items-center justify-center overflow-hidden rounded-lg border border-solid border-zinc-200 p-6 text-3xl font-semibold lg:flex"
+            class="relative hidden min-h-[200px] overflow-hidden rounded-lg border border-solid border-zinc-200 py-6 px-8 text-3xl font-semibold lg:flex items-end text-right"
           >
-            <span class="text-sm font-normal text-zinc-500"
-              >Ainda quer mais?</span
-            >
+            <div class="absolute top-0 left-0 w-full h-[99px]">
+              <nuxt-img
+                loading="lazy"
+                src="/vectors/courses.svg"
+                alt="Lista de cursos da plataforma menthor.io"
+                width="354"
+                height="99"
+                class="w-full h-full object-cover object-center"
+              />
+            </div>
+            <h3 class="block text-3xl font-semibold">
+              Cursos escritos por devs experientes
+            </h3>
           </div>
         </div>
       </div>

diff --git a/apps/www/layouts/default.vue b/apps/www/layouts/default.vue
@@ -78,7 +78,7 @@ onMounted(() => {
 <template>
   <main class="font-sans" :class="{ 'mt-[60px] md:mt-0': menuOpened }">
     <header
-      class="top-0 z-10 flex w-full flex-col items-center justify-between md:container md:flex-row md:py-[11.5px] blur-performance"
+      class="top-0 z-10 blur-performance w-full"
       :class="{
         'fixed h-screen bg-zinc-300/40 backdrop-blur-sm md:sticky md:h-fit md:bg-inherit md:backdrop-blur-none':
           menuOpened,
@@ -88,85 +88,97 @@ onMounted(() => {
       }"
     >
       <div
-        class="relative flex w-full justify-between px-4 py-[16px] md:w-fit md:px-0 md:py-0"
+        class="md:container flex w-full flex-col items-center justify-between md:flex-row md:py-[11.5px]"
       >
-        <nuxt-img
-          loading="lazy"
-          class="h-[28px] w-auto"
-          src="/brand/menthor-logo-dark.svg"
-          alt="Menthor logo"
-          height="28"
-          width="155"
-        />
         <div
-          class="absolute right-0 top-0 flex h-full w-[60px] cursor-pointer items-center justify-center md:hidden"
-          @click="menuOpened = !menuOpened"
+          class="relative flex w-full justify-between px-4 py-[16px] md:w-fit md:px-0 md:py-0"
         >
-          <font-awesome-icon v-show="!menuOpened" icon="bars" class="text-xl" />
-          <font-awesome-icon v-show="menuOpened" icon="times" class="text-xl" />
+          <nuxt-img
+            loading="lazy"
+            class="h-[28px] w-auto"
+            src="/brand/menthor-logo-dark.svg"
+            alt="Menthor logo"
+            height="28"
+            width="155"
+          />
+          <div
+            class="absolute right-0 top-0 flex h-full w-[60px] cursor-pointer items-center justify-center md:hidden"
+            @click="menuOpened = !menuOpened"
+          >
+            <font-awesome-icon
+              v-show="!menuOpened"
+              icon="bars"
+              class="text-xl"
+            />
+            <font-awesome-icon
+              v-show="menuOpened"
+              icon="times"
+              class="text-xl"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="w-full flex-1 gap-6 space-y-4 p-4 md:flex md:h-fit md:items-center md:justify-end md:space-y-0 md:p-0"
-        :class="{ block: menuOpened, hidden: !menuOpened }"
-      >
-        <nuxt-link
-          to="https://github.com/menthorlabs/menthor"
-          target="_blank"
-          external
-          class="group flex w-full cursor-pointer items-center justify-center gap-2 text-zinc-700 no-underline hover:text-zinc-900 md:w-fit"
+        <div
+          class="w-full flex-1 gap-6 space-y-4 p-4 md:flex md:h-fit md:items-center md:justify-end md:space-y-0 md:p-0"
+          :class="{ block: menuOpened, hidden: !menuOpened }"
         >
-          <font-awesome-icon :icon="['fab', 'github']" class="text-xl" />
-          <div>
-            <div class="text-[13px]">menthorlabs/menthor</div>
-            <div class="flex items-center gap-2">
-              <div class="flex items-center gap-1 text-xs">
-                <font-awesome-icon icon="star" />
-                <span>{{ gitHub?.items[0].stargazers_count }}</span>
-              </div>
-              <div
-                class="flex items-center gap-1 text-xs text-zinc-600 group-hover:text-zinc-800"
-              >
-                <font-awesome-icon icon="code-fork" />
-                <span>{{ gitHub?.items[0].forks_count }}</span>
+          <nuxt-link
+            to="https://github.com/menthorlabs/menthor"
+            target="_blank"
+            external
+            class="group flex w-full cursor-pointer items-center justify-center gap-2 text-zinc-700 no-underline hover:text-zinc-900 md:w-fit"
+          >
+            <font-awesome-icon :icon="['fab', 'github']" class="text-xl" />
+            <div>
+              <div class="text-[13px]">menthorlabs/menthor</div>
+              <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1 text-xs">
+                  <font-awesome-icon icon="star" />
+                  <span>{{ gitHub?.items[0].stargazers_count }}</span>
+                </div>
+                <div
+                  class="flex items-center gap-1 text-xs text-zinc-600 group-hover:text-zinc-800"
+                >
+                  <font-awesome-icon icon="code-fork" />
+                  <span>{{ gitHub?.items[0].forks_count }}</span>
+                </div>
               </div>
             </div>
-          </div>
-        </nuxt-link>
-        <nuxt-link
-          class="hidden md:block"
-          to="https://discord.gg/8BCByyXxq8"
-          target="_blank"
-          external
-        >
-          <MIconButton icon="fa-brands fa-discord" />
-        </nuxt-link>
-        <nuxt-link
-          class="block md:hidden"
-          to="https://discord.gg/8BCByyXxq8"
-          target="_blank"
-          external
-        >
-          <MButton
-            icon-left="fa-brands fa-discord"
-            text="Entre no discord"
-            variant="outline"
-            size="sm"
-            class="w-full md:w-fit"
-          />
-        </nuxt-link>
-        <nuxt-link
-          class="block"
-          :to="`${$config.public.appUrl}sign-in?utm_source=landing_page`"
-        >
-          <MButton
-            icon-right="arrow-right"
-            text="Acessar plataforma"
-            variant="secondary"
-            size="sm"
-            class="w-full md:w-fit"
-          />
-        </nuxt-link>
+          </nuxt-link>
+          <nuxt-link
+            class="hidden md:block"
+            to="https://discord.gg/8BCByyXxq8"
+            target="_blank"
+            external
+          >
+            <MIconButton icon="fa-brands fa-discord" />
+          </nuxt-link>
+          <nuxt-link
+            class="block md:hidden"
+            to="https://discord.gg/8BCByyXxq8"
+            target="_blank"
+            external
+          >
+            <MButton
+              icon-left="fa-brands fa-discord"
+              text="Entre no discord"
+              variant="outline"
+              size="sm"
+              class="w-full md:w-fit"
+            />
+          </nuxt-link>
+          <nuxt-link
+            class="block"
+            :to="`${$config.public.appUrl}sign-in?utm_source=landing_page`"
+          >
+            <MButton
+              icon-right="arrow-right"
+              text="Acessar plataforma"
+              variant="secondary"
+              size="sm"
+              class="w-full md:w-fit"
+            />
+          </nuxt-link>
+        </div>
       </div>
     </header>
     <slot />