feat: Add user profile page and new modular profile components, integrating them into the agent dashboard.

src/components/profile/SpecializationSection.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import Image from 'next/image';
+import { SpecializationCard } from './SpecializationCard';
+
+interface SpecializationData {
+  types: string[];
+  loanTypes: string[];
+  propertyTypes: string[];
+  hobbies: string[];
+  pricePoints: string[];
+}
+
+interface SpecializationSectionProps {
+  specialization: SpecializationData;
+}
+
+export function SpecializationSection({ specialization }: SpecializationSectionProps) {
+  return (
+    <div className="bg-[#e8e8e8] rounded-[20px] p-8">
+      <div className="text-center mb-8">
+        <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px]">Specialization</h2>
+        <p className="text-[14px] font-medium text-[#00293D] font-fractul leading-[17px]">Area Of Expertise and Focus</p>
+      </div>
+      <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
+        <SpecializationCard
+          title="Specialization"
+          items={specialization.types}
+          icon={
+            <Image
+              src="/assets/icons/home-icon.svg"
+              alt="Specialization"
+              width={24}
+              height={24}
+            />
+          }
+        />
+        <SpecializationCard
+          title="Loan Type"
+          items={specialization.loanTypes}
+          icon={
+            <Image
+              src="/assets/icons/wallet-icon.svg"
+              alt="Loan Type"
+              width={24}
+              height={24}
+            />
+          }
+        />
+        <SpecializationCard
+          title="Property Type"
+          items={specialization.propertyTypes}
+          icon={
+            <Image
+              src="/assets/icons/chart-icon.svg"
+              alt="Property Type"
+              width={24}
+              height={24}
+            />
+          }
+        />
+      </div>
+      <div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto">
+        <SpecializationCard
+          title="Hobbies & Interests"
+          items={specialization.hobbies}
+          icon={
+            <Image
+              src="/assets/icons/heart-icon.svg"
+              alt="Hobbies"
+              width={24}
+              height={24}
+            />
+          }
+        />
+        <SpecializationCard
+          title="Price Point"
+          items={specialization.pricePoints}
+          icon={
+            <Image
+              src="/assets/icons/wallet-icon.svg"
+              alt="Price Point"
+              width={24}
+              height={24}
+            />
+          }
+        />
+      </div>
+    </div>
+  );
+}