Home page

client/src/layout/MainLayout/Sidebar/MenuList/admin-menu-items/dashboard.js

@@ -1,8 +1,9 @@
 // assets
 import { IconDashboard } from '@tabler/icons';
+import HomeIcon from '@mui/icons-material/Home';
 
 // constant
-const icons = { IconDashboard };
+const icons = { IconDashboard, HomeIcon };
 
 // ==============================|| DASHBOARD MENU ITEMS ||============================== //
 
@@ -18,6 +19,14 @@ const dashboard = {
 			url: '/admin/dashboard/default',
 			icon: icons.IconDashboard,
 			breadcrumbs: false
+		},
+		{
+			id: 'home',
+			title: 'Home',
+			type: 'item',
+			url: '/admin/dashboard/home',
+			icon: icons.HomeIcon,
+			breadcrumbs: false
 		}
 	]
 };

client/src/layout/MainLayout/Sidebar/MenuList/doctor-menu-items/dashboard.js

@@ -1,8 +1,9 @@
 // assets
 import { IconDashboard } from '@tabler/icons';
+import HomeIcon from '@mui/icons-material/Home';
 
 // constant
-const icons = { IconDashboard };
+const icons = { IconDashboard, HomeIcon };
 
 // ==============================|| DASHBOARD MENU ITEMS ||============================== //
 
@@ -18,6 +19,14 @@ const dashboard = {
 			url: '/doctor/dashboard/default',
 			icon: icons.IconDashboard,
 			breadcrumbs: false
+		},
+		{
+			id: 'home',
+			title: 'Home',
+			type: 'item',
+			url: '/doctor/dashboard/home',
+			icon: icons.HomeIcon,
+			breadcrumbs: false
 		}
 	]
 };

client/src/layout/MainLayout/Sidebar/MenuList/patient-menu-items/dashboard.js

@@ -1,8 +1,9 @@
 // assets
 import { IconDashboard } from '@tabler/icons';
+import HomeIcon from '@mui/icons-material/Home';
 
 // constant
-const icons = { IconDashboard };
+const icons = { IconDashboard, HomeIcon };
 
 // ==============================|| DASHBOARD MENU ITEMS ||============================== //
 
@@ -18,6 +19,14 @@ const dashboard = {
 			url: '/patient/dashboard/default',
 			icon: icons.IconDashboard,
 			breadcrumbs: false
+		},
+		{
+			id: 'home',
+			title: 'Home',
+			type: 'item',
+			url: '/patient/dashboard/home',
+			icon: icons.HomeIcon,
+			breadcrumbs: false
 		}
 	]
 };

client/src/pages/Home/FeatureCard.js

