Merge pull request #321 from Arquisoft/develop-hugo

Add button to download the Android apk
Arquisoft · Apr 27, 2024 · c0a2070 · c0a2070
2 parents d85a4df + d787974
commit c0a2070
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/webapp/src/components/Footer.js b/webapp/src/components/Footer.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { AppBar, Toolbar, Typography, Link } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
+
 const Footer = () => {
     const { t } = useTranslation();
 

diff --git a/webapp/src/localize/en.json b/webapp/src/localize/en.json
@@ -25,7 +25,8 @@
 
     "Footer": {
         "api_questions": "QUESTIONS API DOC",
-        "api_users": "USERS API DOC"
+        "api_users": "USERS API DOC",
+        "apk_link": "Download for Android"
     },
 
     "Games": {

diff --git a/webapp/src/localize/es.json b/webapp/src/localize/es.json
@@ -25,7 +25,8 @@
 
     "Footer": {
         "api_questions": "DOCUMENTACIÓN DE LA API DE PREGUNTAS",
-        "api_users": "DOCUMENTACIÓN DE LA API DE USUARIOS"
+        "api_users": "DOCUMENTACIÓN DE LA API DE USUARIOS",
+        "apk_link": "Descargar para Android"
     },
 
     "Games": {

diff --git a/webapp/src/localize/fr.json b/webapp/src/localize/fr.json
@@ -25,7 +25,8 @@
 
     "Footer": {
         "api_questions": "DOCUMENTATION DE L'API DES QUESTIONS",
-        "api_users": "DOCUMENTATION DE L'API DES UTILISATEURS"
+        "api_users": "DOCUMENTATION DE L'API DES UTILISATEURS",
+        "apk_link": "Télécharger pour Android"
     },
 
     "Games": {

diff --git a/webapp/src/pages/Home.js b/webapp/src/pages/Home.js
@@ -1,11 +1,14 @@
 import * as React from "react";
-import {Box, Button} from "@mui/material";
+import {Box, Button, useTheme } from "@mui/material";
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTranslation } from 'react-i18next';
+import AndroidIcon from '@mui/icons-material/Android';
 
 const Home = () => {
     const xxl = useMediaQuery('(min-width:1920px)');
     const { t } = useTranslation();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
     const styles = {
         logo:{
@@ -102,6 +105,30 @@ const Home = () => {
             <video data-testid="video" ref={videoRef} autoPlay muted loop style={{ ...styles.video}}>
                 <source src="./home/Background-White.webm" type="video/mp4" />
             </video>
+
+
+            <a
+            href="https://mega.nz/file/vNVkhQwT#l3K-nttaNWJ1tjdUVXJlCClmYm9rmpgBS_ULNewASL4"
+            target="_blank"
+            rel="noopener noreferrer"
+            >
+            <Button
+                variant="contained"
+                size={isMobile ? 'small' : 'big'}
+                color="primary"
+                startIcon={<AndroidIcon style={{ marginRight: '0.2em', color: "3DDC84", fontSize: '2em' }} />}
+                style={{ marginTop: '0.8em' }}
+                sx={{
+                    '&:hover': {
+                      border: `2px solid #3DDC84`, 
+                      backgroundColor: 'primary.light', 
+                    },
+                  }}
+            >
+            {t("Footer.apk_link")}
+            </Button>
+          </a>
+
         </Box>
     );
 };