Merge pull request #5549 from KunyueXing/sistent-about-general-instru…

…ctions

Sistent about general instructions

src/sections/Projects/Sistent/about.js

@@ -1,13 +1,34 @@
-import React from "react";
+import React, { useSyncExternalStore } from "react";
 import { Container } from "../../../reusecore/Layout";
 import SistentWrapper from "./sistent.style";
 import TOC from "../../../components/SistentNavigation";
 import IntraPage from "../../../components/handbook-navigation/intra-page";
 import SistentPagination from "../../../components/SistentNavigation/pagination";
 
+import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
+import { CodeBlock } from "./components/button/code-block";
+import { SistentThemeProvider } from "@layer5/sistent";
+import { Button } from "@layer5/sistent";
+
 const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
 
+const codes = [
+  "npm i @layer5/sistent",
+  `  import { SistentThemeProvider } from "@layer5/sistent";
+  import { Button } from "@layer5/sistent";
+     
+  <SistentThemeProvider>
+    <div>
+      <Button variant="contained">Filled</Button>
+      <Button variant="outlined">Outlined</Button>
+      <Button variant="text">Text</Button>
+    </div>
+  </SistentThemeProvider>`,
+];
+
 const SistentAbout = () => {
+  const { isDark } = useStyledDarkMode();
+
   return (
     <SistentWrapper>
       <div className="page-header-section">
@@ -21,27 +42,48 @@ const SistentAbout = () => {
               <h2>About Sistent</h2>
             </a>
             <p>
-              We have several different React apps that heavily uses the
-              Material UI v4 and v5 libraries, and this discrepancies led up to
-              setting up the Sistent Design System.
+            Sistent is the Layer5 Design System - an open source design system that offers building blocks to create consistent, accessible, and user-friendly interfaces. It's aimed at developers who want to design applications aligned with the same brand and ensure a uniform user experience across different products.
             </p>
             <p>
-              <b>
-                We want to be able to have the source of truth of what Layer5.io
-                and Meshery looks like.
-              </b>
+            Sistent leverages Material UI libraries and provides a custom theme on top of it for a consistent look and feel. It includes components, icons, and design tokens that developers can readily integrate into their applications. By using Sistent, developers can save time and effort while maintaining a high-quality user experience throughout Layer5 products.
             </p>
             <p>
-              'Sistent' is a play on word to ensure that we have a consistent
-              theme, components, design tokens, etc across all of the apps that
-              will be using this library. Sistent is a design system that uses
-              the <b>MUI v5 components</b> and a <b>custom theme provider </b>
-              instead of using the default theme from MUI v5.
+              <b>Sistent provides a consistent user experience across Layer5 projects and any frontend software projects that choose to use Sistent, too.</b>
+            </p>
+            <p>
+              'Sistent' is a play on words to ensure that we have a <i>consistent</i> theme, components, design tokens, etc across all of the apps that will be using this library. Sistent is a design system that uses the <b>MUI v5 components</b> and a <b>custom theme provider </b> instead of using the default theme from MUI v5.
+            </p>
+
+            <p>
+              Sistent is built with Typescript and Reactjs and contains components and a large collection of icons that can be reused across projects. If you’re interested in joining the project (please do!), let us know, and we will  help you get started on contributing.
+            </p>
+            <a id="Installation">
+              <h2>Installation and Quickstart</h2>
+            </a>
+            <p>
+              To install the Sistent NPM package, run:
             </p>
+            <div className="showcase">
+              <CodeBlock name="installation" code={codes[0]} />
+            </div>
             <p>
-              If you’re interested in joining, please let us know, and we can
-              help you get started on contributing to the Sistent Design System.
+              After installation, you can import Sistent theme and any Sistent
+              component from "@layer5/sistent". The component needs to be
+              included inside "SistentThemeProvider".
             </p>
+            <p>Taking button as an example:</p>
+            <div className="showcase">
+              <div className="items">
+                <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                  <div>
+                    <Button variant="contained">Filled</Button>
+                    <Button variant="outlined">Outlined</Button>
+                    <Button variant="text">Text</Button>
+                  </div>
+                </SistentThemeProvider>
+              </div>
+              <CodeBlock name="checkbox" code={codes[1]} />
+            </div>
           </div>
           <SistentPagination />
         </Container>