From cd5d27528cf183100fe157102b75c17459451ee6 Mon Sep 17 00:00:00 2001
From: Ekta Yadav <ekta_y@tekditechnologies.com>
Date: Mon, 1 Apr 2024 18:45:20 +0530
Subject: [PATCH] Task #216462 ,Task #216464 - design for footer and header

---
 .../src/components/layout/Footer.js           | 130 ++++--------
 .../src/components/layout/Layout.js           |   2 +-
 packages/nulp_elite/src/components/Card.js    |  10 +-
 packages/nulp_elite/src/components/Footer.js  | 178 ++++++++--------
 packages/nulp_elite/src/components/header.js  |  38 +++-
 .../src/pages/search/ContentList.js           | 162 ++-------------
 .../nulp_elite/src/pages/search/DomainList.js | 193 ++++--------------
 packages/nulp_elite/src/styles/style.css      |  34 ++-
 8 files changed, 242 insertions(+), 505 deletions(-)

diff --git a/packages/common-lib/src/components/layout/Footer.js b/packages/common-lib/src/components/layout/Footer.js
index 72065dd4..7b5826e8 100644
--- a/packages/common-lib/src/components/layout/Footer.js
+++ b/packages/common-lib/src/components/layout/Footer.js
@@ -1,99 +1,39 @@
-import React, { useEffect } from 'react'
-import {
-  Box,
-  Text,
-  HStack,
-  Center,
-  Stack,
-  Pressable,
-  VStack
-} from 'native-base'
-import IconByName from '../IconByName'
-import { useTranslation } from 'react-i18next'
-import { generatePath, useNavigate } from 'react-router-dom'
-import { useWindowSize } from '../helper'
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import SearchSharpIcon from '@mui/icons-material/SearchSharp';
+import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';
+import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
+import EditNoteOutlinedIcon from '@mui/icons-material/EditNoteOutlined';
 
