IPK-14 Major refactoring

src/app/login/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 import { loggedIn, login, logout } from "@/services/authService";
 import { RootState } from "@/store/store";
+import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useForm, SubmitHandler, get } from "react-hook-form";
+import { useForm, SubmitHandler } from "react-hook-form";
 
 type loginInputs = {
   email: string;
@@ -221,7 +222,6 @@ const LoginForm = () => {
               Sign up
             </button>
           </div>
-          <img src="" className="image" alt="" />
         </div>
         <div className="panel right-panel">
           <div className="content">
@@ -232,7 +232,7 @@ const LoginForm = () => {
               Sign in
             </button>
           </div>
-          <img src="img/register.svg" className="image" alt="" />
+          <Image src="img/register.svg" className="image" alt="" width={100} height={100} />
         </div>
       </div>
     </div>

src/app/logout/page.tsx

@@ -1,27 +1,31 @@
 "use client";
 import { logout } from "@/services/authService";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useDispatch } from "react-redux";
 
-function page() {
+function Logout() {
   const dispatch = useDispatch();
-  const [status, setStatus] = useState("Loading...");
-  useEffect(() => {
-    logoutUser();
-    async function logoutUser() {
-      try {
-        await logout(dispatch).then((res) => {
-          console.log(res);
-          setStatus("Logged out");
-        });
-      } catch (error) {
-        console.error(error);
-        setStatus("Error logging out");
-        throw error;
-      }
+  const [status, setStatus] = useState("Press logout below...");
+  const handleLogout = async () => {
+    try {
+      await logout(dispatch).then((res) => {
+        console.log(res);
+        setStatus("Logged out");
+      });
+    } catch (error) {
+      console.error(error);
+      setStatus("Error logging out");
+      throw error;
     }
-  }, []);
-  return <div>Current logout status: {status}</div>;
+  };
+  return (
+    <div>
+      {status}{" "}
+      <button onClick={handleLogout} className="btn btn-primary">
+        Logout
+      </button>
+    </div>
+  );
 }
 
-export default page;
+export default Logout;

src/app/page.tsx

@@ -49,7 +49,7 @@ export default function Home() {
                     platform. Search engine optimisation and cutting-edge user experience design come as standard, along
                     with exceptional reliability, scalability and performance. Plus, friendly support — whenever you
                     need us.
-                    <br />‍
+                    <br />
                   </p>
                   <div className="home_aspects_card_image">
                     <Image
@@ -106,9 +106,9 @@ export default function Home() {
                     <span className="span_gradient">Graphic Design</span>
                   </h3>
                   <p className="text-color-grey">
-                    Whether you’re building a brand from scratch, or developing new assets for your next campaign, we
-                    have a wealth of experience in developing appointment management systems, logos and brand
-                    identities. We’ll support you through the whole journey, from concept to deliverable.
+                    Whether you&apos;re building a brand from scratch, or developing new assets for your next campaign,
+                    we have a wealth of experience in developing appointment management systems, logos and brand
+                    identities. We&apos;ll support you through the whole journey, from concept to deliverable.
                   </p>
                 </Link>
                 <Link
@@ -136,10 +136,11 @@ export default function Home() {
                     </p>
                   </div>
                   <div className="home_aspects_card_image is-large">
-                    <img
+                    <Image
                       src="https://assets-global.website-files.com/6501f1891917bde75ab542ee/65425d03ac2dd88a7a91bbc6_Group%20656%20copy.webp"
                       loading="lazy"
                       width={854}
+                      height={100}
                       alt=""
                       className="image_cover"
                     />

src/components/Features.tsx

@@ -46,7 +46,7 @@ export const Features = () => {
             Preconfigured environments
           </span>
           <br />
-          We detect your environment so you don't need to fiddle with configuration files.
+          We detect your environment so you don&apos;t need to fiddle with configuration files.
         </motion.p>
         <motion.p
           style={stylesWithCssVar({
@@ -78,7 +78,7 @@ export const Features = () => {
             Devtools
           </span>
           <br />
-          We've bundled useful tools to help you get your work done faster and more efficiently.
+          We&apos;ve bundled useful tools to help you get your work done faster and more efficiently.
         </motion.p>
       </div>
     </section>