Updated some components and optimized the code

src/components/ChannelCard.js

@@ -5,19 +5,29 @@ import { Link } from 'react-router-dom';
 import { demoProfilePicture } from '../utils/constants';
 
 const ChannelCard = ({ channelDetail, marginTop }) => (
-  <Box
-    sx={{
-      boxShadow: 'none',
-      borderRadius: '20px',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: { xs: '356px', md: '320px' },
-      height: '326px',
-      margin: 'auto',
-      marginTop
-    }}
-  >
+<Box
+  sx={{
+    boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)', // Adding a soft shadow for depth
+    borderRadius: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: { xs: '356px', md: '320px' },
+    height: '326px',
+    margin: 'auto',
+    marginTop: '20px', // Example marginTop, you can adjust this as needed
+    backgroundColor: 'white', // Background color for the Box
+    border: '1px solid #e0e0e0', // Light border for definition
+    padding: '20px', // Adding padding inside the box
+    transition: 'transform 0.3s ease, box-shadow 0.3s ease', // Smooth transition for hover effects
+    '&:hover': {
+      transform: 'scale(1.05)', // Slight zoom effect on hover
+      boxShadow: '0 12px 24px rgba(0, 0, 0, 0.15)', // Darker shadow on hover
+    },
+    boxSizing: 'border-box', // Ensure padding doesn't affect overall dimensions
+  }}
+>
+
     <Link to={`/channel/${channelDetail?.id?.channelId}`}>
       <CardContent sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center', color: '#fff' }}>
         <CardMedia

src/components/ChannelDetail.js

@@ -16,11 +16,25 @@ const ChannelDetail = () => {
   return (
     <Box minHeight='95vh'>
       <Box>
-        <div style={{
-          background: 'linear-gradient(90deg, rgba(36,2,0,1) 0%, rgba(246,0,92,1) 59%, rgba(0,212,255,1) 100%)',
-          zIndex: 10,
-          height: '300px'
-        }}/>
+     <div
+  style={{
+    background: 'linear-gradient(90deg, rgba(36,2,0,1) 0%, rgba(246,0,92,1) 59%, rgba(0,212,255,1) 100%)',
+    zIndex: 10,
+    height: '300px',
+    borderRadius: '20px', // Adding rounded corners for a smoother look
+    padding: '20px', // Add padding to the inside of the div
+    boxSizing: 'border-box', // Ensure padding doesn't affect overall height or width
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)', // Soft shadow for depth
+    transition: 'transform 0.3s ease, box-shadow 0.3s ease', // Smooth transition for hover effects
+    display: 'flex', // Center content vertically and horizontally if needed
+    justifyContent: 'center',
+    alignItems: 'center',
+    '&:hover': {
+      transform: 'scale(1.05)', // Slight zoom effect on hover
+      boxShadow: '0 6px 18px rgba(0, 0, 0, 0.15)', // Darker shadow on hover
+    },
+  }}
+>
         <ChannelCard channelDetail={channelDetail}  marginTop='-110px' />
       </Box>
       <Box display='flex' p='2'>

src/components/Navbar.js

@@ -5,17 +5,10 @@ import {logo} from '../utils/constants'
 import SearchBar from './SearchBar'
 
 const Navbar = () => (
-    <Stack 
-    direction='row' 
-    alignItems='center'
-    p={2}
-    sx={{position:'sticky', background: '#000', top: 0, justifyContent: 'space-between'}}
-     >
         <Link to='/' style={{display: 'flex', alignItems:'center'}}>
             <img src={logo} alt='logo' height={45}/>
         </Link>
         <SearchBar />
-    </Stack>
   )
 
 export default Navbar

src/components/VideoCard.js

@@ -17,11 +17,6 @@ const VideoCard = ({video :{id: {videoId}, snippet}}) => {
         </Link>
         <CardContent sx={{backgroundColor : '#1e1e1e',
     height: '106px'}}>
-      <Link to={videoId ? `/video/${videoId}` : demoVideoUrl}>
-            <Typography variant='subtitle1' fontWeight='bold' color='#FFF'>
-                {snippet?.title.slice(0.60) || demoVideoTitle.slice(0,60)}
-            </Typography>
-        </Link>
       <Link to={snippet?.channelId ? `/channel/${snippet?.channelId}` : demoChannelUrl}>
             <Typography variant='subtitle2' fontWeight='bold' color='gray'>
                 {snippet?.channelTitle || demoChannelTitle}