From d2cc8e279762a707ed2d0455cb39bd545388adc6 Mon Sep 17 00:00:00 2001 From: Nithish-stoic Date: Wed, 24 Dec 2025 18:14:48 +0530 Subject: [PATCH] nithi code changed --- .../profiledashboard/ProfileCompletion.jsx | 2 +- .../profiledashboard/VideoSwiperGallery.jsx | 20 +++++-- src/components/ui/ProfileCardDemo.jsx | 44 ++++++++++----- src/pages/UserDashboardHome.jsx | 54 +++++++++++++++++-- 4 files changed, 98 insertions(+), 22 deletions(-) diff --git a/src/components/profiledashboard/ProfileCompletion.jsx b/src/components/profiledashboard/ProfileCompletion.jsx index 111c187..8afccc8 100644 --- a/src/components/profiledashboard/ProfileCompletion.jsx +++ b/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 */}
diff --git a/src/components/profiledashboard/VideoSwiperGallery.jsx b/src/components/profiledashboard/VideoSwiperGallery.jsx index cfdd891..da674d6 100644 --- a/src/components/profiledashboard/VideoSwiperGallery.jsx +++ b/src/components/profiledashboard/VideoSwiperGallery.jsx @@ -267,10 +267,11 @@ const VideoSwiperGallery = () => { disableOnInteraction: false, pauseOnMouseEnter: true }} - pagination={{ - clickable: true, - dynamicBullets: true - }} + // pagination={{ + // clickable: 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; + } `}
); diff --git a/src/components/ui/ProfileCardDemo.jsx b/src/components/ui/ProfileCardDemo.jsx index f753298..a1f3918 100644 --- a/src/components/ui/ProfileCardDemo.jsx +++ b/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 ( -
+
{/* Grid Container - max-w-[1400px] with 4 columns */} -
+
{profiles.map((profile) => (
{/* IMAGE SECTION */}
@@ -87,16 +99,24 @@ export default function ProfileCardDemo() {
{/* GLASS CONTENT */} -
-

+
+

{profile.name}

+ {/* ID AND LAST SEEN - ROW */} +
+

ID: {profile.idNumber}

+

+ {profile.lastSeen} +

+
{/* INFO PILLS */}
{[ profile.age, profile.height, + profile.salary + " LPA", profile.location, profile.caste, profile.zodiac1, @@ -104,7 +124,7 @@ export default function ProfileCardDemo() { ].map((v, i) => ( {v} @@ -112,12 +132,12 @@ export default function ProfileCardDemo() {
{/* ACTION BUTTONS */} -
- -
diff --git a/src/pages/UserDashboardHome.jsx b/src/pages/UserDashboardHome.jsx index a378e47..8cab132 100644 --- a/src/pages/UserDashboardHome.jsx +++ b/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) => ( @@ -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; + // } + // } + `}
+ + + + - + {/* */} - +{/* */} - - +{/* */} +{/* */} )