Merge branch 'main' into new

PatilHarshh · Jun 5, 2024 · e357d6a · e357d6a
2 parents 8371df3 + 61dfc6b
commit e357d6a
Show file tree

Hide file tree

Showing 16 changed files with 233 additions and 111 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -21,6 +21,7 @@ import About from "./components/About/About";
 
 import { useEffect, useState } from "react";
 import Loader from "./components/Loader";
+import { BiArrowToTop } from "react-icons/bi";
 
 function Layout() {
   const { user } = useSelector((state) => state.user);
@@ -74,7 +75,7 @@ function App() {
           <Route
             path={
               user?.user?.accountType === "seeker"
-                ? "/user-profile"
+              ? "/user-profile"
                 : "/user-profile/:id"
             }
             element={<UserProfile />}
@@ -91,6 +92,7 @@ function App() {
           element={<Navigate to="/find-jobs" replace={true} />}
         />
       </Routes>
+      <BiArrowToTop className="fixed bottom-4 right-4 border rounded-full p-1" size={50} onClick={()=>{window.scrollTo({ top: 0, left: 0, behavior: "smooth"});}}/>
       {user && <Footer />}
     </main>
   );

diff --git a/client/src/components/About/About.jsx b/client/src/components/About/About.jsx
@@ -12,7 +12,6 @@ const About = () => {
       <SectionSecond />
       <SectionThird />
       <SectionFourth />
-
     </div>
   );
 };

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/SectionSecond.jsx b/client/src/components/About/Home/SectionSecond.jsx
@@ -4,7 +4,7 @@ import { Box, Grid, Typography, Card, CardContent, CardMedia, Container } from '
 const SectionSecond = () => {
   // Sample data for categories
   const categories = [
-    { id: 1, title: 'Marketing', positions: '2 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Marketing' },
+    { id: 1, title: 'Marketing', positions: '2 open positions', imageUrl: 'https://www.pngplay.com/wp-content/uploads/7/Digital-Marketing-Transparent-Free-PNG.png' },
     { id: 2, title: 'Finance', positions: '3 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Finance' },
     { id: 3, title: 'IT', positions: '5 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=IT' },
     { id: 4, title: 'Human Resources', positions: '1 open position', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=HR' },

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
@@ -9,29 +9,38 @@ const SectionFourth = () => {
       name: 'Google',
       description: 'Explore opportunities at Google.',
       jobs: 5000, // Total number of jobs
-      image: 'https://via.placeholder.com/150', // Example image URL
+      image: 'https://static01.nyt.com/images/2019/06/18/business/18google/merlin_155876157_28d611ed-0437-4e3a-819e-c4ecb616d59e-superJumbo.jpg', // Example image URL
     },
     {
       id: '2',
       name: 'Amazon',
       description: 'Join Amazon and build the future.',
       jobs: 8000,
-      image: 'https://via.placeholder.com/150', // Example image URL
+      image: 'https://www.accountancydaily.co/sites/default/files/styles/media_thumbnail/public/field/image/amazon_adobestock_291428005_editorial_use_only.jpeg?itok=rt2oGCMy', // Example image URL
     },
     {
       id: '3',
       name: 'Microsoft',
       description: 'Innovate with Microsoft.',
       jobs: 10000,
-      image: 'https://via.placeholder.com/150', // Example image URL
+      image: 'https://www.investmentmonitor.ai/wp-content/uploads/sites/7/2021/12/microsoft-headquarters-fdi.jpg', // Example image URL
     },
   ];
 
   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/SectionSecond.jsx b/client/src/components/Home/SectionSecond.jsx
@@ -1,54 +1,98 @@
-import React from 'react';
-import { Box, Grid, Typography, Card, CardContent, CardMedia, Container } from '@mui/material';
+import React from "react";
 
 const SectionSecond = () => {
   // Sample data for categories
   const categories = [
-    { id: 1, title: 'Marketing', positions: '2 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Marketing' },
-    { id: 2, title: 'Finance', positions: '3 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Finance' },
-    { id: 3, title: 'IT', positions: '5 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=IT' },
-    { id: 4, title: 'Human Resources', positions: '1 open position', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=HR' },
-    { id: 5, title: 'Operations', positions: '4 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Operations' },
-    { 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' },
-
+    {
+      id: 1,
+      title: "Marketing",
+      positions: "2 open positions",
+      imageUrl:
+        "https://www.firerockmarketing.com/wp-content/uploads/2016/02/shutterstock_395180611.jpg",
+    },
+    {
+      id: 2,
+      title: "Finance",
+      positions: "3 open positions",
+      imageUrl:
+        "https://dynamics.folio3.com/blog/wp-content/uploads/2021/04/Financial-Management.png",
+    },
+    {
+      id: 3,
+      title: "IT",
+      positions: "5 open positions",
+      imageUrl:
+        "https://5chat.com/wp-content/uploads/industry-2496192_1920.jpg",
+    },
+    {
+      id: 4,
+      title: "Human Resources",
+      positions: "1 open position",
+      imageUrl:
+        "https://www.zambianguardian.com/wp-content/uploads/2022/09/Types-of-human-resource-development.jpg",
+    },
+    {
+      id: 5,
+      title: "Operations",
+      positions: "4 open positions",
+      imageUrl:
+        "https://fupping.com/wp-content/uploads/2018/07/Operations.jpg",
+    },
+    {
+      id: 6,
+      title: "Sales",
+      positions: "2 open positions",
+      imageUrl:
+        "https://blog.bit.ai/wp-content/uploads/2019/07/32863956976_5623d484db_b.jpg",
+    },
+    {
+      id: 7,
+      title: "Customer Service",
+      positions: "3 open positions",
+      imageUrl:
+        "https://images.appypie.com/wp-content/uploads/2023/01/24083102/Customer-Service-Channels.jpg",
+    },
+    {
+      id: 8,
+      title: "Engineering",
+      positions: "6 open positions",
+      imageUrl:
+        "https://leverageedublog.s3.ap-south-1.amazonaws.com/blog/wp-content/uploads/2020/05/18175106/Types-of-Engineering.png",
+    },
   ];
 
   return (
-    <Container>
+
+    <div className=" container mx-auto py-8">
+      <h3 className="text-center  font-bold text-3xl mb-6">
+        Search by Category
+      </h3>
+      <p  className="text-center  underline font-semibold text-sm mb-8 text-gray-700"> Search your career opportunity with our categories</p>
 
-      <Box sx={{  py: 8 }}>
-        <Typography variant="h4" align="left" gutterBottom>
-          Search by Category
-        </Typography>
-        <Typography variant="body2" align="left" color="textSecondary">
-          Search your career opportunity with our categories
-        </Typography>
-        <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 }}>
-                <CardMedia
-                  component="img"
-                  height="200"
-                  image={category.imageUrl}
-                  alt={category.title}
-                  sx={{ borderRadius: '50%', backgroundColor: '#FFDAB9' }}
-                />
-                <CardContent>
-                  <Typography variant="h5" align="center"  gutterBottom sx={{color:'black'}}>
-                    {category.title}
-                  </Typography>
-                  <Typography variant="body2" align="center" color="text.Secondary">
-                    {category.positions}
-                  </Typography>
-                </CardContent>
-              </Card>
-            </Grid>
-          ))}
-        </Grid>
-      </Box>    </Container>
+      <div className="grid  sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        {categories.map((category) => (
+          <div
+            key={category.id}
+            className="card bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden  w-[320px] h-[370px] mx-auto transition-transform duration-300 hover:scale-105"
+          >
+            <img
+              src={category.imageUrl}
+              alt={category.title}
+              className="w-full h-[250px] object-cover"
+            />
+            <div className="p-4 text-center">
+              <h2 className="text-xl font-semibold mb-2 ">{category.title}</h2>
+               <div  className="flex justify-between items-center">
+              <p className="text-gray-700">{category.positions}</p>
+              <button className="bg-blue-500 text-white px-4 py-1 rounded-lg transition-transform duration-300 hover:bg-blue-600">View</button>
+              </div>
+            </div>
+          </div>
+
+        ))}
+      </div>
+    </div>
+
 
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,6 @@ const About = () => { @@
           <SectionSecond />
           <SectionThird />
           <SectionFourth />
         </div>
       );
     };
@@ Expand Down @@