Landing & contact page done, services & prices missing

src/app/components/Navbar.js

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { useState } from "react";
 import Image from "next/image";
@@ -6,14 +6,16 @@ import Link from "next/link";
 import styles from "./Navbar.module.css";
 import logo from "../assets/logo.svg";
 import menu from "../assets/menu.svg";
-import close from "../assets/close.svg"
+import close from "../assets/close.svg";
+import { usePathname } from "next/navigation";
 
 export default function Navbar() {
+  const pathname = usePathname();
   const [isActive, setActive] = useState("false");
 
   function handleToggle() {
     setActive(!isActive);
-    console.log("asdhjiuashd")
+    console.log("asdhjiuashd");
   }
 
   return (
@@ -21,28 +23,69 @@ export default function Navbar() {
       <div className={`${styles.container} container`}>
         <div className={styles.header}>
           <div>
-            <Link href="/">
+            <Link href="/" className={styles.logo}>
               <Image src={logo} width="32" height="32" alt="Logo" />
+              <p>Te Atatu Computers</p>
             </Link>
           </div>
-          <button className={styles.menuIcon} aria-label="Menu" onClick={handleToggle}>
-            <Image src={isActive ? menu : close} width="32" height="32" alt="Menu" />
+          <button
+            className={styles.menuIcon}
+            aria-label="Menu"
+            onClick={handleToggle}
+          >
+            <Image
+              src={isActive ? menu : close}
+              width="32"
+              height="32"
+              alt="Menu"
+            />
           </button>
         </div>
-        <ul className={`${styles.links} ${isActive ? "" : styles.active }`}>
+        <ul className={`${styles.links} ${isActive ? "" : styles.active}`}>
           <li>
-            <Link href="/" className={styles.active}>
+            <Link
+              href="/"
+              className={`link ${pathname === "/" ? styles.active : ""}`}
+            >
               Home
             </Link>
           </li>
           <li>
-            <Link href="winners.html">Winners Podium</Link>
+            <Link
+              href="/services"
+              className={`link ${
+                pathname === "/services" ? styles.active : ""
+              }`}
+            >
+              Services
+            </Link>
           </li>
           <li>
-            <a href="gallery.html">Gallery</a>
+            <Link
+              href="/pricing"
+              className={`link ${pathname === "/pricing" ? styles.active : ""}`}
+            >
+              Pricing
+            </Link>
           </li>
-          <li className={styles.last}>
-            <Link href="/contact">Contact Us</Link>
+          <li>
+            <Link
+              href="/contact"
+              className={`link ${pathname === "/contact" ? styles.active : ""}`}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              Contact Us
+            </Link>
           </li>
         </ul>
       </div>