Fix/categories card view (#60)

* fix/categories card section and navigation fixed

* fix/commenting unused vars

* fix/renaming the navbar and footer to arthritis.lk

---------

Co-authored-by: Pawan Senpura <86240715+pawan-live@users.noreply.github.com>

Author: senithudara

public/arthritis_logo.png

@@ -22,13 +22,14 @@ const Footer = () => {
       <div className="container md:hidden flex flex-col mx-auto px-5">
         {/* RheumaConnect Brand Name */}
         <h3 className="font-bold text-2xl text-black mb-5 text-center">
-          RheumaConnect
+          Arthritis.lk
         </h3>
 
         {/* Link 1 Dropdown */}
         <button
           onClick={() => toggleDropdown("link1")}
-          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center">
+          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center"
+        >
           Link 1
           {isOpen.link1 ? (
             <ChevronUpIcon className="h-6 w-6 text-gray-500" />
@@ -59,7 +60,8 @@ const Footer = () => {
         {/* Link 2 Dropdown */}
         <button
           onClick={() => toggleDropdown("link2")}
-          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center">
+          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center"
+        >
           Link 2
           {isOpen.link2 ? (
             <ChevronUpIcon className="h-6 w-6 text-gray-500" />
@@ -90,7 +92,8 @@ const Footer = () => {
         {/* Contact Dropdown */}
         <button
           onClick={() => toggleDropdown("contact")}
-          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center">
+          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center"
+        >
           Contact
           {isOpen.contact ? (
             <ChevronUpIcon className="h-6 w-6 text-gray-500" />
@@ -111,7 +114,7 @@ const Footer = () => {
       {/* Desktop View */}
       <div className="hidden container md:flex flex-row mx-auto px-10">
         <div className="flex flex-col w-6/12">
-          <h3 className="font-bold text-2xl mb-5">RheumaConnect</h3>
+          <h3 className="font-bold text-2xl mb-5"> Arthritis.lk</h3>
           <p>
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
             nisi ut aliquip ex ea commodo consequat.

src/app/components/Footer.tsx

@@ -2,68 +2,32 @@
 
 import React, { useState, useRef } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { NavbarType } from "@/types/CommonTypes";
-
-// const languages = [
-//   { label: "English", value: "en" },
-//   { label: "සිංහල", value: "si" },
-//   { label: "தமிழ்", value: "ta" },
-// ];
+import arthritisLogo from "/public/arthritis_logo.png"; // Adjust the path as needed
 
 export default function Navbar({ data }: { data: NavbarType }) {
   const { link, navbarButton } = data;
 
   const [isOpen, setIsOpen] = useState(false);
-  // const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  // const [selectedLanguage, setSelectedLanguage] = useState("en");
   const pathname = usePathname();
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const toggleMenu = () => setIsOpen(!isOpen);
   const closeMenu = () => setIsOpen(false);
 
-  // const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
-  // const closeDropdown = () => setIsDropdownOpen(false);
-
-  // const handleLanguageSelect = (lang: string) => {
-  //   setSelectedLanguage(lang);
-  //   closeDropdown();
-  // };
-
-  // useEffect(() => {
-  //   const handleClickOutside = (event: MouseEvent) => {
-  //     if (
-  //       dropdownRef.current &&
-  //       !dropdownRef.current.contains(event.target as Node)
-  //     ) {
-  //       closeDropdown();
-  //     }
-  //   };
-
-  //   const handleEscape = (event: KeyboardEvent) => {
-  //     if (event.key === "Escape") {
-  //       closeDropdown();
-  //     }
-  //   };
-
-  //   document.addEventListener("mousedown", handleClickOutside);
-  //   document.addEventListener("keydown", handleEscape);
-
-  //   return () => {
-  //     document.removeEventListener("mousedown", handleClickOutside);
-  //     document.removeEventListener("keydown", handleEscape);
-  //   };
-  // }, []);
-
   return (
     <header className="bg-white shadow sticky top-0 z-50">
       <div className="container mx-auto px-4 flex items-center justify-between py-4">
-        <Link
-          href="/"
-          className="text-2xl font-bold text-[#2F7CC4] flex-shrink-0"
-        >
-          Rheuma<span className="text-gray-800">Connect</span>
+        <Link href="/" className="flex-shrink-0">
+          <Image
+            src="/arthritis_logo.png"
+            alt="Arthritis Logo"
+            width={175} // Adjust the width as neede
+            height={70}
+            className="cursor-pointer"
+          />
         </Link>
 
         <nav className="hidden md:flex items-center gap-x-6">
@@ -87,43 +51,6 @@ export default function Navbar({ data }: { data: NavbarType }) {
               {navbarButton?.buttonText}
             </button>
           </Link>
-
-          {/* <div className="relative" ref={dropdownRef}>
-            <button
-              onClick={toggleDropdown}
-              className="bg-white border border-gray-400 text-gray-800 rounded-[10px] text-[14px] font-medium flex items-center justify-center hover:bg-gray-100 transition"
-              style={{ width: "98px", height: "38px", lineHeight: "18px" }}>
-              <span>English</span>
-              <svg
-                className={`w-4 h-4 text-black transform ${
-                  isDropdownOpen ? "rotate-180" : "rotate-0"
-                }`}
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M19 9l-7 7-7-7"
-                />
-              </svg>
-            </button>
-
-            {isDropdownOpen && (
-              <div className="absolute mt-2 w-40 bg-white border border-gray-200 rounded shadow-lg">
-                {languages.map(({ label, value }) => (
-                  <button
-                    key={value}
-                    onClick={() => handleLanguageSelect(value)}
-                    className="block w-full text-left px-4 py-2 hover:bg-gray-200 text-gray-800">
-                    {label}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div> */}
         </nav>
 
         <button
@@ -196,44 +123,7 @@ export default function Navbar({ data }: { data: NavbarType }) {
               </button>
               <div className="mt-4">
                 <div className="relative" ref={dropdownRef}>
-                  {/* <button
-                    onClick={toggleDropdown}
-                    className="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm flex items-center space-x-2 shadow-sm hover:bg-gray-100 transition w-full">
-                    <span className="text-black">
-                      {
-                        languages.find(
-                          (lang) => lang.value === selectedLanguage
-                        )?.label
-                      }
-                    </span>
-                    <svg
-                      className={`w-4 h-4 text-black transform ${
-                        isDropdownOpen ? "rotate-180" : "rotate-0"
-                      }`}
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button> */}
-                  {/* {isDropdownOpen && (
-                    <div className="absolute mt-2 w-full bg-white border border-gray-200 rounded shadow-lg">
-                      {languages.map(({ label, value }) => (
-                        <button
-                          key={value}
-                          onClick={() => handleLanguageSelect(value)}
-                          className="block w-full text-left px-4 py-2 hover:bg-gray-200 text-gray-800">
-                          {label}
-                        </button>
-                      ))}
-                    </div>
-                  )} */}
+                  {/* Language dropdown code here */}
                 </div>
               </div>
             </div>