first task

src/components/card.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const card = ({children, bg = 'bg-gray-100'}) => {
+  return <div className={`${bg} p-6 rounded-lg shadow-md`}>
+    {children}
+  </div>;
+}
+
+export default card

src/components/hero.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const hero = () => {
+  return (
+    <section className="bg-indigo-700 py-20 mb-4">
+        <div
+          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
+        >
+          <div className="text-center">
+            <h1
+              className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
+            >
+              Become a React Dev
+            </h1>
+            <p className="my-4 text-xl text-white">
+              Find the React job that fits your skills and needs
+            </p>
+          </div>
+        </div>
+      </section>
+  )
+}
+
+export default hero

src/components/homecards.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import card from './card'
+import {Link} from 'react-router-dom'
+
+const homecards = () => {
+  return (
+    <section className="py-4">
+        <div className="container-xl lg:container m-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
+            <card>
+            <h2 className="text-2xl font-bold">For Developers</h2>
+              <p className="mt-2 mb-4">
+                Browse our React jobs and start your career today
+              </p>
+              <Link
+                to="/jobs"
+                className="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
+              >
+                Browse Jobs
+              </Link>
+            </card>
+            <card bg = 'bg-indigo-100'>
+            <h2 className="text-2xl font-bold">For Employers</h2>
+              <p className="mt-2 mb-4">
+                List your job to find the perfect developer for the role
+              </p>
+              <Link
+                tp="/add-job"
+                className="inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600"
+              >
+                Add Job
+              </Link>
+            </card>
+          </div>
+        </div>
+      </section>
+  )
+}
+
+export default homecards

src/components/joblisting.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { use } from 'react'
+import { useState } from 'react'
+import {FaMapMarker } from 'react-icons/fa'
+import {Link} from 'react-router-dom';
+
+const joblisting = ({job}) => {
+
+    const [showFullDescription, setShowFullDescription] = useState(false);
+    let description = job.description; 
+
+    if (!showFullDescription)
+    {
+        description = description.substring(0,90) + '...';
+    }
+  return (
+    <div className="bg-white rounded-xl shadow-md relative">
+            <div className="p-4">
+              <div className="mb-6">
+                <div className="text-gray-600 my-2">{job.type}</div>
+                <h3 className="text-xl font-bold">{job.title}</h3>
+              </div>
+  
+              <div className="mb-5">{description}
+              <button onClick = {() => setShowFullDescription ((prevstate) => !prevstate)} className='text-indigo-500 mb-5 hover:text-indigo-600'>
+                {showFullDescription ? 'Less' : 'More'}
+              </button>
+              </div>
+  
+              <h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
+  
+              <div className="border border-gray-100 mb-5"></div>
+  
+              <div className="flex flex-col lg:flex-row justify-between mb-4">
+                <div className="text-orange-700 mb-3">
+                    <FaMapMarker className='inline-text-lg mg-1 mr-1' />
+                  {job.location}
+                </div>
+                <Link
+                  to={`/job/${job.id}`}
+                  className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
+                >
+                Read More
+                </Link>
+              </div>
+            </div>
+          </div>
+  )
+}
+
+export default joblisting

src/components/joblistings.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import jobs from '../jobs.json'
+import joblisting from './joblistings'
+
+const joblistings = () => {
+    const recentjobs = jobs.slice(0,3);
+  return (
+    <section className="bg-blue-50 px-4 py-10">
+    <div className="container-xl lg:container m-auto">
+      <h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
+        Browse Jobs
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {recentjobs.map((job) => (
+            <joblisting key = {job.id} job ={job} />
+        ))}
+        
+      </div>
+    </div>
+  </section>
+  )
+}
+
+export default joblistings

src/components/navbar.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import logo from '../assets/images/logo.png'; 
+import {NavLink} from 'react-router-dom'; 
+
+const navbar = () => {
+    const linkclass = ({isActive}) => 
+    isActive ? 'bg-black text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2' : 'text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
+                    
+  return (
+    <nav className="bg-indigo-700 border-b border-indigo-500">
+        <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+          <div className="flex h-20 items-center justify-between">
+            <div
+              className="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
+            >
+              {/* |<!-- Logo --> */}
+              <NavLink 
+                className="flex flex-shrink-0 items-center mr-4" to="/">
+                <img
+                  className="h-10 w-auto"
+                  src= {logo}
+                  alt="React Jobs"
+                />
+                <span className="hidden md:block text-white text-2xl font-bold ml-2"
+                  >React Jobs</span
+                >
+              </NavLink>
+              <div className="md:ml-auto">
+                <div className="flex space-x-2">
+                  <NavLink
+                    to="/"
+                    className={linkclass}
+                    >Home
+                    </NavLink>
+                  <NavLink
+                    to="/jobs"
+                    className={linkclass}
+                    >Jobs
+                    </NavLink>
+                  
+                  <NavLink
+                    to="/add-job"
+                    className={linkclass}
+                    >Add Job
+                    </NavLink>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+  )
+};
+
+export default navbar

src/components/viewalljobs.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {Link} from 'react-router-dom'
+
+const viewalljobs = () => {
+  return (
+    <section className="m-auto max-w-lg my-10 px-6">
+        <Link
+          to="/jobs"
+          className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
+          >View All Jobs
+          </Link>
+        
+      </section>
+  )
+}
+
+export default viewalljobs