Merge pull request #179 from yashmandi/feat/homepage-enhancement

[FIXES #167] Improved Home Page UI
PatilHarshh · Jun 4, 2024 · c87cd6e · c87cd6e
2 parents 0a15226 + d89f8b0
commit c87cd6e
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 49 deletions.
diff --git a/client/src/components/About/Home/SectionFourth.jsx b/client/src/components/About/Home/SectionFourth.jsx
@@ -29,9 +29,18 @@ const SectionFourth = () => {
 
   return (
     <Container>
-
       <Box sx={{ py: 8 }}>
-
+        <style>
+          {`
+            .card-hover {
+              transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            }
+            .card-hover:hover {
+              transform: translateY(-10px);
+              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            }
+          `}
+        </style>
         <Typography variant="h4" align="left" gutterBottom color="black">
           Find Best Companies
         </Typography>
@@ -41,7 +50,7 @@ const SectionFourth = () => {
         <Grid container spacing={3} justifyContent="center">
           {companies.map(company => (
             <Grid item key={company.id} xs={12} sm={6} md={4}>
-              <Card sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+              <Card className="card-hover" sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                 <CardMedia
                   component="img"
                   height="150"
@@ -66,7 +75,6 @@ const SectionFourth = () => {
         </Grid>
       </Box>
     </Container>
-
   );
 };
 

diff --git a/client/src/components/About/Home/SectionThird.jsx b/client/src/components/About/Home/SectionThird.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, Grid, Typography, Card, CardContent, CardMedia, Container } from '@mui/material';
 import { jobs } from '../../utils/data'; // Import jobs data from your utils/data file
+import './styles.css'; // Import the CSS file
 
 const SectionThird = () => {
   return (
@@ -15,7 +16,7 @@ const SectionThird = () => {
         <Grid container spacing={3} justifyContent="center">
           {jobs.map(job => (
             <Grid item key={job.id} xs={12} sm={6} md={3}>
-              <Card sx={{ borderRadius: 10 }}>
+              <Card className="card-hover" sx={{ borderRadius: 10 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '150px', backgroundColor: '#f5f5f5', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
                   <CardMedia
                     component="img"

diff --git a/client/src/components/Home/SectionFourth.jsx b/client/src/components/Home/SectionFourth.jsx
@@ -29,9 +29,18 @@ const SectionFourth = () => {
 
   return (
     <Container>
-
       <Box sx={{ py: 8 }}>
-
+        <style>
+          {`
+            .card-hover {
+              transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            }
+            .card-hover:hover {
+              transform: translateY(-10px);
+              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            }
+          `}
+        </style>
         <Typography variant="h4" align="left" gutterBottom color="black">
           Find Best Companies
         </Typography>
@@ -41,7 +50,7 @@ const SectionFourth = () => {
         <Grid container spacing={3} justifyContent="center">
           {companies.map(company => (
             <Grid item key={company.id} xs={12} sm={6} md={4}>
-              <Card sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+              <Card className="card-hover" sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                 <CardMedia
                   component="img"
                   height="150"
@@ -66,7 +75,6 @@ const SectionFourth = () => {
         </Grid>
       </Box>
     </Container>
-
   );
 };
 

diff --git a/client/src/components/Home/SectionSixth.jsx b/client/src/components/Home/SectionSixth.jsx
@@ -32,37 +32,48 @@ const SectionFifth = () => {
 
   return (
     <Container>
-    <Box sx={{ py: 8 }}>
-      <Typography variant="h4" align="left" gutterBottom>
-        Featured Cities
-      </Typography>
-      <Typography variant="body2" align="left" color="textSecondary" sx={{ mb: 4 }}>
-        Start your next career in a beautiful city
-      </Typography>
-      <Grid container spacing={3} justifyContent="center">
-        {cities.map(city => (
-          <Grid item key={city.id} xs={12} sm={6} md={3}>
-            <Card sx={{ backgroundColor: '#e3f2fd', borderRadius: 10, height: '100%' }}>
-              <CardMedia
-                component="img"
-                height="200"
-                image={city.imageUrl}
-                alt={city.name}
-                sx={{ borderTopLeftRadius: 10, borderTopRightRadius: 10, objectFit: 'cover' }}
-              />
-              <CardContent sx={{ flexGrow: 1 }}>
-                <Typography variant="h6" color="primary" gutterBottom>
-                  {city.name}
-                </Typography>
-                <Typography variant="body2" color="textSecondary">
-                  {city.openPositions} open positions
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-    </Box>
+      <Box sx={{ py: 8 }}>
+        <style>
+          {`
+            .card-hover {
+              transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            }
+            .card-hover:hover {
+              transform: translateY(-10px);
+              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            }
+          `}
+        </style>
+        <Typography variant="h4" align="left" gutterBottom>
+          Featured Cities
+        </Typography>
+        <Typography variant="body2" align="left" color="textSecondary" sx={{ mb: 4 }}>
+          Start your next career in a beautiful city
+        </Typography>
+        <Grid container spacing={3} justifyContent="center">
+          {cities.map(city => (
+            <Grid item key={city.id} xs={12} sm={6} md={3}>
+              <Card className="card-hover" sx={{ backgroundColor: '#e3f2fd', borderRadius: 10, height: '100%' }}>
+                <CardMedia
+                  component="img"
+                  height="200"
+                  image={city.imageUrl}
+                  alt={city.name}
+                  sx={{ borderTopLeftRadius: 10, borderTopRightRadius: 10, objectFit: 'cover' }}
+                />
+                <CardContent sx={{ flexGrow: 1 }}>
+                  <Typography variant="h6" color="primary" gutterBottom>
+                    {city.name}
+                  </Typography>
+                  <Typography variant="body2" color="textSecondary">
+                    {city.openPositions} open positions
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
     </Container>
   );
 };

diff --git a/client/src/components/Home/SectionThird.jsx b/client/src/components/Home/SectionThird.jsx
@@ -6,6 +6,18 @@ const SectionThird = () => {
   return (
     <Box sx={{ backgroundColor: '#eee6db', py: 8 }}>
       <Container>
+        <style>
+          {`
+            .card-hover {
+              transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            }
+            .card-hover:hover {
+              transform: translateY(-10px);
+              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+              cursor: pointer;
+            }
+          `}
+        </style>
         <Typography variant="h4" align="left" gutterBottom color="black">
           Featured Job Offers
         </Typography>
@@ -15,7 +27,7 @@ const SectionThird = () => {
         <Grid container spacing={3} justifyContent="center">
           {jobs.map(job => (
             <Grid item key={job.id} xs={12} sm={6} md={3}>
-              <Card sx={{ borderRadius: 10 }}>
+              <Card className="card-hover" sx={{ borderRadius: 10 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '150px', backgroundColor: '#f5f5f5', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
                   <CardMedia
                     component="img"

diff --git a/client/src/pages/Companies.jsx b/client/src/pages/Companies.jsx
@@ -17,11 +17,22 @@ const Companies = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const handleSearchSubmit = () => {};
-  const handleShowMore = () => {};
+  const handleSearchSubmit = () => { };
+  const handleShowMore = () => { };
 
   return (
     <div className='w-full'>
+      <style>
+        {`
+          .card-hover {
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+          }
+          .card-hover:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+          }
+        `}
+      </style>
       <Header
         title='Find Your Dream Company'
         handleClick={handleSearchSubmit}
@@ -34,7 +45,7 @@ const Companies = () => {
       <div className='container mx-auto flex flex-col gap-5 2xl:gap-10 px-5 md:px-0 py-6 bg-[#f7fdfd]'>
         <div className='flex items-center justify-between mb-4'>
           <p className='text-sm md:text-base'>
-            Shwoing: <span className='font-semibold'>1,902</span> Companies
+            Showing: <span className='font-semibold'>1,902</span> Companies
             Available
           </p>
 
@@ -47,7 +58,9 @@ const Companies = () => {
 
         <div className='w-full flex flex-col gap-6'>
           {data?.map((cmp, index) => (
-            <CompanyCard cmp={cmp} key={index} />
+            <div className="card-hover" key={index}>
+              <CompanyCard cmp={cmp} />
+            </div>
           ))}
 
           {isFetching && (
@@ -72,7 +85,7 @@ const Companies = () => {
         )}
       </div>
       {/* Top Scroll Btn */}
-      <BiArrowToTop className="fixed bottom-4 right-4 border rounded-full p-1" size={50} onClick={()=>{window.scrollTo({ top: 0, left: 0, behavior: "smooth"});}}/>
+      <BiArrowToTop className="fixed bottom-4 right-4 border rounded-full p-1" size={50} onClick={() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }} />
     </div>
   );
 };

diff --git a/client/src/pages/FindJobs.jsx b/client/src/pages/FindJobs.jsx
@@ -39,10 +39,21 @@ const FindJobs = () => {
 
   return (
     <div>
+      <style>
+        {`
+          .card-hover {
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+          }
+          .card-hover:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+          }
+        `}
+      </style>
       <Header
         title='Find Your Dream Job with Ease'
         type='home'
-        handleClick={() => {}}
+        handleClick={() => { }}
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
         location={jobLocation}
@@ -124,7 +135,9 @@ const FindJobs = () => {
 
           <div className='w-full flex flex-wrap gap-4'>
             {jobs.map((job, index) => (
-              <JobCard job={job} key={index} />
+              <div className="card-hover" key={index}>
+                <JobCard job={job} />
+              </div>
             ))}
           </div>
 
@@ -139,7 +152,7 @@ const FindJobs = () => {
         </div>
       </div>
       {/* Top Scroll Btn */}
-      <BiArrowToTop className="fixed bottom-4 right-4 border rounded-full p-1" size={50} onClick={()=>{window.scrollTo({ top: 0, left: 0, behavior: "smooth"});}}/>
+      <BiArrowToTop className="fixed bottom-4 right-4 border rounded-full p-1" size={50} onClick={() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }} />
     </div>
   );
 };