feat: starts to add creators page

apps/www/components/atoms/InfoCard.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string;
+  title: string;
+  description: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="relative min-w-[80%] overflow-hidden rounded-lg border border-solid border-zinc-200 bg-white px-6 pb-8 pt-20 first:ml-4 last:mr-4 md:min-w-0 md:first:ml-0 md:last:mr-0"
+  >
+    <div
+      class="pointer-events-none absolute -right-[836px] -top-[448px] flex h-[651px] w-[1314px] justify-center"
+    >
+      <div class="mask-radial h-full w-full bg-pattern" />
+    </div>
+    <div class="relative">
+      <div
+        class="mb-4 flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-zinc-300 text-sm text-zinc-700"
+      >
+        <font-awesome-icon :icon="icon" />
+      </div>
+      <h3 class="text-lg font-medium">{{ title }}</h3>
+      <p class="text-base font-normal text-zinc-600">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

apps/www/components/creators/Hero.vue

@@ -0,0 +1,62 @@
+<template>
+  <section
+    id="creators_hero"
+    class="max-w-[1440px] mx-auto relative min-h-[664px]"
+  >
+    <div class="absolute left-0 top-0 flex h-full w-full justify-center">
+      <div class="mask-radial h-full max-w-[1110px] w-full">
+        <nuxt-img
+          src="/patterns/tech-stacks.svg"
+          width="1110"
+          height="790"
+          class="block h-full w-full object-cover object-center"
+        />
+      </div>
+      <div class="absolute left-0 top-0 flex justify-center w-full h-full">
+        <nuxt-img
+          loading="lazy"
+          src="/blobs/creators.svg"
+          class="block h-full max-h-[651px] w-full max-w-[1314px] object-contain object-center"
+          alt="Menthor hero blobs"
+          width="1314"
+          height="651"
+        />
+      </div>
+      <div class="absolute top-0 left-0 flex justify-center w-full h-full">
+        <div
+          class="w-full h-full max-w-[983px] max-h-[485px] rounded-[983px] bg-[radial-gradient(50%_50%_at_50%_50%,_rgba(255,_255,_255,_0.70)_68.75%,_rgba(255,_255,_255,_0.00)_100%)] mt-[31px]"
+        ></div>
+      </div>
+    </div>
+    <div class="container relative pt-24">
+      <h1
+        class="mx-auto mb-6 max-w-[844px] text-4xl font-extrabold md:text-center md:text-5xl"
+      >
+        Escreva cursos para a comunidade e ganhe recompensas
+      </h1>
+      <p
+        class="mx-auto mb-16 max-w-[844px] text-lg text-zinc-700 md:mb-10 md:text-center"
+      >
+        Torne-se um <span class="font-semibold text-zinc-950">creator</span> e
+        divulgue seu conhecimento para mais de 2000 alunos. Os lucros
+        provenientes da plataforma serão distribuído para todos os creators.
+      </p>
+      <div
+        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`"
+          class="w-full md:w-fit"
+        >
+          <MButton
+            text="Leia a documentação"
+            icon-left="book"
+            class="w-full md:w-fit"
+            variant="secondary"
+            size="lg"
+          />
+        </nuxt-link>
+      </div>
+    </div>
+  </section>
+</template>

apps/www/components/creators/HowItWorks.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+interface card {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+const cards: card[] = [
+  {
+    icon: "keyboard",
+    title: "Aulas em markdown",
+    description: "Utilize seu próprio editor de texto para escrever as aulas.",
+  },
+  {
+    icon: "spell-check",
+    title: "Controle de qualidade",
+    description:
+      "Siga os padrões da menthor e escreva cursos de alta qualidade.",
+  },
+  {
+    icon: "lightbulb",
+    title: "Foco na criação",
+    description:
+      "Preocupe-se em escrever cursos, as dúvidas dos alunos a gente resolve.",
+  },
+];
+</script>
+
+<template>
+  <section id="how_it_works" class="my-20 md:my-32">
+    <div class="container">
+      <h2
+        class="mx-auto mb-6 max-w-[664px] text-3xl font-bold md:text-center md:text-4xl"
+      >
+        Como funciona a criação de cursos?
+      </h2>
+      <p
+        class="mx-auto mb-10 max-w-[664px] text-zinc-700 md:text-center md:text-lg"
+      >
+        A menthor é uma plataforma totalmente gratuita e open-source, todos os
+        nossos cursos estão
+        <nuxt-link
+          to="https://github.com/menthorlabs/courses"
+          external
+          target="_blank_"
+          class="link"
+          >disponíveis no GitHub</nuxt-link
+        >
+        com a licensa MIT.
+      </p>
+      <div
+        class="-ml-4 mb-12 flex w-[calc(100%_+_2rem)] flex-nowrap gap-4 overflow-x-auto md:grid md:w-full md:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] md:gap-6 md:overflow-x-hidden"
+      >
+        <AtomsInfoCard
+          v-for="card in cards"
+          :key="card.title"
+          :title="card.title"
+          :description="card.description"
+          :icon="card.icon"
+        />
+      </div>
+      <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-6">
+        <nuxt-link
+          to="https://discord.gg/8BCByyXxq8"
+          target="_blank"
+          external
+          class="block w-full sm:w-fit"
+        >
+          <MButton
+            variant="outline"
+            text="Acessar comunidade"
+            :icon-left="['fab', 'discord']"
+            size="lg"
+            class="w-full"
+          />
+        </nuxt-link>
+      </div>
+    </div>
+  </section>
+</template>

apps/www/components/home/HowItWorks.vue

@@ -45,28 +45,13 @@ const cards: card[] = [
       <div
         class="-ml-4 mb-12 flex w-[calc(100%_+_2rem)] flex-nowrap gap-4 overflow-x-auto md:grid md:w-full md:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] md:gap-6 md:overflow-x-hidden"
       >
-        <div
+        <AtomsInfoCard
           v-for="card in cards"
           :key="card.title"
-          class="relative min-w-[80%] overflow-hidden rounded-lg border border-solid border-zinc-200 bg-white px-6 pb-8 pt-20 first:ml-4 last:mr-4 md:min-w-0 md:first:ml-0 md:last:mr-0"
-        >
-          <div
-            class="pointer-events-none absolute -right-[836px] -top-[448px] flex h-[651px] w-[1314px] justify-center"
-          >
-            <div class="mask-radial h-full w-full bg-pattern" />
-          </div>
-          <div class="relative">
-            <div
-              class="mb-4 flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-zinc-300 text-sm text-zinc-700"
-            >
-              <font-awesome-icon :icon="card.icon" />
-            </div>
-            <h3 class="text-lg font-medium">{{ card.title }}</h3>
-            <p class="text-base font-normal text-zinc-600">
-              {{ card.description }}
-            </p>
-          </div>
-        </div>
+          :title="card.title"
+          :description="card.description"
+          :icon="card.icon"
+        />
       </div>
       <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-6">
         <nuxt-link

apps/www/pages/creators.vue

@@ -0,0 +1,4 @@
+<template>
+  <CreatorsHero />
+  <CreatorsHowItWorks />
+</template>

apps/www/plugins/icons.ts

@@ -6,7 +6,11 @@ import {
   faEarthAmericas,
   faArrowRight,
   faBars,
+  faBook,
+  faLightbulb,
+  faKeyboard,
   faTimes,
+  faSpellCheck,
   faMagnifyingGlass,
   faStar,
   faCodeFork,
@@ -26,7 +30,11 @@ library.add(
   faEarthAmericas,
   faArrowRight,
   faBars,
+  faBook,
+  faLightbulb,
+  faKeyboard,
   faTimes,
+  faSpellCheck,
   faMagnifyingGlass,
   faStar,
   faCodeFork,