style: Refine dashboard component padding, spacing, and typography.

src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx

@@ -16,32 +16,32 @@ interface ExperienceSectionProps {
 
 export function ExperienceSection({ experience }: ExperienceSectionProps) {
   return (
-    <div className="bg-white rounded-[20px] p-6">
+    <div className="bg-white rounded-[20px] p-4 lg:p-5">
-      <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px] mb-6 text-center lg:text-left">Experience</h2>
+      <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px] mb-4 text-center lg:text-left">Experience</h2>
-      <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
+      <div className="flex flex-col lg:flex-row gap-4 lg:gap-8">
         {/* Left Column */}
-        <div className="flex-1 space-y-6">
+        <div className="flex-1 space-y-4">
           <div>
-            <p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Years in Experience</p>
-            <ul className="list-disc list-inside text-[#00293d] text-sm">
+            <ul className="list-disc list-inside">
-              <li>{experience.years}</li>
+              <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">{experience.years}</li>
             </ul>
           </div>
           <div>
-            <p className="font-bold text-[#00293d] text-sm mb-2">Number of contract closed</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Number of contract closed</p>
-            <ul className="list-disc list-inside text-[#00293d] text-sm">
+            <ul className="list-disc list-inside">
-              <li>{experience.contracts}</li>
+              <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">{experience.contracts}</li>
             </ul>
           </div>
           <div>
-            <p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Licensing &amp; Areas</p>
             <div className="flex flex-wrap gap-2">
               {experience.licensingAreas.map((area, idx) => (
                 <Tag key={idx} variant="light">
                   {area}
                 </Tag>
               ))}
-              <span className="text-[#e58625] text-sm cursor-pointer">+3 More</span>
+              <span className="inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer">+3 More</span>
             </div>
           </div>
         </div>
@@ -51,16 +51,16 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
         <div className="lg:hidden border-t border-gray-200" />
 
         {/* Right Column */}
-        <div className="flex-1 space-y-6">
+        <div className="flex-1 space-y-4">
           <div>
-            <p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise &amp; Years</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Areas in expertise &amp; Years</p>
             <div className="flex flex-wrap gap-2">
               {experience.expertiseYears.slice(0, 4).map((item, idx) => (
                 <Tag key={idx} variant="orange">
                   {item.area} – {item.years}
                 </Tag>
               ))}
-              <span className="text-[#e58625] text-sm cursor-pointer">+3More</span>
+              <span className="inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer">+3 More</span>
             </div>
           </div>
           <div>

src/app/(agent)/agent/dashboard/component/ProfileCard.tsx

@@ -25,7 +25,7 @@ export function ProfileCard({
   expertise,
 }: ProfileCardProps) {
   return (
-    <div className="bg-white rounded-[20px] p-6">
+    <div className="bg-white rounded-[20px] p-4 lg:p-5">
       {/* Name and Actions Row */}
       <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
         <div className="text-center lg:text-left">

src/app/(agent)/agent/dashboard/component/Tag.tsx

@@ -8,12 +8,12 @@ interface TagProps {
 export function Tag({ children, variant = 'default' }: TagProps) {
   return (
     <span
-      className={`inline-flex items-center justify-center px-3 h-[24px] rounded-[15px] text-[14px] font-normal font-serif border ${
+      className={`inline-flex items-center justify-center px-3 h-[28px] rounded-[15px] text-[14px] font-medium font-serif ${
         variant === 'light'
-          ? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
+          ? 'border-[0.7px] border-[#00293d] text-[#00293d] bg-transparent'
           : variant === 'orange'
-            ? 'border-[#e58625] text-[#e58625] bg-transparent'
+            ? 'border-[0.7px] border-[#e58625] text-[#e58625] bg-transparent'
-            : 'border-[#00293d] text-[#00293d] bg-transparent'
+            : 'border-[0.7px] border-[#00293d] text-[#00293d] bg-transparent'
       }`}
     >
       {children}

src/app/(agent)/agent/dashboard/page.tsx

@@ -114,7 +114,7 @@ export default function AgentDashboard() {
         </div>
 
         {/* Right Content - Profile Info + Experience + All Sections */}
-        <div className="flex-1 space-y-6">
+        <div className="flex-1 space-y-4">
           {/* Profile Card */}
           <ProfileCard
             firstName={firstName}