Changed Files

src/App.jsx

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

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 recentjobs = jobs.slice(0,3);
+const jobListings = ({isHome}) => {
+    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) => (
-            <joblisting key = {job.id} job ={job} />
+        {jobListings.map((job) => (
+            <jobListing key = {job.id} job ={job} />
         ))}
         
       </div>

src/pages/homepage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import hero from '../components/hero'; 
 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 = () => {
-  return (
-    <div>
-      
-    </div>
-  )
+  return 
+  <section className='bg-blue-50 px-4 py-6'>
+    <joblistings />
+  </section>
 }
 
 export default jobspage