Update SectionSecond.jsx

updated card section in home page
PatilHarshh · May 27, 2024 · 6fe5074 · 6fe5074
1 parent d0cd71e
commit 6fe5074
Showing 1 changed file with 19 additions and 8 deletions.
diff --git a/client/src/components/Home/SectionSecond.jsx b/client/src/components/Home/SectionSecond.jsx
@@ -12,13 +12,11 @@ const SectionSecond = () => {
     { id: 6, title: 'Sales', positions: '2 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Sales' },
     { id: 7, title: 'Customer Service', positions: '3 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Customer+Service' },
     { id: 8, title: 'Engineering', positions: '6 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Engineering' },
-
   ];
 
   return (
     <Container>
-
-      <Box sx={{  py: 8 }}>
+      <Box sx={{ py: 8 }}>
         <Typography variant="h4" align="left" gutterBottom>
           Search by Category
         </Typography>
@@ -28,7 +26,20 @@ const SectionSecond = () => {
         <Grid container spacing={3} justifyContent="center" sx={{ mt: 4 }}>
           {categories.map(category => (
             <Grid item key={category.id} xs={12} sm={6} md={3}>
-              <Card sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', boxShadow: 3, borderRadius: 2 }}>
+              <Card 
+                sx={{ 
+                  display: 'flex', 
+                  flexDirection: 'column', 
+                  alignItems: 'center', 
+                  boxShadow: 3, 
+                  borderRadius: 2, 
+                  transition: 'transform 0.3s, background-color 0.3s', 
+                  '&:hover': {
+                    transform: 'scale(1.05)', 
+                    backgroundColor: '#FFE4B5' 
+                  } 
+                }}
+              >
                 <CardMedia
                   component="img"
                   height="200"
@@ -37,19 +48,19 @@ const SectionSecond = () => {
                   sx={{ borderRadius: '50%', backgroundColor: '#FFDAB9' }}
                 />
                 <CardContent>
-                  <Typography variant="h5" align="center"  gutterBottom sx={{color:'black'}}>
+                  <Typography variant="h5" align="center" gutterBottom sx={{ fontSize: '1.5rem', fontWeight: 'bold', color: 'black' }}>
                     {category.title}
                   </Typography>
-                  <Typography variant="body2" align="center" color="text.Secondary">
+                  <Typography variant="body2" align="center" color="textSecondary" sx={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
                     {category.positions}
                   </Typography>
                 </CardContent>
               </Card>
             </Grid>
           ))}
         </Grid>
-      </Box>    </Container>
-
+      </Box>
+    </Container>
   );
 };