Welcome page improvement

.eslintrc.json

@@ -10,7 +10,7 @@
         {
             "files": ["**/*.d.ts"],
             "parser": "@typescript-eslint/parser",
-            "plugins": ["@typescript-eslint", "plugin:@typescript-eslint/recommended"]
+            "plugins": ["@typescript-eslint"]
         }
     ],
     "parser": "@typescript-eslint/parser",

custom.d.ts

@@ -12,3 +12,8 @@ declare module '*.png' {
     const content: any
     export = content
 }
+
+declare module '*.jpg' {
+    const content: any
+    export = content
+}

package.json

@@ -38,8 +38,8 @@
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "@types/ziggy-js": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
     "autoprefixer": "^10.2.4",
     "axios": "^0.21",
     "babel-eslint": "^10.1.0",

public/translation_en.json

@@ -256,7 +256,13 @@
     "welcome": {
         "welcome-text-1": "Welcome to ",
         "session-tome": "Session Tome",
-        "welcome-text-2": ". Create an account to manage your characters, campaigns and items at D&D events.",
-        "upcoming-events": "Upcoming Events"
+        "welcome-text-2": "Create an account to manage your characters, campaigns and items at D&D events.",
+        "what-is-dnd": "What is Dungeons & Dragons?",
+        "dnd-definition": "Dungeons & Dragons is a tabletop game where shared storytelling and improvisation makes for an experience like no other.",
+        "more-definition": "For more information, please visit the",
+        "what-is-adventure-league": "What is Dungeons & Dragons Adventurers League?",
+        "adventure-league-definition": "Adventurers League is an official program of organized Dungeons & Dragons gameplay. Each game or module is around 4 hours in duration, and each module belongs to a unified seasonal storyline. Players that create an AL character and record their rewards and can take that character anywhere in the world where D&D Adventurers League games are played and join in the action!",
+        "wizard-of-coast-website": "official Wizards of the Coast website.",
+        "official-site": "official website."
     }
 }

public/translation_fr.json

@@ -257,7 +257,13 @@
     "welcome": {
         "welcome-text-1": "Bienvenue à ",
         "session-tome": "Session Tome",
-        "welcome-text-2": ". Créer un compte pour gérer vos personnages, campagnes et objets pour les parties de D&D.",
-        "upcoming-events": "Évènements à venir"
+        "welcome-text-2": "Créer un compte pour gérer vos personnages, campagnes et objets pour les parties de D&D.",
+        "what-is-dnd": "Qu'est ce que c'est Donjons & Dragons?",
+        "dnd-definition": "Dungeons & Dragons (D&D) est une jeu de table mettant de l’avant des histoires, de la narration ainsi que de l’improvisation pour vous faire vivre des expériences stimulantes et uniques.",
+        "more-definition": "Pour plus d’information, visitez",
+        "what-is-adventure-league": "Qu'est ce que c'est la Ligue des Aventuriers de Donjons & Dragons?",
+        "adventure-league-definition": "Adventurers League (AL) est le programme officiel de jeu organisé par Wizards of the Coast. Chaque aventure ou module est d’une durée approximative de 4 heures. Ces aventures sont reliées à des saisons thématiques spécifiques. Les joueurs créent un personnage AL et enregistre leur progrès et peuvent ainsi jouer ce personnage n’importe où sur la planète.",
+        "wizard-of-coast-website": "le site officiel de Wizards of the Coast.",
+        "official-site": "le site web officiel"
     }
 }

resources/js/Layouts/ApplicationLayout/ApplicationLayout.tsx

@@ -125,6 +125,9 @@ const ApplicationLayout = ({children}: LayoutProps) => {
                         width: '0.4em',
                         height: '0.4em',
                     },
