feat: learning pathway build implementation && intro tour guide

package.json

@@ -23,18 +23,27 @@
     "@accordproject/template-engine": "^2.3.5",
     "@ant-design/icons": "^5.3.7",
     "@monaco-editor/react": "^4.6.0",
+    "@types/styled-components": "^5.1.34",
     "antd": "^5.7.2",
     "core-js": "^3.37.1",
-    "immer": "^10.0.2",
+    "highlight.js": "^11.10.0",
+    "immer": "^10.1.1",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.50.0",
     "node-stdlib-browser": "^1.2.0",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.24.1",
+    "react-shepherd": "^6.1.1",
+    "react-spring": "^9.7.4",
     "regenerator-runtime": "^0.13.11",
+    "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "shepherd.js": "^13.0.3",
+    "styled-components": "^6.1.12",
     "ts-debounce": "^4.0.0",
     "zustand": "^4.3.9"
   },

public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

src/App.tsx

@@ -1,17 +1,20 @@
 import { useEffect, useState } from "react";
 import { App as AntdApp, Layout, Row, Col, Collapse, theme, Grid } from "antd";
+import { Routes, Route, useSearchParams } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
+import tour from "./components/Tour";
 import AgreementData from "./editors/editorsContainer/AgreementData";
+import LearnNow from "./pages/LearnNow";
 import AgreementHtml from "./AgreementHtml";
 import Errors from "./utils/helpers/Errors";
 import TemplateMarkdown from "./editors/editorsContainer/TemplateMarkdown";
 import TemplateModel from "./editors/editorsContainer/TemplateModel";
 import useAppStore from "./store/store";
 import SampleDropdown from "./components/SampleDropdown";
 import FullScreenModal from "./components/FullScreenModal";
-import { useSearchParams } from "react-router-dom";
 import UseShare from "./components/UseShare";
+import LearnContent from "./components/Content";
 
 const { Content } = Layout;
 const { useBreakpoint } = Grid;
@@ -50,6 +53,15 @@ const App = () => {
     initializeApp();
   }, [init, loadFromLink, searchParams]);
 
