mageshwaran/thirukalyanamweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nithi code changed

Browse Source
This commit is contained in:
Nithish-stoic 2025-12-24 18:14:48 +05:30
parent b84898f904
commit d2cc8e2797
4 changed files with 98 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/profiledashboard/ProfileCompletion.jsx
View File

@ -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">

20
src/components/profiledashboard/VideoSwiperGallery.jsx
View File

@ -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;
}
`}</style>
</div>
);

44
src/components/ui/ProfileCardDemo.jsx
View File

@ -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]">
<h2 className="text-center text-[22px] font-semibold mb-3.5">
<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">
<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">
<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">
<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">
<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>

54
src/pages/UserDashboardHome.jsx
View File

@ -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/>
<CustomerSupportCard/>
{/* <NewJoinedProfile/> */}
{/* <CustomerSupportCard/> */}
<VideoSwiperGallery/>
</>
)