+                    '*::-webkit-scrollbar-track': {
+                        backgroundColor: '#23272a',
+                    },
                     '*::-webkit-scrollbar-thumb': {
                         backgroundColor: '#babac0',
                         borderRadius: 16,

resources/js/Pages/Welcome/Welcome.tsx

@@ -1,19 +1,50 @@
-import {Box, Container, Grid, Typography} from '@mui/material'
-import {Select} from 'Components'
+import {Grid, Link, Typography} from '@mui/material'
 import i18n from 'i18next'
+import dice from 'Icons/dice.svg'
+import dndBanner from 'Images/dnd-banner.png'
 import {useTranslation} from 'react-i18next'
+import SVG from 'react-inlinesvg'
 import styled from 'styled-components'
 import {UserType} from 'Types/global'
 
-const StyledBox = styled(Box)`
+const Container = styled.div`
+    text-align: center;
+    max-width: 70%;
+    margin: 0px auto;
+    padding: 24px;
+
+    @media only screen and (max-width: 1200px) {
+        width: 100%;
+    }
+`
+
+const StyledImg = styled.img`
+    width: 100%;
+`
+
+const StyledSVG = styled(SVG)`
+    margin-right: 0.5em;
+`
+
+const StyledText = styled.p`
     font-family: 'Cinzel Decorative', cursive;
     font-size: 16px;
+    display: inline;
     text-align: center;
 `
 
-const CenteredGrid = styled(Grid)`
-    align-items: center;
-    justify-content: center;
+const StyledTypography = styled(Typography)<{align?: string}>`
+    text-align: ${(props) => (props.align ? props.align : 'start')};
+    margin-bottom: 12px;
+`
+
+const StyledLink = styled(Link)`
+    display: inline;
+    text-decoration: none;
+`
+
+const LanguageSelector = styled(Typography)`
+    cursor: pointer;
 `
 
 type WelcomeProps = {
@@ -28,36 +59,61 @@ const Welcome = (props: WelcomeProps) => {
     const {user} = auth
 
     return (
-        <Container maxWidth='lg'>
-            <CenteredGrid
-                container
-                spacing={{xs: 2, md: 6}}
-                direction='column'
-                alignItems='center'
-                justifyContent='center'>
+        <Container>
+            <Grid container spacing={6}>
                 <Grid item xs={12}>
-                    <Typography sx={{textAlign: 'center'}} component='div'>
+                    <StyledTypography align='center'>
                         {t('welcome.welcome-text-1')}
-                        <StyledBox display='inline'>{t('welcome.session-tome')}</StyledBox>
+                        <StyledText>{t('welcome.session-tome')}</StyledText>
+                    </StyledTypography>
+                    <StyledTypography align='center'>
                         {t('welcome.welcome-text-2')}
-                    </Typography>
+                    </StyledTypography>
                 </Grid>
-            </CenteredGrid>
-            {!user && (
-                <Grid container style={{marginTop: 16}}>
-                    <Grid item xs={4} />
-                    <Grid item xs={4}>
-                        <Select
-                            options={['English', 'Français']}
-                            onChange={(e) => {
-                                i18n.changeLanguage(e.target.value === 'English' ? 'en' : 'fr')
-                            }}
-                            defaultValue='English'
-                        />
-                    </Grid>
-                    <Grid item xs={4} />
+                <Grid item xs={12}>
+                    <StyledImg src={dndBanner} alt='dungeon-and-dragons-banner' />
+                </Grid>
+                <Grid item md={6} xs={12}>
+                    <StyledTypography variant='h4'>
+                        <StyledSVG src={dice} />
+                        {t('welcome.what-is-dnd')}
+                    </StyledTypography>
+                    <StyledTypography>{t('welcome.dnd-definition')}</StyledTypography>
+                    <StyledTypography>
+                        {t('welcome.more-definition')}{' '}
+                        <StyledLink href='https://dnd.wizards.com/what-is-dnd' target='_blank'>
+                            {t('welcome.wizard-of-coast-website')}
+                        </StyledLink>
+                    </StyledTypography>
                 </Grid>
-            )}
+                <Grid item md={6} xs={12}>
+                    <StyledTypography variant='h4'>
+                        <StyledSVG src={dice} />
+                        {t('welcome.what-is-adventure-league')}
+                    </StyledTypography>
+                    <StyledTypography>{t('welcome.adventure-league-definition')}</StyledTypography>
+                    <StyledTypography>
+                        {t('welcome.more-definition')}{' '}
+                        <StyledLink
+                            href='http://dndadventurersleague.org/start-here/'
+                            target='_blank'>
+                            {t('welcome.official-site')}
+                        </StyledLink>
+                    </StyledTypography>
+                </Grid>
+                {!user && (
+                    <Grid item xs={12}>
+                        <Container style={{width: '20%'}}>
+                            <LanguageSelector onClick={() => i18n.changeLanguage('en')}>
+                                English
+                            </LanguageSelector>
+                            <LanguageSelector onClick={() => i18n.changeLanguage('fr')}>
+                                Français
+                            </LanguageSelector>
+                        </Container>
+                    </Grid>
+                )}
+            </Grid>
         </Container>
     )
 }