ui changes

package-lock.json

@@ -90,6 +90,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -450,6 +451,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -493,6 +495,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -1377,6 +1380,7 @@
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
       "integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@mui/core-downloads-tracker": "^7.3.5",
@@ -1510,6 +1514,7 @@
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.5.tgz",
       "integrity": "sha512-yPaf5+gY3v80HNkJcPi6WT+r9ebeM4eJzrREXPxMt7pNTV/1eahyODO4fbH3Qvd8irNxDFYn5RQ3idHW55rA6g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@mui/private-theming": "^7.3.5",
@@ -2376,7 +2381,8 @@
         }
       ],
       "hasInstallScript": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@tsparticles/interaction-external-attract": {
       "version": "3.9.1",
@@ -2994,6 +3000,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.4.tgz",
       "integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -3043,6 +3050,7 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.181.0.tgz",
       "integrity": "sha512-MLF1ks8yRM2k71D7RprFpDb9DOX0p22DbdPqT/uAkc6AtQXjxWCVDjCy23G9t1o8HcQPk7woD2NIyiaWcWPYmA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -3315,6 +3323,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3591,6 +3600,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4010,7 +4020,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -4138,6 +4149,7 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
       "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -4252,7 +4264,8 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -4429,6 +4442,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6060,6 +6074,7 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.18.0.tgz",
       "integrity": "sha512-FYZZqD0UUHUswKz3LQl2Z7H24AhD14XGTsIRw3SJaXUxyfVMi+1yiZGmqTcPt/CkPpdU7rrxqcyQ1zJE5DjvIQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.26.7",
@@ -6142,6 +6157,7 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -6737,6 +6753,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6845,6 +6862,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7097,6 +7115,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7106,6 +7125,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -7203,6 +7223,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -7429,7 +7450,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -7659,6 +7681,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -7858,6 +7881,7 @@
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz",
       "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@emotion/is-prop-valid": "1.2.2",
         "@emotion/unitless": "0.8.1",
@@ -8400,6 +8424,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -8552,6 +8577,7 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
       "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.2.0",
@@ -8714,6 +8740,7 @@
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

src/App.css

@@ -24,3 +24,9 @@ button{
   inset: 0;
   background: rgba(255, 255, 255, 0.7); /* white overlay */
 }
+.profile-img-box {
+  background-image: url("./assets/images/frame1.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}

src/components/matches/MatchesProfilesTab.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard } from "lucide-react";
+import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard, RockingChair, LocateFixed, School, WorkflowIcon } from "lucide-react";
 import CakeIcon from "@mui/icons-material/Cake";
 import GroupsIcon from "@mui/icons-material/Groups";
 import SchoolIcon from "@mui/icons-material/School";
