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/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 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/jobs.json

@@ -1,3 +1,5 @@
+ {
+  "jobs":
   [
       {
         "id": "1",
@@ -84,3 +86,4 @@
         }
       }
     ]
+}

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 joblistings from '../components/joblistings';
+import homecards from '../components/HomeCards';
+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>
-  )
+const JobsPage = () => {
+  return 
+  <section className='bg-blue-50 px-4 py-6'>
+    <joblistings />
+  </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