From d22454d7c599ca617d12ee8199bfb5424a3c06c5 Mon Sep 17 00:00:00 2001
From: Jerome Hardaway <jerome@vetswhocode.io>
Date: Sun, 9 Jun 2024 00:22:46 -0400
Subject: [PATCH] Update login form with additional links and error messaging
 (#605)

* Update login form with additional links and error messaging

* completed login page

* update site config

* remove enrolcourse

* remove courseInfo

* rmoved courseinfo

* remove unused file

* remove more unused files

* save

* save

* save

* removed all premature course files

* save

* run prettier

* remove comment forms

* add useEffect

* save

* save

* save
---
 public/manifest.json                          |   4 +-
 src/assets/lib/utils.ts                       |   6 +-
 src/components/forms/comment-form.tsx         | 111 --------------
 src/components/forms/login-form.tsx           |   9 +-
 src/components/seo/deafult-seo.tsx            |  13 +-
 src/components/seo/page-seo.tsx               |   4 +-
 src/components/ui/spinner/index.tsx           |   6 +-
 src/components/welcome-message/index.tsx      |  13 ++
 src/components/widgets/course-info/index.tsx  |  59 -------
 .../course-details/curriculam-panel.tsx       | 100 ------------
 src/containers/course-details/index.tsx       |  63 --------
 .../course-details/instructor-panel.tsx       |  52 -------
 .../course-details/overview-panel.tsx         |  18 ---
 .../course-details/review-panel.tsx           |  64 --------
 src/containers/event-details/comment.tsx      |  16 --
 src/containers/hero/layout-04/index.tsx       |   2 +-
 src/containers/hero/layout-07/index.tsx       |   2 +-
 src/containers/lesson-details/index.tsx       | 100 ------------
 src/containers/lesson-details/nav-link.tsx    |  32 ----
 src/contexts/user-context.tsx                 | 136 +++++-----------
 src/data/blogs/beyond-the-resume.md           |  15 +-
 ...learned-after-10-years-at-vets-who-code.md |   7 +-
 src/data/site-config.ts                       |   1 +
 src/layouts/headers/header-04.tsx             |  50 ------
 src/layouts/layout-04/index.tsx               |  55 -------
 src/layouts/sidebar/index.tsx                 |   4 +-
 src/layouts/sidebar/item.tsx                  |  24 +--
 src/pages/api/apply.ts                        |   2 +-
 src/pages/api/mentor.ts                       |   6 +-
 src/pages/curriculum/[slug].tsx               | 122 ---------------
 .../curriculum/lessons/[course]/[lesson].tsx  | 145 ------------------
 src/pages/curriculum/subjects.tsx             |  50 ------
 src/pages/login.tsx                           |  38 +++--
 tailwind.config.js                            |   2 +-
 34 files changed, 130 insertions(+), 1201 deletions(-)
 delete mode 100644 src/components/forms/comment-form.tsx
 create mode 100644 src/components/welcome-message/index.tsx
 delete mode 100644 src/components/widgets/course-info/index.tsx
 delete mode 100644 src/containers/course-details/curriculam-panel.tsx
 delete mode 100644 src/containers/course-details/index.tsx
 delete mode 100644 src/containers/course-details/instructor-panel.tsx
 delete mode 100644 src/containers/course-details/overview-panel.tsx
 delete mode 100644 src/containers/course-details/review-panel.tsx
 delete mode 100644 src/containers/event-details/comment.tsx
 delete mode 100644 src/containers/lesson-details/index.tsx
 delete mode 100644 src/containers/lesson-details/nav-link.tsx
 delete mode 100644 src/layouts/headers/header-04.tsx
 delete mode 100644 src/layouts/layout-04/index.tsx
 delete mode 100644 src/pages/curriculum/[slug].tsx
 delete mode 100644 src/pages/curriculum/lessons/[course]/[lesson].tsx
 delete mode 100644 src/pages/curriculum/subjects.tsx

diff --git a/public/manifest.json b/public/manifest.json
index 505da1219..09b6a9986 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-    "name": "MaxCoach Education Template",
-    "short_name": "MaxCoach",
+    "name": "Vets Who Code",
+    "short_name": "Vets Who Code",
     "theme_color": "#696969",
     "background_color": "#20AD96",
     "display": "standalone",
diff --git a/src/assets/lib/utils.ts b/src/assets/lib/utils.ts
index d084ccade..e6447944d 100644
--- a/src/assets/lib/utils.ts
+++ b/src/assets/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs));
 }
diff --git a/src/components/forms/comment-form.tsx b/src/components/forms/comment-form.tsx
deleted file mode 100644
index 843fe84a3..000000000
--- a/src/components/forms/comment-form.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useState } from "react";
-import clsx from "clsx";
-import { useForm, SubmitHandler } from "react-hook-form";
-import Input from "@ui/form-elements/input";
-import Textarea from "@ui/form-elements/textarea";
-import Checkbox from "@ui/form-elements/checkbox";
-import Feedback from "@ui/form-elements/feedback";
-import Button from "@ui/button";
-import { hasKey } from "@utils/methods";
-
-interface IFormValues {
-    name: string;
-    email: string;
-    comment: string;
-    terms: boolean;
-}
-
-const CommentForm = ({ className }: { className?: string }) => {
-    const [message, setMessage] = useState("");
-    const {
-        register,
-        handleSubmit,
-        formState: { errors },
-    } = useForm<IFormValues>();
-
-    const onSubmit: SubmitHandler<IFormValues> = (data) => {
-        // eslint-disable-next-line no-console
-        console.log(data);
-        setMessage("Thank you for your message!");
-    };
-
-    return (
-        <form
-            className={clsx("tw-max-w-[770px] tw-mx-auto", className)}
-            onSubmit={handleSubmit(onSubmit)}
-        >
-            <div className="tw-grid sm:tw-grid-cols-2 tw-gap-5 tw-mb-5 lg:tw-gap-7.5 lg:tw-mb-7.5">
-                <div>
-                    <label htmlFor="name" className="tw-sr-only">
-                        Name
-                    </label>
-                    <Input
-                        id="name"
-                        placeholder="Your Name *"
-                        bg="light"
-                        feedbackText={errors?.name?.message}
-                        state={hasKey(errors, "name") ? "error" : "success"}
-                        showState={!!hasKey(errors, "name")}
-                        {...register("name", {
-                            required: "Name is required",
-                        })}
-                    />
-                </div>
-                <div>
-                    <label htmlFor="email" className="tw-sr-only">
-                        email
-                    </label>
-                    <Input
-                        type="email"
-                        id="email"
-                        placeholder="Your Email *"
-                        bg="light"
-                        feedbackText={errors?.email?.message}
-                        state={hasKey(errors, "email") ? "error" : "success"}
-                        showState={!!hasKey(errors, "email")}
-                        {...register("email", {
-                            required: "Email is required",
-                            pattern: {
-                                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-                                message: "invalid email address",
-                            },
-                        })}
-                    />
-                </div>
-            </div>
-            <div className="tw-mb-5 lg:tw-mb-7.5">
-                <label htmlFor="comment" className="tw-sr-only">
-                    comment
-                </label>
-                <Textarea
-                    id="comment"
-                    placeholder="Your Comment *"
-                    bg="light"
-                    feedbackText={errors?.comment?.message}
-                    state={hasKey(errors, "comment") ? "error" : "success"}
-                    showState={!!hasKey(errors, "comment")}
-                    {...register("comment", {
-                        required: "Comment is required",
-                    })}
-                />
-            </div>
-            <Checkbox
-                className="tw-mx-auto"
-                id="terms"
-                label="Save my name, email, and website in this browser for the next time I comment."
-                feedbackText={errors?.terms?.message}
-                state={hasKey(errors, "terms") ? "error" : "success"}
-                showState={!!hasKey(errors, "terms")}
-                {...register("terms")}
-            />
-            <div className="tw-mt-5 lgtw-mt-7.5 tw-text-center">
-                <Button type="submit" className="tw-w-[180px]">
-                    Submit
-                </Button>
-                {message && <Feedback state="success">{message}</Feedback>}
-            </div>
-        </form>
-    );
-};
-
-export default CommentForm;
diff --git a/src/components/forms/login-form.tsx b/src/components/forms/login-form.tsx
index 457645315..e43102ff7 100644
--- a/src/components/forms/login-form.tsx
+++ b/src/components/forms/login-form.tsx
@@ -6,6 +6,7 @@ import Input from "@ui/form-elements/input";
 import Checkbox from "@ui/form-elements/checkbox";
 import FeedbackText from "@ui/form-elements/feedback";
 import Button from "@ui/button";
