Feat/footer

apps/documentation/docusaurus.config.js

@@ -278,6 +278,7 @@ module.exports = {
         disableInDev: false,
       },
     ],
+    ['docusaurus-plugin-sass', {}],
     [
       '@packages/docusaurus-plugin-github-release',
       {

apps/documentation/package.json

@@ -37,6 +37,7 @@
     "@docusaurus/eslint-plugin": "^2.2.0",
     "@docusaurus/module-type-aliases": "^2.2.0",
     "@docusaurus/plugin-client-redirects": "^2.2.0",
+    "@docusaurus/plugin-content-docs": "2.2.0",
     "@docusaurus/plugin-google-analytics": "^2.2.0",
     "@docusaurus/plugin-ideal-image": "^2.2.0",
     "@docusaurus/preset-classic": "^2.2.0",
@@ -48,18 +49,23 @@
     "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.3",
     "@packages/docusaurus-plugin-github-release": "workspace:*",
+    "@packages/ui": "workspace:*",
     "@svgr/webpack": "^6.2.1",
     "@typeform/embed-react": "^1.19.0",
     "clsx": "^1.2.1",
+    "docusaurus-plugin-sass": "0.2.2",
     "moment": "^2.29.4",
+    "node-sass": "8.0.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-device-detect": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-github-btn": "^1.3.0",
     "react-image-lightbox": "^5.1.4",
     "react-lite-youtube-embed": "^2.2.2",
-    "react-material-ui-carousel": "^3.4.2"
+    "react-material-ui-carousel": "^3.4.2",
+    "sass": "^1.56.2",
+    "sass-loader": "^13.2.0"
   },
   "devDependencies": {
     "@docusaurus/eslint-plugin": "^2.2.0",

apps/documentation/src/components/school/index/intro.js

@@ -8,8 +8,8 @@ import Paper from '@mui/material/Paper';
 import Select from '@mui/material/Select';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-
 import CardGrid from './cardGrid';
+import { Footer } from '@packages/ui';
 
 import styles from './index.module.css';
 import data from './data/dataIntro.json';
@@ -74,6 +74,7 @@ const Intro = (props) => {
 
   return (
     <div>
+      <Footer />
       <Paper className={styles.introContainer} elevation={1}>
         {/* Title & Text container */}
         <Grid container spacing={2}>

apps/documentation/src/theme/Footer/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare function Footer(): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof Footer>;
+export default _default;

apps/documentation/src/theme/Footer/index.js

@@ -0,0 +1,264 @@
+import React, { useState } from 'react';
+import styles from './styles.module.scss';
+import GitHubButton from 'react-github-btn';
+import Grid from '@mui/material/Grid';
+import { clsx } from 'clsx';
+import { Link } from '@mui/material';
+import Tutorials from '@packages/ui/src/footer/data/Tutorials.json';
+import BlogPost from '@packages/ui/src/footer/data/blogPost.json';
+import GitCommits from '@packages/ui/src/footer/data/gitCommits.json';
+
+export const Footer = () => {
+  const [mounted, setMounted] = useState(false);
+
+  const tutorials = Tutorials;
+  const lastBlogPosts = BlogPost;
+  const lastCommits = GitCommits;
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    // for server-side rendering
+    // learn more at https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
+    return null;
+  }
+
+  return (
+    <footer className={clsx('footer')} style={{ padding: '50px' }}>
+      <Grid container style={{ marginBottom: '30px' }}>
+        <Grid item xs={12} md={4} lg={4} xl={4}>
+          {' '}
+          <img
+            src="/assets/images/index/powered/luos-dark.svg"
+            style={{ verticalAlign: 'middle', width: '150px' }}
+            alt="luos-dark"
+          />
+        </Grid>
+        <Grid item xs={12} md={4} lg={4} xl={4}>
+          <h2 className={styles.title}>Support us</h2>
+          <div className="footer__bottom btn_footer">
+            <GitHubButton
+              href="https://github.com/luos-io"
+              aria-label="Follow @luos-io on GitHub"
+              data-size="large"
+            >
+              Follow @luos-io
+            </GitHubButton>
+
+            <GitHubButton
+              href="https://github.com/luos-io/luos_engine"
+              data-icon="octicon-star"
+              aria-label="Star luos-io/documentation on GitHub"
+              data-size="large"
+              data-show-count="true"
+            >
+              Star
+            </GitHubButton>
+          </div>
+        </Grid>
+        <Grid item xs={12} md={4} lg={4} xl={4}>
+          <h2 className={styles.titleCommunity}>Join our community</h2>
+          <div className={styles.joinUsContainer}>
+            <a href="https://discord.gg/luos" rel="nofollow">
+              <img
+                src="/assets/images/logo/discord.webp"
+                className={styles.rsLogo}
+                loading="lazy"
+                width="32"
+                height="32"
+                alt="discord logo"
+              />
+            </a>
+            <a href="https://www.reddit.com/r/Luos/" rel="nofollow">
+              <img
+                src="/assets/images/logo/reddit.webp"
+                className={styles.rsLogo}
+                loading="lazy"
+                width="32"
+                height="32"
+                alt="reddit logo"
+              />
+            </a>
+            <a href="https://twitter.com/Luos_io" rel="nofollow">
+              <img
+                src="/assets/images/logo/twitter.webp"
+                className={styles.rsLogo}
+                loading="lazy"
+                width="32"
+                height="32"
+                alt="twitter logo"
+              />
+            </a>
+            <a href="https://www.linkedin.com/company/luos" rel="nofollow">
+              <img
+                src="/assets/images/logo/linkedin.webp"
+                className={styles.rsLogo}
+                loading="lazy"
+                width="32"
+                height="32"
+                alt="linkedin logo"
+              />
+            </a>
+            <a href="https://www.youtube.com/channel/UCWeIoHVY9Z-04kdwXNtv2FA" rel="nofollow">
+              <img
+                src="/assets/images/logo/youtube.webp"
+                className={styles.rsLogo}
+                loading="lazy"
+                width="32"
+                height="32"
+                alt="youtube logo"
+              />
+            </a>
+          </div>
+        </Grid>
+      </Grid>
+
+      <Grid container>
+        <Grid item xs={12} md={4} lg={4} xl={4}>
+          <h2 className={styles.subtitle}>Latest articles on our blog</h2>
+          {lastBlogPosts.map((element, index) => (
+            <Link
+              key={index}
+              href={element.permalink}
+              className={`${styles.link} ${styles.blogArticle} `}
+            >
+              {element.title}
+            </Link>
+          ))}
+          <Link
+            className={`${styles.link} ${styles.blog}`}
+            href="/blog"
+            style={{ marginBottom: '30px' }}
+          >
+            Our Blog
+          </Link>
+          <h2 className={styles.subtitle}>Latest tutorials on our documentation</h2>
+          {tutorials.map((element, index) => (
+            <Link key={index} href={element.link} className={styles.link}>
+              {element.title}
+            </Link>
+          ))}
+          <Link className={`${styles.link} ${styles.tuto}`} href="/tutorials">
+            Our Tutorials
+          </Link>
+        </Grid>
+        <Grid item xs={12} md={4} lg={4} xl={4} pr={4}>
+          <h2 className={styles.subtitle}>Latest commits on Luos repository</h2>
+          {lastCommits.map((commit, index) => (
+            <Link key={index} href={commit.link} className={styles.link} rel="nofollow">
+              {commit.title}
+            </Link>
+          ))}
+        </Grid>
+        <Grid item xs={12} md={4} lg={4} xl={4}>
+          <h2 className={styles.subtitle}>Learn more about us</h2>
+          <Link
+            className={`${styles.link} ${styles.blog} ${styles.mbTen}`}
+            href="/docs/luos-technology"
+          >
+            Technology
+          </Link>
+          <Link
+            className={`${styles.link} ${styles.tuto} ${styles.mbTen}`}
+            href="https://app.luos.io/"
+          >
+            Tools
+          </Link>
+          <span className={` ${styles.span} ${styles.ressources}`}>Resources</span>
+          <ul className={styles.list}>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.ressourcesLink} ${styles.mbZero}`}
+                href="/tutorials/get-started"
+              >
+                Get Started
+              </Link>
+            </li>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.ressourcesLink} ${styles.mbZero}`}
+                href="/tutorials"
+              >
+                Tutorials
+              </Link>
+            </li>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.ressourcesLink} ${styles.mbZero}`}
+                href="/docs/luos-technology"
+              >
+                Documentation
+              </Link>
+            </li>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.ressourcesLink} ${styles.mbZero}`}
+                href="/faq"
+              >
+                Troubleshooting
+              </Link>
+            </li>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.ressourcesLink} ${styles.mbZero}`}
+                href="/blog"
+              >
+                Blog
+              </Link>
+            </li>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.ressourcesLink} ${styles.mbZero}`}
+                href="/roadmap"
+              >
+                Roadmap
+              </Link>
+            </li>
+          </ul>
+          <span className={` ${styles.span} ${styles.community}`}>Community</span>
+          <ul className={styles.list}>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.communityLink} ${styles.mbZero}`}
+                href="https://discord.gg/luos"
+                rel="nofollow"
+              >
+                Discord
+              </Link>
+            </li>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.communityLink} ${styles.mbZero}`}
+                href="https://www.reddit.com/r/Luos/"
+                rel="nofollow"
+              >
+                Reddit
+              </Link>
+            </li>
+            <li>
+              {' '}
+              <Link
+                className={`${styles.link} ${styles.communityLink} ${styles.mbZero}`}
+                href="https://github.com/Luos-io"
+                rel="nofollow"
+              >
+                Github
+              </Link>
+            </li>
+          </ul>
+        </Grid>
+      </Grid>
+    </footer>
+  );
+};
+
+export default Footer;