+  useEffect(() => {
+    const showTour = searchParams.get("showTour") === "true";
+
+    if (showTour || !localStorage.getItem("hasVisited")) {
+      tour.start();
+      localStorage.setItem("hasVisited", "true");
+    }
+  }, [searchParams]);
+
   const screens = useBreakpoint();
 
   const panels = [
@@ -75,60 +87,85 @@ const App = () => {
       <Layout style={{ minHeight: "100vh" }}>
         <Navbar scrollToExplore={scrollToExplore} />
         <Content>
-          <div
-            style={{
-              padding: 24,
-              paddingBottom: 150,
-              minHeight: 360,
-              background: colorBgContainer,
-            }}
-          >
-            <Row id="explore">
-              <Col xs={24} sm={8}>
-                <Row
+          <Routes>
+            <Route
+              path="/"
+              element={
+                <div
                   style={{
-                    marginLeft: "25px",
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: "10px",
+                    padding: 24,
+                    paddingBottom: 150,
+                    minHeight: 360,
+                    background: colorBgContainer,
                   }}
                 >
-                  <SampleDropdown setLoading={setLoading} />
-                  <UseShare />
-                </Row>
-              </Col>
-              <Col span={18}>
-                <Errors />
-              </Col>
-            </Row>
-            <div
-              style={{
-                padding: 24,
-                minHeight: 360,
-                background: colorBgContainer,
-              }}
-            >
-              <Row gutter={24}>
-                <Col xs={24} sm={16} style={{ paddingBottom: "20px" }}>
-                  <Collapse
-                    defaultActiveKey={activePanel}
-                    onChange={onChange}
-                    items={panels}
-                  />
-                </Col>
-                <Col xs={24} sm={8}>
+                  <Row id="explore">
+                    <Col xs={24} sm={8}>
+                      <Row
+                        style={{
+                          marginLeft: "25px",
+                          display: "flex",
+                          flexDirection: "row",
+                          gap: "10px",
+                        }}
+                      >
+                        <SampleDropdown setLoading={setLoading} />
+                        <UseShare />
+                      </Row>
+                    </Col>
+                    <Col span={18}>
+                      <Errors />
+                    </Col>
+                  </Row>
                   <div
                     style={{
-                      marginBottom: "10px",
+                      padding: 24,
+                      minHeight: 360,
+                      background: colorBgContainer,
                     }}
                   >
-                    <FullScreenModal />
+                    <Row gutter={24}>
+                      <Col xs={24} sm={16} style={{ paddingBottom: "20px" }}>
+                        <Collapse
+                          defaultActiveKey={activePanel}
+                          onChange={onChange}
+                          items={panels}
+                        />
+                      </Col>
+                      <Col xs={24} sm={8}>
+                        <div
+                          style={{
+                            marginBottom: "10px",
+                          }}
+                        >
+                          <FullScreenModal />
+                        </div>
+                        <AgreementHtml loading={loading} />
+                      </Col>
+                    </Row>
                   </div>
-                  <AgreementHtml loading={loading} />
-                </Col>
-              </Row>
-            </div>
-          </div>
+                </div>
+              }
+            />
+
+            <Route path="/learn" element={<LearnNow />}>
+              {/* ❕ learning-module routes */}
+              <Route path="intro" element={<LearnContent file="intro.md" />} />
+              <Route
+                path="module1"
+                element={<LearnContent file="module1.md" />}
+              />
+              <Route
+                path="module2"
+                element={<LearnContent file="module2.md" />}
+              />
+
+              <Route
+                path="module3"
+                element={<LearnContent file="module3.md" />}
+              />
+            </Route>
+          </Routes>
         </Content>
         <Footer />
         {!screens.md && (

src/components/Content.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeHighlight from "rehype-highlight";
+import { useNavigate } from "react-router-dom";
+import {
+  ContentContainer,
+  NavigationButtons,
+  NavigationButton,
+} from "../styles/components/Content";
+import {
+  LoadingOutlined,
+  LeftOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
+import { Spin } from "antd";
+import fetchContent from "../utils/fetchContent";
+import { steps } from "../constants/learningSteps/steps";
+
+// markdown syntax highlighting theme
+import "highlight.js/styles/github.css";
+
+interface LearnContentProps {
+  file: string;
+}
+
+const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const loadContent = async () => {
+      try {
+        setLoading(true);
+        const content = await fetchContent(file);
+        setContent(content);
+        setError(null);
+      } catch (err: any) {
+        setError("Failed to load content");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadContent();
+  }, [file]);
+
+  const currentIndex = steps.findIndex((step) =>
+    step.link.includes(file.split(".")[0])
+  );
+
+  const handlePrevious = () => {
+    if (currentIndex > 0) {
+      navigate(steps[currentIndex - 1].link);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentIndex < steps.length - 1) {
+      navigate(steps[currentIndex + 1].link);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Spin
+          indicator={
+            <LoadingOutlined style={{ fontSize: 42, color: "#19c6c7" }} spin />
+          }
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <ContentContainer>
+      {content && (
+        <ReactMarkdown
+          rehypePlugins={[rehypeRaw, rehypeHighlight]}
+          components={{
+            img: ({ node, ...props }) => (
+              <div className="image-container">
+                <img {...props} alt={props.alt || ""} />
+              </div>
+            ),
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      )}
+      <NavigationButtons>
+        <NavigationButton
+          onClick={handlePrevious}
+          disabled={currentIndex === 0}
+        >
+          <LeftOutlined /> Previous
+        </NavigationButton>
+        <NavigationButton
+          onClick={handleNext}
+          disabled={currentIndex === steps.length - 1}
+        >
+          Next <RightOutlined />
+        </NavigationButton>
+      </NavigationButtons>
+    </ContentContainer>
+  );
+};
+
+export default LearnContent;

src/components/Footer.tsx

@@ -49,11 +49,11 @@ const CustomFooter: React.FC = () => {
             </Link>
             <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank">
               <Button
-                shape="round"
                 size="large"
                 style={{
                   padding: "5px 30px",
                   backgroundColor: "#19c6c7",
+                  borderRadius: "5px",
                   color: "#050c40",
                   textAlign: "center",
                   border: "none",

src/components/FullScreenModal.tsx

@@ -7,7 +7,7 @@ const FullScreenModal: React.FC = () => {
   const [open, setOpen] = useState(false);
 
   return (
-    <div style={{ textAlign: "right" }}>
+    <div style={{ textAlign: "right" }} className="preview-element">
       <FullscreenOutlined
         style={{ fontSize: "24px", cursor: "pointer", marginRight: "10px" }}
         onClick={() => setOpen(true)}