Changed Files

src/App.jsx

@@ -1,15 +1,15 @@
 import {Route, createBrowserRouter, createRoutesFromElements, RouterProvider} from 'react-router-dom'
-import homepage from './pages/homepage'
+import HomePage from './pages/HomePage'
-import mainlayout from './layouts/mainlayout'
+import MainLayout from './layouts/MainLayout'
-import jobspage from './pages/jobspage';
+import JobsPage from './pages/JobsPage';
-import notfoundpage from './pages/notfoundpage';
+import NotFoundPage from './pages/NotFoundPage';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path = '/' element = {<mainlayout />}>
+    <Route path = '/' element = {<MainLayout />}>
-      <Route index element = {<homepage />} /> 
+      <Route index element = {<HomePage />} /> 
-      <Route path = '/jobs' element = {<jobspage />} /> 
+      <Route path = '/jobs' element = {<JobsPage />} /> 
-      <Route path = '*' element = {<notfoundpage />} /> 
+      <Route path = '*' element = {<NotFoundPage />} /> 
 
 
     </Route>

src/components/homecards.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import card from './card'
 import {Link} from 'react-router-dom'
 
-const homecards = () => {
+const HomeCards = () => {
   return (
     <section className="py-4">
         <div className="container-xl lg:container m-auto">
@@ -37,4 +37,4 @@ const homecards = () => {
   )
 }
 
-export default homecards
+export default HomeCards

src/components/joblisting.jsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import {FaMapMarker } from 'react-icons/fa'
 import {Link} from 'react-router-dom';
 
-const joblisting = ({job}) => {
+const jobListing = ({job}) => {
 
     const [showFullDescription, setShowFullDescription] = useState(false);
     let description = job.description; 
@@ -48,4 +48,4 @@ const joblisting = ({job}) => {
   )
 }
 
-export default joblisting
+export default l

src/components/joblistings.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import jobs from '../jobs.json'
-import joblisting from './joblistings'
+import jobListing from './jobListings'
 
-const joblistings = () => {
+const jobListings = ({isHome}) => {
-    const recentjobs = jobs.slice(0,3);
+    const jobListings = isHome ? jobs.slice(0,3) : jobs;
   return (
     <section className="bg-blue-50 px-4 py-10">
     <div className="container-xl lg:container m-auto">
@@ -11,8 +11,8 @@ const joblistings = () => {
         Browse Jobs
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {recentjobs.map((job) => (
+        {jobListings.map((job) => (
-            <joblisting key = {job.id} job ={job} />
+            <jobListing key = {job.id} job ={job} />
         ))}
         
       </div>

src/jobs.json

@@ -1,86 +1,89 @@
- [
+ {
-    {
+  "jobs":
-      "id": "1",
+  [
-      "title": "Senior React Developer",
+      {
-      "type": "Full-Time",
+        "id": "1",
-      "description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as React or Angular.",
+        "title": "Senior React Developer",
-      "location": "Boston, MA",
+        "type": "Full-Time",
-      "salary": "$70K - $80K",
+        "description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as React or Angular.",
-      "company": {
+        "location": "Boston, MA",
-        "name": "NewTek Solutions",
+        "salary": "$70K - $80K",
-        "description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
+        "company": {
-        "contactEmail": "contact@teksolutions.com",
+          "name": "NewTek Solutions",
-        "contactPhone": "555-555-5555"
+          "description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
+          "contactEmail": "contact@teksolutions.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "2",
+        "title": "Front-End Engineer (React & Redux)",
+        "type": "Full-Time",
+        "location": "Miami, FL",
+        "description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
+        "salary": "$70K - $80K",
+        "company": {
+          "name": "Veneer Solutions",
+          "description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
+          "contactEmail": "contact@loremipsum.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "3",
+        "title": "React.js Dev",
+        "type": "Full-Time",
+        "location": "Brooklyn, NY",
+        "description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
+        "salary": "$70K - $80K",
+        "company": {
+          "name": "Dolor Cloud",
+          "description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
+          "contactEmail": "contact@dolorsitamet.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "4",
+        "title": "React Front-End Developer",
+        "type": "Part-Time",
+        "description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
+        "location": "Pheonix, AZ",
+        "salary": "$60K - $70K",
+        "company": {
+          "name": "Alpha Elite",
+          "description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
+          "contactEmail": "contact@adipisicingelit.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "5",
+        "title": "Full Stack React Developer",
+        "type": "Full-Time",
+        "description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
+        "location": "Atlanta, GA",
+        "salary": "$90K - $100K",
+        "company": {
+          "name": "Browning Technologies",
+          "description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
+          "contactEmail": "contact@consecteturadipisicing.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "6",
+        "title": "React Native Developer",
+        "type": "Full-Time",
+        "description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
+        "location": "Portland, OR",
+        "salary": "$100K - $110K",
+        "company": {
+          "name": "Port Solutions INC",
+          "description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
+          "contactEmail": "contact@ipsumlorem.com",
+          "contactPhone": "555-555-5555"
+        }
       }
-    },
+    ]
-    {
+}
-      "id": "2",
-      "title": "Front-End Engineer (React & Redux)",
-      "type": "Full-Time",
-      "location": "Miami, FL",
-      "description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
-      "salary": "$70K - $80K",
-      "company": {
-        "name": "Veneer Solutions",
-        "description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
-        "contactEmail": "contact@loremipsum.com",
-        "contactPhone": "555-555-5555"
-      }
-    },
-    {
-      "id": "3",
-      "title": "React.js Dev",
-      "type": "Full-Time",
-      "location": "Brooklyn, NY",
-      "description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
-      "salary": "$70K - $80K",
-      "company": {
-        "name": "Dolor Cloud",
-        "description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
-        "contactEmail": "contact@dolorsitamet.com",
-        "contactPhone": "555-555-5555"
-      }
-    },
-    {
-      "id": "4",
-      "title": "React Front-End Developer",
-      "type": "Part-Time",
-      "description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
-      "location": "Pheonix, AZ",
-      "salary": "$60K - $70K",
-      "company": {
-        "name": "Alpha Elite",
-        "description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
-        "contactEmail": "contact@adipisicingelit.com",
-        "contactPhone": "555-555-5555"
-      }
-    },
-    {
-      "id": "5",
-      "title": "Full Stack React Developer",
-      "type": "Full-Time",
-      "description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
-      "location": "Atlanta, GA",
-      "salary": "$90K - $100K",
-      "company": {
-        "name": "Browning Technologies",
-        "description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
-        "contactEmail": "contact@consecteturadipisicing.com",
-        "contactPhone": "555-555-5555"
-      }
-    },
-    {
-      "id": "6",
-      "title": "React Native Developer",
-      "type": "Full-Time",
-      "description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
-      "location": "Portland, OR",
-      "salary": "$100K - $110K",
-      "company": {
-        "name": "Port Solutions INC",
-        "description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
-        "contactEmail": "contact@ipsumlorem.com",
-        "contactPhone": "555-555-5555"
-      }
-    }
-  ]

src/layouts/mainlayout.jsx

@@ -1,15 +1,15 @@
 import { Outlet, replace } from "react-router-dom";
-import navbar from "../components/navbar";
+import NavBar from "../components/navBar";
 
 import React from 'react'
 
-const mainlayout = () => {
+const MainLayout = () => {
   return (
     <>
-      <navbar />
+      <NavBar />
       <Outlet />
     </>
   );
 }
 
-export default mainlayout
+export default MainLayout

src/pages/homepage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import hero from '../components/hero'; 
-import homecards from '../components/homecards';
+import homecards from '../components/HomeCards';
-import joblistings from '../components/joblistings';
+import joblistings from '../components/jobListings';
 import viewalljobs from '../components/viewalljobs';
 
 const homepage = () => {

src/pages/jobspage.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
+import joblistings from '../components/jobListings'
 
-const jobspage = () => {
+const JobsPage = () => {
-  return (
+  return 
-    <div>
+  <section className='bg-blue-50 px-4 py-6'>
-      
+    <joblistings />
-    </div>
+  </section>
-  )
 }
 
-export default jobspage
+export default JobsPage

src/pages/notfoundpage.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Link} from 'react-router-dom'; 
 import { FaExclamationTriangle } from 'react-icons/fa';
 
-const notfoundpage = () => {
+const NotFoundPage = () => {
   return (
     <section className="text-center flex flex-col justify-center items-center h-96">
     <FaExclamationTriangle className='text-yellow-400 text-6xl mb-4' />
@@ -17,4 +17,4 @@ const notfoundpage = () => {
   )
 }
 
-export default notfoundpage
+export default NotFoundPage