From 881c96580e422f82e3bb0327161e07e672379082 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 27 Mar 2026 10:35:14 +0530
Subject: [PATCH] feat: Implement expandable specialization cards with an
 overlay, update specialization section grid item alignment, and reposition
 common header navigation.

---
 src/components/layout/CommonHeader.tsx        |  4 +--
 src/components/profile/SpecializationCard.tsx | 33 +++++++++++++++++--
 .../profile/SpecializationSection.tsx         |  4 +--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/CommonHeader.tsx b/src/components/layout/CommonHeader.tsx
index 73ff313..9e2b532 100644
--- a/src/components/layout/CommonHeader.tsx
+++ b/src/components/layout/CommonHeader.tsx
@@ -70,8 +70,8 @@ export function CommonHeader() {
           />
         </Link>
 
-        {/* Navigation - Desktop only (centered absolutely) */}
-        <nav className="hidden md:flex items-center gap-8 absolute left-1/2 -translate-x-1/2">
+        {/* Navigation - Desktop only */}
+        <nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
           {navLinks.map((link) => (
             <Link
               key={link.href}
diff --git a/src/components/profile/SpecializationCard.tsx b/src/components/profile/SpecializationCard.tsx
index f2ded97..1e45e02 100644
--- a/src/components/profile/SpecializationCard.tsx
+++ b/src/components/profile/SpecializationCard.tsx
@@ -29,11 +29,11 @@ export function SpecializationCard({
   };
 
   return (
-    <div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] min-h-[200px]">
+    <div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] relative">
       <div className="flex justify-center mb-3">{icon}</div>
       <h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
       <div className="flex-1">
-        {displayedItems.map((item, idx) => (
+        {items.slice(0, initialItemsToShow).map((item, idx) => (
           <p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
             {item}
           </p>
@@ -56,6 +56,35 @@ export function SpecializationCard({
           </button>
         </div>
       )}
+      {/* Expanded overlay showing all items */}
+      {isExpanded && hasMoreItems && (
+        <div className="absolute inset-0 bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] z-10 shadow-lg">
+          <div className="flex justify-center mb-3">{icon}</div>
+          <h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
+          <div className="flex-1 overflow-y-auto">
+            {items.map((item, idx) => (
+              <p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
+                {item}
+              </p>
+            ))}
+          </div>
+          <div className="mt-4 flex justify-center">
+            <button
+              onClick={handleToggle}
+              className="inline-flex items-center justify-center gap-1 h-[20px] px-3 border border-[#e58625] rounded-[20px] text-[#e58625] text-[10px] leading-[22px] font-bold font-serif hover:bg-[#e58625]/5 transition-colors cursor-pointer"
+            >
+              Show Less
+              <Image
+                src="/assets/icons/chevron-down-icon.svg"
+                alt="Show less"
+                width={10}
+                height={10}
+                className="transition-transform duration-200 rotate-180"
+              />
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/profile/SpecializationSection.tsx b/src/components/profile/SpecializationSection.tsx
index 6197636..5317d5a 100644
--- a/src/components/profile/SpecializationSection.tsx
+++ b/src/components/profile/SpecializationSection.tsx
@@ -29,7 +29,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
 
       {/* Top row - up to 3 cards */}
       {topRowFields.length > 0 && (
-        <div className={`flex flex-col lg:grid lg:items-start gap-6 mb-6 ${
+        <div className={`flex flex-col lg:grid lg:items-stretch gap-6 mb-6 ${
           topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
           topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
           'lg:grid-cols-3'
@@ -54,7 +54,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
 
       {/* Bottom row - remaining cards */}
       {bottomRowFields.length > 0 && (
-        <div className={`flex flex-col lg:grid lg:items-start gap-6 ${
+        <div className={`flex flex-col lg:grid lg:items-stretch gap-6 ${
           bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
           bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
           'lg:grid-cols-3'