feat: Add a 'Coming Soon' education page and implement responsive mobile menu functionality and styling adjustments in the common header.

src/app/(user)/user/profiles/page.tsx

@@ -232,10 +232,10 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
     : description || '';
 
   return (
-    <div className="bg-white rounded-[20px] p-5 flex gap-5 shadow-[0px_10px_20px_rgba(217,217,217,0.5)]">
+    <div className="bg-white rounded-[20px] p-4 sm:p-5 flex flex-col sm:flex-row gap-4 sm:gap-5 shadow-[0px_10px_20px_rgba(217,217,217,0.5)]">
       {/* Profile Image & View Profile Button */}
       <div className="flex-shrink-0 flex flex-col items-center">
-        <div className="relative w-[200px] h-[200px] rounded-[15px] overflow-hidden bg-[#e8e8e8]">
+        <div className="relative w-full sm:w-[200px] h-[200px] rounded-[15px] overflow-hidden bg-[#e8e8e8]">
           {getProfileImageUrl() ? (
             /* eslint-disable-next-line @next/next/no-img-element */
             <img
@@ -269,10 +269,10 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
       {/* Profile Info */}
       <div className="flex-1 min-w-0">
         {/* Header Row - Name, Verified, Match Badge */}
-        <div className="flex items-start justify-between">
+        <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-2">
           <div>
             {/* Name and Verified Badge */}
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 flex-wrap">
               <h3 className="font-fractul text-[18px] text-[#00293d]">
                 <span className="font-bold">{profile.firstName}</span>{' '}
                 <span className="font-normal">{profile.lastName}</span>
@@ -298,13 +298,13 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
           </div>
 
           {/* Match Badge */}
-          <div className="bg-[#7d917d] text-white px-4 py-1.5 rounded-full font-serif text-[14px] whitespace-nowrap">
+          <div className="bg-[#7d917d] text-white px-4 py-1.5 rounded-full font-serif text-[14px] whitespace-nowrap self-start">
             95% Match
           </div>
         </div>
 
         {/* Location & Member Since */}
-        <div className="flex items-center gap-4 mt-3">
+        <div className="flex flex-wrap items-center gap-3 sm:gap-4 mt-3">
           {location && (
             <div className="flex items-center gap-2">
               <Image
@@ -572,8 +572,8 @@ function ProfilesPageContent() {
     <div className="min-h-screen bg-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <div className="flex gap-6">
-          {/* Left Sidebar */}
+          {/* Left Sidebar - hidden on mobile */}
-          <div className="w-[220px] flex-shrink-0">
+          <div className="hidden lg:block w-[220px] flex-shrink-0">
             {/* Listing Type */}
             <div className="mb-6">
               <h2 className="font-fractul font-bold text-[14px] text-[#00293d] mb-3">Listing Type</h2>
@@ -634,7 +634,21 @@ function ProfilesPageContent() {
           </div>
 
           {/* Main Content */}
-          <div className="flex-1">
+          <div className="flex-1 min-w-0">
+            {/* Mobile Filter Button - visible only on mobile */}
+            <div className="flex lg:hidden items-center justify-between mb-4">
+              <h2 className="font-fractul font-bold text-[16px] text-[#00293d]">Agent Profiles</h2>
+              <button
+                onClick={() => setIsFilterModalOpen(true)}
+                className="flex items-center gap-2 px-4 py-2 border border-[#00293d]/20 rounded-[10px] font-serif text-[13px] text-[#00293d]"
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                  <path d="M3 6H21M7 12H17M11 18H13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                </svg>
+                Filters
+              </button>
+            </div>
+
             {/* Search Bar */}
             <div className="mb-4">
               <div className="relative">
@@ -658,10 +672,10 @@ function ProfilesPageContent() {
             </div>
 
             {/* Agent Type Tabs */}
-            <div className="flex flex-wrap gap-2 mb-6">
+            <div className="flex gap-2 mb-6 overflow-x-auto pb-2 scrollbar-hide flex-nowrap sm:flex-wrap">
               <button
                 onClick={() => handleTypeChange(null)}
-                className={`px-4 py-2 rounded-full font-serif text-[13px] border transition-colors ${activeTypeId === null
+                className={`px-4 py-2 rounded-full font-serif text-[13px] border transition-colors whitespace-nowrap flex-shrink-0 ${activeTypeId === null
                     ? 'bg-[#00293d] text-white border-[#00293d]'
                     : 'bg-white text-[#00293d] border-[#00293d]/20 hover:border-[#00293d]/40'
                   }`}
@@ -672,7 +686,7 @@ function ProfilesPageContent() {
                 <button
                   key={type.id}
                   onClick={() => handleTypeChange(type.id)}
-                  className={`px-4 py-2 rounded-full font-serif text-[13px] border transition-colors ${activeTypeId === type.id
+                  className={`px-4 py-2 rounded-full font-serif text-[13px] border transition-colors whitespace-nowrap flex-shrink-0 ${activeTypeId === type.id
                       ? 'bg-[#00293d] text-white border-[#00293d]'
                       : 'bg-white text-[#00293d] border-[#00293d]/20 hover:border-[#00293d]/40'
                     }`}
@@ -731,7 +745,7 @@ function ProfilesPageContent() {
 
             {/* Pagination */}
             {!loading && !error && totalPages > 1 && (
-              <div className="flex justify-center gap-2 mt-8">
+              <div className="flex justify-center items-center gap-2 mt-8 flex-wrap">
                 <button
                   onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                   disabled={currentPage === 1}

src/app/education/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Link from 'next/link';
+import { CommonHeader } from '@/components/layout/CommonHeader';
+import { Footer } from '@/components/layout/Footer';
+
+export default function EducationPage() {
+  return (
+    <div className="min-h-screen bg-white flex flex-col">
+      {/* Header */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full">
+        <CommonHeader />
+      </div>
+
+      {/* Coming Soon Content */}
+      <main className="flex-1 flex items-center justify-center px-4">
+        <div className="text-center max-w-[500px]">
+          <div className="w-16 h-16 bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-6">
+            <span className="text-[32px]">📚</span>
+          </div>
+          <h1 className="font-fractul font-bold text-[30px] text-[#00293d] mb-3">
+            Coming Soon
+          </h1>
+          <p className="font-serif text-[14px] text-[#00293d]/70 leading-relaxed mb-8">
+            Our Education section is under development. Stay tuned for resources, guides, and insights to help you navigate the real estate journey.
+          </p>
+          <Link
+            href="/"
+            className="inline-flex items-center justify-center px-6 h-[46px] bg-[#e58625] rounded-[15px] font-fractul font-bold text-[16px] text-[#00293d] hover:bg-[#d47720] transition-colors"
+          >
+            Go Back Home
+          </Link>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <Footer />
+    </div>
+  );
+}

src/components/layout/CommonHeader.tsx

@@ -19,27 +19,32 @@ const navLinks = [
 export function CommonHeader() {
   const { data: session } = useSession();
   const [showProfileMenu, setShowProfileMenu] = useState(false);
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
   const profileMenuRef = useRef<HTMLDivElement>(null);
+  const mobileMenuRef = useRef<HTMLDivElement>(null);
   const [profileImage, setProfileImage] = useState<string | null>(null);
   const [profileName, setProfileName] = useState<string | null>(null);
   const [notificationCount, setNotificationCount] = useState(0);
 
-  // Close dropdown when clicking outside
+  // Close dropdowns when clicking outside
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
         setShowProfileMenu(false);
       }
+      if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
+        setShowMobileMenu(false);
+      }
     }
 
-    if (showProfileMenu) {
+    if (showProfileMenu || showMobileMenu) {
       document.addEventListener('mousedown', handleClickOutside);
     }
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [showProfileMenu]);
+  }, [showProfileMenu, showMobileMenu]);
 
   // Fetch profile data (image and name) from backend based on user role
   const fetchProfileData = useCallback(async () => {
@@ -131,20 +136,20 @@ export function CommonHeader() {
   const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/dashboard';
 
   return (
-    <header className="bg-[#648188] rounded-[20px] px-8">
+    <header className="bg-[#648188] rounded-[20px] px-4 md:px-8 relative" ref={mobileMenuRef}>
-      <div className="flex justify-between items-center h-[70px]">
+      <div className="flex justify-between items-center h-[60px] md:h-[70px]">
         {/* Logo */}
-        <Link href={dashboardLink}>
+        <Link href={dashboardLink} className="flex-shrink-0">
           <Image
             src="/assets/logo.svg"
             alt="RE-QuestN"
             width={150}
             height={40}
-            className="h-10 w-auto"
+            className="h-8 md:h-10 w-auto"
           />
         </Link>
 
-        {/* Navigation */}
+        {/* Navigation - Desktop only */}
         <nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
           {navLinks.map((link) => (
             <Link
@@ -158,7 +163,7 @@ export function CommonHeader() {
         </nav>
 
         {/* Right Side Icons */}
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2 md:gap-4">
           {session ? (
             <>
               {/* Notification Bell */}
@@ -172,7 +177,6 @@ export function CommonHeader() {
                   width={20}
                   height={22}
                 />
-                {/* Notification Badge */}
                 {notificationCount > 0 && (
                   <span className="absolute -top-1.5 -right-2 min-w-[18px] h-[18px] bg-red-500 rounded-full flex items-center justify-center px-1">
                     <span className="text-white text-[10px] font-bold leading-none">
@@ -182,14 +186,14 @@ export function CommonHeader() {
                 )}
               </Link>
 
-              {/* Profile Section with Greeting - Entire area clickable */}
+              {/* Profile Section */}
               <div className="relative" ref={profileMenuRef}>
                 <button
                   onClick={() => setShowProfileMenu(!showProfileMenu)}
-                  className="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer"
+                  className="flex items-center gap-2 md:gap-3 hover:opacity-80 transition-opacity cursor-pointer"
                 >
                   {/* Avatar */}
-                  <div className="w-[35px] h-[35px] rounded-full overflow-hidden border-2 border-[#e58625] bg-gray-100">
+                  <div className="w-[32px] h-[32px] md:w-[35px] md:h-[35px] rounded-full overflow-hidden border-2 border-[#e58625] bg-gray-100 flex-shrink-0">
                     {userImage ? (
                       <img
                         src={userImage}
@@ -207,8 +211,8 @@ export function CommonHeader() {
                       />
                     )}
                   </div>
-                  {/* Greeting Text */}
+                  {/* Greeting Text - hidden on mobile */}
-                  <div className="flex flex-col text-left">
+                  <div className="hidden sm:flex flex-col text-left">
                     <span className="font-bold text-[14px] text-[#e58625] leading-tight">
                       Hi {userName?.split(' ')[0] || 'User'} !
                     </span>
@@ -221,10 +225,8 @@ export function CommonHeader() {
                 {/* Profile Dropdown Menu */}
                 {showProfileMenu && (
                   <div className="absolute right-0 top-full mt-3 w-[271px] bg-white rounded-[15px] border border-black/20 z-50 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
-                    {/* Arrow/Triangle at top */}
                     <div className="absolute -top-2 right-6 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-white"></div>
 
-                    {/* User Profile Section */}
                     <div className="flex items-center gap-3 px-4 py-4 border-b border-black/10">
                       <div className="w-[42px] h-[42px] rounded-full overflow-hidden flex-shrink-0 bg-gray-100">
                         {userImage ? (
@@ -254,46 +256,27 @@ export function CommonHeader() {
                       </div>
                     </div>
 
-                    {/* Account Settings */}
                     <Link
                       href={userRole === 'AGENT' ? '/agent/settings' : '/user/settings'}
                       className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
                       onClick={() => setShowProfileMenu(false)}
                     >
-                      <Image
+                      <Image src="/assets/icons/settings-icon.svg" alt="Settings" width={24} height={24} />
-                        src="/assets/icons/settings-icon.svg"
-                        alt="Settings"
-                        width={24}
-                        height={24}
-                      />
                       <div className="flex flex-col">
-                        <p className="font-fractul text-[16px] leading-[18px] text-black">
+                        <p className="font-fractul text-[16px] leading-[18px] text-black">Account Settings</p>
-                          Account Settings
+                        <p className="font-serif text-[14px] leading-[18px] text-black/50">Profile, Security</p>
-                        </p>
-                        <p className="font-serif text-[14px] leading-[18px] text-black/50">
-                          Profile, Security
-                        </p>
                       </div>
                     </Link>
 
-                    {/* Notification Settings */}
                     <Link
                       href={userRole === 'AGENT' ? '/agent/settings/notifications' : '/user/settings/notifications'}
                       className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
                       onClick={() => setShowProfileMenu(false)}
                     >
-                      <Image
+                      <Image src="/assets/icons/notification-settings-icon.svg" alt="Notifications" width={24} height={24} />
-                        src="/assets/icons/notification-settings-icon.svg"
+                      <p className="font-fractul text-[16px] leading-[18px] text-black">Notification Settings</p>
-                        alt="Notifications"
-                        width={24}
-                        height={24}
-                      />
-                      <p className="font-fractul text-[16px] leading-[18px] text-black">
-                        Notification Settings
-                      </p>
                     </Link>
 
-                    {/* Log Out */}
                     <button
                       onClick={() => {
                         setShowProfileMenu(false);
@@ -304,15 +287,8 @@ export function CommonHeader() {
                       }}
                       className="w-full flex items-center gap-3 px-4 py-3 hover:bg-black/5 transition-colors"
                     >
-                      <Image
+                      <Image src="/assets/icons/logout-icon.svg" alt="Log Out" width={24} height={24} />
-                        src="/assets/icons/logout-icon.svg"
+                      <p className="font-fractul font-bold text-[16px] leading-[18px] text-[#e58625]">Log Out</p>
-                        alt="Log Out"
-                        width={24}
-                        height={24}
-                      />
-                      <p className="font-fractul font-bold text-[16px] leading-[18px] text-[#e58625]">
-                        Log Out
-                      </p>
                     </button>
                   </div>
                 )}
@@ -330,23 +306,43 @@ export function CommonHeader() {
           )}
 
           {/* Mobile Menu Button */}
-          <button className="md:hidden p-2 hover:opacity-80 transition-opacity">
+          <button
+            className="md:hidden p-1 hover:opacity-80 transition-opacity"
+            onClick={() => setShowMobileMenu(!showMobileMenu)}
+          >
             <svg
               className="w-6 h-6 text-[#00293d]"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
             >
-              <path
+              {showMobileMenu ? (
-                strokeLinecap="round"
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                strokeLinejoin="round"
+              ) : (
-                strokeWidth={2}
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                d="M4 6h16M4 12h16M4 18h16"
+              )}
-              />
             </svg>
           </button>
         </div>
       </div>
+
+      {/* Mobile Navigation Menu */}
+      {showMobileMenu && (
+        <div className="md:hidden border-t border-white/20 py-3 pb-4">
+          <nav className="flex flex-col gap-1">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setShowMobileMenu(false)}
+                className="font-fractul font-bold text-[14px] text-[#00293D] hover:text-[#e58625] transition-colors px-2 py-2 rounded-[10px] hover:bg-white/10"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
     </header>
   );
 }