@@ -0,0 +1,31 @@
+import { useTheme } from '@mui/material/styles';
+import {
+    Card, CardContent, Typography 
+} from '@mui/material';
+
+const FeatureCard = ({ title, description, icon }) => {
+    const theme = useTheme();
+    return (
+        <Card sx={{
+            maxWidth: '25%',
+            height: '18em',
+            backgroundColor: theme.palette.primary.light,
+            boxShadow: '0 2px 14px 0 rgb(32 40 45 / 11%)',
+            ':hover': {
+                boxShadow: '0 2px 14px 0 rgb(32 40 45 / 40%)',
+            },
+        }}>
+            <CardContent>
+                {icon}
+                <Typography variant="h3" color='GrayText' component="h2" sx={{ marginBottom: '0.5em', marginTop: '0.3em' }}>
+                    {title}
+                </Typography>
+                <Typography variant="body2" component="p">
+                    {description}
+                </Typography>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default FeatureCard;

client/src/pages/Home/Home.js

@@ -0,0 +1,45 @@
+import MainCard from './MainCard.js';
+import FeatureCard from './FeatureCard.js';
+import HealthAndSafetyIcon from '@mui/icons-material/HealthAndSafety';
+import EventAvailableIcon from '@mui/icons-material/EventAvailable';
+import SpellcheckIcon from '@mui/icons-material/Spellcheck';
+
+const Home = () => {
+
+    return (
+        <>
+            <MainCard />
+            <div
+                style= {{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-evenly',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    width: '100%',
+                }}
+            >
+                <FeatureCard
+                    title='All your healthcare needs'
+                    description='We provide a wide range of healthcare services to meet your needs.'
+                    icon={<HealthAndSafetyIcon color='secondary' fontSize='large' />}
+                />
+
+                <FeatureCard
+                    title='Your booking is confirmed'
+                    description='Your booking is automatically confirmed according to doctor available slots.'
+                    icon={<EventAvailableIcon color='secondary' fontSize='large' />}
+                />
+
+                <FeatureCard
+                    title='High quality healthcare service'
+                    description='A high quality service is ensured by our team of experts and evidenced by patient testimonials.'
+                    icon={<SpellcheckIcon color='secondary' fontSize='large' />}
+                />
+
+            </div>
+        </>
+    );
+};
+
+export default Home;

client/src/pages/Home/MainCard.js

@@ -0,0 +1,62 @@
+import {
+    Box,
+    Grid,
+    Paper,
+    Typography
+} from '@mui/material';
+import Healthcare from '../../assets/images/static/Healthcare.jpeg';
+const MainCard = () => {
+    const MainCardData = {
+        title: 'Better Healthcare for a Better Lifestyle',
+        description: 'Book online appointments with the best doctor in your city.\n All your medical and pharamacy needs, one place. ',
+        image: Healthcare,
+        imageAltText: 'Healthcare Ahmaaaaad'
+    };
+    return (
+        <Paper
+            sx={{
+                position: 'relative',
+                backgroundColor: 'grey.800',
+                color: '#fff',
+                mb: 4,
+                backgroundSize: 'cover',
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
+                backgroundImage: `url(${MainCardData.image})`,
+            }}
+        >
+            {/* Increase the priority of the hero background image */}
+            {<img style={{ display: 'none' }} src={MainCardData.image} alt={MainCardData.imageAltText} />}
+            <Box
+                sx={{
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                right: 0,
+                left: 0,
+                backgroundColor: 'rgba(0,0,0,.3)',
+                }}
+            />
+            <Grid container>
+                <Grid item md={6}>
+                    <Box
+                        sx={{
+                        position: 'relative',
+                        p: { xs: 3, md: 6 },
+                        pr: { md: 0 },
+                        }}
+                    >
+                        <Typography component="h1" variant="h3" color="inherit" sx={{ fontSize: '1.em' }} gutterBottom>
+                            {MainCardData.title}
+                        </Typography>
+                        <Typography variant="h5" sx={{ color: '#C7BBD1' }} paragraph>
+                            {MainCardData.description}
+                        </Typography>
+                    </Box>
+                </Grid>
+            </Grid>
+        </Paper>
+    );
+};
+
+export default MainCard;

client/src/routes/AdminRoutes.js

@@ -15,6 +15,8 @@ const Account = Loadable(lazy(() => import('pages/profile/Account')));
 const LazyPackages = Loadable(
 	lazy(() => import('pages/HealthPackages/HealthPackage')),
 );
+const LazyHome = Loadable(lazy(() => import('pages/Home/Home')));
+
 // utilities routing
 const UtilsTypography = Loadable(
 	lazy(() => import('pages/utilities/Typography')),
@@ -43,6 +45,10 @@ const AdminRoutes = {
 					path: 'default',
 					element: <DashboardDefault />,
 				},
+				{
+					path: 'home',
+					element: <LazyHome />,
+				},
 			],
 		},
 		{

client/src/routes/DoctorRoutes.js

@@ -26,6 +26,7 @@ const LazyAddAvailableSlots = Loadable(
 const LazyDoctorContract = Loadable(lazy(() => import('pages/DoctorContract')));
 
 const LazyChat = Loadable(lazy(() => import('pages/chat/Chat')));
+const LazyHome = Loadable(lazy(() => import('pages/Home/Home')));
 
 const Account = Loadable(lazy(() => import('pages/profile/Account')));
 
@@ -56,6 +57,10 @@ const DoctorRoutes = {
                     path: 'default',
                     element: <DashboardDefault />,
                 },
+                {
+                    path: 'home',
+                    element: <LazyHome />,
+                }
             ],
         },
         {

client/src/routes/PatientRoutes.js

@@ -30,6 +30,7 @@ const LazyAccount = Loadable(lazy(() => import('pages/profile/Account'))); //TOD
 const LazyFamilyMembers = Loadable(lazy(() => import('pages/family-member/FamilyMembers.js')));
 
 const LazyChat = Loadable(lazy(() => import('pages/chat/Chat')));
+const LazyHome = Loadable(lazy(() => import('pages/Home/Home')));
 
 // utilities routing
 const UtilsTypography = Loadable(
@@ -58,6 +59,10 @@ const MainRoutes = {
 					path: 'default',
 					element: <DashboardDefault />,
 				},
+				{
+					path: 'home',
+					element: <LazyHome />,
+				}
 			],
 		},
 		{