chore(branding): introduce branding page

README.md

@@ -2,8 +2,8 @@
   <br />
   <a href="https://nodejs.org">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="./public/static/images/logos/nodejs-new-pantone-white.svg">
-      <img src="./public/static/images/logos/nodejs-new-pantone-black.svg" width="200px">
+      <source media="(prefers-color-scheme: dark)" srcset="./public/static/logos/nodejsDark.svg">
+      <img src="./public/static/logos/nodejsLight.svg" width="200px">
     </picture>
   </a>
 </p>

i18n/locales/en.json

@@ -103,6 +103,7 @@
         "links": {
           "about": "About Node.js",
           "aboutSide": "About Node.js®",
+          "branding": "Branding of Node.js",
           "governance": "Project Governance",
           "releases": "Previous Releases",
           "security": "Security Reporting"

navigation.json

@@ -82,6 +82,10 @@
           "link": "/about",
           "label": "components.navigation.about.links.aboutSide"
         },
+        "branding": {
+          "link": "/about/branding",
+          "label": "components.navigation.about.links.branding"
+        },
         "governance": {
           "link": "/about/governance",
           "label": "components.navigation.about.links.governance"

pages/en/about/branding.mdx

@@ -0,0 +1,75 @@
+---
+title: Branding of Node.js
+layout: about.hbs
+---
+
+# Branding of Node.js
+
+Please review the [trademark policy](https://trademark-policy.openjsf.org/) for information about permissible use of Node.js® logos and marks.
+
+## Node.js® Mascot
+
+<img
+  alt="Node.js mascot"
+  src="/static/images/node-mascot.svg"
+  className="w-[100px]"
+/>
+
+## Node.js® Logo
+
+### Node.js® Horizontal Logo
+
+<img
+  alt="Node.js Dark Horizontal Logo"
+  src="/static/logos/nodejsDark.svg"
+  className="w-[200px]"
+/>
+
+<img
+  alt="Node.js Light Horizontal Logo"
+  src="/static/logos/nodejsLight.svg"
+  className="w-[200px] rounded bg-neutral-950 p-2 dark:bg-transparent"
+/>
+
+### Node.js® Stacked Logo
+
+<img
+  alt="Node.js Dark Stacked Logo"
+  src="/static/logos/nodejsStackedDark.svg"
+  className="w-[200px]"
+/>
+
+<img
+  alt="Node.js Light Stacked Logo"
+  src="/static/logos/nodejsStackedLight.svg"
+  className="w-[200px] rounded bg-neutral-950 p-2 dark:bg-transparent"
+/>
+
+<img
+  alt="Node.js Black Stacked Logo"
+  src="/static/logos/nodejsStackedBlack.svg"
+  className="w-[200px]"
+/>
+
+<img
+  alt="Node.js White Stacked Logo"
+  src="/static/logos/nodejsStackedWhite.svg"
+  className="w-[200px] rounded bg-neutral-950 p-2 dark:bg-transparent"
+/>
+
+### JS Icons
+
+<img
+  alt="JS Icons Green"
+  src="/static/logos/jsIconGreen.svg"
+  className="w-[100px]"
+/>
+
+<img
+  alt="White JS Icons"
+  src="/static/logos/jsIconWhite.svg"
+  className="w-[100px] rounded bg-neutral-950 p-2 dark:bg-transparent"
+/>
+
+> If your are interessed by Node.js Website design systems
+> You can take a look in [Node.js Website repository](https://github.com/nodejs/nodejs.org)

pages/en/about/index.mdx

@@ -3,16 +3,6 @@ title: About Node.js®
 layout: about.hbs
 ---
 
-<div className="my-4 flex items-center justify-center">
-  <img
-    alt="Node.js mascot"
-    src="/static/images/node-mascot.svg"
-    className="w-[100px]"
-  />
-</div>
-
----
-
 # About Node.js®
 
 As an asynchronous event-driven JavaScript runtime, Node.js is designed to build