add new pages

src/App.tsx

@@ -2,7 +2,9 @@ import './App.css'
 import { ThemeProvider } from '@mui/material/styles'
 import { Routes, Route } from 'react-router-dom'
 
+import HomePage from './Pages/Home/Homepage'
 import VideoCall from './Pages/VideoCall/VideoCall'
+import SignInSide from './Pages/SignIn/SignInSide'
 
 import { theme } from './Services/Utils/theme'
 import { Box } from '@mui/material'
@@ -12,7 +14,9 @@ function App() {
     <ThemeProvider theme={theme}>
       <Box className='App'>
         <Routes>
-          <Route path='/' element={<VideoCall />} />
+          <Route path='/' element={<SignInSide />} />
+          <Route path='/home' element={<HomePage />} />
+          <Route path='/videocall' element={<VideoCall />} />
           <Route path='/:channel' element={<VideoCall />} />
         </Routes>
       </Box>

src/Pages/Home/Homepage.tsx

+import * as React from 'react'
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  CssBaseline,
+  Container,
+  Box,
+  Grid,
+  Card,
+  CardContent,
+  CardMedia,
+  Button,
+  Grow,
+  IconButton,
+} from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { useNavigate } from 'react-router-dom'
+import VideoCallIcon from '@mui/icons-material/VideoCall'
+import SchoolIcon from '@mui/icons-material/School'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import YouTubeIcon from '@mui/icons-material/YouTube'
+import BackgroundImage from '../../Assests/Images/Background.jpeg'
+
+const defaultTheme = createTheme({
+  palette: {
+    primary: {
+      main: '#1976d2',
+    },
+    secondary: {
+      main: '#dc004e',
+    },
+  },
+  typography: {
+    fontFamily: 'Roboto, sans-serif',
+  },
+})
+
+// function Header() {
+//   return (
+//     <AppBar position='static' sx={{ backgroundColor: 'primary.main' }}>
+//       <Toolbar>
+//         <Typography
+//           variant='h4'
+//           component='div'
+//           sx={{ flexGrow: 1, fontFamily: 'Roboto', fontWeight: 'bold' }}
+//         >
+//           SPEAKEZY
+//         </Typography>
+//         <IconButton color='inherit' href='#'>
+//           <VideoCallIcon />
+//         </IconButton>
+//         <IconButton color='inherit' href='#'>
+//           <SchoolIcon />
+//         </IconButton>
+//       </Toolbar>
+//     </AppBar>
+//   )
+// }
+
+function Footer() {
+  return (
+    <Box
+      sx={{
+        bgcolor: 'transparent',
+        background: 'rgba(25, 118, 210, 0.8)',
+        p: 6,
+        color: 'white',
+      }}
+      component='footer'
+    >
+      <Container maxWidth='lg'>
+        <Grid container spacing={4} justifyContent='space-between'>
+          <Grid item xs={12} sm={4}>
+            <Typography
+              variant='h6'
+              gutterBottom
+              sx={{
+                transition: 'color 0.3s ease, transform 0.3s ease',
+                '&:hover': {
+                  color: '#ffeb3b',
+                  transform: 'scale(1.05)',
+                },
+              }}
+            >
+              About Us
+            </Typography>
+            <Typography
+              variant='subtitle1'
+              sx={{
+                transition: 'color 0.3s ease, transform 0.3s ease',
+                '&:hover': {
+                  color: '#ffeb3b',
+                  transform: 'scale(1.05)',
+                },
+              }}
+            >
+              Learn more about our mission to enhance digital accessibility and inclusivity.
+            </Typography>
+          </Grid>
+          <Grid item xs={12} sm={4}>
+            <Typography
+              variant='h6'
+              gutterBottom
+              sx={{
+                transition: 'color 0.3s ease, transform 0.3s ease',
+                '&:hover': {
+                  color: '#ffeb3b',
+                  transform: 'scale(1.05)',
+                },
+              }}
+            >
+              Contact
+            </Typography>
+            <Typography
+              variant='subtitle1'
+              sx={{
+                transition: 'color 0.3s ease, transform 0.3s ease',
+                '&:hover': {
+                  color: '#ffeb3b',
+                  transform: 'scale(1.05)',
+                },
+              }}
+            >
+              Email: contact@speakezy.com
+            </Typography>
+          </Grid>
+          <Grid item xs={12} sm={4}>
+            <Typography
+              variant='h6'
+              gutterBottom
+              sx={{
+                transition: 'color 0.3s ease, transform 0.3s ease',
+                '&:hover': {
+                  color: '#ffeb3b',
+                  transform: 'scale(1.05)',
+                },
+              }}
+            >
+              Follow Us
+            </Typography>
+            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+              <IconButton
+                color='inherit'
+                href='https://www.facebook.com'
+                sx={{
+                  transition: 'transform 0.3s ease',
+                  '&:hover': {
+                    color: '#3b5998',
+                    transform: 'scale(1.2)',
+                  },
+                }}
+              >
+                <FacebookIcon fontSize='large' />
+              </IconButton>
+              <IconButton
+                color='inherit'
+                href='https://www.youtube.com'
+                sx={{
+                  transition: 'transform 0.3s ease',
+                  '&:hover': {
+                    color: '#FF0000',
+                    transform: 'scale(1.2)',
+                  },
+                }}
+              >
+                <YouTubeIcon fontSize='large' />
+              </IconButton>
+            </Box>
+          </Grid>
+        </Grid>
+        <Typography
+          variant='body2'
+          align='center'
+          sx={{
+            mt: 4,
+            transition: 'color 0.3s ease, transform 0.3s ease',
+            '&:hover': { color: '#ffeb3b', transform: 'scale(1.05)' },
+          }}
+        >
+          {'© '}
+          {new Date().getFullYear()} {'SPEAKEZY. All rights reserved.'}
+        </Typography>
+      </Container>
+    </Box>
+  )
+}
+
+export default function HomePage() {
+  const navigate = useNavigate()
+
+  const handleVideoCallClick = () => {
+    navigate('/videocall')
+  }
+
+  const handleTrainingClick = () => {
+    navigate('/training')
+  }
+
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <CssBaseline />
+      <Box
+        sx={{
+          backgroundImage: `url(${BackgroundImage})`,
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 2,
+          mb: 0, // Remove margin at the bottom to eliminate gap
+        }}
+      >
+        <Container component='main' maxWidth='lg' sx={{ textAlign: 'center' }}>
+          <Typography
+            variant='h2'
+            component='h1'
+            sx={{
+              color: 'white',
+              fontWeight: 'bold',
+              mb: 4,
+              textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',
+            }}
+          >
+            Welcome to SPEAKEZY
+          </Typography>
+          <Grid container spacing={4} justifyContent='center'>
+            <Grow in={true} timeout={1000}>
+              <Grid item xs={12} sm={6} md={4}>
+                <Card
+                  elevation={8}
+                  sx={{
+                    transition: 'transform 0.3s ease',
+                    '&:hover': { transform: 'scale(1.05)' },
+                  }}
+                >
+                  <CardMedia>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: 200,
+                        backgroundColor: 'primary.light',
+                      }}
+                    >
+                      <VideoCallIcon sx={{ fontSize: 100, color: 'white' }} />
+                    </Box>
+                  </CardMedia>
+                  <CardContent sx={{ textAlign: 'center' }}>
+                    <Typography variant='h5' component='h2' sx={{ fontWeight: 'bold' }}>
+                      Colloborate with Community
+                    </Typography>
+                    <Button
+                      variant='contained'
+                      color='primary'
+                      sx={{ mt: 2 }}
+                      onClick={handleVideoCallClick}
+                    >
+                      Start Video Call
+                    </Button>
+                  </CardContent>
+                </Card>
+              </Grid>
+            </Grow>
+            <Grow in={true} timeout={1500}>
+              <Grid item xs={12} sm={6} md={4}>
+                <Card
+                  elevation={8}
+                  sx={{
+                    transition: 'transform 0.3s ease',
+                    '&:hover': { transform: 'scale(1.05)' },
+                  }}
+                >
+                  <CardMedia>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: 200,
+                        backgroundColor: 'secondary.light',
+                      }}
+                    >
+                      <SchoolIcon sx={{ fontSize: 100, color: 'white' }} />
+                    </Box>
+                  </CardMedia>
+                  <CardContent sx={{ textAlign: 'center' }}>
+                    <Typography variant='h5' component='h2' sx={{ fontWeight: 'bold' }}>
+                      Train Sign Language
+                    </Typography>
+                    <Button
+                      variant='contained'
+                      color='secondary'
+                      sx={{ mt: 2 }}
+                      onClick={handleTrainingClick}
+                    >
+                      Start Training
+                    </Button>
+                  </CardContent>
+                </Card>
+              </Grid>
+            </Grow>
+          </Grid>
+        </Container>
+      </Box>
+      <Footer />
+    </ThemeProvider>
+  )
+}