@@ -40,7 +40,7 @@ function ProfileCard({ profile }) {
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
           transition={{ delay: 0.2, type: "spring" }}
-          className="absolute top-4 left-4 z-10 bg-orange-500 rounded-full p-2 shadow-lg"
+          className="absolute top-4 left-4 z-10 bg-red-900 rounded-full p-2 shadow-lg"
         >
           <Crown className="w-5 h-5 text-white" />
         </motion.div>
@@ -254,6 +254,34 @@ export default function MatchesInterface() {
       description: "Matches you have viewed",
       category: "Based on activity",
     },
+    {
+      id: "newly-joined",
+      icon: <RockingChair className="w-6 h-6" />,
+      title: "Newly Joined",
+      description: "Matches who Joined within the last 30 days",
+      category: "Based on activity",
+    },
+     {
+      id: "location",
+      icon: <LocateFixed className="w-6 h-6" />,
+      title: "Location matches",
+      description: "Matches near your location",
+      category: "Based on activity",
+    },
+     {
+      id: "education",
+      icon: <School className="w-6 h-6" />,
+      title: "Education matches",
+      description: "Matches near your education match",
+      category: "Based on activity",
+    },
+    {
+      id: "job",
+      icon: <WorkflowIcon className="w-6 h-6" />,
+      title: "Job matches",
+      description: "Matches near your job",
+      category: "Based on activity",
+    },
   ];
 
   const profiles = [

src/components/profiledetail/MatrimonyProfile.jsx

@@ -18,8 +18,10 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/thumbs";
+import { useNavigate } from "react-router-dom";
 
 const MatrimonyProfile = () => {
+  const navigate = useNavigate();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [thumbsSwiper, setThumbsSwiper] = useState(null);
@@ -206,8 +208,13 @@ const MatrimonyProfile = () => {
 
             {/* Action Buttons */}
             <div className="flex justify-start gap-3">
-              <button className="w-[fit-content]  border-2 border-gray-300 text-gray-700 py-2  px-6 rounded-full hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 text-sm">
+              <button 
+              // onClick={()=>{
+              //   navigate("/chat")
+              // }}
+              className="w-[fit-content]  border-2 border-gray-300 text-gray-700 py-2  px-6 rounded-full hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 text-sm">
                 <X className="w-5 h-5" /> Don't Show
+                 {/* Message */}
               </button>
               {/* <button className="w-[fit-content]  border-2 border-orange-500 text-[#034E08] py-2  px-6 rounded-full hover:bg-orange-50 transition-colors flex items-center justify-center gap-2 text-sm">
                 <SkipForward className="w-5 h-5" /> Skip
@@ -438,7 +445,8 @@ const MatrimonyProfile = () => {
             <div className="flex items-center">
               <span className="text-gray-600 w-40">Date Of Birth</span>
               <span className="text-gray-400">:</span>
-              <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
+              <span className="ml-3 text-gray-900"> 23-12-1991</span>
+              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                 <svg
                   className="w-3 h-3"
                   fill="currentColor"
@@ -452,12 +460,13 @@ const MatrimonyProfile = () => {
                   />
                 </svg>
                 Upgrade to view
-              </button>
+              </button> */} 
             </div>
             <div className="flex items-center">
               <span className="text-gray-600 w-40">Star</span>
               <span className="text-gray-400">:</span>
-              <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
+                <span className="ml-3 text-gray-900">Piscus</span>
+              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                 <svg
                   className="w-3 h-3"
                   fill="currentColor"
@@ -471,12 +480,13 @@ const MatrimonyProfile = () => {
                   />
                 </svg>
                 Upgrade to view
-              </button>
+              </button> */}
             </div>
             <div className="flex items-center">
               <span className="text-gray-600 w-40">Rassi</span>
               <span className="text-gray-400">:</span>
-              <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
+                <span className="ml-3 text-gray-900"> Revathy</span>
+              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                 <svg
                   className="w-3 h-3"
                   fill="currentColor"
@@ -490,9 +500,9 @@ const MatrimonyProfile = () => {
                   />
                 </svg>
                 Upgrade to view
-              </button>
+              </button> */}
             </div>
-            <div className="flex items-center">
+            {/* <div className="flex items-center">
               <span className="text-gray-600 w-40">Horoscope</span>
               <span className="text-gray-400">:</span>
               <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
@@ -510,7 +520,7 @@ const MatrimonyProfile = () => {
                 </svg>
                 Upgrade to view
               </button>
-            </div>
+            </div> */}
             <div className="flex">
               <span className="text-gray-600 w-40">Employment</span>
               <span className="text-gray-400">:</span>

src/feature/FilterForm.jsx

@@ -525,7 +525,7 @@ const FilterForm = () => {
                   </Select>
                 </FormControl>
 
-                <FormControl fullWidth>
+                {/* <FormControl fullWidth>
                   <InputLabel>Smoking Habits</InputLabel>
                   <Select
                     value={filters.smokingHabits}
@@ -559,7 +559,7 @@ const FilterForm = () => {
                     <MenuItem value="Non-Drinker">Non-Drinker</MenuItem>
                     <MenuItem value="Social Drinker">Social Drinker</MenuItem>
                   </Select>
-                </FormControl>
+                </FormControl> */}
               </div>
             </AccordionDetails>
           </Accordion>

src/pages/ChatPage.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Search, MoreVertical, Send, Phone, Video, Check, CheckCheck, ArrowLeft, Star, Share2, Flag, Ban, Trash2 } from 'lucide-react';
+import ReportModal from '../components/common/ReportModal';
 
 const ChatUI = () => {
   const [selectedChat, setSelectedChat] = useState(null);
@@ -8,6 +9,7 @@ const ChatUI = () => {
   const [showCallHistory, setShowCallHistory] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [showChatMenu, setShowChatMenu] = useState(false);
+const [openReport, setOpenReport] = useState(false);
 
   const contacts = [
     {
@@ -263,7 +265,13 @@ const ChatUI = () => {
   };
 
   return (
-    <div className="w-full max-w-[1400px] mx-auto flex h-screen gap-[20px] bg-gray-50">
+
+    <>
+    
+    
+        <ReportModal open={openReport} onClose={() => setOpenReport(false)} />
+    
+     <div className="w-full max-w-[1400px] mx-auto flex h-screen gap-[20px] bg-gray-50">
       {/* Sidebar - Chat List */}
       <div className={`w-full md:w-96 bg-white border border-1 border-gray-200 rounded-[10px] flex flex-col ${
         showChatOnMobile || showCallHistory ? 'hidden md:flex' : 'flex'
@@ -450,9 +458,9 @@ const ChatUI = () => {
               </div>
             </div>
             <div className="flex items-center gap-2">
-              <button className="p-2 hover:bg-gray-100 rounded">
+              {/* <button className="p-2 hover:bg-gray-100 rounded">
                 <Phone className="w-5 h-5 text-blue-600" />
-              </button>
+              </button> */}
               <div className="relative">
                 <button 
                   onClick={() => setShowChatMenu(!showChatMenu)}
@@ -471,7 +479,7 @@ const ChatUI = () => {
                       <Share2 className="w-4 h-4" />
                       <span className="text-sm">Share</span>
                     </button>
-                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
+                    <button onClick={() => setOpenReport(true)}  className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
                       <Flag className="w-4 h-4" />
                       <span className="text-sm">Report</span>
                     </button>
@@ -571,6 +579,8 @@ const ChatUI = () => {
         </div>
       )}
     </div>
+    </>
+   
   );
 };
 

src/pages/InterestSendPage.jsx

@@ -41,8 +41,8 @@ import groom1 from "../assets/images/groom1.jpg";
 import groom2 from "../assets/images/groom2.jpg";
 import groom3 from "../assets/images/groom3.jpg";
 import groom4 from "../assets/images/groom4.jpg";
-
+import frame from "../assets/images/frame1.jpg"
-
+import "../styles/addon.css"
 
 // Icons as inline SVG components
 const CakeIcon = () => (
@@ -296,7 +296,18 @@ const renderMenu = () => {
 
 
 
-<div classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]" style={{height:"300px"}}>
+<div 
+classname="profile-img-box overflow-hidden w-full max-w-sm h-[300px]"
+ style={{height:"300px",
+  backgroundImage:`url(${frame})`,
+  backgroundRepeat:"no-repeat",
+  backgroundPosition:"center",
+  backgroundSize:"cover",
+  
+
+
+
+ }}>
 
         <img
           src={profile.image}
@@ -306,7 +317,7 @@ const renderMenu = () => {
 </div>
         {/* White Gradient Overlay */}
         <div
-          className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
+          className="absolute bottom-0 left-0 right-0 h-25 pointer-events-none"
           style={{
             background:
               "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
@@ -319,7 +330,7 @@ const renderMenu = () => {
             {profile.name}
           </h1>
           <p className="text-[14px] text-gray-700 leading-relaxed">
-            Matrimony ID: {profile.matrimonyId}
+             ID: {profile.matrimonyId}
           </p>
         </div>
       </div>
@@ -329,7 +340,7 @@ const renderMenu = () => {
 {(activeTab === "1" || activeTab === "2" || activeTab === "3") && (
   <>
   <div className="flex items-center gap-2">
-          <VisibilityIcon  />
+          <VisibilityIcon sx={{color:"#787777ff", fontSize:"18px"}}  />
           <span className="text-[14px]  text-gray-900">
             {profile.lastseen}
           </span>
@@ -340,13 +351,13 @@ const renderMenu = () => {
 
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2">
-            <CakeIcon />
+            <CakeIcon sx={{color:"#787777ff", fontSize:"18px"}} />
             <span className="text-[14px]  text-gray-900">
              {profile.age} yr
             </span>
           </div>
           <div className="flex items-center gap-2">
-            <AccessibilityIcon />
+            <AccessibilityIcon sx={{color:"#787777ff", fontSize:"18px"}} />
             <span className="text-[14px]  text-gray-900">
              {profile.height} cm
             </span>
@@ -490,6 +501,19 @@ View Details
       </div>
     </div>
     
+<style>
+{`
+  .profile-img-box {
+    background-image: url("../assets/images/frame1.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    padding: 20px;
+  }
+`}
+</style>
+
+
     </>
    
   );
@@ -497,12 +521,14 @@ View Details
 
 // Main Component
 export default function InterestSendPage() {
-  const [value, setValue] = useState("1");
+  const [value, setValue] = useState("2");
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
+   const [intreasteactiveTab, setIntreasteactiveTab] = useState("receivedintreaste");
+
   // Sample data for different categories
   const profilesData = {
     received: [
@@ -751,17 +777,42 @@ const [profiles, setProfiles] = useState({
     <div className=" py-8 px-0">
       <div className="max-w-[1400px] mx-auto">
         {/* Header */}
-        <div className="text-center mb-8">
+
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">
+          <div className="flex justify-center mb-8 items-center gap-4">
+        <div className={`cursor-pointer text-center bg-green-50 p-4 rounded-[10px]  mb-8  ${
+              intreasteactiveTab === "receivedintreaste"
+                ? "border-1 border-green-600 text-green-600"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+               onClick={() => setIntreasteactiveTab("receivedintreaste")}>
+          <h1 className="text-xl md:text-xl font-bold text-gray-800 mb-2">
          Received  Interest 
           </h1>
           <p className="text-gray-600">
             Manage your matrimony profile interests
           </p>
         </div>
+        <div className={`cursor-pointer text-center mb-8 bg-green-50 p-4 rounded-[10px] ${
+              intreasteactiveTab === "sendintreaste"
+                ? "border-1 border-green-600 text-green-600"
+                : "text-gray-500 hover:text-gray-700"
+            }`}   onClick={() => setIntreasteactiveTab("sendintreaste")}>
+          <h1 className="text-xl md:text-xl font-bold text-gray-800 mb-2">
+         Send  Interest 
+          </h1>
+          <p className="text-gray-600">
+            Manage your matrimony profile interests
+          </p>
+        </div>
+</div>
+  {intreasteactiveTab === "receivedintreaste" && (
 
-        {/* MUI Tabs */}
+<>
-        <Box sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}>
+
+ {/* MUI Tabs */}
+        <Box
+         sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}
+         >
           <TabContext value={value}>
             <Box
               sx={{
@@ -825,7 +876,7 @@ const [profiles, setProfiles] = useState({
                   },
                 }}
               >
-                <Tab label="All " value="1" />
+                {/* <Tab label="All " value="1" /> */}
                 <Tab label="Pending" value="2" />
                 <Tab label="Accepted" value="3" />
                 <Tab label="Rejected" value="4" />
@@ -870,6 +921,137 @@ const [profiles, setProfiles] = useState({
             </TabPanel>
           </TabContext>
         </Box>
+
+
+</>
+      )}   
+
+
+
+
+       {intreasteactiveTab === "sendintreaste" && (
+
+<>
+
+ {/* MUI Tabs */}
+        <Box
+         sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}
+         >
+          <TabContext value={value}>
+            <Box
+              sx={{
+               
+                width: "100%",
+                maxWidth: "800px",
+                margin: "0px auto",
+                marginBottom:"40px",
+                display:"flex",
+                justifyContent:"center",
+                background:"#f5fbff",
+                borderRadius:"10px",
+                padding:"20px 15px",
+              }}
+            >
+              <TabList
+                onChange={handleChange}
+                aria-label="interest management tabs"
+                variant="scrollable"
+                // scrollButtons="auto"
+                scrollButtons="on"
+                allowScrollButtonsMobile
+                sx={{
+                  "& .MuiTabs-scrollButtons": {
+                    display: "flex !important", // force visible
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "36px",
+                    height: "36px",
+                    borderRadius: "50%",
+                    backgroundColor: "#034E08",
+                    color: "white",
+                    margin: "0 6px",
+                    boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
+
+                    
+                  },
+
+                  "& .MuiTabs-scrollButtons:hover": {
+                    backgroundColor: "#046b0b",
+                  },
+
+                  "& .MuiTabs-scrollButtons.Mui-disabled": {
+                    opacity: 0.4,
+                    backgroundColor: "#9bcf9d",
+                  },
+
+                  "& .MuiTab-root": {
+                    fontSize: { xs: "14px", sm: "16px" },
+                    fontWeight: 600,
+                    textTransform: "none",
+                    minWidth: { xs: 120, sm: 150 },
+                    color: "#666",
+                  },
+                  "& .Mui-selected": {
+                    color: "#034E08 !important",
+                  },
+                  "& .MuiTabs-indicator": {
+                    backgroundColor: "#034E08",
+                    height: 3,
+                  },
+                }}
+              >
+                {/* <Tab label="All " value="1" /> */}
+                <Tab label="Pending" value="2" />
+                <Tab label="Accepted" value="3" />
+                <Tab label="Rejected" value="4" />
+              </TabList>
+            </Box>
+
+            {/* Received Requests */}
+            <TabPanel value="1" sx={{ padding: "10px 0" }}>
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 
+              w-[100%] max-w-[1400px] mx-auto">
+                {profilesData.received.map((profile) => (
+                   <ProfileCard key={profile.id} profile={profile} activeTab={value} />
+                ))}
+              </div>
+            </TabPanel>
+
+            {/* Sent Requests */}
+            <TabPanel value="2" sx={{ padding: "24px 0" }}>
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
+                {profilesData.sent.map((profile) => (
+                 <ProfileCard key={profile.id} profile={profile} activeTab={value}  handleDelete={handleDelete}/>
+                ))}
+              </div>
+            </TabPanel>
+
+            {/* Accepted */}
+            <TabPanel value="3" sx={{ padding: "24px 0" }}>
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
+                {profilesData.accepted.map((profile) => (
+                  <ProfileCard key={profile.id} profile={profile} activeTab={value} />
+                ))}
+              </div>
+            </TabPanel>
+
+            {/* Rejected */}
+            <TabPanel value="4" sx={{ padding: "24px 0" }}>
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
+                {profilesData.rejected.map((profile) => (
+                  <ProfileCard key={profile.id} profile={profile} activeTab={value} />
+                ))}
+              </div>
+            </TabPanel>
+          </TabContext>
+        </Box>
+
+
+</>
+      )}   
+            
+
+
       </div>
     </div>
   );

src/styles/addon.css

@@ -0,0 +1,7 @@
+.profile-img-box {
+  background-image: url("/assets/images/frame1.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  padding: 20px;
+}