From 3ceb3dc866b27a849d831044ebe3df02b5d41d0c Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Mon, 19 Jan 2026 00:23:46 +0530
Subject: [PATCH] feat: add new contact page with form and contact details

---
 .../settings/component/SettingsSidebar.tsx    |  69 +++---
 src/app/(agent)/agent/settings/page.tsx       | 208 +++++++++---------
 2 files changed, 139 insertions(+), 138 deletions(-)

diff --git a/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx b/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx
index 88bbe80..3bc80d1 100644
--- a/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx
+++ b/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx
@@ -41,40 +41,41 @@ interface SettingsSidebarProps {
 
 export function SettingsSidebar({
   profileImage = '/assets/icons/user-placeholder-icon.svg',
-  name = 'Brain Nooland',
+  name = 'Brain Neeland',
   title = 'Top Real Estate Agent',
 }: SettingsSidebarProps) {
   const pathname = usePathname();
 
   return (
-    <div className="w-full lg:w-[280px] bg-white rounded-[15px] border border-[#00293d]/10 overflow-hidden h-fit">
-      {/* Profile Section */}
-      <div className="p-6 flex flex-col items-center">
-        <div className="w-[80px] h-[80px] rounded-full overflow-hidden mb-3 border-2 border-[#e58625]">
-          <Image
-            src={profileImage}
-            alt={name}
-            width={80}
-            height={80}
-            className="w-full h-full object-cover"
-          />
+    <div className="w-full lg:w-[300px] space-y-4">
+      {/* Profile Card */}
+      <div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
+        <div className="flex items-center gap-4">
+          <div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0">
+            <Image
+              src={profileImage}
+              alt={name}
+              width={70}
+              height={70}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div>
+            <h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
+              {name}
+            </h3>
+            <p className="font-serif font-normal text-[13px] leading-[17px] text-[#00293D]/60 mt-1">
+              {title}
+            </p>
+          </div>
         </div>
-        <h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
-          {name}
-        </h3>
-        <p className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/70 mt-1">
-          {title}
-        </p>
       </div>
 
-      {/* Divider */}
-      <div className="w-full h-[1px] bg-[#00293d]/10" />
-
-      {/* Categories Section */}
-      <div className="p-4">
+      {/* Categories Card */}
+      <div className="bg-white rounded-[15px] border border-[#00293D]/20 overflow-hidden">
         {/* Categories Header */}
-        <div className="flex items-center justify-between mb-4 px-2">
-          <h4 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[#00293D]/10">
+          <h4 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
             Categories
           </h4>
           <Image
@@ -86,38 +87,32 @@ export function SettingsSidebar({
         </div>
 
         {/* Navigation Items */}
-        <nav className="space-y-1">
+        <nav className="py-2">
           {navItems.map((item) => {
             const isActive = pathname === item.href;
             return (
               <Link
                 key={item.href}
                 href={item.href}
-                className={`flex items-center gap-3 py-3 px-3 rounded-[10px] transition-colors cursor-pointer ${
+                className={`flex items-center gap-4 py-3 px-5 transition-colors cursor-pointer ${
                   isActive
-                    ? 'bg-[#e58625]/10'
+                    ? 'bg-[#e58625]'
                     : 'hover:bg-[#00293d]/5'
                 }`}
               >
-                <div
-                  className={`w-5 h-5 flex items-center justify-center ${
-                    isActive ? 'text-[#e58625]' : 'text-[#00293D]'
-                  }`}
-                  style={{ color: isActive ? '#e58625' : '#00293D' }}
-                >
+                <div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
                   <Image
                     src={item.icon}
                     alt={item.label}
                     width={20}
                     height={20}
-                    className={isActive ? 'brightness-0 saturate-100' : ''}
-                    style={isActive ? { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' } : {}}
+                    style={isActive ? { filter: 'brightness(0) invert(1)' } : { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' }}
                   />
                 </div>
                 <span
                   className={`font-serif text-[14px] leading-[19px] ${
                     isActive
-                      ? 'font-medium text-[#e58625]'
+                      ? 'font-medium text-white'
                       : 'font-normal text-[#00293D]'
                   }`}
                 >
diff --git a/src/app/(agent)/agent/settings/page.tsx b/src/app/(agent)/agent/settings/page.tsx
index aba486f..20367a8 100644
--- a/src/app/(agent)/agent/settings/page.tsx
+++ b/src/app/(agent)/agent/settings/page.tsx
@@ -6,12 +6,11 @@ import { SettingsSidebar } from './component/SettingsSidebar';
 
 export default function ProfileSettingsPage() {
   const [formData, setFormData] = useState({
-    firstName: 'Brain',
-    lastName: 'Nooland',
-    email: 'brain.nooland@email.com',
-    phone: '+1 (555) 123-4567',
-    title: 'Top Real Estate Agent',
-    location: 'Los Angeles, CA',
+    fullName: 'Brain Neeland',
+    career: 'Real Estate Agent',
+    email: 'Brain.Neeland1234@gmail.com',
+    phone: '+917483849544',
+    location: 'New York',
   });
 
   const handleChange = (field: string, value: string) => {
@@ -22,145 +21,152 @@ export default function ProfileSettingsPage() {
     console.log('Saving profile settings:', formData);
   };
 
+  const handleCancel = () => {
+    console.log('Cancelling changes');
+  };
+
   return (
     <div className="flex flex-col lg:flex-row gap-6">
       {/* Left Sidebar */}
       <SettingsSidebar
-        name={`${formData.firstName} ${formData.lastName}`}
-        title={formData.title}
+        name={formData.fullName}
+        title={formData.career}
       />
 
       {/* Main Content */}
       <div className="flex-1">
-        {/* Header Card */}
-        <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
-          <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
-            Profile Settings
-          </h1>
-        </div>
-
         {/* Profile Settings Form */}
-        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6">
+        <div className="border border-[#00293d]/20 rounded-[15px] bg-white p-8">
+          {/* Header */}
+          <div className="mb-6">
+            <h1 className="font-fractul font-bold text-[20px] leading-[24px] text-[#00293D] mb-2">
+              Public Profile
+            </h1>
+            <p className="font-serif text-[13px] leading-[17px] text-[#00293D]/60">
+              This information will be displayed on your public agent page.
+            </p>
+          </div>
+
           {/* Profile Photo Section */}
-          <div className="flex items-center gap-6 mb-8 pb-6 border-b border-[#00293d]/10">
-            <div className="relative">
-              <div className="w-[100px] h-[100px] rounded-full overflow-hidden border-2 border-[#e58625]">
+          <div className="mb-8">
+            <div className="flex items-start gap-4">
+              <div className="w-[60px] h-[60px] rounded-full overflow-hidden border border-[#00293D]/20 flex-shrink-0">
                 <Image
                   src="/assets/icons/user-placeholder-icon.svg"
                   alt="Profile"
-                  width={100}
-                  height={100}
+                  width={60}
+                  height={60}
                   className="w-full h-full object-cover"
                 />
               </div>
-              <button className="absolute bottom-0 right-0 w-8 h-8 bg-[#e58625] rounded-full flex items-center justify-center hover:bg-[#d47920] transition-colors">
-                <Image
-                  src="/assets/icons/edit-icon.svg"
-                  alt="Edit"
-                  width={16}
-                  height={16}
-                />
-              </button>
-            </div>
-            <div>
-              <h3 className="font-fractul font-bold text-[16px] text-[#00293D] mb-1">
-                Profile Photo
-              </h3>
-              <p className="font-serif text-[12px] text-[#00293D]/60 mb-3">
-                JPG, GIF or PNG. Max size 2MB
-              </p>
-              <button className="px-4 py-2 border border-[#e58625] text-[#e58625] rounded-[15px] font-serif text-[12px] hover:bg-[#e58625]/10 transition-colors">
-                Upload New Photo
-              </button>
+              <div>
+                <p className="font-serif font-medium text-[14px] text-[#00293D] mb-2">
+                  Public Picture
+                </p>
+                <div className="flex items-center gap-2 mb-2">
+                  <button className="px-4 py-1.5 bg-[#e58625] text-white rounded-[20px] font-serif text-[12px] hover:bg-[#d47920] transition-colors">
+                    Upload Now
+                  </button>
+                  <button className="px-4 py-1.5 border border-[#00293D]/30 text-[#00293D] rounded-[20px] font-serif text-[12px] hover:bg-[#00293d]/5 transition-colors">
+                    Delete
+                  </button>
+                </div>
+                <p className="font-serif text-[11px] text-[#00293D]/50">
+                  Supported formats: JPEG, PNG, GIF Max file size: 2MB
+                </p>
+              </div>
             </div>
           </div>
 
           {/* Form Fields */}
-          <div className="space-y-6">
-            {/* Name Row */}
-            <div className="flex flex-col sm:flex-row gap-4">
-              <div className="flex-1">
+          <div className="space-y-5">
+            {/* Row 1: Full Name & Career */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <div>
                 <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
-                  First Name
+                  Full Name
                 </label>
                 <input
                   type="text"
-                  value={formData.firstName}
-                  onChange={(e) => handleChange('firstName', e.target.value)}
-                  className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                  value={formData.fullName}
+                  onChange={(e) => handleChange('fullName', e.target.value)}
+                  className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
                 />
               </div>
-              <div className="flex-1">
+              <div>
                 <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
-                  Last Name
+                  Career
                 </label>
                 <input
                   type="text"
-                  value={formData.lastName}
-                  onChange={(e) => handleChange('lastName', e.target.value)}
-                  className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                  value={formData.career}
+                  onChange={(e) => handleChange('career', e.target.value)}
+                  className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
                 />
               </div>
             </div>
 
-            {/* Email */}
-            <div>
-              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
-                Email Address
-              </label>
-              <input
-                type="email"
-                value={formData.email}
-                onChange={(e) => handleChange('email', e.target.value)}
-                className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
-              />
+            {/* Row 2: Email & Phone */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <div>
+                <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => handleChange('email', e.target.value)}
+                  className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                />
+              </div>
+              <div>
+                <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                  Phone Number
+                </label>
+                <input
+                  type="tel"
+                  value={formData.phone}
+                  onChange={(e) => handleChange('phone', e.target.value)}
+                  className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                />
+              </div>
             </div>
 
-            {/* Phone */}
+            {/* Row 3: Service Area Location */}
             <div>
               <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
-                Phone Number
+                Service Area Location
               </label>
-              <input
-                type="tel"
-                value={formData.phone}
-                onChange={(e) => handleChange('phone', e.target.value)}
-                className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
-              />
-            </div>
-
-            {/* Title */}
-            <div>
-              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
-                Professional Title
-              </label>
-              <input
-                type="text"
-                value={formData.title}
-                onChange={(e) => handleChange('title', e.target.value)}
-                className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
-              />
-            </div>
-
-            {/* Location */}
-            <div>
-              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
-                Location
-              </label>
-              <input
-                type="text"
-                value={formData.location}
-                onChange={(e) => handleChange('location', e.target.value)}
-                className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
-              />
+              <div className="relative">
+                <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                  <Image
+                    src="/assets/icons/location-icon.svg"
+                    alt="Location"
+                    width={16}
+                    height={16}
+                  />
+                </div>
+                <input
+                  type="text"
+                  value={formData.location}
+                  onChange={(e) => handleChange('location', e.target.value)}
+                  className="w-full sm:w-1/2 h-[44px] pl-10 pr-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                />
+              </div>
             </div>
           </div>
 
-          {/* Save Button */}
-          <div className="mt-8 flex justify-end">
+          {/* Action Buttons */}
+          <div className="mt-8 flex justify-end gap-3">
+            <button
+              onClick={handleCancel}
+              className="px-8 py-3 border border-[#00293D]/30 text-[#00293D] rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#00293d]/5 transition-colors"
+            >
+              Cancel
+            </button>
             <button
               onClick={handleSave}
-              className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
+              className="px-8 py-3 bg-[#e58625] text-white rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#d47920] transition-colors"
             >
               Save Changes
             </button>