From a75632bbbdbdb2317042419bded9b1cc46f8dfcb Mon Sep 17 00:00:00 2001
From: J Caso <jcaso@protonmail.com>
Date: Mon, 29 Jul 2024 10:18:55 +0200
Subject: [PATCH] feat: using Layout for User Guide

---
 ui/summit-2024/src/__fixtures__/userGuide.ts  |   5 +
 .../src/components/Layout/Layout.tsx          |  29 +-
 .../src/pages/UserGuide/UserGuide.tsx         | 488 ++++++------------
 .../src/pages/UserGuide2/UserGuide2.tsx       | 364 -------------
 .../UserGuide2/components/UserGuideCard.tsx   | 115 -----
 .../components/UserGuideCard.type.ts          |  13 -
 ui/summit-2024/src/routes/index.tsx           |   5 +-
 7 files changed, 182 insertions(+), 837 deletions(-)
 delete mode 100644 ui/summit-2024/src/pages/UserGuide2/UserGuide2.tsx
 delete mode 100644 ui/summit-2024/src/pages/UserGuide2/components/UserGuideCard.tsx
 delete mode 100644 ui/summit-2024/src/pages/UserGuide2/components/UserGuideCard.type.ts

diff --git a/ui/summit-2024/src/__fixtures__/userGuide.ts b/ui/summit-2024/src/__fixtures__/userGuide.ts
index 213b9fa3a..fb1e708a4 100644
--- a/ui/summit-2024/src/__fixtures__/userGuide.ts
+++ b/ui/summit-2024/src/__fixtures__/userGuide.ts
@@ -12,12 +12,14 @@ interface UserGuideSection {
 
 interface UserGuideMenuEntry {
   label: string;
+  title: string;
   sections: UserGuideSection[];
 }
 
 const userGuideMenu: UserGuideMenuEntry[] = [
   {
     label: "What You’ll Need",
+    title: "To Submit Votes, You’ll Need:",
     sections: [
       {
         number: 1,
@@ -39,6 +41,7 @@ const userGuideMenu: UserGuideMenuEntry[] = [
   },
   {
     label: "Creating an Account",
+    title: "Create and Verify Your Account:",
     sections: [
       {
         number: 1,
@@ -58,6 +61,7 @@ const userGuideMenu: UserGuideMenuEntry[] = [
   },
   {
     label: "How to Vote",
+    title: "How to Submit a Vote:",
     sections: [
       {
         number: 1,
@@ -99,4 +103,5 @@ const userGuideMenu: UserGuideMenuEntry[] = [
   },
 ];
 
+export type { UserGuideMenuEntry }
 export { userGuideMenu };
diff --git a/ui/summit-2024/src/components/Layout/Layout.tsx b/ui/summit-2024/src/components/Layout/Layout.tsx
index d962ac2e9..5281f6360 100644
--- a/ui/summit-2024/src/components/Layout/Layout.tsx
+++ b/ui/summit-2024/src/components/Layout/Layout.tsx
@@ -10,12 +10,16 @@ type MenuItem = {
 
 type LayoutProps = {
   menuOptions: MenuItem[];
+  title: string;
+  bottom?: ReactNode;
   mode?: "scroll" | "change";
   defaultOption?: number;
 };
 
 const Layout: React.FC<LayoutProps> = ({
   menuOptions,
+    title,
+                                           bottom,
   mode = "scroll",
   defaultOption = 0,
 }) => {
@@ -192,7 +196,27 @@ const Layout: React.FC<LayoutProps> = ({
                 </>
             )}
         </Grid>
-        <Grid item xs={12} md={9.6} lg={10} sx={{ padding: "0px 20px" }}>
+        <Grid item xs={12} md={9.6} lg={10} sx={{
+          background: "transparent",
+          padding: {
+            xs: "0px 20px",
+            sm: "20px 0pxs",
+          },
+            marginTop: "10px"
+        }}>
+          <Typography
+              sx={{
+                color: theme.palette.text.neutralLightest,
+                fontFamily: "Dosis",
+                fontSize: "32px",
+                fontStyle: "normal",
+                fontWeight: 700,
+                lineHeight: "36px",
+                marginBottom: "32px",
+              }}
+          >
+            {title}
+          </Typography>
           {mode === "change"
             ? menuOptions.find((option) => option.label === selectedOption)
                 ?.content
@@ -208,6 +232,9 @@ const Layout: React.FC<LayoutProps> = ({
                   {option.content}
                 </div>
               ))}
+            {
+                bottom
+            }
         </Grid>
       </Grid>
     </Box>
diff --git a/ui/summit-2024/src/pages/UserGuide/UserGuide.tsx b/ui/summit-2024/src/pages/UserGuide/UserGuide.tsx
index 5d1b1388d..8b2d7eaa2 100644
--- a/ui/summit-2024/src/pages/UserGuide/UserGuide.tsx
+++ b/ui/summit-2024/src/pages/UserGuide/UserGuide.tsx
@@ -1,364 +1,170 @@
-import React, { useRef, useState } from "react";
-import { Box, Grid, Typography, List, ListItem } from "@mui/material";
-import theme from "../../common/styles/theme";
-import Ellipses from "../../assets/ellipse.svg";
-import { useIsPortrait } from "../../common/hooks/useIsPortrait";
+import Layout from "../../components/Layout/Layout";
+import { Typography, Grid } from "@mui/material";
 import { UserGuideCard } from "./components/UserGuideCard";
 import { userGuideMenu } from "../../__fixtures__/userGuide";
-import { CustomButton } from "../../components/common/CustomButton/CustomButton";
-import { ROUTES } from "../../routes";
-import { useNavigate } from "react-router-dom";
-import { PageBase } from "../BasePage";
-
-const UserGuide: React.FC = () => {
-  const navigate = useNavigate();
-  const userGuideMenuOptions = userGuideMenu;
-  const [selectedCategory, setSelectedCategory] = useState(
-    userGuideMenuOptions[0].label,
-  );
-
-  const isMobile = useIsPortrait();
-
-  const createAccountsRef = useRef<HTMLElement>(null);
-  const submitVotesRef = useRef<HTMLElement>(null);
-  const howVoteRef = useRef<HTMLElement>(null);
+import theme from "../../common/styles/theme";
+import {PageBase} from "../BasePage";
+import {CustomButton} from "../../components/common/CustomButton/CustomButton";
+import {ROUTES} from "../../routes";
+import {useNavigate} from "react-router-dom";
 
-  const handleNavigate = (pathname: string) => {
-    navigate(pathname);
-  };
+const UserGuide = () => {
+    const navigate = useNavigate();
 
-  const handleClickMenuItem = (option: string) => {
-    setSelectedCategory(option);
-    if (option === userGuideMenu[0].label) {
-      submitVotesRef.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    } else if (option === userGuideMenu[1].label) {
-      createAccountsRef.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    } else if (option === userGuideMenu[2].label) {
-      howVoteRef.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    }
-  };
+    const handleNavigate = (pathname: string) => {
+        navigate(pathname);
+    };
 
-  return (
-    <>
-      <PageBase title="User Guide">
-        <>
-          <Box
-            component="div"
-            sx={{
-              height: "28px",
-            }}
-          />
-          <Box component="div" sx={{ width: "100%" }}>
-            <Grid container>
-              <Grid item xs={12} md={2.4} lg={2}>
-                {isMobile ? (
-                  <>
-                    <Box
-                      component="div"
-                      sx={{
-                        overflowX: "auto",
-                        width: "100%",
-                        maxWidth: "100vw",
-                        "&::-webkit-scrollbar": {
-                          display: "none",
-                        },
-                        scrollbarWidth: "none",
-                        msOverflowStyle: "none",
-                        marginTop: "14px",
-                      }}
+    const optionsForScroll = [
+        {
+            label: userGuideMenu[0].label,
+            content: (
+                <>
+                    <Typography
+                        sx={{
+                            marginTop: "24px",
+                            color: theme.palette.text.neutralLightest,
+                            fontFamily: "Dosis",
+                            fontSize: "24px",
+                            fontStyle: "normal",
+                            fontWeight: 700,
+                            lineHeight: "28px",
+                            marginBottom: "16px",
+                        }}
                     >
-                      <List
+                        {userGuideMenu[0].title}
+                    </Typography>
+                    <Grid container spacing={2}>
+                        {userGuideMenu[0].sections.map((section) => {
+                            return (
+                                <Grid item xs={12} sm={6}>
+                                    <UserGuideCard
+                                        number={section.number}
+                                        title={section.title}
+                                        description={section.description}
+                                        link={section.link}
+                                    />
+                                </Grid>
+                            );
+                        })}
+                    </Grid>
+                </>
+            )
+        },
+        {
+            label: userGuideMenu[1].label,
+            content: (
+                <>
+                    <Typography
                         sx={{
-                          display: "flex",
-                          flexDirection: "row",
-                          padding: 0,
-                          margin: 0,
+                            marginTop: "24px",
+                            color: theme.palette.text.neutralLightest,
+                            fontFamily: "Dosis",
+                            fontSize: "24px",
+                            fontStyle: "normal",
+                            fontWeight: 700,
+                            lineHeight: "28px",
+                            marginBottom: "16px",
                         }}
-                      >
-                        {userGuideMenuOptions.map((category, index) => (
-                          <ListItem
-                            onClick={() => handleClickMenuItem(category.label)}
-                            key={index}
-                            sx={{
-                              display: "flex",
-                              marginRight: "8px",
-                              whiteSpace: "nowrap",
-                            }}
-                          >
-                            <Typography
-                              sx={{
-                                color:
-                                  category.label === selectedCategory
-                                    ? theme.palette.background.default
-                                    : theme.palette.text.neutralLightest,
-                                background:
-                                  category.label === selectedCategory
-                                    ? theme.palette.secondary.main
-                                    : "none",
-                                padding: "8px 12px",
-                                borderRadius: "12px",
-                                fontSize: "16px",
-                                fontWeight: 500,
-                                lineHeight: "24px",
-                                cursor: "pointer",
-                              }}
-                            >
-                              {category.label}
-                            </Typography>
-                          </ListItem>
-                        ))}
-                      </List>
-                    </Box>
-                  </>
-                ) : (
-                  <>
-                    <List
-                      sx={{
-                        position: "sticky",
-                        top: 102,
-                        zIndex: 1100,
-                        overflowY: "auto",
-                        maxHeight: "calc(100vh - 102px)",
-                        borderRight: "1px solid #737380",
-                      }}
                     >
-                      {userGuideMenuOptions.map((option, index) => (
-                        <ListItem
-                          onClick={() => handleClickMenuItem(option.label)}
-                          key={index}
-                        >
-                          {option.label === selectedCategory ? (
-                            <>
-                              <Box
-                                component="div"
-                                sx={{
-                                  display: "flex",
-                                  padding: "8px 12px",
-                                  alignItems: "center",
-                                  gap: "10px",
-                                  alignSelf: "stretch",
-                                  borderRadius: "12px",
-                                  background: theme.palette.secondary.main,
-                                  color: theme.palette.background.default,
-                                  fontSize: "16px",
-                                  fontStyle: "normal",
-                                  fontWeight: 500,
-                                  lineHeight: "24px",
-                                  cursor: "pointer",
-                                  width: "100%",
-                                }}
-                              >
-                                <Typography
-                                  sx={{
-                                    gap: "10px",
-                                    alignSelf: "stretch",
-                                    borderRadius: "12px",
-                                    fontSize: "16px",
-                                    fontStyle: "normal",
-                                    fontWeight: 500,
-                                    lineHeight: "24px",
-                                    cursor: "pointer",
-                                    width: "100%",
-                                  }}
-                                >
-                                  {option.label}
-                                </Typography>
-                              </Box>
-                            </>
-                          ) : (
-                            <>
-                              <Typography
-                                sx={{
-                                  color: theme.palette.text.neutralLightest,
-                                  fontSize: "16px",
-                                  fontStyle: "normal",
-                                  fontWeight: 500,
-                                  lineHeight: "24px",
-                                  cursor: "pointer",
-                                }}
-                              >
-                                {option.label}
-                              </Typography>
-                            </>
-                          )}
-                        </ListItem>
-                      ))}
-                    </List>
-                  </>
-                )}
-              </Grid>
-              <Grid
-                item
-                xs={12}
-                md={9.6}
-                lg={10}
-                sx={{
-                  background: "transparent",
-                  padding: {
-                    xs: "0px 20px",
-                    sm: "20px 0pxs",
-                  },
-                }}
-              >
-                <Typography
-                  sx={{
-                    color: theme.palette.text.neutralLightest,
-                    fontFamily: "Dosis",
-                    fontSize: "32px",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "36px",
-                    marginBottom: "32px",
-                  }}
-                >
-                  User Guide
-                </Typography>
-                <Typography
-                  ref={submitVotesRef}
-                  sx={{
-                    marginTop: "24px",
-                    color: theme.palette.text.neutralLightest,
-                    fontFamily: "Dosis",
-                    fontSize: "24px",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "28px",
-                    marginBottom: "16px",
-                  }}
-                >
-                  To Submit Votes, You’ll Need:
-                </Typography>
-                <Grid container spacing={2}>
-                  {userGuideMenuOptions[0].sections.map((section) => {
-                    return (
-                      <Grid item xs={12} sm={6}>
-                        <UserGuideCard
-                          number={section.number}
-                          title={section.title}
-                          description={section.description}
-                          link={section.link}
-                        />
-                      </Grid>
-                    );
-                  })}
-                </Grid>
-                <Typography
-                  ref={createAccountsRef}
-                  sx={{
-                    marginTop: "24px",
-                    color: theme.palette.text.neutralLightest,
-                    fontFamily: "Dosis",
-                    fontSize: "24px",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "28px",
-                    marginBottom: "16px",
-                  }}
-                >
-                  Create and Verify Your Account:
-                </Typography>
-                <Grid container spacing={2}>
-                  {userGuideMenuOptions[1].sections.map((section) => {
-                    return (
-                      <Grid item xs={12} sm={6}>
-                        <UserGuideCard
-                          number={section.number}
-                          title={section.title}
-                          description={section.description}
-                          link={section.link}
-                        />
-                      </Grid>
-                    );
-                  })}
-                </Grid>
+                        {userGuideMenu[1].title}
+                    </Typography>
+                    <Grid container spacing={2}>
+                        {userGuideMenu[1].sections.map((section) => {
+                            return (
+                                <Grid item xs={12} sm={6}>
+                                    <UserGuideCard
+                                        number={section.number}
+                                        title={section.title}
+                                        description={section.description}
+                                        link={section.link}
+                                    />
+                                </Grid>
+                            );
+                        })}
+                    </Grid>
+                </>
+            )
+        },
+        {
+            label: userGuideMenu[2].label,
+            content: (
+                <>
+                    <Typography
+                        sx={{
+                            marginTop: "24px",
+                            color: theme.palette.text.neutralLightest,
+                            fontFamily: "Dosis",
+                            fontSize: "24px",
+                            fontStyle: "normal",
+                            fontWeight: 700,
+                            lineHeight: "28px",
+                            marginBottom: "16px",
+                        }}
+                    >
+                        {userGuideMenu[2].title}
+                    </Typography>
+                    <Grid container spacing={2}>
+                        {userGuideMenu[2].sections.map((section) => {
+                            return (
+                                <Grid item xs={12} sm={6} md={4}>
+                                    <UserGuideCard
+                                        number={section.number}
+                                        title={section.title}
+                                        description={section.description}
+                                        link={section.link}
+                                    />
+                                </Grid>
+                            );
+                        })}
+                    </Grid>
+                </>
+            )
+        }
+    ];
 
-                <Typography
-                  ref={howVoteRef}
-                  sx={{
+    const bottom = (
+        <>
+            <Grid
+                container
+                spacing={2}
+                justifyContent="center"
+                sx={{
                     marginTop: "24px",
-                    color: theme.palette.text.neutralLightest,
-                    fontFamily: "Dosis",
-                    fontSize: "24px",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "28px",
-                    marginBottom: "16px",
-                  }}
-                >
-                  How to Submit a Vote:
-                </Typography>
-                <Grid container spacing={2}>
-                  {userGuideMenuOptions[2].sections.map((section) => {
-                    return (
-                      <Grid item xs={12} sm={6} md={4}>
-                        <UserGuideCard
-                          number={section.number}
-                          title={section.title}
-                          description={section.description}
-                          link={section.link}
-                        />
-                      </Grid>
-                    );
-                  })}
-                </Grid>
+                }}
+            >
                 <Grid
-                  container
-                  spacing={2}
-                  justifyContent="center"
-                  sx={{
-                    marginTop: "24px",
-                  }}
-                >
-                  <Grid
                     item
                     sx={{
-                      width: {
-                        xs: "100%",
-                        md: "auto",
-                      },
-                    }}
-                  >
-                    <CustomButton
-                      onClick={() => handleNavigate(ROUTES.CATEGORIES)}
-                      colorVariant="primary"
-                      sx={{
                         width: {
-                          xs: "100%",
-                          md: "auto",
+                            xs: "100%",
+                            md: "auto",
                         },
-                      }}
+                    }}
+                >
+                    <CustomButton
+                        onClick={() => handleNavigate(ROUTES.CATEGORIES)}
+                        colorVariant="primary"
+                        sx={{
+                            width: {
+                                xs: "100%",
+                                md: "auto",
+                            },
+                        }}
                     >
-                      Vote Now
+                        Vote Now
                     </CustomButton>
-                  </Grid>
                 </Grid>
-              </Grid>
             </Grid>
-            <img
-              src={Ellipses}
-              style={{
-                position: "fixed",
-                right: "0",
-                top: "70%",
-                transform: "translateY(-25%)",
-                zIndex: "-1",
-                width: "70%",
-              }}
-            />
-          </Box>
         </>
-      </PageBase>
-    </>
-  );
+    )
+    return (
+        <>
+            <PageBase title="User Guide">
+                <Layout menuOptions={optionsForScroll} title="User Guide" bottom={bottom} mode="scroll" />
+            </PageBase>
+        </>
+    );
 };
 
-export { UserGuide };
+export default UserGuide;
diff --git a/ui/summit-2024/src/pages/UserGuide2/UserGuide2.tsx b/ui/summit-2024/src/pages/UserGuide2/UserGuide2.tsx
deleted file mode 100644
index c917ddafc..000000000
--- a/ui/summit-2024/src/pages/UserGuide2/UserGuide2.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import React, { useRef, useState } from "react";
-import { Box, Grid, Typography, List, ListItem } from "@mui/material";
-import theme from "../../common/styles/theme";
-import Ellipses from "../../assets/ellipse.svg";
-import { useIsPortrait } from "../../common/hooks/useIsPortrait";
-import { UserGuideCard } from "./components/UserGuideCard";
-import { userGuideMenu } from "../../__fixtures__/userGuide";
-import { CustomButton } from "../../components/common/CustomButton/CustomButton";
-import { ROUTES } from "../../routes";
-import { useNavigate } from "react-router-dom";
-import { PageBase } from "../BasePage";
-
-const UserGuide2: React.FC = () => {
-  const navigate = useNavigate();
-  const userGuideMenuOptions = userGuideMenu;
-  const [selectedCategory, setSelectedCategory] = useState(
-    userGuideMenuOptions[0].label,
-  );
-
-  const isMobile = useIsPortrait();
-
-  const createAccountsRef = useRef<HTMLElement>(null);
-  const submitVotesRef = useRef<HTMLElement>(null);
-  const howVoteRef = useRef<HTMLElement>(null);
-
-  const handleNavigate = (pathname: string) => {
-    navigate(pathname);
-  };
-
-  const handleClickMenuItem = (option: string) => {
-    setSelectedCategory(option);
-    if (option === userGuideMenu[0].label) {
-      submitVotesRef.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    } else if (option === userGuideMenu[1].label) {
-      createAccountsRef.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    } else if (option === userGuideMenu[2].label) {
-      howVoteRef.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    }
-  };
-
-  return (
-    <>
-      <PageBase title="User Guide">
-        <>
-          <Box
-            component="div"
-            sx={{
-              height: "28px",
-            }}
-          />
-          <Box component="div" sx={{ width: "100%" }}>
-            <Grid container>
-              <Grid item xs={12} md={2.4} lg={2}>
-                {isMobile ? (
-                  <>
-                    <Box
-                      component="div"
-                      sx={{
-                        overflowX: "auto",
-                        width: "100%",
-                        maxWidth: "100vw",
-                        "&::-webkit-scrollbar": {
-                          display: "none",
-                        },
-                        scrollbarWidth: "none",
-                        msOverflowStyle: "none",
-                        marginTop: "14px",
-                      }}
-                    >
-                      <List
-                        sx={{
-                          display: "flex",
-                          flexDirection: "row",
-                          padding: 0,
-                          margin: 0,
-                        }}
-                      >
-                        {userGuideMenuOptions.map((category, index) => (
-                          <ListItem
-                            onClick={() => handleClickMenuItem(category.label)}
-                            key={index}
-                            sx={{
-                              display: "flex",
-                              marginRight: "8px",
-                              whiteSpace: "nowrap",
-                            }}
-                          >
-                            <Typography
-                              sx={{
-                                color:
-                                  category.label === selectedCategory
-                                    ? theme.palette.background.default
-                                    : theme.palette.text.neutralLightest,
-                                background:
-                                  category.label === selectedCategory
-                                    ? theme.palette.secondary.main
-                                    : "none",
-                                padding: "8px 12px",
-                                borderRadius: "12px",
-                                fontSize: "16px",
-                                fontWeight: 500,
-                                lineHeight: "24px",
-                                cursor: "pointer",
-                              }}
-                            >
-                              {category.label}
-                            </Typography>
-                          </ListItem>
-                        ))}
-                      </List>
-                    </Box>
-                  </>
-                ) : (
-                  <>
-                    <List
-                      sx={{
-                        position: "sticky",
-                        top: 102,
-                        zIndex: 1100,
-                        overflowY: "auto",
-                        maxHeight: "calc(100vh - 102px)",
-                        borderRight: "1px solid #737380",
-                      }}
-                    >
-                      {userGuideMenuOptions.map((option, index) => (
-                        <ListItem
-                          onClick={() => handleClickMenuItem(option.label)}
-                          key={index}
-                        >
-                          {option.label === selectedCategory ? (
-                            <>
-                              <Box
-                                component="div"
-                                sx={{
-                                  display: "flex",
-                                  padding: "8px 12px",
-                                  alignItems: "center",
-                                  gap: "10px",
-                                  alignSelf: "stretch",
-                                  borderRadius: "12px",
-                                  background: theme.palette.secondary.main,
-                                  color: theme.palette.background.default,
-                                  fontSize: "16px",
-                                  fontStyle: "normal",
-                                  fontWeight: 500,
-                                  lineHeight: "24px",
-                                  cursor: "pointer",
-                                  width: "100%",
-                                }}
-                              >
-                                <Typography
-                                  sx={{
-                                    gap: "10px",
-                                    alignSelf: "stretch",
-                                    borderRadius: "12px",
-                                    fontSize: "16px",
-                                    fontStyle: "normal",
-                                    fontWeight: 500,
-                                    lineHeight: "24px",
-                                    cursor: "pointer",
-                                    width: "100%",
-                                  }}
-                                >
-                                  {option.label}
-                                </Typography>
-                              </Box>
-                            </>
-                          ) : (
-                            <>
-                              <Typography
-                                sx={{
-                                  color: theme.palette.text.neutralLightest,
-                                  fontSize: "16px",
-                                  fontStyle: "normal",
-                                  fontWeight: 500,
-                                  lineHeight: "24px",
-                                  cursor: "pointer",
-                                }}
-                              >
-                                {option.label}
-                              </Typography>
-                            </>
-                          )}
-                        </ListItem>
-                      ))}
-                    </List>
-                  </>
-                )}
-              </Grid>
-              <Grid
-                item
-                xs={12}
-                md={9.6}
-                lg={10}
-                sx={{
-                  background: "transparent",
-                  padding: {
-                    xs: "0px 20px",
-                    sm: "20px 0pxs",
-                  },
-                }}
-              >
-                <Typography
-                  sx={{
-                    color: theme.palette.text.neutralLightest,
-                    fontFamily: "Dosis",
-                    fontSize: "32px",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "36px",
-                    marginBottom: "32px",
-                  }}
-                >
-                  User Guide
-                </Typography>
-                <Typography
-                  ref={submitVotesRef}
-                  sx={{
-                    marginTop: "24px",
-                    color: theme.palette.text.neutralLightest,
-                    fontFamily: "Dosis",
-                    fontSize: "24px",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "28px",
-                    marginBottom: "16px",
-                  }}
-                >
-                  To Submit Votes, You’ll Need:
-                </Typography>
-                <Grid container spacing={2}>
-                  {userGuideMenuOptions[0].sections.map((section) => {
-                    return (
-                      <Grid item xs={12} sm={6}>
-                        <UserGuideCard
-                          number={section.number}
-                          title={section.title}
-                          description={section.description}
-                          link={section.link}
-                        />
-                      </Grid>
-                    );
-                  })}
-                </Grid>
-                <Typography
-                  ref={createAccountsRef}
-                  sx={{
-                    marginTop: "24px",
-                    color: theme.palette.text.neutralLightest,
-                    fontFamily: "Dosis",
-                    fontSize: "24px",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "28px",
-                    marginBottom: "16px",
-                  }}
-                >
-                  Create and Verify Your Account:
-                </Typography>
-                <Grid container spacing={2}>
-                  {userGuideMenuOptions[1].sections.map((section) => {
-                    return (
-                      <Grid item xs={12} sm={6}>
-                        <UserGuideCard
-                          number={section.number}
-                          title={section.title}
-                          description={section.description}
-                          link={section.link}
-                        />
-                      </Grid>
-                    );
-                  })}
-                </Grid>
-
-                <Typography
-                  ref={howVoteRef}
-                  sx={{
-                    marginTop: "24px",
-                    color: theme.palette.text.neutralLightest,
-                    fontFamily: "Dosis",
-                    fontSize: "24px",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "28px",
-                    marginBottom: "16px",
-                  }}
-                >
-                  How to Submit a Vote:
-                </Typography>
-                <Grid container spacing={2}>
-                  {userGuideMenuOptions[2].sections.map((section) => {
-                    return (
-                      <Grid item xs={12} sm={6} md={4}>
-                        <UserGuideCard
-                          number={section.number}
-                          title={section.title}
-                          description={section.description}
-                          link={section.link}
-                        />
-                      </Grid>
-                    );
-                  })}
-                </Grid>
-                <Grid
-                  container
-                  spacing={2}
-                  justifyContent="center"
-                  sx={{
-                    marginTop: "24px",
-                  }}
-                >
-                  <Grid
-                    item
-                    sx={{
-                      width: {
-                        xs: "100%",
-                        md: "auto",
-                      },
-                    }}
-                  >
-                    <CustomButton
-                      onClick={() => handleNavigate(ROUTES.CATEGORIES)}
-                      colorVariant="primary"
-                      sx={{
-                        width: {
-                          xs: "100%",
-                          md: "auto",
-                        },
-                      }}
-                    >
-                      Vote Now
-                    </CustomButton>
-                  </Grid>
-                </Grid>
-              </Grid>
-            </Grid>
-            <img
-              src={Ellipses}
-              style={{
-                position: "fixed",
-                right: "0",
-                top: "70%",
-                transform: "translateY(-25%)",
-                zIndex: "-1",
-                width: "70%",
-              }}
-            />
-          </Box>
-        </>
-      </PageBase>
-    </>
-  );
-};
-
-export { UserGuide2 };
diff --git a/ui/summit-2024/src/pages/UserGuide2/components/UserGuideCard.tsx b/ui/summit-2024/src/pages/UserGuide2/components/UserGuideCard.tsx
deleted file mode 100644
index d7db891dc..000000000
--- a/ui/summit-2024/src/pages/UserGuide2/components/UserGuideCard.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Paper, Typography, Box, Link } from "@mui/material";
-import theme from "../../../common/styles/theme";
-import guideBg from "../../../assets/bg/guideCard.svg";
-import { CustomCardProps } from "./UserGuideCard.type";
-
-const UserGuideCard = ({
-  number,
-  title,
-  description,
-  link,
-}: CustomCardProps) => {
-  return (
-    <Paper
-      elevation={3}
-      sx={{
-        width: "100%",
-        minHeight: "276px",
-        height: "100%",
-        flexShrink: 0,
-        borderRadius: "24px",
-        border: theme.palette.background.default,
-        backdropFilter: "blur(5px)",
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        padding: "28px",
-        backgroundImage: `url(${guideBg})`,
-        backgroundSize: "180% 160%",
-        backgroundPosition: "center",
-      }}
-    >
-      <Box
-        component="div"
-        sx={{
-          maxWidth: "419px",
-        }}
-      >
-        <Box
-          component="div"
-          sx={{ display: "flex", alignItems: "center", paddingLeft: 1 }}
-        >
-          <Box
-            component="div"
-            sx={{
-              width: "40px",
-              height: "40px",
-              borderRadius: "50%",
-              border: `2px solid ${theme.palette.text.neutralLightest}`,
-              color: "white",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              marginRight: 2,
-              padding: "8px 0px",
-            }}
-          >
-            {number}
-          </Box>
-        </Box>
-        <Typography
-          sx={{
-            marginTop: "24px",
-            color: theme.palette.text.neutralLightest,
-            fontFamily: "Dosis",
-            fontSize: "24px",
-            fontStyle: "normal",
-            fontWeight: 700,
-            lineHeight: "28px",
-          }}
-        >
-          {title}
-        </Typography>
-        <Typography
-          sx={{
-            marginTop: "12px",
-            color: theme.palette.text.neutralLight,
-            fontSize: "16px",
-            fontStyle: "normal",
-            fontWeight: 500,
-            lineHeight: "24px",
-            marginBottom: "24px",
-          }}
-        >
-          {description}
-        </Typography>
-        {link && (
-          <Typography
-            sx={{
-              color: theme.palette.secondary.main,
-              fontSize: "16px",
-              fontStyle: "normal",
-              fontWeight: 500,
-              lineHeight: "24px",
-              textDecorationLine: "underline",
-              marginBottom: "24px",
-            }}
-          >
-            <Link
-              href={link.url}
-              target="_blank"
-              rel="noopener"
-              sx={{
-                color: theme.palette.secondary.main,
-              }}
-            >
-              {link.label}
-            </Link>
-          </Typography>
-        )}
-      </Box>
-    </Paper>
-  );
-};
-
-export { UserGuideCard };
diff --git a/ui/summit-2024/src/pages/UserGuide2/components/UserGuideCard.type.ts b/ui/summit-2024/src/pages/UserGuide2/components/UserGuideCard.type.ts
deleted file mode 100644
index 2f8b4a9a3..000000000
--- a/ui/summit-2024/src/pages/UserGuide2/components/UserGuideCard.type.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-interface CustomCardProps {
-  number: number;
-  title: string;
-  description: string;
-  link?:
-    | {
-        label: string;
-        url: string;
-      }
-    | undefined;
-}
-
-export { CustomCardProps };
diff --git a/ui/summit-2024/src/routes/index.tsx b/ui/summit-2024/src/routes/index.tsx
index 271ba9341..1ea1c0a73 100644
--- a/ui/summit-2024/src/routes/index.tsx
+++ b/ui/summit-2024/src/routes/index.tsx
@@ -2,13 +2,12 @@ import { useEffect } from "react";
 import { Route, Routes, useLocation } from "react-router-dom";
 import { Home } from "../pages/Home";
 import { Categories } from "../pages/Categories";
-import { UserGuide } from "../pages/UserGuide/UserGuide";
 import { Leaderboard } from "../pages/Leaderboard/Leaderboard";
 import { ReceiptHistory } from "../pages/ReceiptHistory/ReceiptHistory";
 import { NotFound } from "../pages/NotFound/NotFound";
 import { TermsAndConditions } from "../pages/TermsAndPolicy/TermsAndConditions";
 import TermsAndConditions2 from "../pages/TermsAndPolicy2/TermsAndConditions2";
-import {UserGuide2} from "../pages/UserGuide2/UserGuide2";
+import UserGuide from "../pages/UserGuide/UserGuide";
 
 export const PAGE_PATH = "/";
 
@@ -38,7 +37,7 @@ const PageRouter = () => {
         <Route path={ROUTES.CATEGORIES} element={<Categories />} />
         <Route path={ROUTES.RECEIPTS} element={<ReceiptHistory />} />
         <Route path={ROUTES.LEADERBOARD} element={<Leaderboard />} />
-        <Route path={ROUTES.USER_GUIDE} element={<UserGuide2 />} />
+        <Route path={ROUTES.USER_GUIDE} element={<UserGuide />} />
         <Route
           path={ROUTES.TERMS_AND_CONDITIONS}
           element={<TermsAndConditions />}