Updates to links and add pricing page

src/app/admin-panel/home/page.js

@@ -17,7 +17,7 @@
 
   const links = [
     { text: 'Pricing', url: '/pricing' },
-    { text: 'About', url: '/about' },
+    { text: 'About', url: '/wip' },
     { text: 'Logout', url: '/api/auth/logout' },
   ];
 
@@ -65,17 +65,17 @@
     } finally {
       setLoading(false);
     }
   }, [user]);
 
   useEffect(() => {
     fetchUser();
   }, []); // Fetch job postings when the component mounts
 
   useEffect(() => {
     if (user) {
       fetchJobPostings();
     }
   }, [user]);
 
   // Function to handle deletion of job posting
   const handleDelete = async jobPostingId => {
@@ -125,7 +125,7 @@
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
       <Navbar links={links} />
-      <div className="flex items-center justify-between border-b-2 border-gray-200 py-6 md:justify-start md:space-x-10 border-y">
+      <div className="flex items-center justify-between border-b-2 border-gray-200 py-6 md:justify-start md:space-x-10">
         <div className="flex justify-start lg:w-0 lg:flex-1">
           <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate mb-4">
             My Job Postings

src/app/layout.js

@@ -5,8 +5,9 @@ import { UserProvider } from '@auth0/nextjs-auth0/client';
 // const inter = Inter({ subsets: ['latin'] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'JobPanel Home',
+  description:
+    'Portal for employers to post job listings and find the perfect candidate for their business.',
 };
 
 export default function RootLayout({ children }) {

src/app/page.js

@@ -31,14 +31,15 @@ export default function Component() {
 
   const links = [
     { text: 'Pricing', url: '/pricing' },
-    { text: 'About', url: '/about' },
+    { text: 'About', url: '/wip' },
+    { text: 'Login / Signup', url: '/api/auth/login' },
   ];
 
   return (
     <div className="flex flex-col min-h-[100dvh]">
       <Navbar links={links} />
       <main className="flex-1">
-        <section className="w-full py-12 md:py-24 lg:py-32 border-y">
+        <section className="w-full py-12 md:py-24 lg:py-32">
           <div className="container px-4 md:px-6 space-y-10 xl:space-y-16">
             <div className="grid max-w-[1300px] mx-auto gap-4 px-4 sm:px-6 md:px-10 md:grid-cols-2 md:gap-16">
               <div>
@@ -80,29 +81,25 @@ export default function Component() {
               <div className="grid gap-1">
                 <h3 className="text-lg font-bold">Easy Job Posting</h3>
                 <p className="text-sm text-gray-500">
-                  Post your job openings in minutes and reach a wide pool of
-                  qualified candidates.
+                  Create and publish job listings in minutes.
                 </p>
               </div>
               <div className="grid gap-1">
-                <h3 className="text-lg font-bold">Candidate Management</h3>
+                <h3 className="text-lg font-bold">Flexibility</h3>
                 <p className="text-sm text-gray-500">
-                  Easily track and manage your applicants with our intuitive
-                  dashboard.
+                  Customize your job postings to attract the right candidates.
                 </p>
               </div>
               <div className="grid gap-1">
-                <h3 className="text-lg font-bold">Powerful Analytics</h3>
+                <h3 className="text-lg font-bold">Simple Pricing</h3>
                 <p className="text-sm text-gray-500">
-                  Get insights into your hiring process with our comprehensive
-                  analytics.
+                  No hassle. No hidden fees. Pay only for what you use.
                 </p>
               </div>
               <div className="grid gap-1">
-                <h3 className="text-lg font-bold">Seamless Collaboration</h3>
+                <h3 className="text-lg font-bold">Cross Posting</h3>
                 <p className="text-sm text-gray-500">
-                  Invite your team to collaborate on the hiring process and make
-                  better decisions together.
+                  Advertise your opportunity across multiple job boards.
                 </p>
               </div>
             </div>

src/app/pricing/page.js

@@ -0,0 +1,58 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/XhNYwJIUqC2
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+'use client';
+
+import Link from 'next/link';
+import Navbar from '@/components/ui/navbar';
+import Footer from '@/components/ui/footer';
+
+export default function Component() {
+  const links = [
+    { text: 'Home', url: '/' },
+    { text: 'About', url: '/wip' },
+    { text: 'Login / Signup', url: '/api/auth/login' },
+  ];
+
+  return (
+    <section className="w-full h-dvh">
+      <Navbar links={links} />
+      <div className="flex items-center justify-center h-5/6">
+        <div className="container px-4 md:px-6">
+          <div className="mx-auto max-w-md space-y-6 text-center">
+            <div className="space-y-2">
+              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
+                Simple Pricing
+              </h2>
+              <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                No hassle. No hidden fees.
+              </p>
+            </div>
+            <div className="rounded-xl border bg-white p-6 shadow-sm">
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <h3 className="text-2xl font-bold">6 months</h3>
+                  <p className="text-gray-500">
+                    Advertise your opportunity across multiple sites
+                  </p>
+                </div>
+                <div className="flex items-baseline justify-center space-x-2">
+                  <span className="text-4xl font-bold">$10</span>
+                  <span className="text-gray-500">/position</span>
+                </div>
+                <Link
+                  href="/payment"
+                  className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-900/90 h-10 px-4 py-2 w-full">
+                  Get Started
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </section>
+  );
+}

src/app/wip/page.js

@@ -0,0 +1,52 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/fqAzrUdiAN9
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+'use client';
+
+import Navbar from '@/components/ui/navbar';
+import Footer from '@/components/ui/footer';
+
+export default function Component() {
+  const links = [
+    { text: 'Home', url: '/' },
+    { text: 'Pricing', url: '/pricing' },
+    { text: 'About', url: '/wip' },
+    { text: 'Login / Signup', url: '/api/auth/login' },
+  ];
+  return (
+    <div>
+      <Navbar links={links} />
+      <div className="flex h-screen w-full flex-col items-center justify-center gap-4 bg-gray-100">
+        <WrenchIcon className="h-12 w-12 text-gray-500" />
+        <h1 className="text-2xl font-bold text-gray-800">
+          Page Under Construction
+        </h1>
+        <p className="max-w-md text-center text-gray-500">
+          This page is currently being worked on and will be available soon.
+          Please check back later.
+        </p>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+function WrenchIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round">
+      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+    </svg>
+  );
+}

src/components/ui/footer.jsx

@@ -4,33 +4,33 @@ import Link from 'next/link';
 function Footer() {
   return (
     <footer className="bg-gray-900 p-6 md:py-12 w-full text-gray-50">
-      <div className="container max-w-7xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8 text-sm">
+      <div className="container max-w-7xl grid grid-cols-4 sm:grid-cols-3 md:grid-cols-4 gap-8 text-sm">
         <div className="grid gap-1">
           <h3 className="font-semibold">Company</h3>
-          <Link href="#">About Us</Link>
-          <Link href="#">Our Team</Link>
-          <Link href="#">Careers</Link>
-          <Link href="#">News</Link>
+          <Link href="/wip">About Us</Link>
+          <Link href="/wip">Our Team</Link>
+          <Link href="/wip">Careers</Link>
+          <Link href="/wip">News</Link>
         </div>
         <div className="grid gap-1">
           <h3 className="font-semibold">Job Sites</h3>
-          <Link href="#">Indigenous</Link>
-          <Link href="#">New Comers</Link>
-          <Link href="#">People with Disabilities</Link>
-          <Link href="#">Vulnerable Youth</Link>
-          <Link href="#">Asylum-Refugees</Link>
+          <Link href="/jobsite1">Indigenous</Link>
+          <Link href="/jobsite2">New Comers</Link>
+          <Link href="/wip">People with Disabilities</Link>
+          <Link href="/wip">Vulnerable Youth</Link>
+          <Link href="/wip">Asylum-Refugees</Link>
         </div>
         <div className="grid gap-1">
           <h3 className="font-semibold">Legal</h3>
-          <Link href="#">Privacy Policy</Link>
-          <Link href="#">Terms of Service</Link>
-          <Link href="#">Cookie Policy</Link>
+          <Link href="/wip">Privacy Policy</Link>
+          <Link href="/wip">Terms of Service</Link>
+          <Link href="/wip">Cookie Policy</Link>
         </div>
         <div className="grid gap-1">
           <h3 className="font-semibold">Contact</h3>
-          <Link href="#">Support</Link>
-          <Link href="#">Sales</Link>
-          <Link href="#">Partnerships</Link>
+          <Link href="/wip">Support</Link>
+          <Link href="/wip">Sales</Link>
+          <Link href="/wip">Partnerships</Link>
         </div>
       </div>
     </footer>

src/components/ui/navbar.jsx

@@ -3,8 +3,8 @@ import Link from 'next/link';
 
 function Navbar({ links }) {
   return (
-    <header className="px-4 lg:px-6 h-14 flex items-center">
-      <Link className="flex items-center justify-center" href="#">
+    <header className="px-4 lg:px-6 h-14 flex items-center border-y">
+      <Link className="flex items-center justify-center" href="/">
         <BriefcaseIcon className="h-6 w-6" />
         <span className="sr-only">Job Posting Site</span>
       </Link>