feat: new logos and doug

.vitepress/components/Banner.vue

@@ -30,7 +30,7 @@ const dismiss = () => {
 <template>
   <div ref="el" class="banner">
     <div class="text">
-      <b style="font-size: 1.3rem">Kita</b> is undergoing <b>major</b> changes
+      <b style="font-size: 1.12rem">Kita</b> is undergoing <b>major</b> changes
       and is unready for production use until <b>v2</b> is released.
     </div>
 
@@ -77,12 +77,12 @@ html {
   top: 0;
   right: 0;
   left: 0;
-  font-size: 1.1rem;
+  font-size: 1rem;
   z-index: var(--vp-z-index-layout-top);
   padding: 8px;
   text-align: center;
-  background-color: #ffd101;
-  color: black;
+  background-color: var(--vp-c-brand-2);
+  color: white;
   display: flex;
   align-items: center;
   justify-content: space-between;

.vitepress/config.mts

@@ -111,7 +111,7 @@ export default defineConfig({
   },
 
   themeConfig: {
-    logo: '/favicon.svg',
+    logo: '/logo.svg',
 
     outline: 'deep',
 
@@ -150,9 +150,9 @@ export default defineConfig({
     },
 
     footer: {
-      message: 'Made with ❤️ by Arthur Fiorette',
+      message: 'Released under the MIT License',
       copyright:
-        'Copyright (c) 2022-present Arthur Fiorette & Kita Contributors'
+        'Copyright © 2022-present - Arthur Fiorette & Kita Contributors'
     },
 
     sidebar: {

.vitepress/theme/custom.css

@@ -1,18 +1,22 @@
 :root {
-  --vp-c-brand-1: #e4c8c5;
-  --vp-c-brand-2: #ad4336;
   --vp-c-brand-3: #e4c8c5;
+  --vp-c-brand-1: #bd695e;
+  --vp-c-brand-2: #ad4336;
 
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    135deg,
-    #012169,
-    #012169,
+  --vp-home-hero-name-background: linear-gradient(
+    -45deg,
+    #0050a6,
+    #0050a6,
+    #0050a6,
+    #fedd00,
     #fedd00,
     #fedd00,
     #009739,
+    #009739,
     #009739
   );
+
   --vp-home-hero-image-background-image: -webkit-linear-gradient(
     125deg,
     var(--vp-c-brand-2),
@@ -119,3 +123,8 @@
 .twoslash-popup-docs.twoslash-popup-docs-tags.vp-doc {
   display: none;
 }
+
+.VPTeamMembers.medium.count-1 {
+  display: flex;
+  justify-content: center;
+}

index.md

@@ -16,7 +16,7 @@ hero:
       text: Html engine
       link: ./html/index.md
   image:
-    src: /doug.svg
+    src: /doug-pc-glasses.svg
     alt: Kita brown and white lotus logo
 
 features:
@@ -94,7 +94,7 @@ const members = [
   {
     avatar: 'https://github.com/devzolo.png',
     name: 'Devzolo 🇧🇷',
-    title: ' Member',
+    title: 'Member',
     links: [
       { icon: 'github', link: 'https://github.com/devzolo' },
       { icon: 'twitter', link: 'https://twitter.com/devzolo' }
@@ -123,11 +123,22 @@ const companies = [
     link: 'https://home.kascosys.com.br'
   }
 ];
+
+const doug = [
+  {
+   avatar: '/doug-head-glasses.svg',
+    name: 'Doug 🐢',
+    title: 'Mascot',
+    links: [
+      { icon: 'twitter', link: 'https://twitter.com/kitajsorg' }
+    ]
+  }
+];
 </script>
 
 <VPTeamPage>
   <VPTeamPageTitle>
-    <template #title id="asd">Trusted by companies</template>
+    <template #title>Trusted by companies</template>
     <template #lead>Kita is proudly powering a large ecosystem of organizations and products worldwide.</template>
   </VPTeamPageTitle>
 
@@ -152,7 +163,7 @@ const companies = [
     <template #title>Our Team</template>
     <template #lead>Kita's development team is composed of a diverse group of people from all over the world.</template>
   </VPTeamPageTitle>
-  
+
   <VPTeamMembers :members="members" size="small" />
 
   <small id="small-text">
@@ -161,3 +172,12 @@ const companies = [
     Contributing to a feature to <a href="https://github.com/kitajs/kitajs" target="_blank">our repository</a> makes you eligible for a spotlight in this space.
   </small>
 </VPTeamPage>
+
+<VPTeamPage>
+  <VPTeamPageTitle>
+    <template #title>Meet doug!</template>
+    <template #lead>Doug is the Kita's mascot, he is a friendly and curious turtle that loves to learn new things.</template>
+  </VPTeamPageTitle>
+
+  <VPTeamMembers :members="doug" />
+</VPTeamPage>

other/branding.md

@@ -1,16 +1,39 @@
-# Branding
+# Brand manual
 
-Kita is not a company or a product. It's a project that aims to provide a good
-backend development experience for JavaScript developers.
+Kita is not a company or a product, however we have a logo and a mascot kindly
+created by [IlustraJaque](https://x.com/ilustrajaque).
 
-The project is maintained by [Arthur Fiorette](https://arthur.place) and its
-contributors.
+## Logo, symbol and wordmark
 
-That being said, Kita has a logo and a color palette. You can use them in your
-projects to show your support for the project.
+The Kita logo is represented by the lotus flower symbol and the wordmark "Kita".
 
-## Colors
+The symbol was constructed using circular shapes and the letter "K" as a
+starting point to form a lotus.
 
+<!-- <style>
+  .brand-img {
+    font-family: Prompt;
+  }
+
+  .brand-img img {
+    background-color: white;
+    padding: 1rem;
+    border-radius: 12px;
+  }
+
+  .brand-img img:not(:first-child) {
+    margin-top: 1rem;
+  }
+</style>
+
+<div class="brand-img">asd
+
+  ![a](../public/brand/asset-2.svg)
+
+  <img src="/brand/asset-1.svg" />
+  <img src="/brand/asset-2.svg" />
+</div> -->
+<!--
 <div style="display: flex; flex-wrap: wrap; gap: 10px; color: white">
   <div style="width: 100px; height: 100px; background-color: #1B1B1F; border: 1px solid var(--vp-c-text-1)">
     <div style="background-color: var(--vp-c-bg); color: var(--vp-c-text-1); opacity: 0.5">#1B1B1F</div>
@@ -49,4 +72,4 @@ projects to show your support for the project.
 ## All assets
 
 You can view a folder with all assets in our
-[github](https://github.com/kitajs/docs/tree/main/public) page.
+[github](https://github.com/kitajs/docs/tree/main/public) page. -->