chore(branding): introduce branding page (nodejs#6435)

* chore(branding): introduce branding page

* fix: readme

* remove note about website design system

* use table instead of line per line

* update to have `width` and `height`

---------

Co-authored-by: Claudio W <cwunder@gnome.org>

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,110 @@
+---
+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]"
+  width="100"
+  height="114"
+/>
+
+## Node.js® Logo
+
+### Node.js® Horizontal Logo
+
+<table>
+  <tr>
+    <td>
+      <img
+        alt="Node.js Dark Horizontal Logo"
+        src="/static/logos/nodejsDark.svg"
+        className="h-[80px] w-[267px]"
+        width="267"
+        height="80"
+      />
+    </td>
+    <td>
+      <img
+        alt="Node.js Light Horizontal Logo"
+        src="/static/logos/nodejsLight.svg"
+        className="h-[80px] w-[267px] bg-neutral-950 p-2 dark:bg-transparent"
+        width="267"
+        height="80"
+      />
+    </td>
+  </tr>
+</table>
+
+### Node.js® Stacked Logo
+
+<table>
+  <tr>
+    <td>
+      <img
+        alt="Node.js Dark Stacked Logo"
+        src="/static/logos/nodejsStackedDark.svg"
+        className="h-[164px] w-[267px]"
+        width="267"
+        height="164"
+      />
+    </td>
+    <td>
+      <img
+        alt="Node.js Light Stacked Logo"
+        src="/static/logos/nodejsStackedLight.svg"
+        className="h-[164px] w-[267px] rounded bg-neutral-950 p-2 dark:bg-transparent"
+        width="267"
+        height="164"
+      />
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img
+        alt="Node.js Black Stacked Logo"
+        src="/static/logos/nodejsStackedBlack.svg"
+      />
+    </td>
+    <td>
+      <img
+        alt="Node.js White Stacked Logo"
+        src="/static/logos/nodejsStackedWhite.svg"
+        className="rounded bg-neutral-950 p-2 dark:bg-transparent"
+      />
+    </td>
+  </tr>
+</table>
+
+### JS Icons
+
+<table>
+  <tr>
+    <td>
+      <img
+        alt="JS Icons Green"
+        src="/static/logos/jsIconGreen.svg"
+        className="height-[80px] mx-auto w-[71px]"
+        width="71"
+        height="80"
+      />
+    </td>
+    <td>
+      <img
+        alt="White JS Icons"
+        src="/static/logos/jsIconWhite.svg"
+        className="height-[80px] mx-auto w-[71px] rounded bg-neutral-950 p-2 dark:bg-transparent"
+        width="71"
+        height="80"
+      />
+    </td>
+  </tr>
+</table>

pages/en/about/index.mdx

@@ -3,16 +3,6 @@ title: About Node.js®
 layout: about
 ---
 
-<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