bug(ui): Edit the footer (#270)

## Description

This PR introduces new links in the foot of the menu
 
## Related Issues

closes #269

## Changes Made

- [FE] Added a url to the links
- [FE] Removed underline on links in the footer

src/assets/text/general.ts

@@ -20,9 +20,10 @@ export const general = {
   privacy: "Privacy",
   cookies: "Cookies",
   support: "Support",
-  discord: "Discord",
+  termsAndConditions: "Terms and Conditions",
   aleoOrg: "Aleo.org",
   zPass: "zPass",
+  obscura: "Obscura",
   dailyScore: "Daily score",
   aleoCreditsPayout: "Aleo credits payouts",
   clickChat: "Click on the chat to open messages",
@@ -43,6 +44,8 @@ export const general = {
   bot: "bot",
   confirm: "Confirm",
   aleoWebsite: "https://aleo.org/",
+  zpassWebsite: "https://zpass.aleo.org/",
+  obscuraWebsite: "https://obscura.build/",
   pageNotFound: "404:Page not found",
   formattedCountdown: (minutes: number, seconds: number): string =>
     `${minutes.toString().padStart(2, "0")}:${seconds

src/assets/text/index.ts

@@ -4,14 +4,15 @@ import { auth } from "./auth.js";
 import { chat } from "./chat.js";
 import { general } from "./general.js";
 import { homepage } from "./homepage.js";
+import { howToPlay } from "./how-to-play.js";
 import { leaderboard } from "./leaderboard.js";
 import { lobby } from "./lobby.js";
 import { matchPrompts } from "./match-prompts.js";
 import { match } from "./match.js";
 import { navigation } from "./navigation.js";
 import { playerProfile } from "./player-profile.js";
-import { howToPlay } from "./how-to-play.js";
 import { support } from "./support.js";
+import { termsAndConditions } from "./terms-and-conditions.js";
 
 export const text = {
   auth,
@@ -20,6 +21,7 @@ export const text = {
   navigation,
   wordsToLinkAbout,
   lobby,
+  termsAndConditions,
   match,
   leaderboard,
   homepage,

src/assets/text/terms-and-conditions.ts

@@ -0,0 +1,4 @@
+export const termsAndConditions = {
+  welcome: "Terms and Conditions",
+  content: [`Use at own risk`],
+};

src/components/main-menu/footer.tsx

@@ -1,7 +1,7 @@
-import { type FC } from "react";
 import { Box, Stack, Typography } from "@mui/material";
 import Link from "next/link.js";
 import { useRouter } from "next/router.js";
+import { type FC } from "react";
 
 import { text } from "~/assets/text/index.js";
 import { pages } from "~/router.js";
@@ -30,24 +30,40 @@ export const Footer: FC<Props> = ({ handleClose }) => {
         >
           {text.general.support}
         </Typography>
-        <Typography variant="h4" sx={styles.textButton}>
-          {text.general.discord}
+        <Typography
+          variant="h4"
+          sx={styles.textButton}
+          onClick={() => handleNavigation(pages.termsAndConditions)}
+        >
+          {text.general.termsAndConditions}
         </Typography>
-        <Link href={text.general.aleoWebsite} target="_blank">
+        <Link
+          href={text.general.aleoWebsite}
+          target="_blank"
+          style={{ textDecoration: "none" }}
+        >
           <Typography variant="h4" sx={styles.textButton}>
             {text.general.aleoOrg}
           </Typography>
         </Link>
-        <Typography variant="h4" sx={styles.textButton}>
-          {text.general.zPass}
-        </Typography>
-        <Typography
-          variant="h4"
-          onClick={() => handleNavigation(pages.privacy)}
-          sx={styles.textButton}
+        <Link
+          href={text.general.obscuraWebsite}
+          target="_blank"
+          style={{ textDecoration: "none" }}
         >
-          {text.general.legal}
-        </Typography>
+          <Typography variant="h4" sx={styles.textButton}>
+            {text.general.zPass}
+          </Typography>
+        </Link>
+        <Link
+          href={text.general.obscuraWebsite}
+          target="_blank"
+          style={{ textDecoration: "none" }}
+        >
+          <Typography variant="h4" sx={styles.textButton}>
+            {text.general.obscura}
+          </Typography>
+        </Link>
       </Box>
     </Stack>
   );

src/components/main-menu/styles.ts

@@ -1,7 +1,7 @@
 import { type SxProps } from "@mui/material";
 
-import { breakpoints, theme } from "~/styles/theme.js";
 import { styles as navbarStyles } from "~/components/navbar/styles.js";
+import { breakpoints, theme } from "~/styles/theme.js";
 
 export const styles = {
   dialog: {

src/pages/terms-and-conditions.tsx

@@ -0,0 +1,24 @@
+import { Stack, Typography } from "@mui/material";
+
+import { text } from "~/assets/text/index.js";
+import { PageLayout } from "~/containers/page-layout/index.js";
+import { styles } from "~/styles/pages/about.js";
+import { processTextToLink } from "~/utils/links.jsx";
+
+const TermsAndConditions = () => (
+  <PageLayout title={text.termsAndConditions.welcome}>
+    {text.termsAndConditions.content.map((content: string, key: number) => (
+      <Typography
+        key={key}
+        variant="body1"
+        pt={key === 0 ? 0 : 5}
+        sx={styles.body}
+      >
+        {processTextToLink(content, text.wordsToLinkAbout)}
+      </Typography>
+    ))}
+    <Stack pt="100px" />
+  </PageLayout>
+);
+
+export default TermsAndConditions;

src/router.ts

@@ -11,4 +11,5 @@ export const pages = {
   support: "/support",
   privacy: "/privacy",
   animationLab: "/animation-lab",
+  termsAndConditions: "/terms-and-conditions",
 };