feat: add terms, disclaimer and privacy policy pages (#456)

* feat: add terms page

* fix: add disclaimer

* fix: add privacy policy

* fix: styling

* fix: improve belearn icon

* fix: review comments

src/config/constants.ts

@@ -25,3 +25,5 @@ export const NS = {
   Common: 'common',
   Enums: 'enums',
 } as const;
+
+export const PRIVACY_EMAIL = '[email protected]';

src/modules/landing/footer/Footer.tsx

@@ -81,7 +81,17 @@ const socialLinks = [
   },
 ];
 
-const internalLinkActiveProp = () => ({ sx: { textDecoration: 'underline' } });
+const internalLinkActiveProp = () => ({
+  sx: {
+    backgroundColor: '#00000040',
+    '&::before': {
+      content: `url("data:image/svg+xml,${encodeURI('<svg xmlns="http://www.w3.org/2000/svg" color="white" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>')}")`,
+      position: 'relative',
+      top: '2px',
+      marginRight: '8px',
+    },
+  },
+});
 
 export function Footer(): JSX.Element {
   const { t } = useTranslation(NS.Landing);

src/modules/landing/home/icons/BeLEARN.tsx

@@ -17,23 +17,7 @@ export function BeLEARN({
       <title>BeLEARN</title>
       <defs>
         <style>
-          {`
-      .cls-1 {
-        fill: none;
-      }
-
-      .cls-2 {
-        clip-path: url(#clippath-1);
-      }
-
-      .cls-3 {
-        clip-path: url(#clippath-2);
-      }
-
-      .cls-4 {
-        clip-path: url(#clippath);
-      }
-        `}
+          {`.cls-1 {fill: none;}.cls-2 {clip-path: url(#clippath-1);}.cls-3 {clip-path: url(#clippath-2);}.cls-4 {clip-path: url(#clippath);}`}
         </style>
         <clipPath id="clippath">
           <path

src/modules/landing/privacyPolicy/layouts.tsx

@@ -0,0 +1,112 @@
+import { ReactNode } from 'react';
+
+import { Stack, Typography } from '@mui/material';
+
+export function Section({
+  children,
+  title,
+}: {
+  children: ReactNode;
+  title: ReactNode;
+}): JSX.Element {
+  return (
+    <Stack gap={2}>
+      <SectionTitle>{title}</SectionTitle>
+      <Stack component="ol" sx={{ paddingInlineStart: 0 }} gap={4}>
+        {children}
+      </Stack>
+    </Stack>
+  );
+}
+
+export function SectionTitle({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <Typography component="li" variant="h2" color="primary">
+      {children}
+    </Typography>
+  );
+}
+
+export function ListItem({ children }: { children: ReactNode }): JSX.Element {
+  return <Typography component="li">{children}</Typography>;
+}
+export function Paragraphs({ children }: { children: ReactNode }): JSX.Element {
+  return (
+    <Stack direction="column" gap={2}>
+      {children}
+    </Stack>
+  );
+}
+
+export function SubSection({
+  children,
+  title,
+}: {
+  children: ReactNode;
+  title: string;
+}): JSX.Element {
+  return (
+    <Paragraphs>
+      <Typography variant="h5" component="li">
+        {title}
+      </Typography>
+      {children}
+    </Paragraphs>
+  );
+}
+
+export function EnumeratedParagraph({
+  children,
+  text,
+}: {
+  children: ReactNode;
+  text: ReactNode;
+}): JSX.Element {
+  return (
+    <Stack gap={1}>
+      <Typography>{text}</Typography>
+      <Stack
+        component="ol"
+        gap={1}
+        sx={{
+          paddingInlineStart: '20px',
+          '& li': {
+            listPosition: 'outside',
+          },
+        }}
+      >
+        {children}
+      </Stack>
+    </Stack>
+  );
+}
+
+export function ListedParagraph({
+  children,
+  text,
+}: {
+  children: ReactNode;
+  text?: ReactNode;
+}): JSX.Element {
+  return (
+    <Stack gap={1}>
+      {text && <Typography>{text}</Typography>}
+      <Stack
+        component="ul"
+        sx={{
+          paddingInlineStart: '20px',
+          listStyleType: 'disc',
+          '& li': {
+            listPosition: 'outside',
+          },
+        }}
+      >
+        {children}
+      </Stack>
+    </Stack>
+  );
+}