From 26b39fe52a7d88e2e61d5ee00624bd573505491e Mon Sep 17 00:00:00 2001
From: Nithish-stoic <mmnithu2.2@gmail.com>
Date: Fri, 26 Dec 2025 18:04:08 +0530
Subject: [PATCH] change

---
 src/components/common/Footer.jsx              |  65 +++++++-
 .../profiledashboard/AstroChatUI.jsx          |  42 ++---
 .../profiledashboard/DailyRecommendedCard.jsx |  12 +-
 .../profiledashboard/MatchingList.jsx         |  16 +-
 .../profiledashboard/MatrimonyArticles.jsx    |   4 +-
 .../profiledashboard/MembershipCard.jsx       |  28 ++--
 .../profiledashboard/ProfileCompletion.jsx    |   4 +-
 .../profiledashboard/VideoSwiperGallery.jsx   |   4 +-
 src/components/ui/ProfileCardDemo.jsx         |  55 ++++---
 src/pages/UserDashboardHome.jsx               | 155 +++++++-----------
 10 files changed, 206 insertions(+), 179 deletions(-)

diff --git a/src/components/common/Footer.jsx b/src/components/common/Footer.jsx
index 866dd1c..1a26130 100644
--- a/src/components/common/Footer.jsx
+++ b/src/components/common/Footer.jsx
@@ -69,12 +69,20 @@ export default function Footer() {
                 </a>
               </li> */}
             </ul>
+            <ul className="space-y-2 py-2">
+                <Link
+                  to="/contact"
+                  className="text-gray-600 hover:text-green-600 transition-colors"
+                >
+                  Contact Us
+                </Link>
+              </ul>
           </div>
 
           {/* Company Section */}
-          <div>
-            <h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3>
-            <ul className="space-y-2">
+          {/* <div> */}
+            {/* <h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3> */}
+            {/* <ul className="space-y-2"> */}
               {/* <li>
                 <a
                   href="#"
@@ -107,16 +115,16 @@ export default function Footer() {
                   Awards & Recognition
                 </a>
               </li> */}
-              <li>
+              {/* <li>
                 <Link
                   to="/contact"
                   className="text-gray-600 hover:text-green-600 transition-colors"
                 >
                   Contact Us
                 </Link>
-              </li>
-            </ul>
-          </div>
+              </li> */}
+            {/* </ul>
+          </div> */}
 
           {/* Privacy & You Section */}
           <div>
