feat: finish creators page

menthorlabs · Nov 14, 2023 · 61cd6b0 · 61cd6b0
1 parent 2001fb5
commit 61cd6b0
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 29 deletions.
diff --git a/apps/www/components/atoms/Header.vue b/apps/www/components/atoms/Header.vue
@@ -13,8 +13,17 @@ const { data: gitHub } = await useFetch<GitHubRepository>(
   "https://api.github.com/search/repositories?q=menthorlabs/menthor"
 );
 
+const route = useRoute();
+
 const menuOpened = defineModel();
 
+watch(
+  () => route.fullPath,
+  () => {
+    menuOpened.value = false;
+  }
+);
+
 const arrivedState = ref({ top: true });
 
 onMounted(() => {
@@ -61,32 +70,52 @@ onMounted(() => {
         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 }"
       >
-        <div class="flex items-center gap-1">
+        <div
+          class="border-t border-b border-zinc-300 py-2 md:py-0 md:!border-none md:flex items-center gap-1"
+        >
           <nuxt-link to="/creators">
             <AtomsHeaderLink title="Escreva cursos" />
           </nuxt-link>
 
-          <AtomsHeaderLink title="Documentação" />
+          <!-- <AtomsHeaderLink title="Documentação" /> -->
 
-          <VDropdown :distance="6" placement="bottom-end">
+          <VDropdown :distance="6" placement="bottom">
             <AtomsHeaderLink title="Comunidade" chevron />
             <template #popper="{ hide }">
               <div @click="hide()" class="py-2">
-                <AtomsHeaderCardLink
-                  icon="fab fa-discord"
-                  title="Discord"
-                  description="Junte-se a mais de 2000 alunos."
-                />
-                <AtomsHeaderCardLink
-                  icon="fab fa-github"
-                  title="GitHub"
-                  description="Deixe uma estrela e apoie-nos."
-                />
-                <AtomsHeaderCardLink
-                  icon="hand-holding-dollar"
-                  title="Doação"
-                  description="Seja um doador e divulgue sua marca."
-                />
+                <nuxt-link
+                  external
+                  target="_blank"
+                  to="https://discord.gg/8BCByyXxq8"
+                >
+                  <AtomsHeaderCardLink
+                    icon="fab fa-discord"
+                    title="Discord"
+                    description="Junte-se a mais de 2000 alunos."
+                  />
+                </nuxt-link>
+                <nuxt-link
+                  external
+                  target="_blank"
+                  to="https://github.com/menthorlabs/menthor"
+                >
+                  <AtomsHeaderCardLink
+                    icon="fab fa-github"
+                    title="GitHub"
+                    description="Deixe uma estrela e apoie-nos."
+                  />
+                </nuxt-link>
+                <nuxt-link
+                  external
+                  target="_blank"
+                  to="https://pixmeacoffee.vercel.app/menthor"
+                >
+                  <AtomsHeaderCardLink
+                    icon="hand-holding-dollar"
+                    title="Doação"
+                    description="Seja um doador e divulgue sua marca."
+                  />
+                </nuxt-link>
               </div>
             </template>
           </VDropdown>

diff --git a/apps/www/components/atoms/HeaderLink.vue b/apps/www/components/atoms/HeaderLink.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <div
-    class="group h-[32px] py-[6px] px-4 font-medium text-sm text-zinc-700 flex justify-center gap-1 items-center rounded-full hover:bg-zinc-100 hover:text-zinc-950 cursor-pointer"
+    class="group md:h-[32px] p-4 text-base md:py-[6px] md:px-4 font-medium md:text-sm text-zinc-700 flex justify-center gap-1 items-center md:rounded-full hover:bg-zinc-100 hover:text-zinc-950 cursor-pointer"
     :class="{ '!text-zinc-950 is-active': active }"
   >
     <span>{{ title }}</span>

diff --git a/apps/www/components/creators/Action.vue b/apps/www/components/creators/Action.vue
@@ -17,12 +17,19 @@
               escreverem um curso para a menthor terão uma conquista exclusiva
               dentro da plataforma.
             </p>
-            <MButton
-              variant="secondary"
-              text="Torne-se um creator"
-              icon-right="arrow-right"
-              size="lg"
-            />
+            <nuxt-link
+              to="https://nge5la4zlyy.typeform.com/to/nI55iu4u"
+              external
+              target="_blank"
+              class="w-full md:w-fit"
+            >
+              <MButton
+                variant="secondary"
+                text="Inscreva-se agora"
+                icon-right="arrow-right"
+                size="lg"
+              />
+            </nuxt-link>
           </div>
           <div
             class="mx-auto lg:w-[508px] lg:h-[508px] lg:absolute lg:-right-[40px] lg:-top-[69px] aspect-square"

diff --git a/apps/www/components/creators/Hero.vue b/apps/www/components/creators/Hero.vue
@@ -45,12 +45,14 @@
         class="mb-4 flex flex-wrap items-center gap-4 justify-center md:mb-10"
       >
         <nuxt-link
-          :to="`${$config.public.appUrl}sign-up?utm_source=landing_page`"
+          to="https://nge5la4zlyy.typeform.com/to/nI55iu4u"
+          external
+          target="_blank"
           class="w-full md:w-fit"
         >
           <MButton
-            text="Ver como funciona"
-            icon-left="book"
+            text="Torne-se um creator"
+            icon-left="star"
             class="w-full md:w-fit"
             variant="secondary"
             size="lg"

diff --git a/apps/www/components/creators/RevenueShare.vue b/apps/www/components/creators/RevenueShare.vue
@@ -25,7 +25,7 @@
             O dinheiro proveniente de doações, parcerias e outros canais serão
             utilizados para pagar os custos e boa parte do lucro será
             distribuído entre os
-            <strong class="font-semibold text-zinc-950">creators</strong> .
+            <strong class="font-semibold text-zinc-950">creators</strong>.
           </p>
         </div>
       </div>