+import Anchor from "@ui/anchor";
 import { hasKey } from "@utils/methods";
 import { useUser } from "@contexts/user-context";
 
@@ -88,10 +89,16 @@ const LoginForm = () => {
                     <small>Default Password: Admin</small>
                 </div>
                 <Checkbox name="remember" id="remember" label="Remember me" />
+                {serverState && <FeedbackText>{serverState}</FeedbackText>}
                 <Button type="submit" fullwidth className="tw-mt-7.5">
                     Log In
                 </Button>
-                {serverState && <FeedbackText>{serverState}</FeedbackText>}
+                <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-5">
+                    <Anchor path="/forgot-password" className="tw-mb-2">
+                        Forgot Password?
+                    </Anchor>
+                    <Anchor path="/register">Register New Account</Anchor>
+                </div>
             </form>
         </div>
     );
diff --git a/src/components/seo/deafult-seo.tsx b/src/components/seo/deafult-seo.tsx
index 384b2c52c..ad3b07b7c 100644
--- a/src/components/seo/deafult-seo.tsx
+++ b/src/components/seo/deafult-seo.tsx
@@ -1,27 +1,27 @@
 import { DefaultSeo } from "next-seo";
 import siteConfig from "@data/site-config";
 
-const SEO = () => {
+const DefaultSEO = () => {
     return (
         <DefaultSeo
             title={siteConfig.name}
             titleTemplate={`%s - ${siteConfig.titleTemplate}`}
             defaultTitle={siteConfig.name}
             description={siteConfig.description}
-            canonical=""
+            canonical={siteConfig.url}
             openGraph={{
                 type: "website",
                 locale: "en_IE",
                 site_name: siteConfig.name,
                 images: [
                     {
-                        url: "",
+                        url: "https://res.cloudinary.com/vetswhocode/image/upload/v1656268751/favicon_dpiacy.png",
                         width: 800,
                         height: 600,
                         alt: "Og Image Alt",
                     },
                     {
-                        url: "",
+                        url: "https://res.cloudinary.com/vetswhocode/image/upload/v1656268751/favicon_dpiacy.png",
                         width: 900,
                         height: 800,
                         alt: "Og Image Alt Second",
@@ -40,7 +40,7 @@ const SEO = () => {
                 {
                     name: "viewport",
                     content:
-                        "width=device-width, initial-scale=1 maximum-scale=1",
+                        "width=device-width, initial-scale=1, maximum-scale=1",
                 },
                 {
                     name: "apple-mobile-web-app-capable",
@@ -64,4 +64,5 @@ const SEO = () => {
         />
     );
 };
-export default SEO;
+
+export default DefaultSEO;
diff --git a/src/components/seo/page-seo.tsx b/src/components/seo/page-seo.tsx
index 68df60925..c65750db9 100644
--- a/src/components/seo/page-seo.tsx
+++ b/src/components/seo/page-seo.tsx
@@ -58,8 +58,8 @@ const PageSeo = ({
                 title={title}
                 titleTemplate={
                     template
-                        ? `${title as string} - ${template}`
-                        : siteConfig.titleTemplate
+                        ? `${title ?? ""} - ${template}`
+                        : `%s - ${siteConfig.titleTemplate}`
                 }
                 description={description}
                 openGraph={{
diff --git a/src/components/ui/spinner/index.tsx b/src/components/ui/spinner/index.tsx
index eac2cd28f..e6857fe67 100644
--- a/src/components/ui/spinner/index.tsx
+++ b/src/components/ui/spinner/index.tsx
@@ -1,7 +1,11 @@
 const Spinner = () => {
     return (
         <div className="tw-bg-primary tw-w-10 tw-h-10 tw-my-10 tw-mx-auto tw-animate-[rotatePlane_1.2s_infinite_ease-in-out]">
-            <img src="https://res.cloudinary.com/vetswhocode/image/upload/v1627489505/vwc_kym0qt.gif" alt="Loading" className="tw-w-full tw-h-full" />
+            <img
+                src="https://res.cloudinary.com/vetswhocode/image/upload/v1627489505/vwc_kym0qt.gif"
+                alt="Loading"
+                className="tw-w-full tw-h-full"
+            />
         </div>
     );
 };
diff --git a/src/components/welcome-message/index.tsx b/src/components/welcome-message/index.tsx
new file mode 100644
index 000000000..b9b6918ea
--- /dev/null
+++ b/src/components/welcome-message/index.tsx
@@ -0,0 +1,13 @@
+const WelcomeMessage = () => (
+    <div>
+        <h2 className="tw-mb-4 tw-text-xl tw-font-bold">
+            Welcome to Vets Who Code
+        </h2>
+        <p>
+            Make sure to connect with the leadership to get access to all the
+            resources and support you need to succeed.
+        </p>
+    </div>
+);
+
+export default WelcomeMessage;
diff --git a/src/components/widgets/course-info/index.tsx b/src/components/widgets/course-info/index.tsx
deleted file mode 100644
index 50c74475f..000000000
--- a/src/components/widgets/course-info/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import { useState } from "react";
-import dayjs from "dayjs";
-import Router from "next/router";
-import Button from "@ui/button";
-import SocialShare from "@components/social-share/layout-01";
-import EnrollModal from "@components/modals/enroll-modal";
-import { useUser } from "@contexts/user-context";
-import { useMount } from "@hooks";
-import CourseInfoItem from "./item";
-
-type TProps = {
-    lessonLink: string;
-    slug: string;
-    published_at: string;
-};
-
-const CourseInfo = ({ lessonLink, slug, published_at }: TProps) => {
-    const [show, setShow] = useState(false);
-    const mounted = useMount();
-    const { isLoggedIn, enrolCourse } = useUser();
-
-    const enrollHandler = () => {
-        if (isLoggedIn) {
-            enrolCourse({ course: slug, lessonLink });
-            void Router.push(lessonLink);
-        } else {
-            void Router.push("/login-register");
-        }
-    };
-
-    if (!mounted) return null;
-
-    return (
-        <>
-            <div className="course-info-widget tw-pt-7.5 tw-px-7.5 tw-pb-[33px] tw-bg-white tw-shadow-2sm tw-shadow-heading/10 tw-rounded lg:tw-max-w-[340px]">
-                <div className="course-meta tw-mb-10">
-                    <CourseInfoItem
-                        icon="far fa-calendar"
-                        label="Published"
-                        value={dayjs(published_at).format("MMM DD YYYY")}
-                    />
-                </div>
-                <Button fullwidth className="tw-mb-4" onClick={enrollHandler}>
-                    Start Now
-                </Button>
-                <Button fullwidth onClick={() => setShow(true)}>
-                    Login
-                </Button>
-                <div className="tw-mt-5 tw-text-center">
-                    <SocialShare />
-                </div>
-            </div>
-            <EnrollModal show={show} onClose={() => setShow(false)} />
-        </>
-    );
-};
-
-export default CourseInfo;
diff --git a/src/containers/course-details/curriculam-panel.tsx b/src/containers/course-details/curriculam-panel.tsx
deleted file mode 100644
index 4cad2c181..000000000
--- a/src/containers/course-details/curriculam-panel.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import clsx from "clsx";
-import Badge from "@ui/badge";
-import Anchor from "@ui/anchor";
-import { useUser } from "@contexts/user-context";
-import { ICurriculum } from "@utils/types";
-
-type TProps = {
-    curriculum: ICurriculum[];
-    courseSlug: string;
-};
-
-const CurriculumPanel = ({ curriculum, courseSlug }: TProps) => {
-    const { courseProgress } = useUser();
-    const enrolledCourse = courseProgress.find(
-        (cs) => cs.course === courseSlug
-    );
-
-    return (
-        <div className="curriculum-sections">
-            {curriculum.map(({ id, title, description, lessons }) => (
-                <div
-                    key={id}
-                    className="tw-border tw-border-alto tw-rounded tw-mt-[50px] first:tw-mt-0"
-                >
-                    <div className="tw-py-5 tw-px-3.8 md:tw-py-[22px] md:tw-px-12">
-                        <h5 className="tw-text-xl tw-mb-0">{title}</h5>
-                        {description && (
-                            <p className="tw-text-md tw-mb-0 tw-mt-[5px] tw-italic">
-                                {description}
-                            </p>
-                        )}
-                    </div>
-                    {lessons.length > 0 && (
-                        <ul className="section-content">
-                            {lessons.map((item) => {
-                                const hasAccess =
-                                    enrolledCourse || item.access === "free";
-                                return (
-                                    <li
-                                        key={item.slug}
-                                        className="tw-text-md even:tw-bg-light-100 odd:tw-bg-white even:last:tw-rounded-b"
-                                    >
-                                        <Anchor
-                                            path={item.path}
-                                            className={clsx(
-                                                "tw-px-3.8 md:tw-pl-12 md:tw-pr-7.5 tw-min-h-[56px] tw-flex tw-flex-wrap tw-items-center",
-                                                !hasAccess &&
-                                                    "tw-pointer-events-none"
-                                            )}
-                                        >
-                                            <span className="tw-grow tw-py-2.5">
-                                                <i
-                                                    className={clsx(
-                                                        "far tw-w-5 tw-text-md",
-                                                        item.type ===
-                                                            "lesson" &&
-                                                            "fa-file-alt",
-                                                        item.type === "quiz" &&
-                                                            "fa-clock"
-                                                    )}
-                                                />
-                                                {item.title}
-                                            </span>
-                                            <div className="tw-text-right tw-flex tw-items-center tw-py-2.5">
-                                                <Badge className="tw-ml-2.5">
-                                                    {item.duration}
-                                                </Badge>
-                                                {item.type === "lesson" &&
-                                                    item.access === "free" && (
-                                                        <Badge
-                                                            className="tw-ml-2.5"
-                                                            color="primary"
-                                                        >
-                                                            Preview
-                                                        </Badge>
-                                                    )}
-                                                {item?.video && (
-                                                    <span className="tw-ml-2.5 tw-font-medium tw-px-3.8">
-                                                        <i className="far fa-video" />
-                                                    </span>
-                                                )}
-                                                {item.access === "paid" && (
-                                                    <span className="tw-ml-2.5 tw-font-medium tw-px-3.8">
-                                                        <i className="fas fa-lock-alt" />
-                                                    </span>
-                                                )}
-                                            </div>
-                                        </Anchor>
-                                    </li>
-                                );
-                            })}
-                        </ul>
-                    )}
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export default CurriculumPanel;
diff --git a/src/containers/course-details/index.tsx b/src/containers/course-details/index.tsx
deleted file mode 100644
index 8badbb64f..000000000
--- a/src/containers/course-details/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
-    TabContainer,
-    /* TabNav, */ TabPane,
-    /* TabList, */ TabContent,
-} from "@ui/tab";
-import { ICourse, ICurriculum, IInstructor } from "@utils/types";
-import OverviewPanel from "./overview-panel";
-import CurriculamPanel from "./curriculam-panel";
-import InstructorPanel from "./instructor-panel";
-
-type TProps = {
-    data: {
-        course: ICourse;
-        curriculum: ICurriculum[];
-        instructor: IInstructor;
-    };
-};
-
-const CourseDetails = ({
-    data: { course, curriculum, instructor },
-}: TProps) => {
-    return (
-        <>
-            <section className="course-details">
-                <div className="tw-container tw-grid lg:tw-grid-cols-3 tw-gap-12">
-                    <div className="lg:tw-col-[1/3]">
-                        <TabContainer variant="underline">
-                            {/*
-                      <TabList>
-                            <TabNav>Overview</TabNav>
-                            <TabNav>Curriculum</TabNav>
-                            <TabNav>Instructor</TabNav>
-                        </TabList>
-                        */}
-                            <TabContent className="tw-mt-10 lg:tw-mt-[50px]">
-                                <TabPane>
-                                    {course?.description && (
-                                        <OverviewPanel
-                                            description={course?.description}
-                                        />
-                                    )}
-                                </TabPane>
-                                <TabPane>
-                                    {curriculum && (
-                                        <CurriculamPanel
-                                            curriculum={curriculum}
-                                            courseSlug={course.slug}
-                                        />
-                                    )}
-                                </TabPane>
-                                <TabPane>
-                                    <InstructorPanel {...instructor} />
-                                </TabPane>
-                            </TabContent>
-                        </TabContainer>
-                    </div>
-                </div>
-            </section>
-        </>
-    );
-};
-
-export default CourseDetails;
diff --git a/src/containers/course-details/instructor-panel.tsx b/src/containers/course-details/instructor-panel.tsx
deleted file mode 100644
index 41a218848..000000000
--- a/src/containers/course-details/instructor-panel.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Anchor from "@ui/anchor";
-import Social, { SocialLink } from "@components/ui/social";
-import { IInstructor } from "@utils/types";
-
-type TProps = IInstructor;
-
-const OverviewPanel = ({ name, image, designation, bio, socials }: TProps) => {
-    return (
-        <div className="instructor tw-grid tw-gap-7.5 md:tw-grid-cols-3 lg:tw-gap-[50px]">
-            <figure className="md:tw-col-[1/1]">
-                {image.src && (
-                    <img
-                        src={image.src}
-                        alt={image?.alt || name}
-                        width={238}
-                        height={238}
-                        loading="lazy"
-                    />
-                )}
-            </figure>
-            <div className="md:tw-col-[2/-1]">
-                <h3>
-                    <Anchor path="/profile">{name}</Anchor>
-                </h3>
-                <h6 className="tw-font-normal tw-text-body tw-leading-relaxed tw-mb-0">
-                    /{designation}
-                </h6>
-                <p className="tw-mt-3.8 tw-mb-0">{bio}</p>
-
-                <Social
-                    shape="circle"
-                    variant="outlined"
-                    color="light"
-                    className="tw-mt-7.5"
-                >
-                    {socials.map((social) => (
-                        <SocialLink
-                            key={social.label}
-                            href={social.url}
-                            label={social.label}
-                            className="tw-mr-3"
-                        >
-                            <i className={social.icon} />
-                        </SocialLink>
-                    ))}
-                </Social>
-            </div>
-        </div>
-    );
-};
-
-export default OverviewPanel;
diff --git a/src/containers/course-details/overview-panel.tsx b/src/containers/course-details/overview-panel.tsx
deleted file mode 100644
index 66a9630c6..000000000
--- a/src/containers/course-details/overview-panel.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IContent } from "@utils/types";
-
-import HTMLContent from "@components/html-content";
-
-type TProps = {
-    description: IContent[];
-};
-
-const OverviewPanel = ({ description }: TProps) => {
-    return (
-        <div className="course-overview tw-prose prose-h2:tw-text-xl sm:prose-h2:tw-text-3xl tw-max-w-none">
-            <h2 className="title tw-mb-5">Subject Description</h2>
-            <HTMLContent body={description} />
-        </div>
-    );
-};
-
-export default OverviewPanel;
diff --git a/src/containers/course-details/review-panel.tsx b/src/containers/course-details/review-panel.tsx
deleted file mode 100644
index 0a9f7a9b6..000000000
--- a/src/containers/course-details/review-panel.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import ProgressBar from "@ui/progress-bar";
-import StarRating from "@ui/star-rating";
-import Review from "@components/review";
-import { ReviewType } from "@utils/types";
-
-const ReviewPanel = ({ average, count, rating_details, items }: ReviewType) => {
-    return (
-        <>
-            <h3 className="tw-mt-[13px] tw-mb-[26px]">Reviews</h3>
-            <div className="tw-flex tw-flex-wrap">
-                <div className="tw-shrink-0 tw-w-full tw-mb-7.5 sm:tw-mb-0 sm:tw-w-[200px] sm:tw-mr-7.5 md:tw-mr-[70px]">
-                    <p className="tw-text-secondary tw-font-medium tw-mb-3.8">
-                        Average Rating
-                    </p>
-                    <div className="tw-bg-white tw-text-center tw-pt-[34px] tw-pb-[38px] tw-px-7.5 tw-shadow-2sm tw-shadow-heading/10">
-                        <div className="tw-text-[56px] tw-font-semibold tw-leading-none tw-mb-2 tw-text-primary">
-                            {average}
-                        </div>
-                        <StarRating rating={average} />
-                        <div className="tw-mt-0.5">({count} ratings)</div>
-                    </div>
-                </div>
-                <div className="tw-grow">
-                    <p className="tw-text-secondary tw-font-medium sm:tw-mb-[42px]">
-                        Detailed Rating
-                    </p>
-                    {Object.entries(rating_details).map(([key, value]) => (
-                        <div className="tw-flex tw-items-center" key={key}>
-                            <StarRating
-                                rating={+key}
-                                size="sm"
-                                align="left"
-                                className="tw-shrink-0 tw-mr-5"
-                            />
-                            <ProgressBar
-                                color="primary"
-                                now={value ? 50 : 0}
-                                disableAnimation
-                                className="tw-grow"
-                            />
-                            <span className="tw-shrink-0 tw-text-gray-400 tw-font-medium tw-min-w-[25px] tw-text-right tw-ml-1">
-                                {value}
-                            </span>
-                        </div>
-                    ))}
-                </div>
-            </div>
-            {items.length > 0 && (
-                <ul className="course-reviews-list tw-mt-[50px]">
-                    {items.map((item) => (
-                        <li
-                            key={item.id}
-                            className="tw-mb-7.5 tw-pl-[5px] tw-pr-5 tw-pt-5 tw-pb-7 tw-border-b tw-border-b-gray-500 tw-mt-2.5 first:tw-mt-0 last:tw-mb-0"
-                        >
-                            <Review {...item} />
-                        </li>
-                    ))}
-                </ul>
-            )}
-        </>
-    );
-};
-
-export default ReviewPanel;
diff --git a/src/containers/event-details/comment.tsx b/src/containers/event-details/comment.tsx
deleted file mode 100644
index 66769084f..000000000
--- a/src/containers/event-details/comment.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import CommentForm from "@components/forms/comment-form";
-
-const Comment = () => {
-    return (
-        <div className="tw-py-15 md:tw-py-20 lg:tw-py-[100px]">
-            <div className="tw-container">
-                <h3 className="tw-text-center tw-mb-11 tw-text-4xl lg:tw-text-5xl">
-                    Leave your thought here
-                </h3>
-                <CommentForm />
-            </div>
-        </div>
-    );
-};
-
-export default Comment;
diff --git a/src/containers/hero/layout-04/index.tsx b/src/containers/hero/layout-04/index.tsx
index 76e9d271f..e96c665a2 100644
--- a/src/containers/hero/layout-04/index.tsx
+++ b/src/containers/hero/layout-04/index.tsx
@@ -59,7 +59,7 @@ const HeroArea = ({
                                 height: "100%",
                                 backgroundColor: "rgba(9, 31, 64, 0.5)",
                             }}
-                        ></div>
+                        />
                     </div>
                 )}
                 <motion.div
diff --git a/src/containers/hero/layout-07/index.tsx b/src/containers/hero/layout-07/index.tsx
index 360a728d4..9388e6574 100644
--- a/src/containers/hero/layout-07/index.tsx
+++ b/src/containers/hero/layout-07/index.tsx
@@ -59,7 +59,7 @@ const HeroArea = ({ data: { items } }: TProps) => {
                                     style={{
                                         backgroundColor: "rgba(9, 31, 64, 0.5)",
                                     }}
-                                ></div>
+                                />
                             </div>
                         )}
                         <div className="tw-container tw-relative tw-z-1 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-7.5 tw-mb-[350px]">
diff --git a/src/containers/lesson-details/index.tsx b/src/containers/lesson-details/index.tsx
deleted file mode 100644
index 3a767f9d7..000000000
--- a/src/containers/lesson-details/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import Router from "next/router";
-import { useUser } from "@contexts/user-context";
-import Button from "@ui/button";
-import Alert from "@ui/alert";
-import { ILesson } from "@utils/types";
-import MarkdownRenderer from "@components/markdown-renderer";
-import NavLink from "./nav-link";
-
-type TProps = {
-    data: {
-        lesson: Pick<ILesson, "title" | "slug" | "video" | "content">;
-        prevNextLesson: {
-            prev: ILesson;
-            next: ILesson;
-        };
-        courseSlug: string;
-    };
-};
-
-const LessonDetails = ({
-    data: {
-        lesson,
-        prevNextLesson: { prev, next },
-        courseSlug,
-    },
-}: TProps) => {
-    const { lessonComplete, courseProgress } = useUser();
-
-    const enrolledCourse = courseProgress.find(
-        (cs) => cs.course === courseSlug
-    );
-
-    const isCompleted = Boolean(
-        courseProgress
-            .find((cs) => cs.course === courseSlug)
-            ?.completedLessons.includes(lesson.slug)
-    );
-    const onLessonComplete = () => {
-        lessonComplete({
-            course: courseSlug,
-            lessonLink: next?.path || "",
-            lesson: lesson.slug,
-        });
-        if (next?.path) {
-            void Router.push(next.path);
-        }
-    };
-
-    return (
-        <div className="tw-mx-auto tw-px-3.8 tw-py-[100px] tw-max-w-[930px]">
-            <h2 className="tw-mb-[18px]">{lesson.title}</h2>
-            {lesson?.video && (
-                <iframe
-                    src={lesson.video}
-                    title={lesson.title}
-                    className="tw-mb-10"
-                />
-            )}
-            <MarkdownRenderer content={lesson.content} />
-
-            {enrolledCourse && (
-                <>
-                    {isCompleted ? (
-                        <Alert
-                            className="tw-mt-8 tw-text-center"
-                            color="secondary"
-                        >
-                            Completed <i className="fa fa-check" />
-                        </Alert>
-                    ) : (
-                        <Button className="tw-mt-8" onClick={onLessonComplete}>
-                            Complete
-                        </Button>
-                    )}
-                </>
-            )}
-            {enrolledCourse && (
-                <div className="tw-mt-7 tw-flex tw-justify-between tw-items-center">
-                    {prev && (
-                        <NavLink
-                            title={prev.title}
-                            path={prev.path}
-                            variant="prev"
-                        />
-                    )}
-                    {next && (
-                        <NavLink
-                            title={next.title}
-                            path={next.path}
-                            variant="next"
-                        />
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default LessonDetails;
diff --git a/src/containers/lesson-details/nav-link.tsx b/src/containers/lesson-details/nav-link.tsx
deleted file mode 100644
index 341cd0ee5..000000000
--- a/src/containers/lesson-details/nav-link.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import clsx from "clsx";
-import Anchor from "@ui/anchor";
-
-type TProps = {
-    title: string;
-    path: string;
-    variant: "prev" | "next";
-};
-
-const NavLink = ({ title, path, variant }: TProps) => {
-    return (
-        <Anchor
-            path={path}
-            className={clsx(
-                "tw-group tw-inline-flex tw-items-center tw-py-0.5 tw-px-5 tw-rounded tw-min-w-[150px] tw-min-h-[52px] tw-text-md tw-font-bold tw-bg-light-100 tw-text-body hover:tw-bg-primary hover:tw-text-white",
-                variant === "prev" && "tw-text-right tw-flex-row-reverse",
-                variant === "next" && "tw-ml-auto"
-            )}
-        >
-            {title}
-            <i
-                className={clsx(
-                    "far fa-angle-right tw-text-md tw-text-primary tw-transition-colors tw-duration-300 group-hover:tw-text-white",
-                    variant === "next" && "tw-ml-10",
-                    variant === "prev" && "tw-mr-10 tw-rotate-180"
-                )}
-            />
-        </Anchor>
-    );
-};
-
-export default NavLink;
diff --git a/src/contexts/user-context.tsx b/src/contexts/user-context.tsx
index 7e54b64c6..ff56f4594 100644
--- a/src/contexts/user-context.tsx
+++ b/src/contexts/user-context.tsx
@@ -1,65 +1,50 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { createContext, useContext, useMemo, useReducer } from "react";
-
-const COURSESTORE_KEY = "maxCourse";
-const AUTH_KEY = "maxAuth";
-
-// User Context
-
-type CourseType = {
-    course: string;
-    completedLessons: string[];
-    currentLesson: string;
-};
-
-//  Context Type
+import {
+    createContext,
+    useContext,
+    useMemo,
+    useReducer,
+    useEffect,
+} from "react";
+
+// Constants for local storage keys
+const AUTH_KEY = "vwcAuth";
+
+// Define the UserContextType
 export type UserContextType = {
-    isLoggedIn: boolean | null;
-    courseProgress: CourseType[];
+    isLoggedIn: boolean;
     setLogin: () => void;
-    enrolCourse: (data: { course: string; lessonLink: string }) => void;
-    lessonComplete: (data: {
-        course: string;
-        lessonLink: string;
-        lesson: string;
-    }) => void;
+    logout: () => void;
 };
 
-export const UserContext = createContext({} as UserContextType);
-
-// User Reducer
+// Create the UserContext
+export const UserContext = createContext<UserContextType>(
+    {} as UserContextType
+);
 
+// Initial state
 const initialState = {
     isLoggedIn: false,
-    courseProgress: [] as CourseType[],
 };
 
+// Initialize state from local storage
 const init = () => {
     if (typeof window === "undefined") return initialState;
     const loginStore = localStorage.getItem(AUTH_KEY);
-    const courseStore = localStorage.getItem(COURSESTORE_KEY);
-
-    const courseParse =
-        courseStore !== null
-            ? (JSON.parse(courseStore) as CourseType[])
-            : ([] as CourseType[]);
     const loginParse =
         loginStore !== null ? (JSON.parse(loginStore) as boolean) : false;
-
     return {
         ...initialState,
         isLoggedIn: loginParse,
-        courseProgress: courseParse,
     };
 };
 
+// Define action types
 interface UserAction {
-    type: "LOGIN" | "ENROLL_COURSE" | "LESSON_COMPLETE";
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    type: "LOGIN" | "LOGOUT";
     payload?: any;
 }
 
+// Reducer function to handle state changes
 function reducer(state: typeof initialState, action: UserAction) {
     switch (action.type) {
         case "LOGIN": {
@@ -69,46 +54,11 @@ function reducer(state: typeof initialState, action: UserAction) {
                 isLoggedIn: true,
             };
         }
-        case "ENROLL_COURSE": {
-            const courseProgress = [
-                ...state.courseProgress,
-                {
-                    course: action.payload.course,
-                    currentLesson: action.payload.lessonLink,
-                    completedLessons: [],
-                },
-            ];
-            localStorage.setItem(
-                COURSESTORE_KEY,
-                JSON.stringify(courseProgress)
-            );
+        case "LOGOUT": {
+            localStorage.removeItem(AUTH_KEY);
             return {
                 ...state,
-                courseProgress,
-            };
-        }
-        case "LESSON_COMPLETE": {
-            const courseProgress = state.courseProgress.map((cs) => {
-                // console.log(cs, action.payload.course, action.payload.lesson);
-                if (cs.course === action.payload.course) {
-                    return {
-                        ...cs,
-                        completedLessons: [
-                            ...cs.completedLessons,
-                            action.payload.lesson,
-                        ],
-                        currentLesson: action.payload.lessonLink,
-                    };
-                }
-                return cs;
-            });
-            localStorage.setItem(
-                COURSESTORE_KEY,
-                JSON.stringify(courseProgress)
-            );
-            return {
-                ...state,
-                courseProgress,
+                isLoggedIn: false,
             };
         }
         default:
@@ -116,8 +66,7 @@ function reducer(state: typeof initialState, action: UserAction) {
     }
 }
 
-// User Context Provider
-
+// UserContext Provider component
 type TProps = {
     children: React.ReactNode;
 };
@@ -125,29 +74,21 @@ type TProps = {
 export const UserProvider = ({ children }: TProps) => {
     const [state, dispatch] = useReducer(reducer, initialState, init);
 
+    // Ensure user is logged out on initial load if isLoggedIn is incorrect
+    useEffect(() => {
+        if (!state.isLoggedIn) {
+            localStorage.removeItem(AUTH_KEY);
+        }
+    }, [state.isLoggedIn]);
+
     const value = useMemo(
         () => ({
             ...state,
             setLogin: () => {
-                dispatch({
-                    type: "LOGIN",
-                });
+                dispatch({ type: "LOGIN" });
             },
-            enrolCourse: (data: { course: string; lessonLink: string }) => {
-                dispatch({
-                    type: "ENROLL_COURSE",
-                    payload: data,
-                });
-            },
-            lessonComplete: (data: {
-                course: string;
-                lessonLink: string;
-                lesson: string;
-            }) => {
-                dispatch({
-                    type: "LESSON_COMPLETE",
-                    payload: data,
-                });
+            logout: () => {
+                dispatch({ type: "LOGOUT" });
             },
         }),
         [state]
@@ -158,6 +99,5 @@ export const UserProvider = ({ children }: TProps) => {
     );
 };
 
-// User Context Consumer hooks
-
+// Hook to use the UserContext
 export const useUser = () => useContext(UserContext);
diff --git a/src/data/blogs/beyond-the-resume.md b/src/data/blogs/beyond-the-resume.md
index 8371ffbb2..9bd56e74f 100644
--- a/src/data/blogs/beyond-the-resume.md
+++ b/src/data/blogs/beyond-the-resume.md
@@ -26,11 +26,12 @@ is_featured: true
 views: 1200
 ---
 
-
-
 ### **Introduction: A Fresh Perspective on Hiring**
+
 When Darnell Settles III, Director of Web and Digital Strategy at Methodist Le Bonheur Healthcare, first considered candidates from Vets Who Code, he was looking for someone who could not only meet the technical requirements of the role but also bring a unique perspective and set of skills to the team. What he found in Adrian Grimm, a seasoned Marine Corps veteran, exceeded his expectations and changed his view on the potential veterans bring to tech industries. Adrian's unique perspective, shaped by his military experience, allowed him to approach problems from a different angle, leading to innovative solutions. His skills in leadership and teamwork, honed in the Marine Corps, brought a new dynamic to the team.
+
 ### **Recognizing Veteran Potential**
+
 Darnell reflects on the hiring process: "One aspect that stood out to me the most was the sense that candidates from Vets Who Code are known commodities. I expected our hire to hit the ground running, and I must say, my expectations were not only met but exceeded." This initial impression was crucial, highlighting the rigorous training and discipline instilled in veterans through programs like Vets Who Code, which equips them with the necessary technical skills and industry knowledge to excel in the tech industry.
 
 <p align="center">
@@ -38,18 +39,26 @@ Darnell reflects on the hiring process: "One aspect that stood out to me the mos
 </p>
 
 ### **Adrian's Impact at Methodist**
+
 From his first day at Methodist, Adrian demonstrated an exceptional ability to integrate into the team. Darnell notes, "The veteran we hired has seamlessly integrated into our team, bringing a calm demeanor and a positive 'can-do' attitude that has been invaluable." Adrian's military background provided him with unique problem-solving skills and a distinctive approach to teamwork and leadership that enriched the IT department. His ability to think quickly and adapt to changing circumstances allowed us to overcome complex technical challenges more efficiently, while his leadership style fostered a more collaborative and supportive work environment.
+
 ### **Technical and Organizational Contributions**
+
 Adrian's influence extended beyond his immediate team. He played a pivotal role in overhauling outdated practices, leading crucial upgrades, and improving processes like version control and documentation. "Adrian led us through these crucial upgrades with a level of precision and expertise that brought our processes in line with current best practices," Darnell explains, highlighting the tangible benefits of Adrian's contributions. For instance, he implemented a new version control system that significantly improved our code management, leading to faster and more efficient development cycles.
+
 ### **The Rewards of Hiring a Veteran**
+
 Reflecting on the experience, Darnell shares that one of the most rewarding aspects has been witnessing the tangible impact of their collaboration on projects and the organization as a whole. "Beyond the technical contributions, knowing that we are supporting the mission of our healthcare system, indirectly impacting patient care, and supporting our associates, is incredibly fulfilling." Adrian's unique perspective and problem-solving skills have led to innovative solutions that have improved the efficiency and effectiveness of our projects, directly contributing to our organization's success.
+
 ### **A Call to Other Employers**
+
 Darnell's experience with Adrian has reinforced his belief in the value veterans add to a workforce and inspired him to advocate for more veteran hires. "Without a doubt, I would hire from Vets Who Code again. The experience has been overwhelmingly positive, and I believe in veterans' immense value to our team and our healthcare mission."
+
 ### **Conclusion: Transform Your Team by Hiring Veterans**
+
 Darnell Settles III's overwhelmingly positive experience with a disciplined and talented Marine Corps veteran, Adrian Grimm, is a testament to the exceptional value veterans can bring to any organization, especially in the tech industry. Adrian's journey from the battlefield to a leading role at Methodist Le Bonheur Healthcare is not just a success story; it's a beacon of hope for all employers and proof of the skills, dedication, and unique perspectives that veterans offer.
 At Methodist, hiring Adrian was not just about filling a position; it was about embracing diversity of experience and leveraging a background built on leadership, strategic thinking, and teamwork. His success story is a clarion call to all employers looking for resilient, adaptable, and skilled professionals ready to contribute from day one.
 **Take Action Now: Hire a Veteran**
 We encourage other companies to consider how they can also benefit from veterans' unparalleled work ethic and innovative problem-solving skills. By partnering with Vets Who Code, you can discover candidates who are equipped with cutting-edge tech skills and possess a proven track record of leadership and performance under pressure, giving you the confidence that you're getting the best.
 **Join us in this rewarding journey. Reach out to Vets Who Code today and start transforming your team with the excellence only a veteran can deliver.**
 For more information on how you can hire talented veterans like Adrian and make a meaningful impact on your team and projects, visit (Vets Who Code)[https://vetswhocode.io/].
-
diff --git a/src/data/blogs/ten-things-learned-after-10-years-at-vets-who-code.md b/src/data/blogs/ten-things-learned-after-10-years-at-vets-who-code.md
index a7b244637..20ec80c9b 100644
--- a/src/data/blogs/ten-things-learned-after-10-years-at-vets-who-code.md
+++ b/src/data/blogs/ten-things-learned-after-10-years-at-vets-who-code.md
@@ -3,7 +3,10 @@ title: "Ten Things I’ve Learned After Ten Years at Vets Who Code"
 postedAt: "2024-06-03T09:00:00.000Z"
 author: "Jerome Hardaway"
 description: "Reflecting on a decade of leading Vets Who Code, here are ten valuable lessons learned about coding, mentorship, and personal growth."
-image: { src: "https://res.cloudinary.com/vetswhocode/image/upload/v1717373882/ten-years_v9cvdv.jpg" }
+image:
+    {
+        src: "https://res.cloudinary.com/vetswhocode/image/upload/v1717373882/ten-years_v9cvdv.jpg",
+    }
 category: "Veteran Support"
 tags:
     - Veterans
@@ -65,4 +68,4 @@ My journey with Vets Who Code has been a blend of challenges, triumphs, and cont
 **Join Us in Making a Difference**
 If you believe in the power of coding to transform lives and want to support veterans and military spouses in their journey into tech, consider making a donation to Vets Who Code. Your contribution can help us provide the resources, mentorship, and training necessary to bridge the gap between military service and successful tech careers. [Donate Now](https://vetswhocode.io/donate)
 
-Together, we can continue to empower those who have served our country to achieve their full potential in the tech industry.
\ No newline at end of file
+Together, we can continue to empower those who have served our country to achieve their full potential in the tech industry.
diff --git a/src/data/site-config.ts b/src/data/site-config.ts
index 385f1e3a6..e1272dfbb 100644
--- a/src/data/site-config.ts
+++ b/src/data/site-config.ts
@@ -3,4 +3,5 @@ export default {
     titleTemplate: "%s | Vets Who Code",
     description:
         "Vets Who Code is a non-profit organization that provides free technical training to veterans and their spouses.",
+    url: "https://yourwebsite.com", // Add the URL property here
 };
diff --git a/src/layouts/headers/header-04.tsx b/src/layouts/headers/header-04.tsx
deleted file mode 100644
index 456dccbb6..000000000
--- a/src/layouts/headers/header-04.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import clsx from "clsx";
-import { useCurriculumContext } from "@contexts/curriculum-context";
-import { useUser } from "@contexts/user-context";
-import Anchor from "@ui/anchor";
-import ProgressBar from "@ui/progress-bar";
-
-type TProps = {
-    className?: string;
-    course: {
-        title: string;
-        path: string;
-        slug: string;
-    };
-};
-
-const Header = ({ className, course }: TProps) => {
-    const { totalLessons } = useCurriculumContext();
-    const { courseProgress } = useUser();
-    const progress =
-        courseProgress.find((cs) => cs.course === course.slug)?.completedLessons
-            .length || 0;
-    const percentage = Math.round((progress / totalLessons) * 100);
-
-    return (
-        <div
-            className={clsx(
-                "tw-bg-secondary tw-min-h-[60px] tw-py-3.8 md:tw-py-0 tw-fixed tw-right-0 tw-top-0 tw-z-20 tw-transition-all tw-duration-300",
-                className
-            )}
-        >
-            <div className="tw-flex tw-flex-wrap tw-justify-between tw-items-center tw-min-h-[60px] tw-max-w-[930px] tw-px-3.8 tw-mx-auto">
-                <h1 className="tw-text-white tw-text-lg md:tw-text-[22px] tw-leading-tight tw-m-0">
-                    <Anchor path={course.path}>{course.title}</Anchor>
-                </h1>
-                <div className="tw-flex tw-items-center">
-                    <span className="tw-text-white tw-font-light tw-pr-2.5 tw-text-md">
-                        {progress} of {totalLessons} items
-                    </span>
-                    <ProgressBar
-                        now={percentage}
-                        size="sm"
-                        className="tw-w-[100px]"
-                    />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Header;
diff --git a/src/layouts/layout-04/index.tsx b/src/layouts/layout-04/index.tsx
deleted file mode 100644
index a203aea12..000000000
--- a/src/layouts/layout-04/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ReactNode, useState } from "react";
-import clsx from "clsx";
-import { CurriculumProvider } from "@contexts/curriculum-context";
-import { ICurriculum } from "@utils/types";
-import Sidebar from "../sidebar";
-import Header from "../headers/header-04";
-
-type TProps = {
-    children: ReactNode;
-    course: {
-        title: string;
-        path: string;
-        slug: string;
-    };
-    curriculum: ICurriculum[];
-};
-
-const Layout = ({ children, course, curriculum }: TProps) => {
-    const [open, setOpen] = useState(true);
-
-    return (
-        <CurriculumProvider curriculum={curriculum}>
-            <Header
-                className={clsx(
-                    open ? "tw-left-0 lg:tw-left-[340px]" : "tw-left-0"
-                )}
-                course={course}
-            />
-            <Sidebar open={open} courseSlug={course.slug} />
-            <button
-                onClick={() => setOpen((prev) => !prev)}
-                type="button"
-                aria-label="Toggle sidebar"
-                className={clsx(
-                    "tw-absolute tw-top-14 tw-z-30 tw-ml-0.5 tw-w-12 tw-h-12 tw-bg-white tw-rounded-r tw-text-primary tw-shadow-2sm tw-shadow-black/[0.08] tw-transition-all tw-duration-300 hover:tw-bg-primary hover:tw-text-white",
-                    open
-                        ? "tw-left-0 md:tw-left-[340px]"
-                        : "tw-left-[340px] md:tw-left-0"
-                )}
-            >
-                <i className="fa fa-exchange" />
-            </button>
-            <main
-                className={clsx(
-                    "tw-mt-24 md:tw-mt-15 tw-overflow-y-scroll tw-max-h-screen tw-transition-all tw-duration-300",
-                    open ? "lg:tw-ml-[340px]" : "lg:tw-ml-0"
-                )}
-            >
-                {children}
-            </main>
-        </CurriculumProvider>
-    );
-};
-
-export default Layout;
diff --git a/src/layouts/sidebar/index.tsx b/src/layouts/sidebar/index.tsx
index 93942044b..c288b485d 100644
--- a/src/layouts/sidebar/index.tsx
+++ b/src/layouts/sidebar/index.tsx
@@ -6,10 +6,9 @@ import Item from "./item";
 
 type TProps = {
     open: boolean;
-    courseSlug: string;
 };
 
-const Sidebar = ({ open, courseSlug }: TProps) => {
+const Sidebar = ({ open }: TProps) => {
     const { curriculum } = useCurriculumContext();
     return (
         <div
@@ -41,7 +40,6 @@ const Sidebar = ({ open, courseSlug }: TProps) => {
                                             key={lsn.slug}
                                         >
                                             <Item
-                                                courseSlug={courseSlug}
                                                 title={lsn.title}
                                                 path={lsn.path}
                                                 type={lsn.type}
diff --git a/src/layouts/sidebar/item.tsx b/src/layouts/sidebar/item.tsx
index 8686f713c..cd94a095d 100644
--- a/src/layouts/sidebar/item.tsx
+++ b/src/layouts/sidebar/item.tsx
@@ -3,36 +3,19 @@ import { useRouter } from "next/router";
 import Anchor from "@ui/anchor";
 import Badge from "@ui/badge";
 import { ILesson } from "@utils/types";
-import { useUser } from "@contexts/user-context";
 
-type IProps = Omit<ILesson, "id" | "chapter" | "slug" | "content"> & {
-    courseSlug: string;
-};
+type IProps = Omit<ILesson, "id" | "chapter" | "slug" | "content">;
 
-const Item = ({
-    courseSlug,
-    title,
-    type,
-    duration,
-    video,
-    access,
-    path,
-}: IProps) => {
+const Item = ({ title, type, duration, video, access, path }: IProps) => {
     const router = useRouter();
     const active = router.asPath === path;
-    const { courseProgress } = useUser();
-    const enrolledCourse = courseProgress.find(
-        (cs) => cs.course === courseSlug
-    );
-    const hasAccess = enrolledCourse || access === "free";
 
     return (
         <Anchor
             className={clsx(
                 "tw-px-[22px] tw-min-h-[56px] tw-flex tw-flex-wrap tw-items-center",
                 !active && "group-odd:tw-bg-light-100 group-even:tw-bg-white",
-                active && "tw-bg-primary tw-text-white hover:tw-text-white",
-                !hasAccess && "tw-pointer-events-none"
+                active && "tw-bg-primary tw-text-white hover:tw-text-white"
             )}
             path={path}
         >
@@ -75,4 +58,5 @@ const Item = ({
         </Anchor>
     );
 };
+
 export default Item;
diff --git a/src/pages/api/apply.ts b/src/pages/api/apply.ts
index 422230386..4ea6aeb30 100644
--- a/src/pages/api/apply.ts
+++ b/src/pages/api/apply.ts
@@ -81,7 +81,7 @@ export default async function handler(req: Request, res: Response) {
         return res.status(200).json({ message: "SUCCESS" });
     } catch (err) {
         // Log the error for debugging and respond with an error message
-        console.error("Failed to post to #mentor channel:", err);
+        // console.error("Failed to post to #mentor channel:", err);
         return res
             .status(500)
             .json({ message: "Failed to post to #mentor channel" });
diff --git a/src/pages/api/mentor.ts b/src/pages/api/mentor.ts
index 09ec144f4..a81f33050 100644
--- a/src/pages/api/mentor.ts
+++ b/src/pages/api/mentor.ts
@@ -54,15 +54,15 @@ export default async function handler(req: Request, res: Response) {
                 }`,
                 JSON.stringify({ text })
             )
-            .catch((err) => {
-                console.error("Error posting to Slack:", err);
+            .catch(() => {
                 throw new Error("Failed to post to Slack");
             });
 
         // Respond with a success message
         return res.status(200).json({ message: "SUCCESS" });
     } catch (err) {
-        console.error("Handler error:", err);
+        // Log the error for debugging and respond with an error message
+        // console.error("Handler error:", err);
         return res
             .status(500)
             .json({ message: "Failed to post to #mentor channel" });
diff --git a/src/pages/curriculum/[slug].tsx b/src/pages/curriculum/[slug].tsx
deleted file mode 100644
index 43e5061bc..000000000
--- a/src/pages/curriculum/[slug].tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { GetStaticPaths, NextPage } from "next";
-import SEO from "@components/seo/page-seo";
-import Layout01 from "@layout/layout-01";
-import Breadcrumb from "@components/breadcrumb";
-import CourseDetails from "@containers/course-details";
-import { ICourse, IInstructor, ICurriculum } from "@utils/types";
-import { getInstructorByID } from "../../lib/instructor";
-import {
-    getallCourses,
-    getCourseBySlug,
-    getFilteredCourses,
-} from "../../lib/course";
-import { getCurriculum } from "../../lib/curriculum";
-
-type TProps = {
-    data: {
-        course: ICourse;
-        instructor: IInstructor;
-        relatedCourses: ICourse[];
-        curriculum: ICurriculum[];
-    };
-};
-
-type PageProps = NextPage<TProps> & {
-    Layout: typeof Layout01;
-};
-
-const SingleCourse: PageProps = ({
-    data: { course, curriculum, instructor },
-}) => {
-    return (
-        <>
-            <SEO
-                title={course.title}
-                description="Introductory CS course laying out the basics."
-                openGraph={{
-                    type: "website",
-                    images: [
-                        {
-                            url: `https://vetswhocode.io.pages.dev${course.thumbnail.src}`,
-                            width: 800,
-                            height: 600,
-                            alt: course.title,
-                        },
-                        {
-                            url: `https://vetswhocode.io-react.pages.dev${course.thumbnail.src}`,
-                            width: 900,
-                            height: 800,
-                            alt: course.title,
-                        },
-                    ],
-                }}
-                jsonLdType="course"
-                instructor={{ name: instructor.name, path: course.path }}
-            />
-            <Breadcrumb
-                pages={[
-                    { path: "/", label: "home" },
-                    { path: "/curriculum/subjects", label: "Modules" },
-                ]}
-                currentPage={course.title}
-            />
-            <CourseDetails data={{ course, curriculum, instructor }} />
-        </>
-    );
-};
-
-SingleCourse.Layout = Layout01;
-
-export const getStaticPaths: GetStaticPaths = () => {
-    const courses = getallCourses(["slug"]);
-    return {
-        paths: courses.map((course) => {
-            return {
-                params: {
-                    slug: course.slug,
-                },
-            };
-        }),
-        fallback: false,
-    };
-};
-
-type Params = {
-    params: {
-        slug: string;
-    };
-};
-
-export const getStaticProps = ({ params }: Params) => {
-    const course = getCourseBySlug(params.slug, "all");
-    const instructor = getInstructorByID(course.instructor, "all");
-    const relatedCourses = getFilteredCourses(
-        ["category", "title", "slug", "thumbnail"],
-        "category",
-        course.category
-    );
-
-    const curriculum = getCurriculum(
-        course.curriculum,
-        ["id", "title", "type", "access", "video", "duration"],
-        course.slug
-    );
-
-    return {
-        props: {
-            data: {
-                course,
-                curriculum,
-                instructor,
-                relatedCourses,
-            },
-            layout: {
-                headerShadow: true,
-                headerFluid: false,
-                footerMode: "light",
-            },
-        },
-    };
-};
-
-export default SingleCourse;
diff --git a/src/pages/curriculum/lessons/[course]/[lesson].tsx b/src/pages/curriculum/lessons/[course]/[lesson].tsx
deleted file mode 100644
index 22abc9be1..000000000
--- a/src/pages/curriculum/lessons/[course]/[lesson].tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { useEffect, useState } from "react";
-import type { GetStaticPaths, NextPage } from "next";
-import { useRouter } from "next/router";
-import SEO from "@components/seo/page-seo";
-import Layout04 from "@layout/layout-04";
-import LessonDetails from "@containers/lesson-details";
-import Spinner from "@ui/spinner";
-import { flatDeep } from "@utils/methods";
-import { ILesson } from "@utils/types";
-import { useUser } from "@contexts/user-context";
-import { getallCourses, getCourseBySlug } from "../../../../lib/course";
-import {
-    getLessonSlugByChapter,
-    getCurriculum,
-    getLessonBySlug,
-    getPrevNextLesson,
-} from "../../../../lib/curriculum";
-
-type TProps = {
-    data: {
-        lesson: ILesson;
-        prevNextLesson: {
-            prev: ILesson;
-            next: ILesson;
-        };
-        courseSlug: string;
-        coursePath: string;
-    };
-};
-
-type PageProps = NextPage<TProps> & {
-    Layout: typeof Layout04;
-};
-
-const Lesson: PageProps = ({
-    data: { lesson, prevNextLesson, courseSlug, coursePath },
-}) => {
-    const { isLoggedIn, courseProgress } = useUser();
-    const [render, setRender] = useState(false);
-    const router = useRouter();
-    const enrolledCourse = courseProgress.find(
-        (cs) => cs.course === courseSlug
-    );
-    const hasAccess = enrolledCourse || lesson.access === "free";
-
-    useEffect(() => {
-        if (!render) {
-            if (!hasAccess && !isLoggedIn) {
-                void router.push("/login-register");
-            } else if (!hasAccess) {
-                void router.push(coursePath);
-            }
-            setRender(true);
-        }
-    }, [render, router, isLoggedIn, hasAccess, coursePath]);
-
-    return (
-        <>
-            <SEO title={lesson.title} />
-            {!render && (
-                <div className="tw-fixed tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
-                    <Spinner />
-                </div>
-            )}
-            {render && (
-                <LessonDetails data={{ lesson, prevNextLesson, courseSlug }} />
-            )}
-        </>
-    );
-};
-
-Lesson.Layout = Layout04;
-
-type Param = {
-    course: string;
-    lesson: string;
-};
-
-export const getStaticPaths: GetStaticPaths = () => {
-    const courses = getallCourses(["slug", "curriculum"]);
-    const params = courses.map((course) => {
-        const curriculum = getLessonSlugByChapter(course.curriculum);
-        return curriculum.map((lesson) => {
-            return { course: course.slug, lesson: lesson.slug };
-        });
-    });
-
-    const pages = flatDeep<Param>(params);
-    return {
-        paths: pages.map(({ course, lesson }) => {
-            return {
-                params: {
-                    course,
-                    lesson,
-                },
-            };
-        }),
-        fallback: false,
-    };
-};
-
-type Params = {
-    params: Param;
-};
-
-export function getStaticProps({ params }: Params) {
-    const course = getCourseBySlug(params.course, [
-        "title",
-        "slug",
-        "curriculum",
-    ]);
-    const curriculum = getCurriculum(
-        course.curriculum,
-        ["id", "title", "type", "access", "duration", "video"],
-        params.course
-    );
-    const lesson = getLessonBySlug(
-        params.lesson,
-        ["title", "video", "content", "access"],
-        params.course
-    );
-    const prevNextLesson = getPrevNextLesson(
-        course.curriculum,
-        params.course,
-        params.lesson
-    );
-
-    return {
-        props: {
-            className: "tw-overflow-y-hidden tw-relative",
-            data: {
-                lesson,
-                prevNextLesson,
-                courseSlug: params.course,
-                coursePath: course.path,
-            },
-            layout: {
-                course,
-                curriculum,
-            },
-        },
-    };
-}
-
-export default Lesson;
diff --git a/src/pages/curriculum/subjects.tsx b/src/pages/curriculum/subjects.tsx
deleted file mode 100644
index cdf89dfd1..000000000
--- a/src/pages/curriculum/subjects.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { GetStaticProps, NextPage } from "next";
-import SEO from "@components/seo/page-seo";
-import Layout01 from "@layout/layout-01";
-import Breadcrumb from "@components/breadcrumb";
-import CourseArea from "@containers/course-full/layout-01";
-import { ICourse } from "@utils/types";
-import { getallCourses } from "../../lib/course";
-
-type TProps = {
-    data: {
-        courses: ICourse[];
-    };
-};
-
-type PageProps = NextPage<TProps> & {
-    Layout: typeof Layout01;
-};
-
-const Coursegrid01: PageProps = ({ data }) => {
-    return (
-        <>
-            <SEO title="Modules" />
-            <Breadcrumb
-                pages={[{ path: "/", label: "home" }]}
-                currentPage="Modules"
-            />
-            <CourseArea data={{ courses: data.courses }} />
-        </>
-    );
-};
-
-Coursegrid01.Layout = Layout01;
-
-export const getStaticProps: GetStaticProps = () => {
-    const courses = getallCourses(["slug", "title", "thumbnail"]);
-    return {
-        props: {
-            data: {
-                courses,
-            },
-            layout: {
-                headerShadow: true,
-                headerFluid: false,
-                footerMode: "light",
-            },
-        },
-    };
-};
-
-export default Coursegrid01;
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 3477c7cbe..fa85a8139 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,43 +1,46 @@
-import { useEffect } from "react";
-import type { GetStaticProps, NextPage } from "next";
+import React, { useEffect } from "react";
 import { useRouter } from "next/router";
-import SEO from "@components/seo/page-seo";
+import PageSeo from "@components/seo/page-seo";
 import Layout from "@layout/layout-01";
 import Breadcrumb from "@components/breadcrumb";
 import LoginForm from "@components/forms/login-form";
 import Spinner from "@ui/spinner";
 import { useUser } from "@contexts/user-context";
 import { useMount } from "@hooks";
+import WelcomeMessage from "@components/welcome-message";
 
-type PageProps = NextPage & {
-    Layout: typeof Layout;
-};
-
-const Login: PageProps = () => {
+const Login = () => {
     const mounted = useMount();
-    const { isLoggedIn } = useUser();
+    const { isLoggedIn, logout } = useUser();
     const router = useRouter();
 
     useEffect(() => {
         if (isLoggedIn) {
-            void router.push("/login");
+            void router.push("/dashboard"); // Redirect to dashboard if already logged in
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [router]);
+    }, [isLoggedIn, router]);
 
     if (!mounted) return null;
 
     if (!isLoggedIn) {
         return (
             <>
-                <SEO title="Login Register" />
+                <PageSeo
+                    title="Login Register"
+                    description="Login to your account"
+                />
                 <Breadcrumb
                     pages={[{ path: "/", label: "home" }]}
                     currentPage="Login"
                     showTitle={false}
                 />
-                <div className="tw-container tw-pb-15 md:tw-pb-20 lg:tw-pb-[100px] tw-grid tw-items-start lg:tw-grid-cols-2 tw-gap-7.5 lg:tw-gap-15">
-                    <LoginForm />
+                <div className="tw-container tw-pb-15 md:tw-pb-20 lg:tw-pb-[100px] tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-7.5 lg:tw-gap-15">
+                    <div className="tw-flex tw-items-center tw-w-full lg:tw-w-3/4 tw-mx-auto">
+                        <WelcomeMessage />
+                    </div>
+                    <div className="tw-flex tw-items-center tw-w-full lg:tw-w-3/4 tw-mx-auto">
+                        <LoginForm />
+                    </div>
                 </div>
             </>
         );
@@ -46,13 +49,16 @@ const Login: PageProps = () => {
     return (
         <div className="tw-fixed tw-bg-light-100 tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
             <Spinner />
+            <button type="button" onClick={logout}>
+                Logout
+            </button>
         </div>
     );
 };
 
 Login.Layout = Layout;
 
-export const getStaticProps: GetStaticProps = () => {
+export const getStaticProps = () => {
     return {
         props: {
             layout: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 15795f63c..278c9304c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -307,6 +307,6 @@ module.exports = {
             });
         },
         require("tailwindcss-animate"),
-        require("tailwindcss-animate")
+        require("tailwindcss-animate"),
     ],
 };