dashboard

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/>
     </>
   )
 }