Fix/styling fix (#50)

* fix: update navbar data fetch

* feat: add individual subcategory page + empty article card component

* feat/all articles page card creating

* fix/style fixing

* fix: homepage styling

* fix/making changes in padding and font sizes

---------

Co-authored-by: pawan-live <pawan.senpura@gmail.com>

Author: senithudara

src/app/components/AZCards.tsx

@@ -11,7 +11,7 @@ const AZCards = ({ azCards }: AZCardsProps) => {
 
   return (
     <div
-      className="w-full max-w-[1512px] h-auto px-[67px] py-[82px] flex flex-col md:flex-row md:justify-between gap-6 mx-auto"
+      className="container w-full max-w-[1512px] h-auto px-[67px] py-32 flex flex-col md:flex-row md:justify-between gap-6 mx-auto"
       style={{ background: "#FFFFFF" }}
     >
       {/* Health A to Z */}

src/app/components/ContactCard.tsx

@@ -2,14 +2,14 @@ import React from "react";
 
 function ContactCard() {
   return (
-    <section className="relative max-w-[1512px] mx-auto py-[58px] px-[32px] lg:px-0 gap-[10px] md:gap-0 bg-white">
-      <div className="container md:pl-[67px] md:pr-[67px] mx-auto flex flex-col md:flex-row items-center gap-[67px]  md:mt-[130px] md:mb-[130px] ">
+    <section className="relative mx-auto py-1 px-[32px] lg:px-0 lg:py-4 gap-[10px] md:gap-0 bg-white">
+      <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-[130px] md:mb-[130px] ">
         {/* Text container */}
-        <div className="text flex flex-col gap-6 max-w-[633px] min-h-[240px] order-1 md:order-2">
-          <h2 className="font-extrabold text-[32px] leading-[41.66px] text-[#484848] font-[DM Sans] text-center md:text-[42px] md:leading-[54.68px] md:text-[#484848] md:text-left md:w-auto md:h-auto">
+        <div className="text flex flex-col gap-6 w-full md:w-3/5 min-h-[240px] order-1 md:order-2">
+          <h2 className="font-bold text-[32px] leading-[41.66px] text-[#484848] font-[DM Sans] text-center md:text-[32px] md:leading-[48px] md:text-[#484848] md:text-left md:w-auto md:h-auto">
             Seek Medical Help
           </h2>
-          <p className="text-center font-[DM Sans] font-normal text-[18px] leading-[24px] text-[#484848] md:text-left md:text-[24px] md:leading-[32px] md:text-[#9E9E9E]">
+          <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]">
             Have any questions or need assistance? Reach out to the hospital for
             appointments, consultations, or general inquiries. Were here to help
             you with your rheumatic care needs. Our team is committed to
@@ -31,10 +31,10 @@ function ContactCard() {
               className="w-[42.15px] h-[42.15px] translate-y-[6px] md:w-16 md:h-16 md:object-contain md:mr-5 md:translate-y-[0]"
             />
             <div className="flex flex-col">
-              <div className="w-[176px] h-[56px] text-[#484848] font-[DM Sans] text-[20px] font-semibold leading-[28px] text-left md:w-auto md:h-auto md:text-[#484848] md:font-semibold md:text-[32px] md:leading-[28px]">
+              <div className="w-[176px] h-[56px] text-[#484848] font-[DM Sans] text-xl font-medium leading-[20px] text-left md:w-auto md:h-auto md:text-[#484848] md:font-semibold md:text-xl md:leading-[20px]">
                 Call Kurunegala Hospital
               </div>
-              <div className="mt-1.5 text-[#9E9E9E] font-semibold text-[28px] leading-[28px] hidden md:block">
+              <div className="mt-1.5 text-[#9E9E9E] font-normal text-xl leading-[20px] hidden md:block">
                 0112 112 889
               </div>
             </div>
@@ -52,10 +52,10 @@ function ContactCard() {
               className="w-[42.15px] h-[42.15px] translate-y-[6px] md:w-16 md:h-16 md:object-contain md:mr-5 md:translate-y-[0]"
             />
             <div className="flex flex-col">
-              <div className="w-[176px] h-[56px] text-[#484848] font-[DM Sans] text-[20px] font-semibold leading-[28px] text-left md:w-auto md:h-auto md:text-[#484848] md:font-semibold md:text-[32px] md:leading-[28px]">
+              <div className="w-[176px] h-[56px] text-[#484848] font-[DM Sans] text-xl font-medium leading-[20px] text-left md:w-auto md:h-auto md:text-[#484848] md:font-semibold md:text-xl md:leading-[20px]">
                 Call Emergency Medical Hotline
               </div>
-              <div className="mt-1.5 text-[#9E9E9E] font-semibold text-[28px] leading-[28px] hidden md:block">
+              <div className="mt-1.5 text-[#9E9E9E] font-normal text-xl leading-[20px] hidden md:block">
                 1990
               </div>
             </div>

src/app/components/Footer.tsx

@@ -19,7 +19,7 @@ const Footer = () => {
   return (
     <section className="bg-gradient-to-b to-blue-100 from-white py-16 text-black border-t-[1px] border-[#DBEBFB]">
       {/* Mobile View */}
-      <div className="md:hidden flex flex-col mx-auto px-5">
+      <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
@@ -28,7 +28,8 @@ const Footer = () => {
         {/* 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" />

src/app/components/HeroSection.tsx …p/components/HeroSection/HeroSection.tsxsrc/app/components/HeroSection.tsx renamed to src/app/components/HeroSection/HeroSection.tsx src/app/components/HeroSection.tsx renamed to src/app/components/HeroSection/HeroSection.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import translations from "../data/translations.json";
+import translations from "../../../data/translations.json";
 
 type TranslationKeys = keyof typeof translations;
 
@@ -14,17 +14,13 @@ const HeroSection = ({ selectedLang }: HeroSectionProps) => {
         <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" }}>
             {translations[selectedLang].description}
           </p>
-          <button
-            className="text-white px-8 py-3 text-lg rounded-md shadow hover:brightness-110 transition"
-            style={{ backgroundColor: "#2F7CC4" }}
-          >
+          <button className="text-white px-8 py-3 text-lg rounded-md shadow hover:brightness-110 transition bg-[#2F7CC4]">
             {translations[selectedLang].button}
           </button>
         </div>
@@ -34,7 +30,7 @@ const HeroSection = ({ selectedLang }: HeroSectionProps) => {
             alt="Doctor providing medical advice"
             width={550}
             height={550}
-            className="w-full lg:w-[550px] rounded-lg shadow-md"
+            className="w-full lg:w-full lg:h-[445px] rounded-lg shadow-md object-cover"
           />
         </div>
       </div>

src/app/components/MainCategorySection.tsx

@@ -4,18 +4,19 @@ import categoriesData from "../data/MainCategorySection/categoriesData.json";
 
 const MainCategorySection = () => {
   return (
-    <section className="bg-white py-16">
-      <h2 className="text-black font-bold text-4xl text-center">
+    <section className=" container bg-white py-12 mx-auto">
+      <h2 className="text-[#484848] font-bold text-4xl text-center">
         Main Categories
       </h2>
-      <p className="text-[#9E9E9E] text-center px-8 py-12 text-2xl">
+      <p className="text-[#9E9E9E] text-center px-8 py-8 text-2xl">
         Some of the most common types Rheumatic diseases
       </p>
-      <div className="categories flex flex-wrap justify-center gap-4 px-8">
+      <div className="categories flex flex-wrap justify-center gap-4 px-4">
         {categoriesData.map((category) => (
           <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-500"
+          >
             <div className="relative max-w-[274px] max-h-[103px] mx-auto aspect-[274/103]">
               <Image
                 src={category.image}

src/app/components/Navbar/Navbar.tsx

@@ -61,11 +61,11 @@ export default function Navbar({ data }: { data: NavbarDataType }) {
       <div className="container mx-auto px-4 flex items-center justify-between py-4">
         <Link
           href="/"
-          className="text-2xl font-bold text-blue-600 flex-shrink-0">
+          className="text-2xl font-bold text-[#2F7CC4] flex-shrink-0">
           Rheuma<span className="text-gray-800">Connect</span>
         </Link>
 
-        <nav className="hidden md:flex items-center space-x-6 ml-6">
+        <nav className="hidden md:flex items-center gap-x-6">
           {link.map(({ linkText, linkUrl }) => (
             <Link
               key={linkText}
@@ -85,8 +85,8 @@ export default function Navbar({ data }: { data: NavbarDataType }) {
             </button>
           </Link>
 
-          <div className="relative" ref={dropdownRef}>
-            {/* <button
+          {/* <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" }}>
@@ -106,9 +106,9 @@ export default function Navbar({ data }: { data: NavbarDataType }) {
                   d="M19 9l-7 7-7-7"
                 />
               </svg>
-            </button> */}
+            </button>
 
-            {/* {isDropdownOpen && (
+            {isDropdownOpen && (
               <div className="absolute mt-2 w-40 bg-white border border-gray-200 rounded shadow-lg">
                 {languages.map(({ label, value }) => (
                   <button
@@ -119,8 +119,8 @@ export default function Navbar({ data }: { data: NavbarDataType }) {
                   </button>
                 ))}
               </div>
-            )} */}
-          </div>
+            )}
+          </div> */}
         </nav>
 
         <button

src/app/contact/page.tsx

@@ -1,8 +1,5 @@
 import React from "react";
-
-type Props = {};
-
-function page({}: Props) {
+function page() {
   return <div>page</div>;
 }
 

src/app/page.tsx

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