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 */}
-          <div className="w-[220px] flex-shrink-0">
+          {/* Left Sidebar - hidden on mobile */}
+          <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>
+  );
+}