dashboard
This commit is contained in:
parent
1507771591
commit
221ea3057b
316
src/components/profiledashboard/DailyRecommendedCard.jsx
Normal file
316
src/components/profiledashboard/DailyRecommendedCard.jsx
Normal file
@ -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;
|
||||
140
src/components/profiledashboard/MatchingList.jsx
Normal file
140
src/components/profiledashboard/MatchingList.jsx
Normal file
@ -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
|
||||
79
src/components/profiledashboard/MatrimonyArticles.jsx
Normal file
79
src/components/profiledashboard/MatrimonyArticles.jsx
Normal file
@ -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
|
||||
61
src/components/profiledashboard/PaidMemberCard.jsx
Normal file
61
src/components/profiledashboard/PaidMemberCard.jsx
Normal file
@ -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
|
||||
168
src/components/profiledashboard/ProfileCompletion.jsx
Normal file
168
src/components/profiledashboard/ProfileCompletion.jsx
Normal file
@ -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
|
||||
@ -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>{`
|
||||
.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/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user