Enhance Navbar with sticky positioning and adjust logo height; replac…

…e CarouselComponent with lazy-loaded image in Home page for improved performance
CodeHive-Solutions · Dec 11, 2024 · 50f323e · 50f323e
1 parent 2f410fe
commit 50f323e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/frontend/src/components/common/NavBar.jsx b/frontend/src/components/common/NavBar.jsx
@@ -266,6 +266,9 @@ const Navbar = () => {
                 className="navbar"
                 sx={{
                     backdropFilter: 'blur(10px)',
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 1001,
                 }}
             >
                 <Box
@@ -282,7 +285,7 @@ const Navbar = () => {
                             alt="logo-cyc-navbar"
                             style={{ cursor: 'pointer' }}
                             width={110}
-                            height={55}
+                            height={56}
                             src={companyLogo}
                             onClick={() => navigate('/logged/home')}
                         />

diff --git a/frontend/src/components/pages/Home.jsx b/frontend/src/components/pages/Home.jsx
@@ -22,8 +22,6 @@ const pointsVideo = `${getApiUrl().apiUrl}static/videos/points.mp4`;
 // Libraries
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-const benefits = [{ image: benefit, title: 'befenit' }];
-
 const Home = () => {
     const [todayBirthdays, setTodayBirthdays] = useState([]);
     const [yesterdayBirthdays, setYesterdayBirthdays] = useState([]);
@@ -450,10 +448,13 @@ const Home = () => {
                     >
                         Beneficios
                     </Typography>
-                    <CarouselComponent
-                        items={benefits}
-                        height={'960px'}
-                        width={'540px'}
+                    <img
+                        loading="lazy"
+                        style={{ borderRadius: '1rem' }}
+                        width={540}
+                        height={960}
+                        src={benefit}
+                        alt="beneficio"
                     />
                 </Box>
             </Box>