update: development

src/App.tsx

@@ -14,6 +14,7 @@ import useAppStore from "./store/store";
 import SampleDropdown from "./components/SampleDropdown";
 import FullScreenModal from "./components/FullScreenModal";
 import UseShare from "./components/UseShare";
+import LearnContent from "./components/Content";
 
 const { Content } = Layout;
 const { useBreakpoint } = Grid;
@@ -146,8 +147,19 @@ const App = () => {
                 </div>
               }
             />
-            <Route path="/learn-now" element={<LearnNow />} />
-            <Route path="/learn-now/:step" element={<LearnNow />} />
+
+            <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>
           </Routes>
         </Content>
         <Footer />

src/components/Content.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import {
   ContentContainer,
@@ -10,22 +9,26 @@ import { LoadingOutlined } from "@ant-design/icons";
 import { Spin } from "antd";
 import fetchContent from "../utils/fetchContent";
 
-const Content: React.FC = () => {
-  const { step } = useParams<{ step: string }>();
-  const navigate = useNavigate();
+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);
 
-  // ⚠️ should be updated only based on actual steps and new contents
-  const steps = ["intro.md", "module1.md", "module2.md"];
+  const steps = [
+    { title: "Introduction", link: "/learn/intro" },
+    { title: "Module 1", link: "/learn/module1" },
+    { title: "Module 2", link: "/learn/module2" },
+  ];
 
   useEffect(() => {
     const loadContent = async () => {
-      if (!step) return;
       try {
         setLoading(true);
-        const content = await fetchContent(`${step}`);
+        const content = await fetchContent(file);
         setContent(content);
         setError(null);
       } catch (err: any) {
@@ -36,23 +39,25 @@ const Content: React.FC = () => {
     };
 
     loadContent();
-  }, [step]);
+  }, [file]);
 
-  const currentIndex = steps.indexOf(step ?? "");
+  const currentIndex = steps.findIndex((step) =>
+    step.link.includes(file.split(".")[0])
+  );
 
   const handlePrevious = () => {
     if (currentIndex > 0) {
-      navigate(`/learn-now/${steps[currentIndex - 1]}`);
+      window.location.href = steps[currentIndex - 1].link;
     }
   };
 
   const handleNext = () => {
     if (currentIndex < steps.length - 1) {
-      navigate(`/learn-now/${steps[currentIndex + 1]}`);
+      window.location.href = steps[currentIndex + 1].link;
     }
   };
 
-  if (loading)
+  if (loading) {
     return (
       <div
         style={{
@@ -69,7 +74,11 @@ const Content: React.FC = () => {
         />
       </div>
     );
-  if (error) return <div>{error}</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
 
   return (
     <ContentContainer>
@@ -92,4 +101,4 @@ const Content: React.FC = () => {
   );
 };
 
-export default Content;
+export default LearnContent;

src/components/Navbar.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Menu, Dropdown, Button, Image, Grid, Typography } from "antd";
+import { Menu, Dropdown, Button, Image, Grid } from "antd";
 import { useSpring, animated } from "react-spring";
+import { useLocation, Link } from "react-router-dom";
 import {
   GithubOutlined,
   QuestionOutlined,
@@ -11,13 +12,13 @@ import {
 } from "@ant-design/icons";
 
 const { useBreakpoint } = Grid;
-const { Link } = Typography;
 
 function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
   const [hovered, setHovered] = useState<
     null | "home" | "explore" | "help" | "github" | "join"
   >(null);
   const screens = useBreakpoint();
+  const location = useLocation();
 
   const props = useSpring({
     to: async (next) => {
@@ -94,6 +95,8 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
       screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none",
   });
 
+  const isLearnPage = location.pathname.startsWith("/learn");
+
   return (
     <div
       style={{
@@ -115,8 +118,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
         onMouseLeave={() => setHovered(null)}
       >
         <a
-          href="https://www.accordproject.org"
-          target="_blank"
+          href="/"
           rel="noopener noreferrer"
           style={{ display: "flex", alignItems: "center" }}
         >
@@ -182,36 +184,38 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
           height: "65px",
         }}
       >
-        <div
-          style={{
-            marginLeft: screens.md ? "20px" : "0",
-            height: "65px",
-            display: "flex",
-            alignItems: "center",
-            backgroundColor:
-              hovered === "join" ? "rgba(255, 255, 255, 0.1)" : "transparent",
-            cursor: "pointer",
-          }}
-          onMouseEnter={() => setHovered("join")}
-          onMouseLeave={() => setHovered(null)}
-        >
-          <Link href="/learn-now" className="learnNow-button">
-            <animated.button
-              style={{
-                ...props,
-                padding: "10px 22px",
-                backgroundColor: "#19c6c7",
-                color: "#050c40",
-                border: "none",
-                borderRadius: "5px",
-                marginRight: "15px",
-                cursor: "pointer",
-              }}
-            >
-              Learn
-            </animated.button>
-          </Link>
-        </div>
+        {!isLearnPage && (
+          <div
+            style={{
+              marginLeft: screens.md ? "20px" : "0",
+              height: "65px",
+              display: "flex",
+              alignItems: "center",
+              backgroundColor:
+                hovered === "join" ? "rgba(255, 255, 255, 0.1)" : "transparent",
+              cursor: "pointer",
+            }}
+            onMouseEnter={() => setHovered("join")}
+            onMouseLeave={() => setHovered(null)}
+          >
+            <Link to="/learn/intro" className="learnNow-button">
+              <animated.button
+                style={{
+                  ...props,
+                  padding: "10px 22px",
+                  backgroundColor: "#19c6c7",
+                  color: "#050c40",
+                  border: "none",
+                  borderRadius: "5px",
+                  marginRight: "15px",
+                  cursor: "pointer",
+                }}
+              >
+                Learn
+              </animated.button>
+            </Link>
+          </div>
+        )}
         <div
           style={{
             height: "65px",

src/components/Sidebar.tsx

@@ -17,7 +17,7 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({
       <SidebarList>
         {steps.map((step, index) => (
           <SidebarListItem key={index}>
-            <Link to={`/learn-now/${step.link}`}>
+            <Link to={step.link}>
               <SidebarLink>{step.title}</SidebarLink>
             </Link>
           </SidebarListItem>

src/pages/LearnNow.tsx

@@ -1,69 +1,21 @@
-import React, { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import React from "react";
+import { Outlet } from "react-router-dom";
 import Sidebar from "../components/Sidebar";
-import { LoadingOutlined } from "@ant-design/icons";
-import { Spin } from "antd";
-import Content from "../components/Content";
-import fetchContent from "../utils/fetchContent";
 import { LearnNowContainer } from "../styles/pages/LearnNow";
 
-const LearnNow: React.FC = () => {
-  const { step } = useParams<{ step: string }>();
-  const navigate = useNavigate();
-  const [steps, setSteps] = useState<{ title: string; link: string }[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    async function loadContent() {
-      try {
-        const stepLinks = ["intro.md", "module1.md", "module2.md"];
-        const stepTitles = ["Introduction", "Module 1", "Module 2"];
-
-        setSteps(
-          stepTitles.map((title, index) => ({ title, link: stepLinks[index] }))
-        );
-
-        await fetchContent(step || "intro.md");
-      } catch (err: any) {
-        setError("Failed to load content");
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadContent();
-  }, [step]);
-
-  useEffect(() => {
-    if (!step) {
-      navigate("/learn-now/intro.md");
-    }
-  }, [step, navigate]);
-
-  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>;
+const steps = [
+  { title: "Introduction", link: "/learn/intro" },
+  { title: "Module 1", link: "/learn/module1" },
+  { title: "Module 2", link: "/learn/module2" },
+];
 
+const LearnNow: React.FC = () => {
   return (
     <LearnNowContainer>
       <Sidebar steps={steps} />
-      <Content />
+      <div style={{ flex: 1 }}>
+        <Outlet />
+      </div>
     </LearnNowContainer>
   );
 };

src/styles/components/Sidebar.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const SidebarContainer = styled.div`
-  width: 220px;
+  width: 260px;
   background-color: #f5f5f5;
   padding: 1rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);