-export default function Footer({ menues, routeDynamics, ...props }) {
-  const path = window?.location?.pathname.toString()
-  const { t } = useTranslation()
-  const navigate = useNavigate()
+const styles = {
+  BottomNavigation: {
+    width: '100%',
+    position: 'fixed',
+    bottom: 0,
+  },
+};
 
-  const [width, Height] = useWindowSize()
-  const footerMenus = menues
-
-  const PressableNew = ({ item, children, ...prop }) => {
-    return item?.route ? (
-      <Pressable
-        {...prop}
-        onPress={() => {
-          navigate(
-            routeDynamics
-              ? generatePath(item.route, { ...{ id: item.id } })
-              : item.route
-          )
-        }}
-      >
-        {children}
-      </Pressable>
-    ) : (
-      <Box {...prop}>{children}</Box>
-    )
-  }
+export default function Footer() {
+  const [value, setValue] = React.useState(0);
 
   return (
-    <Stack>
-      <Box width={width} flex={1} safeAreaTop position='fixed' bottom='0'>
-        <Center flex={1}></Center>
-        <HStack
-          pl={'20px'}
-          pr={'20px'}
-          bg='white'
-          alignItems='center'
-          safeAreaBottom
-          shadow={6}
-        >
-          {footerMenus?.map((item, index) => (
-            <PressableNew
-              item={item}
-              key={index}
-              cursor='pointer'
-              py='3'
-              flex={1}
-              alignItems='center'
-            >
-              {Array.isArray(item?.selected) &&
-              (item?.selected?.find((e) => path.startsWith(e) && e !== '/') ||
-                item.selected.includes(path)) ? (
-                <VStack alignItems='center'>
-                  <IconByName
-                    name={item.icon}
-                    isDisabled
-                    p='2'
-                    pb='1'
-                    color={'primary'}
-                  />
-                  <Text fontSize='12' color={'primary'}>
-                    {t(item.title)}
-                  </Text>
-                </VStack>
-              ) : (
-                <VStack alignItems={'center'}>
-                  <IconByName
-                    name={item.icon}
-                    isDisabled
-                    p='2'
-                    pb='1'
-                    color={'lightGray1'}
-                  />
-                  <Text fontSize='12' color={'lightGray1'}>
-                    {t(item.title)}
-                  </Text>
-                </VStack>
-              )}
-            </PressableNew>
-          ))}
-        </HStack>
-      </Box>
-    </Stack>
-  )
-}
+    <Box sx={{ width: 500, position: 'fixed',height:'67px', bottom: 0, background:'#fff',width:'100%',boxShadow: '0px -1px 4px 0px #00000040', }}>
+  <BottomNavigation
+    sx={{ width: '100%', display: 'flex', position: 'relative',padding:'4px 0' }}
+    showLabels
+    value={value}
+    onChange={(event, newValue) => {
+      setValue(newValue);
+    }}
+  >
+    <BottomNavigationAction className='navigateActive' label="Search" icon={<SearchSharpIcon />} />
+    <BottomNavigationAction label="Content" icon={<EditNoteOutlinedIcon />} />
+    <BottomNavigationAction label="Connections" icon={<GroupsOutlinedIcon />} />
+    <BottomNavigationAction label="Profile" icon={<AccountCircleOutlinedIcon />} />
+  </BottomNavigation>
+</Box>
+  );
+}
\ No newline at end of file
diff --git a/packages/common-lib/src/components/layout/Layout.js b/packages/common-lib/src/components/layout/Layout.js
index 8e602f15..c7b52fae 100644
--- a/packages/common-lib/src/components/layout/Layout.js
+++ b/packages/common-lib/src/components/layout/Layout.js
@@ -93,7 +93,7 @@ export default function Layout({
         <Box minH={refFoot?.clientHeight ? refFoot?.clientHeight : 85}></Box>
       </HeightWidth>
       <Box w={width} ref={(e) => serRefFoot(e)}>
-        <Footer {...(Layout?._footer ? Layout?._footer : {})} {..._footer} />
+      <Footer {...(Layout?._footer ? Layout?._footer : {})} {..._footer} />
       </Box>
     </Center>
   )
diff --git a/packages/nulp_elite/src/components/Card.js b/packages/nulp_elite/src/components/Card.js
index c6a0cd0b..e7141e73 100644
--- a/packages/nulp_elite/src/components/Card.js
+++ b/packages/nulp_elite/src/components/Card.js
@@ -14,7 +14,7 @@ export default function BoxCard({ items }) {
   // console.log(items.appIcon)
   
   return (
-    <Card sx={{ maxWidth: 345, position: "relative" }}>
+    <Card sx={{  position: "relative" }}>
       <CardMedia
         sx={{
           margin: "8px 3px 0 9px",
@@ -36,19 +36,19 @@ export default function BoxCard({ items }) {
     width: '96%',
     height: '47%',
     background: 'linear-gradient(45deg, RGBA(28, 25, 25, 0.46) 7%, RGBA(20, 18, 18, 0.57) 45%)',
-    zIndex: 1,
+    zIndex: 999,
     margin: '8px 10px 0 10px',
     borderTopLeftRadius: '5px',
     borderTopRightRadius:'20px'
   }}></div>
       <CardContent>
-        <Typography gutterBottom variant="h5" component="div" className="cardTitle">
+        <Typography gutterBottom variant="h5" component="div" className="cardTitle" style={{fontSize:'14px',fontWeight:'600'}}>
            {items.name}
         </Typography>
-        <Typography gutterBottom variant="h7" component="div" style={{zIndex:'9999',position:'absolute',top:'30px',right:'3px',color:'#fff',textAlign:'center'}}>
+        <Typography gutterBottom variant="h7" component="div" style={{zIndex:'0 ',fontSize:'14px',position:'absolute',top:'30px',right:'3px',color:'#fff',textAlign:'center'}}>
                   <Box className="cardCourses"> {items.primaryCategory}</Box>
                   </Typography>
-        <Box style={{background:'#fff',padding:'10px',borderRadius:'150px',height:'50px',width:'50px',border:'solid 1px #E1E1E1',position:'absolute',top:'115px',right:'30px',textAlign:'center',zIndex:'99'}}>
+        <Box style={{background:'#fff',padding:'10px',borderRadius:'150px',height:'50px',width:'50px',border:'solid 1px #E1E1E1',position:'absolute',top:'115px',right:'30px',textAlign:'center',zIndex:'999'}}>
           <img src={items.appIcon ? items.appIcon : require("assets/swm.png")} style={{height:'50px',maxWidth:'100%',objectFit:'contain'}} />
 
           </Box>
diff --git a/packages/nulp_elite/src/components/Footer.js b/packages/nulp_elite/src/components/Footer.js
index fdb31c27..1570d407 100644
--- a/packages/nulp_elite/src/components/Footer.js
+++ b/packages/nulp_elite/src/components/Footer.js
@@ -1,99 +1,93 @@
-import React, { useEffect } from "react";
-import {
-  Box,
-  Text,
-  HStack,
-  Center,
-  Stack,
-  Pressable,
-  VStack,
-} from "native-base";
-// import IconByName from '../IconByName'
-// import { useTranslation } from 'react-i18next'
-import { generatePath, useNavigate } from "react-router-dom";
-// import { useWindowSize } from '../helper'
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import SearchSharpIcon from '@mui/icons-material/SearchSharp';
+import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';
+import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
+import EditNoteOutlinedIcon from '@mui/icons-material/EditNoteOutlined';
+import Container from '@mui/material/Container';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
 
-export default function Footer({ menues, routeDynamics, ...props }) {
-  const path = window?.location?.pathname.toString();
-  // const { t } = useTranslation()
-  // const navigate = useNavigate()
 
-  // const [width, Height] = useWindowSize()
-  const footerMenus = menues;
 
-  const PressableNew = ({ item, children, ...prop }) => {
-    return item?.route ? (
-      <Pressable
-        {...prop}
-        onPress={() => {
-          // navigate(
-          //   routeDynamics
-          //     ? generatePath(item.route, { ...{ id: item.id } })
-          //     : item.route
-          // )
-        }}
-      >
-        {children}
-      </Pressable>
-    ) : (
-      <Box {...prop}>{children}</Box>
-    );
+// const styles = {
+//   BottomNavigation: {
+//     width: '100%',
+//     position: 'fixed',
+//     bottom: 0,
+//   },
+// };
+
+export default function Footer() {
+  const [value, setValue] = React.useState(0);
+  const pages = ['Content', 'Connections', 'Profile'];
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
   };
 
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+ 
+
   return (
-    <Stack>
-      <Box flex={1} safeAreaTop position="fixed" bottom="0">
-        <Center flex={1}></Center>
-        <HStack
-          pl={"20px"}
-          pr={"20px"}
-          bg="white"
-          alignItems="center"
-          safeAreaBottom
-          shadow={6}
-        >
-          {footerMenus?.map((item, index) => (
-            <PressableNew
-              item={item}
-              key={index}
-              cursor="pointer"
-              py="3"
-              flex={1}
-              alignItems="center"
-            >
-              {Array.isArray(item?.selected) &&
-              (item?.selected?.find((e) => path.startsWith(e) && e !== "/") ||
-                item.selected.includes(path)) ? (
-                <VStack alignItems="center">
-                  {/* <IconByName
-                    name={item.icon}
-                    isDisabled
-                    p='2'
-                    pb='1'
-                    color={'primary'}
-                  /> */}
-                  <Text fontSize="12" color={"primary"}>
-                    {t(item.title)}
-                  </Text>
-                </VStack>
-              ) : (
-                <VStack alignItems={"center"}>
-                  {/* <IconByName
-                    name={item.icon}
-                    isDisabled
-                    p='2'
-                    pb='1'
-                    color={'lightGray1'}
-                  /> */}
-                  <Text fontSize="12" color={"lightGray1"}>
-                    {t(item.title)}
-                  </Text>
-                </VStack>
-              )}
-            </PressableNew>
-          ))}
-        </HStack>
-      </Box>
-    </Stack>
+    <>
+    <Container maxWidth="xl" className='lg-hide'>
+    <Box sx={{  position: 'fixed', bottom: 0, left: 0, right: 0 ,width:'100%',zIndex:'9999' }}>
+  <BottomNavigation
+    sx={{ width: '100%', display: 'flex', position: 'relative',paddingTop:'10px' }}
+    showLabels
+    value={value}
+    onChange={(event, newValue) => {
+      setValue(newValue);
+    }}
+  >
+    <BottomNavigationAction label="Recents" className='navigateActive' icon={<SearchSharpIcon />} />
+    <BottomNavigationAction label="Favorites" icon={<EditNoteOutlinedIcon />} />
+    <BottomNavigationAction label="Nearby" icon={<GroupsOutlinedIcon />} />
+    <BottomNavigationAction label="Account" icon={<AccountCircleOutlinedIcon />} />
+  </BottomNavigation>
+</Box>
+
+</Container>
+<Container className='xs-hide' maxWidth="xl" style={{background:'#2D2D2D', color:'#fff',padding:'30px 15px 20px 15px'}}>
+  {/* <Box>dfgdfgsg */}
+  
+
+<Grid container spacing={2} className='footer'>
+  <Grid item xs={8} md={3} style={{fontSize:'14px', lineHeight:'2.4',fontWeight:'400'}}>
+  <Link underline="none"  href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>NIUA</Link>
+    <Link underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>MoHUA</Link><br/>
+    <Link  underline="none"  href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>About Us</Link>
+    <Link underline="none"  href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>Contact Us</Link>
+    <Link underline="none"  href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>FAQs</Link>
+    <Link underline="none"  href="#" style={{padding:'10px 0 2px',color:'#fff',margin:'0 8px'}}>Log Out</Link>
+
+  </Grid>
+  <Grid item xs={4} md={3} style={{fontSize:'14px', lineHeight:'2.4',fontWeight:'400'}}>
+  <Link underline="none"  href="#" style={{padding:'10px 0 2px',color:'#fff', fontSize:'14px'}}>Center for Digital Governance</Link><br/>
+    <Link  underline="none" href="#" style={{padding:'10px 0 2px',color:'#fff', fontSize:'14px'}}>National Urban Digital Mission</Link>
+</Grid>
+  <Grid item xs={4} md={3} style={{fontSize:'14px', lineHeight:'1.5', fontWeight:'400'}}>
+  <Box style={{fontSize:'14px',fontWeight:'700'}}>Nodal Ministry:</Box>
+  Ministry of Housing and Urban Affairs, Government of India<br/>
+  Nirman Bhawan, New Delhi- 110001, INDIA
+</Grid>
+      <Grid item xs={8} md={3} style={{fontSize:'14px', lineHeight:'1.5',fontWeight:'400'}}>
+         <Box style={{fontSize:'14px',fontWeight:'700'}}> Anchor Institute:</Box>
+        National Institute of Urban Affairs<br/>
+        1st Floor, Core 4B, India Habitat Centre, Lodhi Road, New Delhi - 110003, INDIA<br/>
+
+        Phone: (+91 11) 24617517, 24617543, 24617595
+    </Grid>
+</Grid>
+</Container>
+
+</>
   );
-}
+}
\ No newline at end of file
diff --git a/packages/nulp_elite/src/components/header.js b/packages/nulp_elite/src/components/header.js
index 6589d196..1a584be0 100644
--- a/packages/nulp_elite/src/components/header.js
+++ b/packages/nulp_elite/src/components/header.js
@@ -27,10 +27,10 @@ import{changeLanguage} from "i18next";
 
 
 const pages = ['Content', 'Connections', 'Profile'];
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+const settings = ['Profile', 'Account', 'Logout'];
 
 
-function ResponsiveAppBar( ) {
+function Header( ) {
   const [age, setAge] = React.useState('');
   const { t } = useTranslation();
 
@@ -59,7 +59,7 @@ function ResponsiveAppBar( ) {
 
   return (
 <>
-<Box className='xs-hide' style={{background:'#fff',borderBottom:'solid 1px #ccc', display:'flex', justifyContent:'flex-end',alignItems:'center'}}>
+<Box className='xs-hide' style={{background:'#fff', display:'flex', justifyContent:'flex-end',alignItems:'center'}}>
        <Box style={{padding:'10px'}}><DevicesIcon style={{padding:'0 10px',verticalAlign:'middle',color:'#424242' }}/><Link href="#" underline="none" style={{color:'#424242',fontSize:'16px', borderRight:'solid 1px #424242',paddingRight:'10px'}}>Main Content  </Link></Box>  
         <Box style={{padding:'0 10px',color:'#424242',fontSize:'16px', borderRight:'solid 1px #424242'}}><Link href="#" underline="none" style={{color:'#424242',fontSize:'16px',paddingRight:'10px'}}> +A</Link> <Link href="#" underline="none" style={{color:'#424242',fontSize:'16px',paddingRight:'10px'}}>A - </Link><Link href="#" underline="none" style={{color:'#424242',fontSize:'16px',paddingRight:'10px'}}>A</Link> </Box>
         <Box style={{padding:'0 10px',color:'#424242',fontSize:'14px', borderRight:'solid 1px #424242'}}><WebIcon style={{padding:'0 10px',verticalAlign:'middle'}}/><Link href="#" underline="none" style={{color:'#424242',fontSize:'16px'}}>Screen Reader </Link></Box>
@@ -116,7 +116,7 @@ function ResponsiveAppBar( ) {
         <img src={require("../assets/logo.png")} style={{maxWidth:'100%'}} />
         </Box>
        
-          <Box sx={{ flexGrow: 3, display: { xs: 'flex', md: 'none' } }}>
+          <Box sx={{ flexGrow: 2, display: { xs: 'flex', md: 'none' } }}>
             
             <Menu
               id="menu-appbar"
@@ -144,7 +144,35 @@ function ResponsiveAppBar( ) {
                 </MenuItem>
               ))}
             </Menu>
+            
           </Box>
+          <InputLabel className='lg-hide' id="language-select-label"> {t("LANGUAGE")}</InputLabel>
+
+          <Select
+        labelId="language-select-label"
+        id="language-select"
+        className='language lg-hide'
+        style={{border:'none'}}
+        startIcon={<LanguageIcon />}
+        trigger={(triggerProps) => {
+          return (
+            <Button
+              alignSelf="center"
+              variant="solid"
+              {...triggerProps}
+            >
+              {t("LANGUAGE")}
+            </Button>
+          );
+          // }}>
+        }}
+      >
+        {/* <MenuItem value="">
+          <em>None</em>
+        </MenuItem> */}
+        <MenuItem onPress={(item) => changeLanguage('en')} value="English">{t("ENGLISH")}</MenuItem>
+        <MenuItem onPress={(item) => changeLanguage('hi')} value="Hindi">{t("HINDI")}</MenuItem>
+      </Select>
           <Box className="xs-hide" style={{ display: 'flex', alignItems: 'center',flexGrow: 3, paddingLeft:'40px' }}>
       <TextField
         placeholder="Search"
@@ -202,4 +230,4 @@ function ResponsiveAppBar( ) {
     </>
   );
 }
-export default ResponsiveAppBar;
\ No newline at end of file
+export default Header;
\ No newline at end of file
diff --git a/packages/nulp_elite/src/pages/search/ContentList.js b/packages/nulp_elite/src/pages/search/ContentList.js
index dd47b574..1dbc5836 100644
--- a/packages/nulp_elite/src/pages/search/ContentList.js
+++ b/packages/nulp_elite/src/pages/search/ContentList.js
@@ -1,18 +1,8 @@
 // Profile.js
 
 import React, { useState, useEffect } from "react";
-// import { Box, Heading, Text, Button } from '@chakra-ui/react';
-import {
-  Layout,
-  IconByName,
-  SearchLayout,
-} from "@shiksha/common-lib";
-import {
-  VStack,
-  HStack,
-  Button,
-  Menu,
-} from "native-base";
+
+
 import BoxCard from "components/Card";
 import Box from '@mui/material/Box';
 import Search from "components/search";
@@ -20,6 +10,9 @@ import Filter from "components/filter";
 import data from "../../assets/contentSerach.json"
 import Grid from '@mui/material/Grid';
 import Footer from "components/Footer"; 
+import Header from "components/header"; 
+import Container from '@mui/material/Container';
+
 
 
 const ContentList = (props) => {
@@ -27,146 +20,16 @@ const ContentList = (props) => {
   const [searchState, setSearchState] = React.useState(false);
 
   return (
-    <Layout
-      isDisabledAppBar={true}
-      _header={{
-        rightIcon: (
-          <HStack paddingBottom={"25px"}>
-            <IconByName name="CloseCircleFillIcon" />
-          </HStack>
-        ),
-        customeComponent: (
-          <Box flex={1} minH={"40px"}>
-            <HStack>
-              <VStack position={"relative"} padding="10px" top={"10px"}>
-                <Menu
-                  w="160"
-                  trigger={(triggerProps) => {
-                    return (
-                      <Button
-                        alignSelf="center"
-                        variant="solid"
-                        {...triggerProps}
-                      >
-                        <IconByName size="20px" name="MenuFillIcon" />
-                      </Button>
-                    );
-                  }}
-                >
-                  <Menu.Item>Help</Menu.Item>
-                  <Menu.Item>Logout</Menu.Item>
-                </Menu>
-              </VStack>
-
-              <VStack>
-                {/* <Image
-                  source={require("../assets/nulp_logo.jpeg")}
-                  alt=""
-                  size="sm"
-                /> */}
-              </VStack>
-            </HStack>
-
-            {/* <Right> */}
-            <Box position={"absolute"} right={"20px"} top={"10px"}>
-              <Menu
-                w="160"
-                trigger={(triggerProps) => {
-                  return (
-                    <Button
-                      alignSelf="center"
-                      variant="solid"
-                      {...triggerProps}
-                    >
-                      Language
-                    </Button>
-                  );
-                  // }}>
-                }}
-              >
-                <Menu.Item>English</Menu.Item>
-                <Menu.Item> Hindi</Menu.Item>
-              </Menu>
-            </Box>
-            {/* </Right> */}
-
-            {/* <Avatar
-           size="48px"
-           borderRadius=""
-              source={require("../assets/nulp_logo.jpeg")}
-          /> */}
-
-            {/* <VStack>
-          <Avatar
-            size="37px"
-            borderRadius="md"
-            source={{
-              uri: "https://via.placeholder.com/50x50.png",
-            }}
-          />
-          </VStack> */}
-          </Box>
-        ),
-        // title: "User Name",
-        // // isEnableSearchBtn: true,
-        // subHeading: "Hello",
-        // iconComponent: (
-
-        // ),
-      }}
-      // subHeader={
-      //   <Link
-      //     to="/"
-      //     style={{ color: "rgb(63, 63, 70)", textDecoration: "none" }}
-      //   >
-      //     <HStack space="4" justifyContent="space-between">
-      //       <VStack>
-      //         <SearchLayout
-      //           {...{
-      //             search,
-      //             setSearch,
-      //             // minStringLenght: 3,
-      //             notFoundMessage: "TYPE_TO_START_SEARCHING_LEARNING",
-      //             onCloseSearch: setSearchState,
-      //           }}
-      //         ></SearchLayout>
-      //       </VStack>
-      //     </HStack>
-      //   </Link>
-      // }
-      _subHeader={{ bg: "rgb(248, 117, 88)" }}
-      _footer={{
-        menues: [
-          {
-            title: "Search",
-            icon: "SearchLineIcon",
-            route: "/contents",
-          },
-          {
-            title: "Contents",
-            icon: "BookOpenLineIcon",
-            route: "/all",
-          },
-          {
-            title: "Connections",
-            icon: "TeamLineIcon",
-            route: "/home",
-          },
-          {
-            title: "Profie",
-            icon: "AccountCircleLineIcon",
-            route: "/profile",
-          },
-        ],
-      }}
-      
-    >
+   <div>
+    <Header/>
       <Box sx={{background:'#2D2D2D',padding:'20px'}}>
           <p style={{fontSize:'20px',fontWeight:'700',color:'#fff',paddingBottom:'5px',margin:'0'}}>Explore content related to your domain.
Learn from well curated courses and content.</p>
           <p style={{fontSize:'16px',fontWeight:'700',color:'#C1C1C1',margin:'0',paddingBottom:'30px'}}>Learn from well curated courses and content.</p>
           <Search></Search>
 
         </Box>
+        <Container maxWidth="xxl" role="main" className="container-pb">
+
         <Box style={{margin:'20px 0'}}>
           <Filter></Filter>
         </Box>
@@ -178,7 +41,7 @@ const ContentList = (props) => {
         {data.result.content.map((items) => (
                         // console.log(items),
 
-                <Grid item xs={12} md={6} lg={4}  style={{marginBottom:'10px'}}>
+                <Grid item xs={12} md={6} lg={3}  style={{marginBottom:'10px'}}>
                 <BoxCard items ={items}></BoxCard>
 
                 </Grid>
@@ -188,8 +51,9 @@ const ContentList = (props) => {
         </Box>
   
       </Box>
-
-    </Layout>
+      </Container>
+<Footer/>
+</div>
   );
 };
 
diff --git a/packages/nulp_elite/src/pages/search/DomainList.js b/packages/nulp_elite/src/pages/search/DomainList.js
index 3e1d4661..88fe13cb 100644
--- a/packages/nulp_elite/src/pages/search/DomainList.js
+++ b/packages/nulp_elite/src/pages/search/DomainList.js
@@ -2,17 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 // import { Box, Heading, Text, Button } from '@chakra-ui/react';
-import { Layout, IconByName } from "@shiksha/common-lib";
-import {
-  NativeBaseProvider,
-  Stack,
-  VStack,
-  Text,
-  HStack,
-  Button,
-  Menu,
-  Image,
-} from "native-base";
+
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
@@ -23,6 +13,8 @@ import Box from '@mui/material/Box';
 import Search from "components/search";
 import data from "../../assets/framework.json"
 import Header from "components/header";
+import Footer from "components/Footer";
+
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
@@ -49,151 +41,40 @@ const DomainList = () => {
   const [searchState, setSearchState] = React.useState(false);
 
   return (
-    <Layout
-      isDisabledAppBar={true}
-      _header={{
-        rightIcon: (
-          <HStack paddingBottom={"25px"}>
-            <IconByName name="CloseCircleFillIcon" />
-          </HStack>
-        ),
-        customeComponent: (
-          <Box flex={1} minH={"40px"}>
-            <HStack>
-              <VStack position={"relative"} padding="10px" top={"10px"}>
-                <Menu
-                  w="160"
-                  trigger={(triggerProps) => {
-                    return (
-                      <Button
-                        alignSelf="center"
-                        variant="solid"
-                        {...triggerProps}
-                      >
-                        <IconByName size="20px" name="MenuFillIcon" />
-                      </Button>
-                    );
-                  }}
-                >
-                  <Menu.Item>Help</Menu.Item>
-                  <Menu.Item>Logout</Menu.Item>
-                </Menu>
-              </VStack>
-
-              <VStack>
-                {/* <Image
-                  source={require("./assets/logo.png")}
-                  alt=""
-                  size="sm"
-                /> */}
-              </VStack>
-            </HStack>
-
-            {/* <Right> */}
-            <Box position={"absolute"} right={"20px"} top={"10px"}>
-              <Menu
-                w="160"
-                trigger={(triggerProps) => {
-                  return (
-                    <Button
-                      alignSelf="center"
-                      variant="solid"
-                      {...triggerProps}
-                    >
-                      Language
-                    </Button>
-                  );
-                  // }}>
-                }}
-              >
-                <Menu.Item>English</Menu.Item>
-                <Menu.Item> Hindi</Menu.Item>
-              </Menu>
-            </Box>
-            {/* </Right> */}
-
-            {/* <Avatar
-           size="48px"
-           borderRadius=""
-              source={require("../assets/nulp_logo.jpeg")}
-          /> */}
-
-            {/* <VStack>
-          <Avatar
-            size="37px"
-            borderRadius="md"
-            source={{
-              uri: "https://via.placeholder.com/50x50.png",
-            }}
-          />
-          </VStack> */}
-          </Box>
-        ),
-        // title: "User Name",
-        // // isEnableSearchBtn: true,
-        // subHeading: "Hello",
-        // iconComponent: (
-
-        // ),
-      }}
-      _subHeader={{ bg: "rgb(248, 117, 88)" }}
-      _footer={{
-        menues: [
-          {
-            title: "Search",
-            icon: "SearchLineIcon",
-            route: "/contents",
-          },
-          {
-            title: "Contents",
-            icon: "BookOpenLineIcon",
-            route: "/all",
-          },
-          {
-            title: "Connections",
-            icon: "TeamLineIcon",
-            route: "/home",
-          },
-          {
-            title: "Profie",
-            icon: "AccountCircleLineIcon",
-            route: "/profile",
-          },
-        ],
-      }}
-    >
-          <Header/>
-
-       <Box sx={{background:'#2D2D2D',padding:'20px'}}>
-          <p style={{fontSize:'20px',fontWeight:'700',color:'#fff',paddingBottom:'5px',margin:'0'}}>Explore content related to your domain.Learn from well curated courses and content.</p>
-          <p style={{fontSize:'16px',fontWeight:'700',color:'#C1C1C1',margin:'0',paddingBottom:'30px'}}>Learn from well curated courses and content.</p>
-          <Search></Search>
-        </Box>
-
-
-      <Container>
-          <ThemeProvider theme={theme}>
-          <Typography variant="h3" sx={{ marginTop: '30px' }}>Filter by popular domain</Typography>
-          </ThemeProvider> 
-
-        <Box sx={{paddingTop:'30px'}}>
-        {data.result.framework.categories.map((faqIndex) => (
-            <Grid container spacing={2} style={{margin:'20px 0',marginBottom:'10px'}}  key={faqIndex}>
-            {faqIndex.terms.map(term => (
-                <Grid item xs={12} md={6} lg={3}  style={{marginBottom:'10px'}}>
-
-                <Box style={{display:'flex', flexDirection:'row', alignItems:'center'}} key={faqIndex.id}>
-                <Box style={{background:'#fff',padding:'10px',borderRadius:'10px',height:'48px',width:'48px',border:'solid 1px #E1E1E1'}}><img src={require("../../assets/swm.png")} style={{width:'100%'}} /></Box>
-                <h5 style={{fontSize:'14px',fontWeight:'500',paddingLeft:'10px',margin:'0'}}>{term.name}</h5>
-                </Box>
-                </Grid>
-            ))}
-            </Grid>
-        ))}
-        </Box>
-    </Container>
-    </Layout>
+<div>
+<Header/>
+
+    <Box sx={{background:'#2D2D2D',padding:'20px'}}>
+   <p style={{fontSize:'20px',fontWeight:'700',color:'#fff',paddingBottom:'5px',margin:'0'}}>Explore content related to your domain.Learn from well curated courses and content.</p>
+   <p style={{fontSize:'16px',fontWeight:'700',color:'#C1C1C1',margin:'0',paddingBottom:'30px'}}>Learn from well curated courses and content.</p>
+   <Search></Search>
+ </Box>
+
+
+<Container maxWidth="xxl" role="main" className="container-pb">
+   <ThemeProvider theme={theme}>
+   <Typography variant="h3" sx={{ marginTop: '30px' }}>Filter by popular domain</Typography>
+   </ThemeProvider> 
+
+ <Box sx={{paddingTop:'30px'}}>
+ {data.result.framework.categories.map((faqIndex) => (
+     <Grid container spacing={2} style={{margin:'20px 0',marginBottom:'10px'}}  key={faqIndex}>
+     {faqIndex.terms.map(term => (
+         <Grid item xs={12} md={6} lg={3}  style={{marginBottom:'10px'}}>
+
+         <Box style={{display:'flex', flexDirection:'row', alignItems:'center'}} key={faqIndex.id}>
+         <Box style={{background:'#fff',padding:'10px',borderRadius:'10px',height:'48px',width:'48px',border:'solid 1px #E1E1E1'}}><img src={require("../../assets/swm.png")} style={{width:'100%'}} /></Box>
+         <h5 style={{fontSize:'14px',fontWeight:'500',paddingLeft:'10px',margin:'0'}}>{term.name}</h5>
+         </Box>
+         </Grid>
+     ))}
+     </Grid>
+ ))}
+ </Box>
+</Container>
+<Footer/>
+</div>
   );
 };
 
-export default DomainList;
+export default DomainList;
\ No newline at end of file
diff --git a/packages/nulp_elite/src/styles/style.css b/packages/nulp_elite/src/styles/style.css
index 666779ce..95c831fa 100644
--- a/packages/nulp_elite/src/styles/style.css
+++ b/packages/nulp_elite/src/styles/style.css
@@ -50,12 +50,15 @@ body{
   font-size:12px;
   padding-top: 5px;
  }
+ .css-1fd8bcr{
+  width: 73% !important;
+ }
  .MuiBottomNavigation-root{
   justify-content: space-around !important;
  }
  .navigateActive{
   background: #004367 !important;
-  margin: -5px -51px -12px !important;
+  margin: -10px 0 !important;
  }
  .navigateActive svg, .navigateActive span{
   color:#fff !important;
@@ -75,4 +78,31 @@ body{
   .xs-hide{
     display: none !important;
   }
- }
\ No newline at end of file
+  #menu-appbar .css-3dzjca-MuiPaper-root-MuiPopover-paper-MuiMenu-paper{
+    width: 300px;
+    height: 363px;
+    left: 0 !important;
+    max-height: inherit !important;
+    top: 0 !important;
+ }
+ }
+ @media(min-width:769px) {
+  .lg-hide{
+    display: none !important;
+  }
+ }
+
+ .language fieldset{
+  border: none !important;
+ }
+ header{
+  box-shadow: none !important;
+ }
+/* mobile menu */
+ 
+ .container-pb{
+  padding-bottom: 50px !important;
+ }
+ .footer a{
+    border-bottom: solid 1px #fff;
+  }