feature/KAYA-82-Improve-Landing-Page

kaya-hr.code-workspace

@@ -19,6 +19,10 @@
 		{
 			"name": "Employee Client",
 			"path": "employee-client-web"
+		},
+		{
+			"name": "Kaya Web",
+			"path": "kaya-landing"
 		}
 	],
 	"settings": {

kaya-landing/src/App.jsx

@@ -3,11 +3,13 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import store from './lib/redux-store';
 import LandingPage from './pages/LandingPage';
 import AboutPage from './pages/AboutPage';
+import RootLayout from './shared/RootLayout';
 
 const router = createBrowserRouter([
   {
     id: 'root',
     path: '/',
+    Component: RootLayout,
     children: [
       {
         index: true,

kaya-landing/src/css/style.css

@@ -1,7 +1,56 @@
-#landing-container{
-  height: 55vh;
+#home{
+  height: 87vh;
+  padding: 40px;
+}
+#banner-content{
+  margin-top: 100px;
+  margin-left: 150px ;
+  max-width: 1000px;
+}
+#banner-img{
+  float: right;
+  margin-right: 150px;
+}
+
+#header-logo{
+  margin-right: 30px;
+}
+#testimonial{
+  display: inline-flex;
+  flex-wrap: wrap;  
+}
+.testimonial-card{
+  margin: 30px;
+}
+.khr, .abt-header{
+  text-decoration: underline;
+  text-decoration-color: rgba(170, 111, 248, 0.54);
+}
+
+.abt-content{
+  line-height: 20px;
+  letter-spacing: 10px;
+}
+.flex-container {
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.grid-item {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 9px;
+  padding: 20px;
+  font-size: 30px;
+  text-align: center;
+}
+.grid-item img{
+  width: 200px;
+}
+
+.landing-header{
+  text-decoration: underline;
+  text-decoration-color: rgba(170, 111, 248, 0.54);
 }
-#footer-container{
-  background: #000;
-  width: 100%;
-}

kaya-landing/src/pages/AboutPage.jsx

@@ -1,7 +1,38 @@
-export default function AboutPage(){
-  return(
-    <div>
-      <p>Hello About</p>
-    </div>
+import React from 'react';
+import { Typography, Container, Box } from '@mui/material';
+import '../css/style.css';
+
+export default function AboutPage() {
+  return (
+    <Container>
+      <Box component='section' sx={{ my: 8 }}>
+        <Typography className='abt-header' variant="h3" gutterBottom>Who are we?</Typography>
+        <Typography variant="body1" className='abt-content' align='justify' sx={{letterSpacing:'2px'}} gutterBottom>
+          KayaHR is a leading provider of innovative human resources management solutions designed to empower organizations of all sizes to streamline their HR processes and optimize their workforce management. With a mission to revolutionize the HR industry, KayaHR offers a comprehensive suite of tools and services tailored to meet the evolving needs of modern businesses.<br />
+        </Typography>
+      </Box>
+
+      <Box component='section' sx={{ my: 8 }}>
+        <Typography className='abt-header' variant="h3" gutterBottom> Our Mission</Typography>
+        <Typography variant="body1" className='abt-content' align='justify'  sx={{letterSpacing:'2px'}} gutterBottom>
+          Through the application of groundbreaking HR management solutions, at "KayaHR" we transform into well managed organizations those who want to maximize the results of their human capital. Our mission is to deliver end to end tools and services that ease management of employee information including payroll input, time attendance check, performance appraisals, training & development, compensation and benefits administration, workforce compliance management, self service and analytics reporting. <br />
+        </Typography>
+      </Box>
+
+      <Box component='section' sx={{ my: 8 }}>
+        <Typography className='abt-header' variant="h3" gutterBottom>Testimonials</Typography>
+        <div id='testimonial'>
+          <Box className='testimonial-card' sx={{width: '400px', border: '1px solid #000', padding: '6px', borderStyle:"dotted"}}>
+            <Typography variant='h5' sx={{mb:"20px", ml:'10px', mt:'10px' }}>Rio Pinto</Typography>
+            <Typography variant='text'>
+"KayaHR transformed our HR processes with its intuitive design and powerful features, streamlining operations and enhancing team productivity. Highly recommended for any organization!"</Typography>
+          </Box>
+          <Box className='testimonial-card' sx={{width: '400px', border: '1px solid #000', padding: '6px',borderStyle:"dotted"}}>
+            <Typography variant='h5' sx={{mb:"20px", ml:'10px', mt:'10px'  }}>Yash Rudani</Typography>
+            <Typography variant='text'>
+            "Since implementing KayaHR, our HR workflows have become more efficient and error-free, leading to improved employee satisfaction. A game-changer for HR management!"</Typography>          </Box>
+        </div>
+      </Box>
+    </Container>
   )
 };

kaya-landing/src/pages/LandingPage.jsx

@@ -1,23 +1,40 @@
 import React from 'react';
 import { Typography, Container } from '@mui/material';
-import Header from '../components/Header';
-import Footer from '../components/Footer';
+import banner from '../assets/banner.svg';
 import '../css/style.css';
 
+
 export default function LandingPage() {
   return (
-    <div>
-      <Header></Header>
-      <Container component="main" maxWidth="md" id='landing-container' height='100vh'>
-        <Typography variant="h3" component="h1" sx={{ mt: 45}} gutterBottom>
-        Unlock the Potential of Your Workforce with KayaHR
-        </Typography>
-        <Typography variant="h5" component="h2" gutterBottom>
-        Elevate Your HR Management to New Heights.
-        </Typography>
-
+    <div id='landing-page'>
+      <Container component="main" maxWidth="xlg" sx={{ height: `calc(100vh - 64px)`, padding: 5 }}>
+        <div id='banner-content'>
+          <Typography variant="h3" component="h1" gutterBottom>
+            Unlock the Potential of Your Workforce with <span className='khr'>KayaHR</span>.
+          </Typography>
+          <Typography variant="h5" component="h2" gutterBottom>
+            Elevate Your HR Management to New Heights.
+          </Typography>
+        </div>
+        <img src={banner} alt="banner" width={450} id='banner-img' />
       </Container>
-      <Footer></Footer>
+      <Typography variant='h3' align='center' className='landing-header' mb={1} mt={20}>Collaborations</Typography>
+      <div class="flex-container">
+        <div class="grid-item">
+          <img src="https://southstreetburger.com/wp-content/uploads/2021/07/ssb-logo-white-1.png" alt="" srcset="" />
+        </div>
+        <div class="grid-item">
+          <img src="https://choiceindianrestaurant.ca/wp-content/uploads/2022/09/IMG-20220914-WA0000-removebg-preview.png" alt="" srcset="" />
+        </div>
+        <div class="grid-item">
+          <img src="https://www.thegrandmehfil.com/wp-content/uploads/2021/02/Final-logo-01.png" alt="" srcset="" />
+        </div>
+        <div class="grid-item">
+          <img src="https://mma.prnewswire.com/media/1688892/Clutch_Logo_Red__1.jpg?p=facebook" alt="" srcset="" />
+        </div>
+
+      </div><hr></hr>
+      <Typography align='center'>&copy; Made with love 	&hearts;</Typography>
     </div>
   );
 }

kaya-landing/src/shared/RootLayout.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MenuIcon from '@mui/icons-material/Menu';
+import Button from '@mui/material/Button';
+import { ThemeProvider } from '@mui/material/styles';
+import { Outlet } from "react-router";
+import { useMaterialTheme } from "../lib/material-theme";
+import { IconButton } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import logo from '../assets/logo-full.svg';
+
+export default function Layout() {
+  const materialTheme = useMaterialTheme();
+  const navigate = useNavigate();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const redirectAndClose = (path) => {
+    navigate(path);
+    setAnchorEl(null);
+  };
+
+  return (
+    <ThemeProvider theme={materialTheme}>
+      <CssBaseline />
+      <AppBar position="static" elevation={0} color="transparent">
+        <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+          <img src={logo} alt="logo" width={96} />
+          <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+            <Button color="inherit" href="/">Home</Button>
+            <Button color="inherit" href="/about">About</Button>
+            <Button color="inherit" href="/pricing">Pricing</Button>
+            <Button color="inherit" href="/features">Features</Button>
+            <Button color="inherit" href="/contact-us">Contact Us</Button>
+          </Box>
+          <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              id="basic-button"
+              aria-controls={open ? 'basic-menu' : undefined}
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+              onClick={handleClick}
+              color='inherit'
+            >
+              <MenuIcon />
+            </IconButton>
+          </Box>
+          <Menu
+            id="basic-menu"
+            anchorEl={anchorEl}
+            open={open}
+            onClose={setAnchorEl.bind(null, null)}
+            MenuListProps={{
+              'aria-labelledby': 'basic-button',
+            }}
+          >
+            <MenuItem onClick={redirectAndClose.bind(null, '/about')}>About</MenuItem>
+            <MenuItem onClick={redirectAndClose.bind(null, '/pricing')}>Pricing</MenuItem>
+            <MenuItem onClick={redirectAndClose.bind(null, '/features')}>Features</MenuItem>
+            <MenuItem onClick={redirectAndClose.bind(null, '/contact-us')}>Contact us</MenuItem>
+          </Menu>
+        </Toolbar>
+      </AppBar>
+      <Outlet />
+    </ThemeProvider>
+  );
+}