using handbook components with sistent

Signed-off-by: Lakshya Satpal <[email protected]>

src/pages/projects/sistent/about.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SistentAbout = () => {
+  return <div>SistentAbout</div>;
+};
+
+export default SistentAbout;

src/pages/projects/sistent/components.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SistentComponents = () => {
+  return <div>SistentComponents</div>;
+};
+
+export default SistentComponents;

src/pages/projects/sistent/identity.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SistentIdentity = () => {
+  return <div>SistentIdentity</div>;
+};
+
+export default SistentIdentity;

src/sections/Projects/Sistent/index.js

@@ -1,24 +1,38 @@
 import React from "react";
-import Sidebar from "./Sistent-sidebar";
-import { Col, Row } from "../../../reusecore/Layout";
 import SistentWrapper from "./sistent.style";
+import HandbookCard from "../../../components/HandbookCard";
 
 const SistentHome = () => {
   return (
     <SistentWrapper>
-      <Row>
-        <Col xs={12} lg={3}>
-          <Sidebar />
-        </Col>
-        <Col xs={12} lg={7}>
-          <h1>About</h1>
-          <p>
-            Colors when accurately applied can be a potent tool that enables
-            designers and developers to implement solutions with speed and
-            efficiency. Here are a couple of things to keep in mind.
-          </p>
-        </Col>
-      </Row>
+      <div className="page-header-section">
+        <h1>Sistent</h1>
+      </div>
+      <div className="community-home-subtitle">
+        <h3>Design system for Layer5 projects</h3>
+      </div>
+      <div className="community-home-container">
+        <HandbookCard
+          title="About"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
+          to="/projects/sistent/about"
+        />
+        <HandbookCard
+          title="Identity"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
+          to="/projects/sistent/identity"
+        />
+        <HandbookCard
+          title="Components"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
+          to="/projects/sistent/components"
+        />
+        <HandbookCard
+          title="Patterns & Templates"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
+          to="/projects/sistent/patterns"
+        />
+      </div>
     </SistentWrapper>
   );
 };