nithi code changed

src/components/profiledashboard/ProfileCompletion.jsx

@@ -65,7 +65,7 @@ const ProfileCompletion = () => {
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
-          className="max-w-6xl mx-auto"
+          className="max-w-9xl mx-auto"
         >
           {/* Header Section */}
           <div className="bg-green-50 rounded-2xl border border-1 border-gray-200  p-6 sm:p-8 mb-6">

src/components/profiledashboard/VideoSwiperGallery.jsx

@@ -267,10 +267,11 @@ const VideoSwiperGallery = () => {
               disableOnInteraction: false,
               pauseOnMouseEnter: true
             }}
-            pagination={{
+            // pagination={{
-              clickable: true,
+            //   clickable: true,
-              dynamicBullets: true
+            //   dynamicBullets: true,
-            }}
+            //    className: 'custom-pagination'
+            // }}
             loop={true}
             speed={800}
             breakpoints={{
@@ -360,6 +361,17 @@ const VideoSwiperGallery = () => {
           height: auto;
           display: flex;
         }
+
+         /* Custom Pagination Position */
+        .custom-pagination {
+          position: absolute;
+          top: 200px;  /* Adjusted top position */
+          left: 0;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          z-index: 10;
+        }
       `}</style>
     </div>
   );

src/components/ui/ProfileCardDemo.jsx

@@ -1,17 +1,20 @@
 import React from "react";
-import { Heart, X, Crown, Bookmark } from "lucide-react";
+import { Heart, X, Crown, Bookmark, Eye } from "lucide-react";
 // Import your images
 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";
 
-export default function ProfileCardDemo() {
+export default function ProfileCard() {
   // Sample data for multiple cards with image paths
   const profiles = [
     {
       id: 1,
       name: "Jerome Bell",
+      idNumber: "KI2847596",
+      lastSeen: "4 Nov 2025",
+      salary: "5-10",
       age: "22 yrs",
       height: "5'2\"",
       location: "Chennai",
@@ -23,9 +26,12 @@ export default function ProfileCardDemo() {
     {
       id: 2,
       name: "Neha Singh",
+      idNumber: "KI2847597",
+      lastSeen: "5 Nov 2025",
+      salary: "8-12",
       age: "26 yrs",
       height: "5'6\"",
-      location: "Delhi",
+      location: "hyderabad",
       caste: "Brahmin",
       zodiac1: "Aries",
       zodiac2: "Scorpio",
@@ -34,6 +40,9 @@ export default function ProfileCardDemo() {
     {
       id: 3,
       name: "Priya Sharma",
+      idNumber: "KI2847598",
+      lastSeen: "3 Nov 2025",
+      salary: "6-11",
       age: "24 yrs",
       height: "5'4\"",
       location: "Mumbai",
@@ -45,6 +54,9 @@ export default function ProfileCardDemo() {
     {
       id: 4,
       name: "Kavya Iyer",
+      idNumber: "KI2847599",
+      lastSeen: "2 Nov 2025",
+      salary: "7-10",
       age: "23 yrs",
       height: "5'3\"",
       location: "Bangalore",
@@ -56,13 +68,13 @@ export default function ProfileCardDemo() {
   ];
 
   return (
-    <div className=" flex justify-center items-center  py-8 md:px-4">
+    <div className="min-h-screen flex justify-center items-center  py-8 px-4">
       {/* Grid Container - max-w-[1400px] with 4 columns */}
-      <div className="w-full max-w-[1200px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      <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-2xl"
+            className="w-full rounded-[28px] overflow-hidden bg-white shadow-md "
           >
             {/* IMAGE SECTION */}
             <div className="relative">
@@ -87,16 +99,24 @@ export default function ProfileCardDemo() {
             </div>
 
             {/* GLASS CONTENT */}
-            <div className="px-4 py-[12px] -mt-[60px] bg-white/65 backdrop-blur-[25px] rounded-t-[15px] shadow-[0_-10px_30px_rgba(0,0,0,0.15)] relative z-[2]">
+            <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-3.5">
+              <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">
+                <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 ">
                 {[
                   profile.age,
                   profile.height,
+                  profile.salary + " LPA",
                   profile.location,
                   profile.caste,
                   profile.zodiac1,
@@ -104,7 +124,7 @@ export default function ProfileCardDemo() {
                 ].map((v, i) => (
                   <span
                     key={i}
-                    className="px-3.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>
@@ -112,12 +132,12 @@ export default function ProfileCardDemo() {
               </div>
 
               {/* ACTION BUTTONS */}
-              <div className="flex gap-3 mt-[15px] items-center justify-center">
+              <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">
+                <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">
                   <X size={18} /> Decline
                 </button>
 
-                <button className=" px-2 py-1 rounded-[20px] border border-green-200 bg-green-100 text-green-900 flex items-center justify-center gap-1.5 font-medium cursor-pointer">
+                <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">
                   <Heart size={18} /> Interest
                 </button>
               </div>

src/pages/UserDashboardHome.jsx

@@ -58,7 +58,7 @@ const UserDashboardHome = () => {
           }}
           grabCursor={true}
           centeredSlides={true}
-          slidesPerView="auto"
+         slidesPerView={3}
           spaceBetween={10}
           autoplay={{
             delay: 3000,
@@ -66,6 +66,19 @@ const UserDashboardHome = () => {
           }}
           loop={true}
           className="mySwiper"
+
+           breakpoints={{
+            // When screen width is 768px or less, show 1 slide per view
+            768: {
+              slidesPerView: 1,
+              spaceBetween: 20, // Space between slides on mobile
+            },
+            // When screen width is larger than 768px, show 3 slides per view
+            1024: {
+              slidesPerView: 3,
+              spaceBetween: 10, // Space between slides on desktop
+            },
+          }}
         >
           {images.map((img, idx) => (
             <SwiperSlide key={idx}>
@@ -183,18 +196,49 @@ const UserDashboardHome = () => {
         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) {
+        //   .custom-swiper-hero .swiper-slide {
+        //     width: 100%;
+        //     height: 400px; /* Adjust the height for desktop */
+        //   }
+
+        //   .custom-swiper-hero .swiper-slide-active {
+        //     width: 100% !important;
+        //     height: 400px !important;
+        //   }
+        // }
+
   `}</style>
     </div>
 
+
+
+    
+  <DailyRecommendedCard/>
     <ProfileCompletion/>
-    <DailyRecommendedCard/>
+    {/* <DailyRecommendedCard/> */}
 
     <MatrimonyArticles/>
 <MatchingList/>
-<PaidMemberCard/>
+{/* <PaidMemberCard/> */}
 
-<NewJoinedProfile/>
+{/* <NewJoinedProfile/> */}
-<CustomerSupportCard/>
+{/* <CustomerSupportCard/> */}
 <VideoSwiperGallery/>
     </>
   )