From 221ea3057be4677c971ed73fd83b4afd2235390d Mon Sep 17 00:00:00 2001
From: Meenadeveloper <meenaweb1997@gmail.com>
Date: Mon, 24 Nov 2025 18:40:48 +0530
Subject: [PATCH] dashboard

---
 .../profiledashboard/DailyRecommendedCard.jsx | 316 ++++++++++++++++++
 .../profiledashboard/MatchingList.jsx         | 140 ++++++++
 .../profiledashboard/MatrimonyArticles.jsx    |  79 +++++
 .../profiledashboard/PaidMemberCard.jsx       |  61 ++++
 .../profiledashboard/ProfileCompletion.jsx    | 168 ++++++++++
 src/pages/UserDashboardHome.jsx               | 110 +++++-
 6 files changed, 871 insertions(+), 3 deletions(-)
 create mode 100644 src/components/profiledashboard/DailyRecommendedCard.jsx
 create mode 100644 src/components/profiledashboard/MatchingList.jsx
 create mode 100644 src/components/profiledashboard/MatrimonyArticles.jsx
 create mode 100644 src/components/profiledashboard/PaidMemberCard.jsx
 create mode 100644 src/components/profiledashboard/ProfileCompletion.jsx

diff --git a/src/components/profiledashboard/DailyRecommendedCard.jsx b/src/components/profiledashboard/DailyRecommendedCard.jsx
new file mode 100644
index 0000000..a7c966c
--- /dev/null
+++ b/src/components/profiledashboard/DailyRecommendedCard.jsx
@@ -0,0 +1,316 @@
+import React, { useRef } from 'react';
+import { motion } from 'framer-motion';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay, EffectCoverflow } from 'swiper/modules';
+import { Crown, Bookmark, User, Briefcase, MapPin, X, Send, ChevronLeft, ChevronRight } from 'lucide-react';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/effect-coverflow';
+
+const DailyRecommendedCard = () => {
+  const swiperRef = useRef(null);
+
+  // Sample profile data
+  const profiles = [
+    {
+      id: 1,
+      name: 'Selva Kumar . R',
+      userId: 'TK52586A',
+      lastSeen: '14 Nov 25',
+      age: 23,
+      height: '5\'2"',
+      religion: 'Hindu / Agamudayar / Thuluva Vellal',
+      education: 'BCA, Data Analyst',
+      location: 'Vellore, Tamil Nadu',
+      image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop',
+      isPremium: true
+    },
+    {
+      id: 2,
+      name: 'Priya Sharma',
+      userId: 'TK52587B',
+      lastSeen: '15 Nov 25',
+      age: 25,
+      height: '5\'4"',
+      religion: 'Hindu / Brahmin / Iyer',
+      education: 'MBA, Marketing Manager',
+      location: 'Chennai, Tamil Nadu',
+      image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop',
+      isPremium: true
+    },
+    {
+      id: 3,
+      name: 'Rahul Venkat',
+      userId: 'TK52588C',
+      lastSeen: '16 Nov 25',
+      age: 28,
+      height: '5\'10"',
+      religion: 'Hindu / Mudaliar / Arcot',
+      education: 'B.Tech, Software Engineer',
+      location: 'Bangalore, Karnataka',
+      image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=500&fit=crop',
+      isPremium: false
+    },
+    {
+      id: 4,
+      name: 'Aishwarya Reddy',
+      userId: 'TK52589D',
+      lastSeen: '17 Nov 25',
+      age: 26,
+      height: '5\'5"',
+      religion: 'Hindu / Reddy / Telangana',
+      education: 'CA, Chartered Accountant',
+      location: 'Hyderabad, Telangana',
+      image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop',
+      isPremium: true
+    },
+    {
+      id: 5,
+      name: 'Karthik Mohan',
+      userId: 'TK52590E',
+      lastSeen: '18 Nov 25',
+      age: 27,
+      height: '5\'8"',
+      religion: 'Hindu / Nadar / Tamil',
+      education: 'M.Tech, Civil Engineer',
+      location: 'Madurai, Tamil Nadu',
+      image: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=500&fit=crop',
+      isPremium: false
+    },
+    {
+      id: 6,
+      name: 'Divya Lakshmi',
+      userId: 'TK52591F',
+      lastSeen: '19 Nov 25',
+      age: 24,
+      height: '5\'3"',
+      religion: 'Hindu / Pillai / Tamil',
+      education: 'B.Com, HR Executive',
+      location: 'Coimbatore, Tamil Nadu',
+      image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=500&fit=crop',
+      isPremium: true
+    }
+  ];
+
+  // Profile Card Component
+  const ProfileCard = ({ profile }) => (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5 }}
+      className="bg-white rounded-2xl shadow-xl overflow-hidden h-full flex flex-col"
+    >
+      {/* Premium Badge */}
+      {profile.isPremium && (
+        <motion.div
+          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"
+        >
+          <Crown className="w-5 h-5 text-white" />
+        </motion.div>
+      )}
+
+      {/* Shortlist Button */}
+      <motion.button
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.9 }}
+        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"
+      >
+        <Bookmark className="w-4 h-4" />
+        <span className="text-sm font-medium">Shortlist</span>
+      </motion.button>
+
+      {/* Profile Image */}
+      <div className="relative h-56 sm:h-64 overflow-hidden flex-shrink-0">
+        <img
+          src={profile.image}
+          alt={profile.name}
+          className="w-full h-full object-cover hover:scale-110 transition-transform duration-500"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+      </div>
+
+      {/* Profile Info */}
+      <div className="p-4 sm:p-6 space-y-3 sm:space-y-4 flex-grow flex flex-col">
+        <div className="flex-shrink-0">
+          <h2 className="text-xl sm:text-2xl font-bold text-gray-900 line-clamp-1">{profile.name}</h2>
+          <p className="text-xs sm:text-sm text-gray-500 mt-1 line-clamp-1">
+            ID : {profile.userId} <span className="ml-2">Last seen {profile.lastSeen}</span>
+          </p>
+        </div>
+
+        {/* Details */}
+        <div className="space-y-2 sm:space-y-3 flex-grow">
+          <div className="flex items-center space-x-3 text-gray-700">
+            <User className="w-4 h-4 sm:w-5 sm:h-5 text-blue-500 flex-shrink-0" />
+            <span className="text-xs sm:text-sm line-clamp-1">{profile.age} Yrs, {profile.height}</span>
+          </div>
+
+          <div className="flex items-start space-x-3 text-gray-700">
+            <div className="w-4 h-4 sm:w-5 sm:h-5 bg-pink-100 rounded flex items-center justify-center mt-0.5 flex-shrink-0">
+              <div className="w-2 h-2 sm:w-3 sm:h-3 bg-pink-500 rounded" />
+            </div>
+            <span className="text-xs sm:text-sm line-clamp-2">{profile.religion}</span>
+          </div>
+
+          <div className="flex items-center space-x-3 text-gray-700">
+            <Briefcase className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-500 flex-shrink-0" />
+            <span className="text-xs sm:text-sm line-clamp-1">{profile.education}</span>
+          </div>
+
+          <div className="flex items-center space-x-3 text-gray-700">
+            <MapPin className="w-4 h-4 sm:w-5 sm:h-5 text-red-500 flex-shrink-0" />
+            <span className="text-xs sm:text-sm line-clamp-1">{profile.location}</span>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="grid grid-cols-2 gap-3 sm:gap-4 pt-3 sm:pt-4 flex-shrink-0">
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="flex items-center justify-center space-x-1 sm:space-x-2 px-3 sm:px-4 py-2 sm:py-3 bg-red-50 text-red-600 rounded-xl font-semibold hover:bg-red-100 transition-colors text-xs sm:text-base"
+          >
+            <X className="w-4 h-4 sm:w-5 sm:h-5" />
+            <span className="hidden sm:inline">Don't Show</span>
+            <span className="sm:hidden">Skip</span>
+          </motion.button>
+
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="flex items-center justify-center space-x-1 sm:space-x-2 px-3 sm:px-4 py-2 sm:py-3 bg-green-100 text-green-700 rounded-xl font-semibold hover:bg-green-200 transition-colors text-xs sm:text-base"
+          >
+            <Send className="w-4 h-4 sm:w-5 sm:h-5" />
+            <span className="hidden sm:inline">Send Interest</span>
+            <span className="sm:hidden">Interest</span>
+          </motion.button>
+        </div>
+      </div>
+    </motion.div>
+  );
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50 py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-12"
+        >
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-3">
+            Daily Recommended
+          </h1>
+          <p className="text-gray-600 text-lg">Find your perfect match today</p>
+        </motion.div>
+
+        {/* Swiper Container */}
+        <div className="relative px-4 sm:px-12">
+          <Swiper
+            ref={swiperRef}
+            modules={[Navigation, Pagination, Autoplay, EffectCoverflow]}
+            spaceBetween={30}
+            slidesPerView={1}
+            autoplay={{
+              delay: 5000,
+              disableOnInteraction: false,
+              pauseOnMouseEnter: true
+            }}
+            pagination={{
+              clickable: true,
+              dynamicBullets: true
+            }}
+            loop={true}
+            speed={800}
+            breakpoints={{
+              640: {
+                slidesPerView: 2,
+                spaceBetween: 20
+              },
+              1024: {
+                slidesPerView: 3,
+                spaceBetween: 25
+              },
+              1280: {
+                slidesPerView: 3,
+                spaceBetween: 30
+              }
+            }}
+            className="pb-16"
+          >
+            {profiles.map((profile) => (
+              <SwiperSlide key={profile.id}>
+                <ProfileCard profile={profile} />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+
+          {/* Custom Navigation Buttons */}
+          <motion.button
+            whileHover={{ scale: 1.1, x: -5 }}
+            whileTap={{ scale: 0.9 }}
+            onClick={() => swiperRef.current?.swiper.slidePrev()}
+            className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white p-4 rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
+          >
+            <ChevronLeft className="w-6 h-6 text-gray-700" />
+          </motion.button>
+
+          <motion.button
+            whileHover={{ scale: 1.1, x: 5 }}
+            whileTap={{ scale: 0.9 }}
+            onClick={() => swiperRef.current?.swiper.slideNext()}
+            className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white p-4 rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
+          >
+            <ChevronRight className="w-6 h-6 text-gray-700" />
+          </motion.button>
+        </div>
+
+        {/* View All Button */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5 }}
+          className="text-center mt-12"
+        >
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="px-8 py-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-shadow"
+          >
+            View All Recommendations
+          </motion.button>
+        </motion.div>
+      </div>
+
+      {/* Custom Swiper Styles */}
+      <style jsx global>{`
+        .swiper-pagination-bullet {
+          width: 10px;
+          height: 10px;
+          background: #ec4899;
+          opacity: 0.5;
+        }
+        
+        .swiper-pagination-bullet-active {
+          opacity: 1;
+          width: 30px;
+          border-radius: 5px;
+        }
+
+        .swiper-slide {
+          height: auto;
+          display: flex;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default DailyRecommendedCard;
\ No newline at end of file
diff --git a/src/components/profiledashboard/MatchingList.jsx b/src/components/profiledashboard/MatchingList.jsx
new file mode 100644
index 0000000..c927ce1
--- /dev/null
+++ b/src/components/profiledashboard/MatchingList.jsx
@@ -0,0 +1,140 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import { MapPin, User } from "lucide-react";
+
+
+const profiles = [
+  {
+    name: "Selva Kumar . R",
+    id: "TK52586A",
+    lastSeen: "14 Nov 25",
+    age: "23 Yrs",
+    height: `5'2"`,
+    location: "Vellore, Tamil Nadu",
+    img: "https://images.unsplash.com/photo-1503341733017-1903baea046d?auto=format&fit=crop&w=800&q=80"
+  },
+  {
+    name: "Arun Raj . M",
+    id: "TK88421B",
+    lastSeen: "10 Nov 25",
+    age: "27 Yrs",
+    height: `5'8"`,
+    location: "Chennai, Tamil Nadu",
+    img: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?auto=format&fit=crop&w=800&q=80"
+  },
+  {
+    name: "Dinesh Kumar",
+    id: "TK99214C",
+    lastSeen: "12 Nov 25",
+    age: "26 Yrs",
+    height: `5'6"`,
+    location: "Coimbatore, Tamil Nadu",
+    img: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?auto=format&fit=crop&w=800&q=80"
+  },
+  {
+    name: "Sathish . R",
+    id: "TK55221Z",
+    lastSeen: "15 Nov 25",
+    age: "24 Yrs",
+    height: `5'7"`,
+    location: "Salem, Tamil Nadu",
+    img: "https://images.unsplash.com/photo-1503341455253-b2e723bb3dbb?auto=format&fit=crop&w=800&q=80"
+  },
+   {
+    name: "Sathish . R",
+    id: "TK55221Z",
+    lastSeen: "15 Nov 25",
+    age: "24 Yrs",
+    height: `5'7"`,
+    location: "Salem, Tamil Nadu",
+    img: "https://images.unsplash.com/photo-1503341455253-b2e723bb3dbb?auto=format&fit=crop&w=800&q=80"
+  },
+   {
+    name: "Sathish . R",
+    id: "TK55221Z",
+    lastSeen: "15 Nov 25",
+    age: "24 Yrs",
+    height: `5'7"`,
+    location: "Salem, Tamil Nadu",
+    img: "https://images.unsplash.com/photo-1503341455253-b2e723bb3dbb?auto=format&fit=crop&w=800&q=80"
+  }
+];
+
+const MatchingList = () => {
+  return (
+    <>
+       <div className="custom-match-swiper max-w-7xl mx-auto px-4 py-10">
+      <Swiper
+        modules={[Navigation]}
+        navigation={true}
+        spaceBetween={20}
+        slidesPerView={1}
+        breakpoints={{
+          640: { slidesPerView: 2 },   // tablet
+          1024: { slidesPerView: 4 }   // desktop
+        }}
+        loop={false}
+      >
+        {profiles.map((p, i) => (
+          <SwiperSlide key={i}>
+            <div className="bg-white rounded-2xl shadow-md overflow-hidden border">
+              {/* Image */}
+              <div className="relative">
+                <img
+                  src={p.img}
+                  alt={p.name}
+                  className="w-full h-56 object-cover"
+                />
+
+                {/* Crown Icon */}
+                <div className="absolute top-3 left-3 bg-orange-500 text-white p-2 rounded-full text-xs font-bold">
+                  👑
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="p-4">
+                <h3 className="text-xl font-bold">{p.name}</h3>
+
+                <p className="text-gray-700 mt-1">
+                  <span className="font-semibold">ID :</span> {p.id}
+                  <span className="text-gray-500 text-sm ml-2">
+                    Last seen {p.lastSeen}
+                  </span>
+                </p>
+
+                <div className="flex items-center gap-2 mt-3 text-gray-700">
+                  <User size={18} className="text-blue-600" />
+                  <span>
+                    {p.age}, {p.height}
+                  </span>
+                </div>
+
+                <div className="flex items-center gap-2 mt-2 text-gray-700">
+                  <MapPin size={18} className="text-red-500" />
+                  <span>{p.location}</span>
+                </div>
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      <style>{`
+        .custom-match-swiper .swiper-button-prev,
+        .custom-match-swiper .swiper-button-next {
+          color: #000;
+          background: #fff;
+          padding: 20px;
+          border-radius: 50%;
+          box-shadow: 0 0 10px rgba(0,0,0,0.15);
+        }
+      `}</style>
+    </div>
+    </>
+  )
+}
+
+export default MatchingList
diff --git a/src/components/profiledashboard/MatrimonyArticles.jsx b/src/components/profiledashboard/MatrimonyArticles.jsx
new file mode 100644
index 0000000..dc4ac64
--- /dev/null
+++ b/src/components/profiledashboard/MatrimonyArticles.jsx
@@ -0,0 +1,79 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+
+const articleData = [
+  {
+    title: "How to Choose the Right Life Partner",
+    img: "https://images.unsplash.com/photo-1529634806980-89c3b5aa0b3c?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    title: "Top 10 Qualities for a Happy Marriage",
+    img: "https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    title: "Expert Tips for a Strong Relationship",
+    img: "https://images.unsplash.com/photo-1509587584298-0f3b3d8f7c77?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    title: "How to Build Trust in Marriage",
+    img: "https://images.unsplash.com/photo-1504196606672-aef5c9cefc92?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    title: "Communication Secrets for Couples",
+    img: "https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=800&q=80",
+  },
+];
+const MatrimonyArticles = () => {
+  return (
+    <>
+      <div className="custom-article-swiper py-10 px-4 max-w-7xl mx-auto">
+      <h2 className="text-2xl md:text-3xl font-bold mb-6 text-center">
+        Matrimony Articles
+      </h2>
+
+      <Swiper
+        modules={[Navigation]}
+        navigation={true}
+        spaceBetween={20}
+        breakpoints={{
+          0: { slidesPerView: 1 },       // mobile
+          640: { slidesPerView: 2 },     // tablet
+          1024: { slidesPerView: 4 },    // large
+        }}
+        loop={true}
+        className="mySwiper"
+      >
+        {articleData.map((item, index) => (
+          <SwiperSlide key={index}>
+            <div className="rounded-xl overflow-hidden shadow-lg bg-white">
+              <img
+                src={item.img}
+                className="w-full h-48 object-cover"
+                alt={item.title}
+              />
+              <div className="p-4">
+                <h3 className="text-lg font-semibold">{item.title}</h3>
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      <style>{`
+        .custom-article-swiper .swiper-button-prev,
+        .custom-article-swiper .swiper-button-next {
+          color: #000;
+          background: white;
+          padding: 20px;
+          border-radius: 50%;
+          box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+      `}</style>
+    </div>
+    </>
+  )
+}
+
+export default MatrimonyArticles
diff --git a/src/components/profiledashboard/PaidMemberCard.jsx b/src/components/profiledashboard/PaidMemberCard.jsx
new file mode 100644
index 0000000..bb66fa6
--- /dev/null
+++ b/src/components/profiledashboard/PaidMemberCard.jsx
@@ -0,0 +1,61 @@
+
+const PaidMemberCard = () => {
+  return (
+    <>
+      <div className="max-w-7xl mx-auto px-4 py-10">
+      <div className="bg-white rounded-3xl shadow-md border p-6 md:p-10 flex flex-col md:flex-row items-center gap-10">
+
+        {/* Left Content */}
+        <div className="flex-1">
+          <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
+            Become a paid member
+          </h2>
+
+          <p className="text-lg md:text-xl mt-3 text-gray-800">
+            Get up to <span className="text-orange-600 font-bold">58% OFF</span> on paid membership!
+          </p>
+
+          {/* Features */}
+          <ul className="mt-5 space-y-3 text-gray-700">
+            <li className="flex items-center gap-3">
+              <span className="text-blue-600 text-xl">📞</span>
+              Call/WhatsApp matches
+            </li>
+
+            <li className="flex items-center gap-3">
+              <span className="text-blue-600 text-xl">💬</span>
+              Unlimited messages
+            </li>
+
+            <li className="flex items-center gap-3">
+              <span className="text-blue-600 text-xl">👍</span>
+              Higher chances of response
+            </li>
+
+            <li className="flex items-center gap-3">
+              <span className="text-blue-600 text-xl">🔍</span>
+              View and match horoscopes
+            </li>
+          </ul>
+
+          {/* Button */}
+          <button className="mt-6 bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full text-lg transition-all">
+            See membership plans
+          </button>
+        </div>
+
+        {/* Right Side Image */}
+        <div className="flex-1 flex justify-center">
+          <img
+            src="https://images.unsplash.com/photo-1589561084283-930aa7b1ce50?auto=format&fit=crop&w=700&q=80"
+            alt="Paid Member Offer"
+            className="w-full max-w-xs md:max-w-sm object-contain"
+          />
+        </div>
+      </div>
+    </div>
+    </>
+  )
+}
+
+export default PaidMemberCard
diff --git a/src/components/profiledashboard/ProfileCompletion.jsx b/src/components/profiledashboard/ProfileCompletion.jsx
new file mode 100644
index 0000000..f5249b2
--- /dev/null
+++ b/src/components/profiledashboard/ProfileCompletion.jsx
@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Camera, Sparkles, Users } from 'lucide-react';
+const ProfileCompletion = () => {
+
+     const [completeness, setCompleteness] = useState(30);
+
+  const cards = [
+    {
+      id: 1,
+      icon: Camera,
+      title: 'Add Photo(s)',
+      bgColor: 'bg-green-50',
+      iconColor: 'text-green-600',
+      borderColor: 'border-green-200'
+    },
+    {
+      id: 2,
+      icon: Sparkles,
+      title: 'Add Horoscope',
+      bgColor: 'bg-purple-50',
+      iconColor: 'text-purple-600',
+      borderColor: 'border-purple-200'
+    },
+    {
+      id: 3,
+      icon: Users,
+      title: 'Family Details',
+      bgColor: 'bg-orange-50',
+      iconColor: 'text-orange-600',
+      borderColor: 'border-orange-200'
+    }
+  ];
+
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  const item = {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0 }
+  };
+  return (
+    <>
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-4 sm:p-6 lg:p-8">
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="max-w-6xl mx-auto"
+      >
+        {/* Header Section */}
+        <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8 mb-6">
+          <motion.h1
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.2, duration: 0.5 }}
+            className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4"
+          >
+            Complete Your Profile
+          </motion.h1>
+
+          {/* Progress Bar Section */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+            className="space-y-3"
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-sm sm:text-base text-gray-600 font-medium">
+                Profile completeness score
+              </span>
+              <motion.span
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ delay: 0.6, type: 'spring', stiffness: 200 }}
+                className="text-lg sm:text-xl font-bold text-gray-900"
+              >
+                {completeness}%
+              </motion.span>
+            </div>
+
+            {/* Progress Bar */}
+            <div className="relative h-3 bg-gray-200 rounded-full overflow-hidden">
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${completeness}%` }}
+                transition={{ delay: 0.8, duration: 1, ease: 'easeOut' }}
+                className="absolute top-0 left-0 h-full bg-gradient-to-r from-red-500 to-red-600 rounded-full"
+              />
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Cards Section */}
+        <motion.div
+          variants={container}
+          initial="hidden"
+          animate="show"
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6"
+        >
+          {cards.map((card, index) => (
+            <motion.div
+              key={card.id}
+              variants={item}
+              whileHover={{ scale: 1.05, y: -5 }}
+              whileTap={{ scale: 0.98 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+              className={`${card.bgColor} ${card.borderColor} border-2 rounded-2xl p-6 cursor-pointer shadow-md hover:shadow-xl transition-shadow duration-300`}
+            >
+              <div className="flex items-center space-x-4">
+                {/* Icon Container */}
+                <motion.div
+                  initial={{ rotate: -180, opacity: 0 }}
+                  animate={{ rotate: 0, opacity: 1 }}
+                  transition={{ delay: 0.9 + index * 0.1, duration: 0.5 }}
+                  className={`${card.bgColor} p-3 rounded-xl border ${card.borderColor}`}
+                >
+                  <card.icon className={`w-8 h-8 ${card.iconColor}`} />
+                </motion.div>
+
+                {/* Text */}
+                <motion.h3
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 1 + index * 0.1, duration: 0.4 }}
+                  className="text-lg sm:text-xl font-semibold text-gray-900"
+                >
+                  {card.title}
+                </motion.h3>
+              </div>
+
+              {/* Hover indicator */}
+              <motion.div
+                initial={{ width: 0 }}
+                whileHover={{ width: '100%' }}
+                transition={{ duration: 0.3 }}
+                className={`h-1 ${card.iconColor.replace('text', 'bg')} mt-4 rounded-full`}
+              />
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Additional Info Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 1.5, duration: 0.6 }}
+          className="mt-8 text-center"
+        >
+          <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>
+    </div>
+    </>
+  )
+}
+
+export default ProfileCompletion
diff --git a/src/pages/UserDashboardHome.jsx b/src/pages/UserDashboardHome.jsx
index 53f8b49..59f39d4 100644
--- a/src/pages/UserDashboardHome.jsx
+++ b/src/pages/UserDashboardHome.jsx
@@ -3,6 +3,11 @@ import { Navigation, Autoplay } from 'swiper/modules';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import 'swiper/css';
 import 'swiper/css/navigation';
+import ProfileCompletion from '../components/profiledashboard/ProfileCompletion';
+import DailyRecommendedCard from '../components/profiledashboard/DailyRecommendedCard';
+import MatrimonyArticles from '../components/profiledashboard/MatrimonyArticles';
+import MatchingList from '../components/profiledashboard/MatchingList';
+import PaidMemberCard from '../components/profiledashboard/PaidMemberCard';
 
 const images = [
     
@@ -20,7 +25,7 @@ const images = [
 const UserDashboardHome = () => {
   return (
     <>
-    <div className=" flex items-center justify-center p-4">
+    <div className="custom-swiper-hero flex items-center justify-center p-4">
       <div className="w-full max-w-7xl 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">
@@ -66,7 +71,7 @@ const UserDashboardHome = () => {
         </Swiper>
       </div>
 
-      <style>{`
+      {/* <style>{`
         .swiper {
           width: 100%;
         //   padding: 60px 80px;
@@ -168,9 +173,108 @@ const UserDashboardHome = () => {
             height: 36px;
           }
         }
-      `}</style>
+      `}</style> */}
+
+      <style>{`
+    .custom-swiper-hero .swiper {
+      width: 100%;
+      overflow: visible;
+    }
+
+    .custom-swiper-hero .swiper-slide {
+      width: 320px;
+      height: 320px;
+      transition: all 0.4s ease;
+      opacity: 1;
+      transform: scale(0.85);
+    }
+
+    .custom-swiper-hero .swiper-slide-active {
+      width: 630px !important;
+      height: 320px !important;
+      opacity: 1;
+      transform: scale(1);
+      z-index: 2;
+    }
+
+    @media only screen and (max-width: 768px) {
+      .custom-swiper-hero .swiper-slide {
+        width: 300px;
+        height: 150px;
+      }
+
+      .custom-swiper-hero .swiper-slide-active {
+        width: 300px !important;
+        height: 150px !important;
+      }
+    }
+
+    .custom-swiper-hero .swiper-slide > div {
+      width: 100%;
+      height: 100%;
+    }
+
+    .custom-swiper-hero .swiper-button-prev-custom,
+    .custom-swiper-hero .swiper-button-next-custom {
+      cursor: pointer;
+    }
+
+    @media (max-width: 1024px) {
+      .custom-swiper-hero .swiper-slide {
+        width: 240px;
+        height: 340px;
+      }
+
+      .custom-swiper-hero .swiper-slide-active {
+        width: 380px !important;
+        height: 480px !important;
+      }
+    }
+
+    @media (max-width: 768px) {
+      .custom-swiper-hero .swiper-slide {
+        width: 180px;
+        height: 280px;
+      }
+
+      .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;
+      }
+    }
+  `}</style>
     </div>
 
+    <ProfileCompletion/>
+    <DailyRecommendedCard/>
+
+    <MatrimonyArticles/>
+<MatchingList/>
+<PaidMemberCard/>
     </>
   )
 }