fix/categories card section and navigation fixed (#58)

Author: senithudara

public/computer.jpg

@@ -9,12 +9,16 @@ type HeroSectionProps = {
 
 const HeroSection = ({ selectedLang }: HeroSectionProps) => {
   return (
-    <section className="bg-gradient-to-b from-blue-100 to-white py-16">
+    <section
+      id="home"
+      className="bg-gradient-to-b from-blue-100 to-white py-16"
+    >
       <div className="container mx-auto px-4 lg:px-16 flex flex-col-reverse lg:flex-row items-center gap-8">
         <div className="text-center lg:text-left flex-1 lg:pr-8">
           <h1
             className="text-3xl lg:text-5xl font-bold mb-6 leading-snug"
-            style={{ color: "#484848" }}>
+            style={{ color: "#484848" }}
+          >
             {translations[selectedLang].title}
           </h1>
           <p className="text-lg mb-6" style={{ color: "#555555" }}>

public/treatment.jpg

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+
+function InfoSection() {
+  return (
+    <section className="relative mx-auto py-1 px-[32px] lg:px-0 lg:py-4 gap-[10px] md:gap-0 bg-white md:mt-[50px]">
+      <h2 className="mx-auto font-bold text-[32px] leading-[41.66px] text-[#484848] font-[DM Sans] text-center md:text-[32px] md:leading-[48px] md:text-[#484848]">
+        What is Arthritis.lk?{" "}
+      </h2>
+      <div className="container md:pl-[67px] md:pr-[67px] mx-auto flex flex-col md:flex-row items-center gap-[67px] justify-between md:mt-[75px] md:mb-[130px] ">
+        {/* Text container */}
+        <div className="text flex flex-col gap-4 w-full md:w-3/5 min-h-[240px] order-1 md:order-2">
+          <p className="text-center font-[DM Sans] font-normal text-[24px] leading-[32dpx] text-[#484848] md:text-left md:text-[24px] md:leading-[32px] md:text-[#9E9E9E]">
+            Arthritis.lk is dedicated to educating and supporting individuals
+            living with rheumatoid arthritis and other rheumatic conditions.
+            Developed in collaboration with healthcare professionals, our
+            platform provides reliable medical information, self-care tips, and
+            the latest treatment options to help patients better manage their
+            condition. Whether you're newly diagnosed or looking for ways to
+            improve your quality of life, Arthritis.lk is here to guide you with
+            expert insights and practical advice.
+          </p>
+          <Link
+            href="/about"
+            className="text-center font-[DM Sans] font-medium text-[22px] leading-[32dpx] text-[#484848] md:text-left md:text-[24px] md:leading-[32px] md:text-[#484848] hover:text-blue-500 flex items-center"
+          >
+            Learn More
+            <ArrowTopRightOnSquareIcon width={24} className="ml-2" />{" "}
+          </Link>
+        </div>
+
+        {/* Image */}
+        <div className="btns flex flex-col gap-6 order-2 md:order-1 md:gap-6">
+          <Image
+            src="/treatment.jpg"
+            alt="Person looking at a computer"
+            width={550}
+            height={400}
+            className="w-full lg:w-full lg:h-[320px] rounded-lg shadow-md object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default InfoSection;

src/app/components/HeroSection/HeroSection.tsx

@@ -15,7 +15,7 @@ export default async function MainCategorySection() {
   const categories = response.data;
 
   return (
-    <section className=" container bg-white py-12 mx-auto">
+    <section id="categories" className="container bg-white py-12 mx-auto">
       <h2 className="text-[#484848] font-bold text-4xl text-center">
         Main Categories
       </h2>
@@ -27,7 +27,8 @@ export default async function MainCategorySection() {
           <Link key={category.id} href={`/${category.slug}`}>
             <div
               key={category.id}
-              className="p-8 cursor-pointer border-2 border-transparent hover:border-[#DBEBFB] rounded-xl transition duration-500">
+              className="p-8 cursor-pointer border-2 border-transparent hover:border-[#DBEBFB] rounded-xl transition duration-300 shadow-md"
+            >
               <div className="relative max-w-[274px] max-h-[103px] mx-auto aspect-[274/103] mb-4">
                 <Image
                   src={

src/app/components/InfoSection/InfoSection.tsx

@@ -61,7 +61,8 @@ export default function Navbar({ data }: { data: NavbarType }) {
       <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">
+          className="text-2xl font-bold text-[#2F7CC4] flex-shrink-0"
+        >
           Rheuma<span className="text-gray-800">Connect</span>
         </Link>
 
@@ -72,15 +73,17 @@ export default function Navbar({ data }: { data: NavbarType }) {
               href={linkUrl || "#"}
               className={`hover:text-blue-600 text-gray-800 font-medium ${
                 pathname === linkUrl ? "text-blue-600" : ""
-              }`}>
+              }`}
+            >
               {linkText}
             </Link>
           ))}
 
           <Link href={navbarButton?.buttonLink || "#"}>
             <button
               className="bg-[#2F7CC4] text-white rounded-[10px] text-[14px] font-medium hover:bg-[#276ca3] transition flex items-center justify-center"
-              style={{ width: "98px", height: "38px", lineHeight: "18px" }}>
+              style={{ width: "98px", height: "38px", lineHeight: "18px" }}
+            >
               {navbarButton?.buttonText}
             </button>
           </Link>
@@ -126,15 +129,17 @@ export default function Navbar({ data }: { data: NavbarType }) {
         <button
           onClick={toggleMenu}
           className="md:hidden text-gray-800 focus:outline-none"
-          aria-label="Toggle Menu">
+          aria-label="Toggle Menu"
+        >
           {isOpen ? (
             <svg
               className="w-6 h-6"
               fill="none"
               stroke="currentColor"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg">
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -148,7 +153,8 @@ export default function Navbar({ data }: { data: NavbarType }) {
               stroke="currentColor"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg">
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -162,10 +168,12 @@ export default function Navbar({ data }: { data: NavbarType }) {
       {isOpen && (
         <div
           className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
-          onClick={closeMenu}>
+          onClick={closeMenu}
+        >
           <div
             className="absolute top-0 left-0 w-64 bg-white shadow-lg h-full rounded-r-md"
-            onClick={(e) => e.stopPropagation()}>
+            onClick={(e) => e.stopPropagation()}
+          >
             <div className="p-6 space-y-4">
               {link.map(({ linkText, linkUrl }) => (
                 <Link
@@ -176,13 +184,15 @@ export default function Navbar({ data }: { data: NavbarType }) {
                     pathname === linkUrl
                       ? "bg-gray-200 font-bold text-blue-600"
                       : ""
-                  }`}>
+                  }`}
+                >
                   {linkText}
                 </Link>
               ))}
               <button
                 className="px-6 py-2 bg-[#2F7CC4] text-white rounded-full text-sm hover:bg-[#276ca3] transition"
-                style={{ width: "98px", height: "38px" }}>
+                style={{ width: "98px", height: "38px" }}
+              >
                 Explore
               </button>
               <div className="mt-4">

src/app/components/MainCategorySection.tsx

@@ -4,6 +4,7 @@ import { Translations } from "@/app/types";
 import ContactCard from "./components/ContactCard";
 import MainCategorySection from "./components/MainCategorySection";
 import HeroSection from "./components/HeroSection/HeroSection";
+import InfoSection from "./components/InfoSection/InfoSection";
 const translationsData: Translations = translations;
 
 // fetch data from API
@@ -13,9 +14,10 @@ export default async function Home() {
     <div>
       <HeroSection selectedLang="en" />
       {/* <ContactCard /> */}
+      <InfoSection />
       <MainCategorySection />
       <ContactCard />
-      <AZCards azCards={translationsData["en"]["az-cards"]} />
+      {/* <AZCards azCards={translationsData["en"]["az-cards"]} /> */}
     </div>
   );
 }