Update branding

Author: Rigidity

docs/intro.md

@@ -0,0 +1,5 @@
+---
+slug: /sage
+---
+
+# Sage

docs/sage/index.md

@@ -0,0 +1,5 @@
+---
+slug: /sdk
+---
+
+# Wallet SDK

docs/sdk/index.md

@@ -4,9 +4,9 @@ import { themes as prismThemes } from "prism-react-renderer";
 
 const config: Config = {
   title: "xch.dev",
-  tagline: "Dinosaurs are cool",
+  tagline: "Build our decentralized future on the Chia blockchain",
   favicon: "img/favicon.ico",
-  url: "https://your-docusaurus-site.example.com",
+  url: "https://xch.dev",
   baseUrl: "/",
   organizationName: "xch-dev",
   projectName: "docs",
@@ -40,9 +40,15 @@ const config: Config = {
       items: [
         {
           type: "docSidebar",
-          sidebarId: "tutorialSidebar",
+          sidebarId: "sageSidebar",
           position: "left",
-          label: "Tutorial",
+          label: "Sage",
+        },
+        {
+          type: "docSidebar",
+          sidebarId: "sdkSidebar",
+          position: "left",
+          label: "Wallet SDK",
         },
         {
           href: "https://github.com/xch-dev/docs",
@@ -55,20 +61,20 @@ const config: Config = {
       style: "dark",
       links: [
         {
-          title: "Wallet SDK",
+          title: "Learn",
           items: [
             {
-              label: "Docs",
-              href: "/docs/intro",
+              label: "Sage",
+              href: "/docs/sage",
             },
             {
-              label: "GitHub",
-              href: "https://github.com/xch-dev/chia-wallet-sdk",
+              label: "Wallet SDK",
+              href: "/docs/sdk",
             },
           ],
         },
         {
-          title: "Sage",
+          title: "Social",
           items: [
             {
               label: "Discord",
@@ -78,19 +84,23 @@ const config: Config = {
               label: "X",
               href: "https://x.com/sage_wallet",
             },
-            {
-              label: "GitHub",
-              href: "https://github.com/xch-dev/sage",
-            },
           ],
         },
         {
-          title: "More",
+          title: "Contribute",
           items: [
             {
-              label: "Docs Repo",
+              label: "Website GitHub",
               href: "https://github.com/xch-dev/docs",
             },
+            {
+              label: "Wallet SDK GitHub",
+              href: "https://github.com/xch-dev/chia-wallet-sdk",
+            },
+            {
+              label: "Sage GitHub",
+              href: "https://github.com/xch-dev/sage",
+            },
           ],
         },
       ],

docusaurus.config.ts

@@ -1,7 +1,8 @@
 import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
 
 const sidebars: SidebarsConfig = {
-  tutorialSidebar: ["intro"],
+  sageSidebar: ["sage/index"],
+  sdkSidebar: ["sdk/index"],
 };
 
 export default sidebars;

sidebars.ts

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
-import clsx from "clsx";
 import Heading from "@theme/Heading";
+import clsx from "clsx";
+import type { ReactNode } from "react";
 import styles from "./styles.module.css";
 
 type FeatureItem = {
@@ -11,32 +11,32 @@ type FeatureItem = {
 
 const FeatureList: FeatureItem[] = [
   {
-    title: "Easy to Use",
-    Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
+    title: "A Wallet for Everyone",
+    Svg: require("@site/static/img/undraw_confirmed_c5lo.svg").default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Sage is a wallet designed to make using the Chia blockchain and user
+        facing apps on top of it easy.
       </>
     ),
   },
   {
-    title: "Focus on What Matters",
-    Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
+    title: "Build on Chia",
+    Svg: require("@site/static/img/undraw_creative-flow_t3kz.svg").default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        For more complex use cases, the Wallet SDK provides comprehensive tools
+        for building on Chia.
       </>
     ),
   },
   {
-    title: "Powered by React",
-    Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+    title: "Get Involved",
+    Svg: require("@site/static/img/undraw_team-up_qeem.svg").default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Every aspect of Sage and the Wallet SDK is open source. Feel free to
+        reach out and get involved!
       </>
     ),
   },

src/components/HomepageFeatures/index.tsx

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #5dc2ef;
+  --ifm-color-primary-dark: #4bb3d2;
+  --ifm-color-primary-darker: #3da3b6;
+  --ifm-color-primary-darkest: #339199;
+  --ifm-color-primary-light: #63c3ff;
+  --ifm-color-primary-lighter: #92f4ff;
+  --ifm-color-primary-lightest: #c1fff4;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #63c3ff;
+  --ifm-color-primary-dark: #5dc2ef;
+  --ifm-color-primary-darker: #4bb3d2;
+  --ifm-color-primary-darkest: #3da3b6;
+  --ifm-color-primary-light: #92f4ff;
+  --ifm-color-primary-lighter: #c1fff4;
+  --ifm-color-primary-lightest: #f0fff8;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

src/css/custom.css

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Heading from "@theme/Heading";
+import Layout from "@theme/Layout";
+import clsx from "clsx";
+import type { ReactNode } from "react";
 
 import styles from "./index.module.css";
 
@@ -22,7 +22,7 @@ function HomepageHeader() {
             className="button button--secondary button--lg"
             to="/docs/intro"
           >
-            Docusaurus Tutorial - 5min ⏱️
+            Documentation
           </Link>
         </div>
       </div>
@@ -34,8 +34,8 @@ export default function Home(): ReactNode {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      title={siteConfig.title}
+      description="Learn how to use Sage and the Wallet SDK to build on the Chia blockchain."
     >
       <HomepageHeader />
       <main>