@@ -182,8 +190,8 @@ export default function Footer() {
             </ul>
           </div>
 
-          {/* Social Media & Apps Section */}
-          <div>
+         {/* Social Media Section */}
+          <div className="mb-4">
             <h3 className="text-[#A70710] font-bold text-lg mb-4">
               Find us on:
             </h3>
@@ -219,6 +227,45 @@ export default function Footer() {
                 <Youtube className="w-5 h-5 text-gray-700" />
               </a>
             </div>
+            </div>
+
+          {/* Social Media & Apps Section */}
+          <div>
+            {/* <h3 className="text-[#A70710] font-bold text-lg mb-4">
+              Find us on:
+            </h3> */}
+            {/* <div className="flex gap-3 mb-6">
+              <a
+                href="#"
+                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
+              >
+                <Facebook className="w-5 h-5 text-gray-700" />
+              </a>
+              <a
+                href="#"
+                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
+              >
+                <Instagram className="w-5 h-5 text-gray-700" />
+              </a>
+              <a
+                href="#"
+                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
+              >
+                <Linkedin className="w-5 h-5 text-gray-700" />
+              </a>
+              <a
+                href="#"
+                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
+              >
+                <Twitter className="w-5 h-5 text-gray-700" />
+              </a>
+              <a
+                href="#"
+                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
+              >
+                <Youtube className="w-5 h-5 text-gray-700" />
+              </a>
+            </div> */}
 
             <h3 className="text-[#A70710] font-bold text-lg mb-4">
               Get the Thirukalyanam App
diff --git a/src/components/profiledashboard/AstroChatUI.jsx b/src/components/profiledashboard/AstroChatUI.jsx
index 1fe8238..776f813 100644
--- a/src/components/profiledashboard/AstroChatUI.jsx
+++ b/src/components/profiledashboard/AstroChatUI.jsx
@@ -5,15 +5,15 @@ const AstroChatUI = () => {
   return (
     <>
     
-     <div className="flex items-center justify-center py-4">
-      <div className="w-full max-w-[550px] pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-3xl shadow-2xl p-8 relative overflow-hidden">
+     <div className="flex items-center justify-center py-4 px-4">
+      <div className="w-full max-w-[690px] h-full max-h-[690px] md:max-h-[600px] sm:max-h-[500px] pt-6 sm:pt-8 md:pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-2xl sm:rounded-3xl p-4 sm:p-6 md:p-8 relative overflow-hidden">
         
         {/* Logo Section */}
-        <div className="mb-8">
+        <div className="mb-4 sm:mb-6 md:mb-8">
           <div className="flex items-center gap-2 mb-2">
             <div className="relative">
               {/* Planet Icon */}
-              <svg className="w-16 h-16" viewBox="0 0 64 64" fill="none">
+              <svg className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16" viewBox="0 0 64 64" fill="none">
                 <circle cx="32" cy="32" r="20" fill="#A70710" opacity="0.9"/>
                 <ellipse cx="32" cy="32" rx="35" ry="8" fill="none" stroke="#A70710" strokeWidth="3" transform="rotate(-20 32 32)"/>
                 {/* Chat dots */}
@@ -26,46 +26,46 @@ const AstroChatUI = () => {
               </svg>
             </div>
             <div>
-              <h1 className="text-3xl font-bold">
+              <h1 className="text-xl sm:text-2xl md:text-3xl font-bold">
                 <span className="text-gray-900">Astro</span>
                 <span className="text-[#A70710]">Horoscope</span>
               </h1>
             </div>
           </div>
-          <p className="text-sm text-gray-700 ml-1">
-            From <span className="text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
+          <p className="text-xs sm:text-sm md:text-[16px] text-gray-700 ml-1">
+            From <span className="text-xs sm:text-sm md:text-[16px] text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
           </p>
         </div>
 
         {/* Main Heading */}
-        <h2 className="text-[18px] font-bold text-gray-900 mb-4 leading-tight">
+        <h2 className="text-base sm:text-lg md:text-[18px] font-bold text-gray-900 mb-3 sm:mb-4 leading-tight">
           Looking for astrology guidance in love, relationships, career, or health?
         </h2>
 
         {/* Subheading */}
-        <p className="text-gray-700 mb-4">
+        <p className="text-sm sm:text-base md:text-[16px] text-gray-700 mb-3 sm:mb-4">
           Connect instantly with expert astrologers on AstroFreeChat.
         </p>
 
         {/* Features List */}
-        <div className="space-y-2 mb-8">
-          <div className="flex items-center gap-3">
-            <span className="text-[#A70710] text-xl mt-1">✓</span>
-            <p className="text-gray-900 font-medium text-[14px]">
+        <div className="space-y-1.5 sm:space-y-2 mb-6 sm:mb-8">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
+            <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
               Instant Astrology Insights
             </p>
           </div>
 
-          <div className="flex items-center gap-3">
-            <span className="text-[#A70710] text-xl mt-1">✓</span>
-            <p className="text-gray-900 font-medium text-[14px]">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
+            <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
               Chat Anytime, Anywhere
             </p>
           </div>
 
-          <div className="flex items-center gap-3">
-            <span className="text-[#A70710] text-xl mt-1">✓</span>
-            <p className="text-gray-900 font-medium text-[14px]">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
+            <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
               First 5 Minutes <span className="font-bold">FREE</span>
             </p>
           </div>
@@ -74,12 +74,12 @@ const AstroChatUI = () => {
         {/* CTA Button */}
         <button onClick={()=>{
           navigate("/horoscoper-generate")
-        }} className="relative z-[99] w-[fit-content] bg-[#034E08]  hover:bg-[#A70710] text-white font-bold text-[16px] py-4    px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
+        }} className="relative z-[99] w-[fit-content] bg-[#034E08] hover:bg-[#A70710] text-white font-bold text-xs sm:text-sm md:text-[16px] py-2.5 sm:py-3 md:py-4 px-4 sm:px-5 md:px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
           Upload Horoscope
         </button>
 
         {/* Girl Image - Positioned at bottom right */}
-        <div className="absolute bottom-0 right-0  z-[1]">
+        <div className="absolute bottom-0 right-0 z-[1] w-32 h-32 sm:w-40 sm:h-40 md:w-auto md:h-auto">
           <img 
             src={girlchat} 
             alt="Woman using chat"
diff --git a/src/components/profiledashboard/DailyRecommendedCard.jsx b/src/components/profiledashboard/DailyRecommendedCard.jsx
index 6c61340..1342d16 100644
--- a/src/components/profiledashboard/DailyRecommendedCard.jsx
+++ b/src/components/profiledashboard/DailyRecommendedCard.jsx
@@ -289,10 +289,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
           animate={{ opacity: 1, y: 0 }}
           className="text-center mb-12"
         >
-          <h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold  mb-3">
+          <h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
             Daily Recommended
           </h1>
-          <p className="text-gray-600 text-[12px]">Find your perfect match today</p>
+          <p className="text-gray-900 text-[12px]">Find your perfect match today</p>
         </motion.div>
 
         {/* Swiper Container */}
@@ -307,10 +307,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
               disableOnInteraction: false,
               pauseOnMouseEnter: true
             }}
-            pagination={{
-              clickable: true,
-              dynamicBullets: true
-            }}
+            // pagination={{
+            //   clickable: true,
+            //   dynamicBullets: true
+            // }}
             loop={true}
             speed={800}
             breakpoints={{
diff --git a/src/components/profiledashboard/MatchingList.jsx b/src/components/profiledashboard/MatchingList.jsx
index 8e64cb7..01cb101 100644
--- a/src/components/profiledashboard/MatchingList.jsx
+++ b/src/components/profiledashboard/MatchingList.jsx
@@ -18,7 +18,7 @@ import 'swiper/css/pagination';
 import 'swiper/css/effect-coverflow';
 import { useNavigate } from 'react-router-dom';
 
-const MatchingList = () => {
+const   MatchingList = () => {
 
    const swiperRef = useRef(null);
   const navigate = useNavigate();
@@ -143,7 +143,7 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
         className="absolute top-4 right-4 z-10 bg-white rounded-full px-4 py-2 shadow-lg flex items-center space-x-2 hover:bg-gray-50 transition-colors"
      
      onClick={(e) => {
-    e.stopPropagation();
+    e.stopPropagation();  
     // shortlist logic
   }}
      >
@@ -256,10 +256,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
           animate={{ opacity: 1, y: 0 }}
           className="text-center mb-12"
         >
-          <h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold  mb-3">
+          <h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
            Your Matching List
           </h1>
-          <p className="text-gray-600 text-[12px]">Find your perfect match today</p>
+          <p className="text-gray-900 text-[12px]">Find your perfect match today</p>
         </motion.div>
 
         {/* Swiper Container */}
@@ -274,10 +274,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
               disableOnInteraction: false,
               pauseOnMouseEnter: true
             }}
-            pagination={{
-              clickable: true,
-              dynamicBullets: true
-            }}
+            // pagination={{
+            //   clickable: true,
+            //   dynamicBullets: true
+            // }}
             loop={true}
             speed={800}
             breakpoints={{
diff --git a/src/components/profiledashboard/MatrimonyArticles.jsx b/src/components/profiledashboard/MatrimonyArticles.jsx
index 1b8f13d..074cd73 100644
--- a/src/components/profiledashboard/MatrimonyArticles.jsx
+++ b/src/components/profiledashboard/MatrimonyArticles.jsx
@@ -50,8 +50,8 @@ const MatrimonyArticles = () => {
   return (
     <>
       <div className="custom-article-swiper py-10 px-2 max-w-[1400px] mx-auto my-10">
-      <h2 className="pb-10 text-[20px] text-[#034E08] 
-      sm:text-[22px] lg:text-[24px] font-bold  text-center">
+      <h2 className="pb-10 text-[20px] text-[#00000] 
+      sm:text-[22px] lg:text-[24px] font-semibold text-center">
         Matrimony Articles
       </h2>
 
diff --git a/src/components/profiledashboard/MembershipCard.jsx b/src/components/profiledashboard/MembershipCard.jsx
index 9433a96..cb85686 100644
--- a/src/components/profiledashboard/MembershipCard.jsx
+++ b/src/components/profiledashboard/MembershipCard.jsx
@@ -13,49 +13,49 @@ return (
           {/* Left Content Section */}
           <div className="flex flex-col p-2 lg:p-4 lg:w-3/5">
             {/* Heading */}
-            <h1 className="text-[12px]] font-bold text-gray-900 mb-4">
+            <h1 className="text-[16px] font-bold text-gray-900 mb-4">
               Become a paid member
             </h1>
             
             {/* Subheading with offer */}
-            <p className="text-[12px] lg:text-[14px] text-gray-900 mb-4">
+            <p className="text-[16px] lg:text-[16px] text-gray-900 mb-4">
               Get up to <span className="text-red-600 font-bold">58% OFF</span> on paid membership!
             </p>
 
             {/* Features List */}
             <div className="space-y-2 mb-2">
               <div className="flex items-start gap-4">
-                <div className="w-4 h-4 flex-shrink-0 mt-0">
-                  <Phone className="w-4 h-4 text-gray-700" />
+                <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
+                  <Phone className="w-5 h-5 text-gray-700" />
                 </div>
-                <p className="text-[12px] lg:text-[12px] text-gray-900 font-medium">
+                <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">  
                   Call/WhatsApp matches
                 </p>
               </div>
 
               <div className="flex items-start gap-4">
-                <div className="w-4 h-4 flex-shrink-0 mt-0">
-                  <MessageCircle className="w-4 h-4 text-gray-700" />
+                <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
+                  <MessageCircle className="w-5 h-5 text-gray-700" />
                 </div>
-                <p className="text-[12px] lg:text-[12px] text-gray-900 font-medium">
+                <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
                   Unlimited messages
                 </p>
               </div>
 
               <div className="flex items-start gap-4">
-                <div className="w-4 h-4 flex-shrink-0 mt-0">
-                  <ThumbsUp className="w-4 h-4 text-gray-700" />
+                <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
+                  <ThumbsUp className="w-5 h-5 text-gray-700" />
                 </div>
-                <p className="text-[12px] lg:text-[12px] text-gray-900 font-medium">
+                <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
                   Higher chances of response
                 </p>
               </div>
 
               <div className="flex items-start gap-4">
-                <div className="w-4 h-4 flex-shrink-0 mt-0">
-                  <Eye className="w-4 h-4 text-gray-700" />
+                <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
+                  <Eye className="w-5 h-5 text-gray-700" />
                 </div>
-                <p className="text-[12px] lg:text-[12px] text-gray-900 font-medium">
+                <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
                   View and match horoscopes
                 </p>
               </div>
diff --git a/src/components/profiledashboard/ProfileCompletion.jsx b/src/components/profiledashboard/ProfileCompletion.jsx
index 8afccc8..09ce286 100644
--- a/src/components/profiledashboard/ProfileCompletion.jsx
+++ b/src/components/profiledashboard/ProfileCompletion.jsx
@@ -174,7 +174,7 @@ const ProfileCompletion = () => {
           </div>
 </div>
           {/* Additional Info Section */}
-          <motion.div
+          {/* <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 1.5, duration: 0.6 }}
@@ -183,7 +183,7 @@ const ProfileCompletion = () => {
             <p className="text-gray-600 text-sm sm:text-base">
               Complete your profile to increase visibility and get better matches
             </p>
-          </motion.div>
+          </motion.div> */}
         </motion.div>
       </div>
     </>
diff --git a/src/components/profiledashboard/VideoSwiperGallery.jsx b/src/components/profiledashboard/VideoSwiperGallery.jsx
index da674d6..6326aa2 100644
--- a/src/components/profiledashboard/VideoSwiperGallery.jsx
+++ b/src/components/profiledashboard/VideoSwiperGallery.jsx
@@ -247,10 +247,10 @@ const VideoSwiperGallery = () => {
           animate={{ opacity: 1, y: 0 }}
           className="text-center mb-12"
         >
-          <h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold  mb-3">
+          <h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
             Video Gallery
           </h1>
-          <p className="text-gray-600 text-[12px]">
+          <p className="text-gray-900 text-[12px]">
             Discover profiles through their stories
           </p>
         </motion.div>
diff --git a/src/components/ui/ProfileCardDemo.jsx b/src/components/ui/ProfileCardDemo.jsx
index a1f3918..d5f71bf 100644
--- a/src/components/ui/ProfileCardDemo.jsx
+++ b/src/components/ui/ProfileCardDemo.jsx
@@ -5,6 +5,8 @@ import Profile1 from "../../assets/images/bride1.jpg";
 import Profile2 from "../../assets/images/bride2.jpg";
 import Profile3 from "../../assets/images/bride3.jpg";
 import Profile4 from "../../assets/images/bride4.jpg";
+import { motion } from "framer-motion";
+
 
 export default function ProfileCard() {
   // Sample data for multiple cards with image paths
@@ -67,14 +69,31 @@ export default function ProfileCard() {
     },
   ];
 
-  return (
-    <div className="min-h-screen flex justify-center items-center  py-8 px-4">
-      {/* Grid Container - max-w-[1400px] with 4 columns */}
+ return (
+  <div className="h-auto py-8 px-4">
+
+    {/* HEADING */}
+    <motion.div
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="text-center mb-12"
+    >
+      <h1 className="text-[20px] text-[#000000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
+        Daily Recommended
+      </h1>
+      <p className="text-gray-900 text-[12px]">
+        Find your perfect match today
+      </p>
+    </motion.div>
+
+    {/* CARDS GRID */}
+    <div className="flex justify-center">
       <div className="w-full max-w-[1400px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
         {profiles.map((profile) => (
           <div
             key={profile.id}
-            className="w-full rounded-[28px] overflow-hidden bg-white shadow-md "
+            className="w-full rounded-[28px] overflow-hidden bg-white shadow-md"
           >
             {/* IMAGE SECTION */}
             <div className="relative">
@@ -84,35 +103,29 @@ export default function ProfileCard() {
                 className="w-full h-[320px] object-cover"
               />
 
-              {/* LEFT ICON (CROWN) */}
               <div className="absolute top-4 left-4 w-9 h-9 rounded-full bg-[#8b0000] flex items-center justify-center">
                 <Crown size={18} color="#fff" />
               </div>
 
-              {/* RIGHT ICON (SHORTLIST) */}
               <div className="absolute top-4 right-4 px-3 py-1.5 rounded-[20px] bg-white flex items-center gap-1.5 text-[13px] font-medium shadow-lg">
                 <Bookmark size={14} /> Shortlist
               </div>
-
-              {/* FADE FOR GLASS */}
-              <div className="absolute bottom-0 left-0 right-0 h-0 bg-gradient-to-t from-white/90 to-transparent" />
             </div>
 
-            {/* GLASS CONTENT */}
+            {/* CONTENT */}
             <div className="px-4 py-4 -mt-[60px] bg-white/65 backdrop-blur-[25px] rounded-t-[15px] shadow-[0_-10px_30px_rgba(0,0,0,0.15)] relative z-[2]">
               <h2 className="text-center text-[22px] font-semibold mb-1">
                 {profile.name}
               </h2>
-            {/* ID AND LAST SEEN - ROW */}
-             <div className="flex justify-between  items-center mb-2 text-[11px] text-gray-600 px-8">
+
+              <div className="flex justify-between items-center mb-2 text-[11px] text-gray-600 px-8">
                 <p>ID: {profile.idNumber}</p>
                 <p className="flex items-center gap-0.5">
                   <Eye size={12} /> {profile.lastSeen}
                 </p>
               </div>
 
-              {/* INFO PILLS */}
-              <div className="flex flex-wrap justify-center gap-2 ">
+              <div className="flex flex-wrap justify-center gap-2">
                 {[
                   profile.age,
                   profile.height,
@@ -124,28 +137,28 @@ export default function ProfileCard() {
                 ].map((v, i) => (
                   <span
                     key={i}
-                    className="px-1.5 py-1.5 rounded-[20px] bg-white/70 border border-black/8 text-[13px] "
+                    className="px-1.5 py-1.5 rounded-[20px] bg-white/70 border border-black/8 text-[13px]"
                   >
                     {v}
                   </span>
                 ))}
               </div>
 
-              {/* ACTION BUTTONS */}
-              <div className="flex gap-4 mt-[15px] items-center justify-center">
-                <button className="px-2 py-1 rounded-[20px] border border-red-200 bg-red-50 flex items-center justify-center gap-1.5 cursor-pointer font-semibold text-red-900">
+              <div className="flex gap-4 mt-[15px] justify-center">
+                <button className="px-2 py-1 rounded-[20px] border border-red-200 bg-red-50 flex items-center gap-1.5 font-semibold text-red-900">
                   <X size={18} /> Decline
                 </button>
 
-                <button className=" px-2 py-1 rounded-[20px] border border-green-200 bg-green-50 text-green-900 flex items-center justify-center gap-1.5 font-semibold cursor-pointer">
+                <button className="px-2 py-1 rounded-[20px] border border-green-200 bg-green-50 text-green-900 flex items-center gap-1.5 font-semibold">
                   <Heart size={18} /> Interest
                 </button>
               </div>
             </div>
-            
           </div>
         ))}
       </div>
     </div>
-  );
+  </div>
+);
+
 }
\ No newline at end of file
diff --git a/src/pages/UserDashboardHome.jsx b/src/pages/UserDashboardHome.jsx
index 8cab132..c4e5ccb 100644
--- a/src/pages/UserDashboardHome.jsx
+++ b/src/pages/UserDashboardHome.jsx
@@ -19,6 +19,7 @@ import ProfileCard from '../components/common/ProfileCard';
 import NewJoinedProfile from '../components/profiledashboard/NewJoinedProfile';
 import CustomerSupportCard from '../components/profiledashboard/CustomerSupportCard';
 import VideoSwiperGallery from '../components/profiledashboard/VideoSwiperGallery';
+import Profilecardemo from '../components/ui/ProfileCardDemo';
 
 
 const images = [
@@ -39,7 +40,7 @@ const UserDashboardHome = () => {
   return (
     <>
     <div className="custom-swiper-hero flex items-center justify-center p-4">
-      <div className="w-full max-w-7xl relative">
+      <div className="w-full max-w-15xl relative">
         {/* Left Arrow */}
         <button className="swiper-button-prev-custom absolute left-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
           <ChevronLeft className="w-6 h-6 text-white" />
@@ -82,7 +83,7 @@ const UserDashboardHome = () => {
         >
           {images.map((img, idx) => (
             <SwiperSlide key={idx}>
-              <div className="relative overflow-hidden rounded-3xl w-[100%] ">
+              <div className="relative overflow-hidden rounded-3xl w-[100%]">
                 <img
                   src={img}
                   alt={`Slide ${idx + 1}`}
@@ -106,109 +107,75 @@ const UserDashboardHome = () => {
     
 
       <style>{`
-    .custom-swiper-hero .swiper {
-      width: 100%;
-      overflow: visible;
-    }
+.custom-swiper-hero .swiper {
+  width: 100%;
+  margin: 0 auto;
+}
 
-    .custom-swiper-hero .swiper-slide {
-      width: 320px;
-      height: 320px;
-      transition: all 0.4s ease;
-      opacity: 1;
-      transform: scale(0.85);
-    }
+/* ================= MOBILE (≤768px) ================= */
+@media (max-width: 768px) {
+  .custom-swiper-hero .swiper {
+    overflow: hidden;
+  }
 
-    .custom-swiper-hero .swiper-slide-active {
-      width: 630px !important;
-      height: 320px !important;
-      opacity: 1;
-      transform: scale(1);
-      z-index: 2;
-    }
+  .custom-swiper-hero .swiper-slide {
+    width: 100% !important;
+    height: 200px;
+    transform: scale(1);
+    opacity: 1;
+  }
 
-    @media only screen and (max-width: 768px) {
-      .custom-swiper-hero .swiper-slide {
-        width: 300px;
-        height: 150px;
-      }
+  .custom-swiper-hero .swiper-slide-active {
+    width: 100% !important;
+    height: 200px !important;
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 
-      .custom-swiper-hero .swiper-slide-active {
-        width: 300px !important;
-        height: 150px !important;
-      }
-    }
+/* ================= TABLET & DESKTOP (≥769px) ================= */
+@media (min-width: 769px) {
+  .custom-swiper-hero .swiper {
+    overflow: visible;
+  }
 
-    .custom-swiper-hero .swiper-slide > div {
-      width: 100%;
-      height: 100%;
-    }
+  .custom-swiper-hero .swiper-wrapper {
+    align-items: center;
+  }
 
-    .custom-swiper-hero .swiper-button-prev-custom,
-    .custom-swiper-hero .swiper-button-next-custom {
-      cursor: pointer;
-    }
+  .custom-swiper-hero .swiper-slide {
+    width: 320px;
+    height: 320px;
+    transform: scale(1);           /* ❌ removed zoom out */
+    opacity: 1;                    /* ❌ removed fade */
+    transition: all 0.4s ease;
+  }
 
-    @media (max-width: 1024px) {
-      .custom-swiper-hero .swiper-slide {
-        width: 240px;
-        height: 340px;
-      }
+  .custom-swiper-hero .swiper-slide-active {
+    width: 630px !important;       /* center slide bigger */
+    height: 320px !important;
+    transform: scale(1);
+    opacity: 1;
+    z-index: 2;
+  }
+}
 
-      .custom-swiper-hero .swiper-slide-active {
-        width: 380px !important;
-        height: 480px !important;
-      }
-    }
+/* ================= COMMON ================= */
+.custom-swiper-hero .swiper-slide > div {
+  width: 100%;
+  height: 100%;
+}
 
-    @media (max-width: 768px) {
-      .custom-swiper-hero .swiper-slide {
-        width: 180px;
-        height: 280px;
-      }
+.custom-swiper-hero .swiper-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
-      .custom-swiper-hero .swiper-slide-active {
-        width: 300px !important;
-        height: 280px !important;
-      }
 
-      .custom-swiper-hero .swiper-button-prev-custom,
-      .custom-swiper-hero .swiper-button-next-custom {
-        width: 40px;
-        height: 40px;
-      }
-    }
 
-    @media (max-width: 480px) {
-      .custom-swiper-hero .swiper-slide {
-        width: 140px;
-        height: 220px;
-      }
 
-      .custom-swiper-hero .swiper-slide-active {
-        width: 300px !important;
-        height: 220px !important;
-      }
 
-      .custom-swiper-hero .swiper-button-prev-custom,
-      .custom-swiper-hero .swiper-button-next-custom {
-        width: 36px;
-        height: 36px;
-      }
-    }
-
-  /* Mobile Styles (for screens <= 768px) */
-        @media only screen and (max-width: 768px) {
-          .custom-swiper-hero .swiper-slide {
-            width: 100%;
-            height: 200px; /* Adjust the height for mobile */
-          }
-
-          .custom-swiper-hero .swiper-slide-active {
-            width: 100% !important;
-            height: 200px !important;
-          }
-        }
 
          /* Desktop Styles */
         // @media (min-width: 1024px) {
@@ -225,11 +192,11 @@ const UserDashboardHome = () => {
 
   `}</style>
     </div>
+<Profilecardemo/>
 
 
-
-    
-  <DailyRecommendedCard/>
+  {/* <DailyRecommendedCard/> */}
+  
     <ProfileCompletion/>
     {/* <DailyRecommendedCard/> */}