src/Pages/SignIn/SignInSide.tsx

+import * as React from 'react'
+import Avatar from '@mui/material/Avatar'
+import Button from '@mui/material/Button'
+import CssBaseline from '@mui/material/CssBaseline'
+import TextField from '@mui/material/TextField'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Checkbox from '@mui/material/Checkbox'
+import Link from '@mui/material/Link'
+import Paper from '@mui/material/Paper'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
+import Typography from '@mui/material/Typography'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { useNavigate } from 'react-router-dom'
+
+import SignInSideImage from '../../Assests/Images/SignInSide.jpeg'
+
+function Copyright(props: any) {
+  return (
+    <Typography variant='body2' color='text.secondary' align='center' {...props}>
+      {'Copyright © '}
+      <Link color='inherit' href='https://mui.com/'>
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  )
+}
+
+const defaultTheme = createTheme()
+
+export default function SignInSide() {
+  const navigate = useNavigate()
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const data = new FormData(event.currentTarget)
+    console.log({
+      email: data.get('email'),
+      password: data.get('password'),
+    })
+
+    // Simulate authentication logic here
+    // If authentication is successful, navigate to VideoCall page
+    navigate('/home')
+  }
+
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Grid container component='main' sx={{ height: '100vh' }}>
+        <CssBaseline />
+        <Grid
+          item
+          xs={false}
+          sm={4}
+          md={7}
+          sx={{
+            backgroundImage: `url(${SignInSideImage})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundColor: (t) =>
+              t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        />
+        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+          <Box
+            sx={{
+              my: 8,
+              mx: 4,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+              <LockOutlinedIcon />
+            </Avatar>
+            <Typography component='h1' variant='h5'>
+              Sign in
+            </Typography>
+            <Box component='form' noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
+              <TextField
+                margin='normal'
+                required
+                fullWidth
+                id='email'
+                label='Email Address'
+                name='email'
+                autoComplete='email'
+                autoFocus
+              />
+              <TextField
+                margin='normal'
+                required
+                fullWidth
+                name='password'
+                label='Password'
+                type='password'
+                id='password'
+                autoComplete='current-password'
+              />
+              <FormControlLabel
+                control={<Checkbox value='remember' color='primary' />}
+                label='Remember me'
+              />
+              <Button type='submit' fullWidth variant='contained' sx={{ mt: 3, mb: 2 }}>
+                Sign In
+              </Button>
+              <Grid container>
+                <Grid item xs>
+                  <Link href='#' variant='body2'>
+                    Forgot password?
+                  </Link>
+                </Grid>
+                <Grid item>
+                  <Link href='#' variant='body2'>
+                    {"Don't have an account? Sign Up"}
+                  </Link>
+                </Grid>
+              </Grid>
+              <Copyright sx={{ mt: 5 }} />
+            </Box>
+          </Box>
+        </Grid>
+      </Grid>
+    </ThemeProvider>
+  )
+}