profile pages done
This commit is contained in:
parent
221ea3057b
commit
8a670b461a
46
package-lock.json
generated
46
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@lottiefiles/dotlottie-react": "^0.17.8",
|
||||
"@mui/icons-material": "^7.3.5",
|
||||
"@mui/lab": "^7.0.1-beta.19",
|
||||
"@mui/material": "^7.3.5",
|
||||
"@mui/styled-engine-sc": "^7.3.5",
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
@ -397,6 +398,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
|
||||
"integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "^0.9.0"
|
||||
}
|
||||
@ -1271,6 +1273,50 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/lab": {
|
||||
"version": "7.0.1-beta.19",
|
||||
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-7.0.1-beta.19.tgz",
|
||||
"integrity": "sha512-Ekxd2mPnr5iKwrMXjN/y2xgpxPX8ithBBcDenjqNdBt/ZQumrmBl0ifVoqAHsL6lxN6DOgRsWTRc4eOdDiB+0Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/system": "^7.3.5",
|
||||
"@mui/types": "^7.4.8",
|
||||
"@mui/utils": "^7.3.5",
|
||||
"clsx": "^2.1.1",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@mui/material": "^7.3.5",
|
||||
"@mui/material-pigment-css": "^7.3.5",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"@mui/material-pigment-css": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@lottiefiles/dotlottie-react": "^0.17.8",
|
||||
"@mui/icons-material": "^7.3.5",
|
||||
"@mui/lab": "^7.0.1-beta.19",
|
||||
"@mui/material": "^7.3.5",
|
||||
"@mui/styled-engine-sc": "^7.3.5",
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
|
||||
BIN
src/assets/images/customer.png
Normal file
BIN
src/assets/images/customer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
src/assets/images/girlchat.webp
Normal file
BIN
src/assets/images/girlchat.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/assets/images/homeicon.png
Normal file
BIN
src/assets/images/homeicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/horoscopericon.png
Normal file
BIN
src/assets/images/horoscopericon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/images/membership.avif
Normal file
BIN
src/assets/images/membership.avif
Normal file
Binary file not shown.
BIN
src/assets/images/membershipgirl.avif
Normal file
BIN
src/assets/images/membershipgirl.avif
Normal file
Binary file not shown.
BIN
src/assets/images/profilebg.jpg
Normal file
BIN
src/assets/images/profilebg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/assets/images/profileicon.png
Normal file
BIN
src/assets/images/profileicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/images/weddingpromo1.jpg
Normal file
BIN
src/assets/images/weddingpromo1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 642 KiB |
BIN
src/assets/images/weddingpromo2.jpg
Normal file
BIN
src/assets/images/weddingpromo2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 919 KiB |
BIN
src/assets/images/weddingpromo3.jpg
Normal file
BIN
src/assets/images/weddingpromo3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 777 KiB |
BIN
src/assets/images/weddingpromo4.jpg
Normal file
BIN
src/assets/images/weddingpromo4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 862 KiB |
@ -30,6 +30,12 @@ const settings = ["Profile", "Account", "Dashboard", "Logout"];
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Home, Search, Heart, MessageCircle, User, Settings } from 'lucide-react';
|
||||
const NAV_LINKS = [
|
||||
{ label: "Home", path: "/", icon: <Home /> },
|
||||
{ label: "Matches", path: "/matches", icon: <InboxIcon /> },
|
||||
{ label: "Search", path: "/search", icon: <Search /> },
|
||||
{ label: "Chat", path: "/chat", icon: <MessageCircle /> }
|
||||
]
|
||||
|
||||
// Sparkle Navbar Component
|
||||
const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick }) => {
|
||||
@ -155,13 +161,14 @@ const LandingHeader = () => {
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
{["Matches", "Search", "Chat", "Mail"].map((text, index) => (
|
||||
<ListItem key={text} disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={text} />
|
||||
{NAV_LINKS.map(({ label, path, icon }) => (
|
||||
<ListItem key={label} disablePadding>
|
||||
<ListItemButton onClick={() => {
|
||||
navigate(path);
|
||||
toggleDrawer(false)();
|
||||
}}>
|
||||
<ListItemIcon>{icon}</ListItemIcon>
|
||||
<ListItemText primary={label} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
@ -259,9 +266,13 @@ const LandingHeader = () => {
|
||||
))} */}
|
||||
|
||||
<SparkleNavbar
|
||||
items={['Home', 'Matches', 'Search', 'Chat']}
|
||||
items={NAV_LINKS.map(link => link.label)}
|
||||
color="#034E08"
|
||||
onItemClick={(item) => setSelectedItem(item)}
|
||||
onItemClick={(label) => {
|
||||
setSelectedItem(label);
|
||||
const link = NAV_LINKS.find(l => l.label === label);
|
||||
if (link) navigate(link.path);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
158
src/components/common/ProfileCard.jsx
Normal file
158
src/components/common/ProfileCard.jsx
Normal file
@ -0,0 +1,158 @@
|
||||
import React, { useState } from "react";
|
||||
import { Users, Grid3x3, Heart, Crown, Bookmark } from "lucide-react";
|
||||
import LazyImage from "./LazyImage";
|
||||
import CakeIcon from "@mui/icons-material/Cake";
|
||||
import HeightIcon from "@mui/icons-material/Height";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import TempleHinduIcon from "@mui/icons-material/TempleHindu";
|
||||
import SchoolIcon from "@mui/icons-material/School";
|
||||
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
||||
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export default function ProfileCard() {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
return (
|
||||
<div className=" flex items-center justify-center p-6">
|
||||
<div className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 border-green-200">
|
||||
{/* Profile Image Section */}
|
||||
<div className="relative">
|
||||
|
||||
{/* Premium Badge */}
|
||||
|
||||
<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 }}
|
||||
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-[12px] font-medium">Shortlist</span>
|
||||
</motion.button>
|
||||
|
||||
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
|
||||
alt="Profile"
|
||||
className="w-full h-90 object-cover"
|
||||
/>
|
||||
|
||||
{/* <LazyImage
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
|
||||
alt="Profile"
|
||||
className="w-full h-90 object-cover"
|
||||
/> */}
|
||||
|
||||
{/* White Gradient Overlay at bottom of image */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay - positioned at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
Jerome bell
|
||||
</h1>
|
||||
<p className="text-[14px] text-gray-700 leading-relaxed">
|
||||
Matrimony ID: JB2847593
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats and Follow Section */}
|
||||
<div
|
||||
className="px-4 pt-[-2px] pb-4 flex flex-col gap-2 "
|
||||
style={{
|
||||
background: "rgb(255, 255, 255)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Age : 22
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Height: 5.2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<GroupsIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Hindu / Agamudiyar/thular
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<SchoolIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
BCA / Data analyst
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<LocationOnIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Chennai
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 my-2 justify-between mx-4">
|
||||
<button className="w-[60px] h-[60px] bg-[#A70710] hover:bg-red-300 text-white
|
||||
font-semibold text-base py-2 rounded-full shadow-md
|
||||
hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2 transform hover:scale-90">
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="w-[60px] h-[60px] bg-[#034E08] hover:from-green-600
|
||||
hover:to-green-600 text-white font-semibold text-base
|
||||
rounded-full shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center gap-2"
|
||||
onClick={() => setIsLiked(!isLiked)}
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#EF4444"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -24,6 +24,15 @@ import { useTheme, useMediaQuery, ListItemIcon } from "@mui/material";
|
||||
import {Badge, } from "@mui/material";
|
||||
import { Home, Users, Heart, MessageCircle, Search, Bell } from "lucide-react";
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ label: "Home", path: "/" },
|
||||
{ label: "Matches", path: "/matches" },
|
||||
{ label: "Interest", path: "/interest" },
|
||||
{ label: "Messages", path: "/messages" },
|
||||
{ label: "Search", path: "/search" },
|
||||
{ label: "Notifications", path: "/notifications" }
|
||||
];
|
||||
|
||||
/* ----------------------------------------------------
|
||||
SPARKLE NAVBAR (same as your original code)
|
||||
---------------------------------------------------- */
|
||||
@ -121,6 +130,7 @@ const ProfileHeader = () => {
|
||||
const toggleMobileDrawer = (open) => () => setMobileDrawerOpen(open);
|
||||
const toggleProfileDrawer = (open) => () => setProfileDrawerOpen(open);
|
||||
|
||||
const [selectedItem, setSelectedItem] = useState("Home");
|
||||
/* -----------------------------------------
|
||||
PROFILE DRAWER CONTENT (RIGHT SIDE)
|
||||
------------------------------------------ */
|
||||
@ -199,13 +209,18 @@ const ProfileHeader = () => {
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
{["Matches", "Search", "Chat", "Mail"].map((text, index) => (
|
||||
<ListItem key={text} disablePadding>
|
||||
<ListItemButton>
|
||||
{NAV_LINKS.map(({ label, path }, index) => (
|
||||
<ListItem key={label} disablePadding>
|
||||
<ListItemButton
|
||||
onClick={() => {
|
||||
navigate(path);
|
||||
toggleMobileDrawer(false)();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={text} />
|
||||
<ListItemText primary={label} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
@ -247,11 +262,16 @@ const ProfileHeader = () => {
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
|
||||
<SparkleNavbar
|
||||
items={["Home", "Matches", "Interest", "Messages", "Search", "Notifications"]}
|
||||
color="#034E08"
|
||||
onItemClick={(item) => setSelectedItem(item)}
|
||||
/>
|
||||
<SparkleNavbar
|
||||
items={NAV_LINKS.map(link => link.label)}
|
||||
color="#034E08"
|
||||
onItemClick={(item) => {
|
||||
setSelectedItem(item);
|
||||
const link = NAV_LINKS.find(l => l.label === item);
|
||||
if (link) navigate(link.path);
|
||||
}}
|
||||
/>
|
||||
|
||||
</Box>
|
||||
|
||||
{/* AVATAR CLICK → RIGHT DRAWER */}
|
||||
|
||||
302
src/components/matches/MatchesProfilesTab.jsx
Normal file
302
src/components/matches/MatchesProfilesTab.jsx
Normal file
@ -0,0 +1,302 @@
|
||||
import React, { useState } from "react";
|
||||
import { Crown, Bookmark } from "lucide-react";
|
||||
import CakeIcon from "@mui/icons-material/Cake";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import SchoolIcon from "@mui/icons-material/School";
|
||||
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
||||
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
|
||||
import PersonIcon from "@mui/icons-material/Person";
|
||||
import StarIcon from "@mui/icons-material/Star";
|
||||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
||||
import PersonAddIcon from "@mui/icons-material/PersonAdd";
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
// Profile Card Component
|
||||
function ProfileCard({ profile }) {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border border-green-200">
|
||||
<div className="relative">
|
||||
<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>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 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-[12px] font-medium">Shortlist</span>
|
||||
</motion.button>
|
||||
|
||||
<img
|
||||
src={profile.image}
|
||||
alt="Profile"
|
||||
className="w-full h-96 object-cover"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
<p className="text-[14px] text-gray-700 leading-relaxed">
|
||||
Matrimony ID: {profile.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 pt-2 pb-4 flex flex-col gap-2 bg-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Age: {profile.age}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Height: {profile.height}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<GroupsIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
{profile.community}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<SchoolIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
{profile.education}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<LocationOnIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
{profile.location}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 my-2 justify-between w-full px-[20px]">
|
||||
<button className="w-[60px] h-[60px] bg-[#A70710] hover:bg-red-600 text-white
|
||||
font-semibold text-base py-2 rounded-full shadow-md
|
||||
hover:shadow-lg transition-all duration-300 flex items-center justify-center transform hover:scale-95">
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="w-[60px] h-[60px] bg-[#034E08] hover:bg-green-700 text-white font-semibold text-base
|
||||
rounded-full shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={() => setIsLiked(!isLiked)}
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#EF4444"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Main Component
|
||||
export default function MatchesInterface() {
|
||||
const [selectedTab, setSelectedTab] = useState('your-matches');
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 'your-matches',
|
||||
icon: <PersonIcon className="w-6 h-6" />,
|
||||
title: 'Your Matches',
|
||||
description: 'View all the profiles that match your preferences',
|
||||
category: 'All Matches'
|
||||
},
|
||||
{
|
||||
id: 'shortlisted-by-you',
|
||||
icon: <StarIcon className="w-6 h-6" />,
|
||||
title: 'Shortlisted by you',
|
||||
description: 'Matches you have shortlisted',
|
||||
category: 'Based on activity'
|
||||
},
|
||||
{
|
||||
id: 'viewed-you',
|
||||
icon: <VisibilityIcon className="w-6 h-6" />,
|
||||
title: 'Viewed you',
|
||||
description: 'Matches who have viewed your profile',
|
||||
category: 'Based on activity'
|
||||
},
|
||||
{
|
||||
id: 'shortlisted-you',
|
||||
icon: <PersonAddIcon className="w-6 h-6" />,
|
||||
title: 'Shortlisted you',
|
||||
description: 'Matches who have shortlisted your profile',
|
||||
category: 'Based on activity'
|
||||
},
|
||||
{
|
||||
id: 'viewed-by-you',
|
||||
icon: <VisibilityIcon className="w-6 h-6" />,
|
||||
title: 'Viewed by you',
|
||||
description: 'Matches you have viewed',
|
||||
category: 'Based on activity'
|
||||
}
|
||||
];
|
||||
|
||||
const profiles = [
|
||||
{
|
||||
id: 'JB2847593',
|
||||
name: 'Jerome Bell',
|
||||
age: 22,
|
||||
height: '5.2',
|
||||
community: 'Hindu / Agamudiyar/thular',
|
||||
education: 'BCA / Data analyst',
|
||||
location: 'Chennai',
|
||||
image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top'
|
||||
},
|
||||
{
|
||||
id: 'SA8392847',
|
||||
name: 'Sarah Anderson',
|
||||
age: 24,
|
||||
height: '5.4',
|
||||
community: 'Hindu / Iyer',
|
||||
education: 'MBA / Marketing Manager',
|
||||
location: 'Bangalore',
|
||||
image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=800&fit=crop&crop=faces,top'
|
||||
},
|
||||
{
|
||||
id: 'PR9384756',
|
||||
name: 'Priya Reddy',
|
||||
age: 23,
|
||||
height: '5.3',
|
||||
community: 'Hindu / Reddy',
|
||||
education: 'B.Tech / Software Engineer',
|
||||
location: 'Hyderabad',
|
||||
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&h=800&fit=crop&crop=faces,top'
|
||||
},
|
||||
{
|
||||
id: 'AN4758392',
|
||||
name: 'Ananya Krishnan',
|
||||
age: 25,
|
||||
height: '5.5',
|
||||
community: 'Hindu / Nair',
|
||||
education: 'MD / Doctor',
|
||||
location: 'Kochi',
|
||||
image: 'https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=600&h=800&fit=crop&crop=faces,top'
|
||||
}
|
||||
];
|
||||
|
||||
let currentCategory = '';
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-[300px_auto] md:px-4 gap-2 md:gap-10">
|
||||
<style>{`
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Left Sidebar - Fixed on desktop, scrollable on mobile */}
|
||||
<div style={{maxHeight:"100vh", position:"sticky", top:"50px"}}
|
||||
className="w-full rounded-[10px] border border-1 border-gray-200 md:w-80 bg-white md:my-6 shadow-lg overflow-y-auto scrollbar-hide flex-shrink-0">
|
||||
<div className="py-6 px-4">
|
||||
{tabs.map((tab) => {
|
||||
const showCategory = tab.category !== currentCategory;
|
||||
if (showCategory) {
|
||||
currentCategory = tab.category;
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment key={tab.id}>
|
||||
{showCategory && (
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4 mt-6 first:mt-0">
|
||||
{tab.category}
|
||||
</h2>
|
||||
)}
|
||||
<div
|
||||
onClick={() => setSelectedTab(tab.id)}
|
||||
className={`p-4 rounded-lg mb-3 cursor-pointer transition-all ${
|
||||
selectedTab === tab.id
|
||||
? 'bg-green-50 border-l-4 border-green-600'
|
||||
: 'hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`mt-1 ${selectedTab === tab.id ? 'text-green-600' : 'text-gray-600'}`}>
|
||||
{tab.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className={`font-semibold text-base ${
|
||||
selectedTab === tab.id ? 'text-green-900' : 'text-gray-900'
|
||||
}`}>
|
||||
{tab.title}
|
||||
</h3>
|
||||
<svg
|
||||
className={`w-5 h-5 ${selectedTab === tab.id ? 'text-green-600' : 'text-gray-400'}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-1">{tab.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content Area - Scrollable */}
|
||||
<div className=" px-2 py-8">
|
||||
<div className="w-[100%] max-w-[1200px] mx-auto">
|
||||
<h1 className="text-[24px] font-bold text-gray-900 mb-8">
|
||||
{tabs.find(t => t.id === selectedTab)?.title}
|
||||
</h1>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-2">
|
||||
{profiles.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
src/components/matches/SearchUI.jsx
Normal file
104
src/components/matches/SearchUI.jsx
Normal file
@ -0,0 +1,104 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Search } from 'lucide-react';
|
||||
|
||||
export default function SearchUI() {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
|
||||
// Sample suggestions data - you can replace with dynamic data
|
||||
const allSuggestions = [
|
||||
'React components',
|
||||
'React hooks tutorial',
|
||||
'React router',
|
||||
'Tailwind CSS guide',
|
||||
'Tailwind responsive design',
|
||||
'JavaScript ES6 features',
|
||||
'JavaScript promises',
|
||||
'TypeScript basics',
|
||||
'Node.js express',
|
||||
'Next.js framework',
|
||||
];
|
||||
|
||||
// Filter suggestions based on search value
|
||||
const filteredSuggestions = searchValue.trim()
|
||||
? allSuggestions.filter(suggestion =>
|
||||
suggestion.toLowerCase().includes(searchValue.toLowerCase())
|
||||
)
|
||||
: [];
|
||||
|
||||
const handleSuggestionClick = (suggestion) => {
|
||||
setSearchValue(suggestion);
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
console.log('Searching for:', searchValue);
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center px-2 py-9">
|
||||
<div className="w-full max-w-2xl">
|
||||
{/* Search Container */}
|
||||
<div className="relative">
|
||||
{/* Shadow/Glow Effect */}
|
||||
<div className="absolute -inset-1 bg-green-600/20 rounded-full blur-xl"></div>
|
||||
|
||||
{/* Main Search Bar */}
|
||||
<div className="relative flex items-center bg-white rounded-full shadow-lg overflow-hidden border-2 border-green-600">
|
||||
{/* Search Input */}
|
||||
<input
|
||||
type="text"
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
setSearchValue(e.target.value);
|
||||
setShowSuggestions(true);
|
||||
}}
|
||||
onFocus={() => setShowSuggestions(true)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
}}
|
||||
placeholder="Search"
|
||||
className="flex-1 px-8 py-4 text-lg text-gray-700 placeholder-red-600 bg-transparent outline-none font-medium"
|
||||
/>
|
||||
|
||||
{/* Search Button */}
|
||||
<button
|
||||
onClick={handleSearch}
|
||||
className="bg-green-600 hover:bg-green-700 transition-colors px-8 py-4 flex items-center justify-center min-w-[80px]"
|
||||
aria-label="Search"
|
||||
>
|
||||
<Search className="w-7 h-7 text-white" strokeWidth={2.5} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Suggestions Dropdown */}
|
||||
{showSuggestions && filteredSuggestions.length > 0 && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden z-10 max-h-80 overflow-y-auto">
|
||||
{filteredSuggestions.map((suggestion, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => handleSuggestionClick(suggestion)}
|
||||
className="w-full text-left px-8 py-4 hover:bg-indigo-50 transition-colors flex items-center gap-3 border-b border-gray-100 last:border-b-0"
|
||||
>
|
||||
<Search className="w-5 h-5 text-gray-400" />
|
||||
<span className="text-gray-700 font-medium">{suggestion}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Click outside to close suggestions */}
|
||||
{showSuggestions && (
|
||||
<div
|
||||
className="fixed inset-0 -z-10"
|
||||
onClick={() => setShowSuggestions(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
94
src/components/profiledashboard/AstroChatUI.jsx
Normal file
94
src/components/profiledashboard/AstroChatUI.jsx
Normal file
@ -0,0 +1,94 @@
|
||||
import girlchat from "../../assets/images/girlchat.webp"
|
||||
const AstroChatUI = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<div className="w-full max-w-[550px] pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-3xl shadow-2xl p-8 relative overflow-hidden">
|
||||
|
||||
{/* Logo Section */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="relative">
|
||||
{/* Planet Icon */}
|
||||
<svg className="w-16 h-16" viewBox="0 0 64 64" fill="none">
|
||||
<circle cx="32" cy="32" r="20" fill="#A70710" opacity="0.9"/>
|
||||
<ellipse cx="32" cy="32" rx="35" ry="8" fill="none" stroke="#A70710" strokeWidth="3" transform="rotate(-20 32 32)"/>
|
||||
{/* Chat dots */}
|
||||
<circle cx="26" cy="32" r="2" fill="white"/>
|
||||
<circle cx="32" cy="32" r="2" fill="white"/>
|
||||
<circle cx="38" cy="32" r="2" fill="white"/>
|
||||
{/* Stars */}
|
||||
<circle cx="12" cy="20" r="2" fill="#A70710"/>
|
||||
<circle cx="16" cy="12" r="1.5" fill="#A70710"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">
|
||||
<span className="text-gray-900">Astro</span>
|
||||
<span className="text-[#A70710]">FreeChart</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700 ml-1">
|
||||
From <span className="text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<h2 className="text-[18px] font-bold text-gray-900 mb-4 leading-tight">
|
||||
Looking for astrology guidance in love, relationships, career, or health?
|
||||
</h2>
|
||||
|
||||
{/* Subheading */}
|
||||
<p className="text-gray-700 mb-4">
|
||||
Connect instantly with expert astrologers on AstroFreeChat.
|
||||
</p>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="space-y-2 mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[#A70710] text-xl mt-1">✓</span>
|
||||
<p className="text-gray-900 font-medium text-[14px]">
|
||||
Instant Astrology Insights
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[#A70710] text-xl mt-1">✓</span>
|
||||
<p className="text-gray-900 font-medium text-[14px]">
|
||||
Chat Anytime, Anywhere
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[#A70710] text-xl mt-1">✓</span>
|
||||
<p className="text-gray-900 font-medium text-[14px]">
|
||||
First 5 Minutes <span className="font-bold">FREE</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<button className="relative z-[99] w-[fit-content] bg-[#034E08] hover:bg-[#A70710] text-white font-bold text-[16px] py-4 px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
|
||||
Download AstroFreeChart
|
||||
</button>
|
||||
|
||||
{/* Girl Image - Positioned at bottom right */}
|
||||
<div className="absolute bottom-0 right-0 z-[1]">
|
||||
<img
|
||||
src={girlchat}
|
||||
alt="Woman using chat"
|
||||
className="w-full h-full object-cover object-top"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AstroChatUI
|
||||
66
src/components/profiledashboard/CustomerSupportCard.jsx
Normal file
66
src/components/profiledashboard/CustomerSupportCard.jsx
Normal file
@ -0,0 +1,66 @@
|
||||
import membershipgirl from "../../assets/images/customer.png";
|
||||
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
||||
|
||||
const CustomerSupportCard = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="max-w-[1200px] mx-auto px-4 pt-10">
|
||||
<div className="bg-gradient-to-br from-green-50 to-red-50 rounded-3xl shadow-md border p-6 pb-0 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">
|
||||
Customer Support
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl mt-3 text-gray-800">
|
||||
Get up to <span className="text-[#A70710] font-bold">24/7 Hours</span> customer support we provide to guide you
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
<ul className="mt-5 space-y-3 text-gray-700 pb-4">
|
||||
<li className="flex items-center gap-3">
|
||||
<CheckCircleIcon className="text-[#a60810]"/>
|
||||
24/7 Support Available
|
||||
</li>
|
||||
|
||||
<li className="flex items-center gap-3">
|
||||
<CheckCircleIcon className="text-[#a60810]"/>
|
||||
Guild you to build profile
|
||||
</li>
|
||||
|
||||
<li className="flex items-center gap-3">
|
||||
<CheckCircleIcon className="text-[#a60810]"/>
|
||||
Instant Problem Solve
|
||||
</li>
|
||||
|
||||
<li className="flex items-center gap-3 ">
|
||||
<CheckCircleIcon className="text-[#a60810]"/>
|
||||
Partner Matching Improvement
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Side Image */}
|
||||
<div className=" flex justify-center">
|
||||
<img
|
||||
src={membershipgirl}
|
||||
alt="Paid Member Offer"
|
||||
className="w-full max-w-xs md:max-w-sm object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomerSupportCard
|
||||
@ -1,9 +1,15 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { useRef, useState } 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 CakeIcon from "@mui/icons-material/Cake";
|
||||
import HeightIcon from "@mui/icons-material/Height";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import TempleHinduIcon from "@mui/icons-material/TempleHindu";
|
||||
import SchoolIcon from "@mui/icons-material/School";
|
||||
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
||||
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
@ -96,16 +102,25 @@ const DailyRecommendedCard = () => {
|
||||
];
|
||||
|
||||
// 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 && (
|
||||
|
||||
|
||||
const ProfileCard = ({ profile }) => {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
return (
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
|
||||
className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 border-green-200">
|
||||
{/* Profile Image Section */}
|
||||
<div className="relative">
|
||||
|
||||
{/* Premium Badge */}
|
||||
{profile.isPremium && (
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
@ -114,101 +129,150 @@ const DailyRecommendedCard = () => {
|
||||
>
|
||||
<Crown className="w-5 h-5 text-white" />
|
||||
</motion.div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Shortlist Button */}
|
||||
{/* Shortlist Button */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileHover={{ scale: 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>
|
||||
<span className="text-[12px] 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>
|
||||
<img
|
||||
src={profile.image}
|
||||
alt={profile.name}
|
||||
className="w-full h-90 object-cover"
|
||||
/>
|
||||
|
||||
{/* <LazyImage
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
|
||||
alt="Profile"
|
||||
className="w-full h-90 object-cover"
|
||||
/> */}
|
||||
|
||||
{/* White Gradient Overlay at bottom of image */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay - positioned at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
<p className="text-[14px] text-gray-700 leading-relaxed">
|
||||
Matrimony ID: {profile.userId}
|
||||
</p>
|
||||
</div>
|
||||
</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" />
|
||||
{/* Stats and Follow Section */}
|
||||
<div
|
||||
className="px-4 pt-[-2px] pb-4 flex flex-col gap-2 "
|
||||
style={{
|
||||
background: "rgb(255, 255, 255)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Age : {profile.age}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Height: {profile.height}
|
||||
</span>
|
||||
</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 className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<GroupsIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.religion}
|
||||
</span>
|
||||
</div>
|
||||
</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 className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<SchoolIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.education}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<LocationOnIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.location}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 my-2 justify-between mx-4">
|
||||
<button className="w-[60px] h-[60px] bg-[#A70710] hover:bg-red-300 text-white
|
||||
font-semibold text-base py-2 rounded-full shadow-md
|
||||
hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2 transform hover:scale-90">
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="w-[60px] h-[60px] bg-[#034E08] hover:from-green-600
|
||||
hover:to-green-600 text-white font-semibold text-base
|
||||
rounded-full shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center gap-2"
|
||||
onClick={() => setIsLiked(!isLiked)}
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#EF4444"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</motion.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">
|
||||
<div className=" py-10">
|
||||
<div className="w-[100%] max-w-[1400px] 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">
|
||||
<h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold mb-3">
|
||||
Daily Recommended
|
||||
</h1>
|
||||
<p className="text-gray-600 text-lg">Find your perfect match today</p>
|
||||
<p className="text-gray-600 text-[12px]">Find your perfect match today</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Swiper Container */}
|
||||
@ -257,7 +321,9 @@ const DailyRecommendedCard = () => {
|
||||
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"
|
||||
className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10
|
||||
bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6 text-gray-700" />
|
||||
</motion.button>
|
||||
@ -266,7 +332,9 @@ const DailyRecommendedCard = () => {
|
||||
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"
|
||||
className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10
|
||||
bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
|
||||
>
|
||||
<ChevronRight className="w-6 h-6 text-gray-700" />
|
||||
</motion.button>
|
||||
@ -282,7 +350,7 @@ const DailyRecommendedCard = () => {
|
||||
<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"
|
||||
className="px-6 py-3 bg-[#034E08] text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-shadow"
|
||||
>
|
||||
View All Recommendations
|
||||
</motion.button>
|
||||
@ -294,8 +362,9 @@ const DailyRecommendedCard = () => {
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ec4899;
|
||||
background: #A70710;
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
@ -308,6 +377,7 @@ const DailyRecommendedCard = () => {
|
||||
height: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,136 +1,361 @@
|
||||
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"
|
||||
}
|
||||
];
|
||||
import { useRef, useState } 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 CakeIcon from "@mui/icons-material/Cake";
|
||||
import HeightIcon from "@mui/icons-material/Height";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import TempleHinduIcon from "@mui/icons-material/TempleHindu";
|
||||
import SchoolIcon from "@mui/icons-material/School";
|
||||
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
||||
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
|
||||
import profilebg from "../../assets/images/profilebg.jpg";
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/effect-coverflow';
|
||||
|
||||
const MatchingList = () => {
|
||||
|
||||
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 }) => {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
return (
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
|
||||
className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 border-gray-200">
|
||||
{/* Profile Image Section */}
|
||||
<div className="relative">
|
||||
|
||||
{/* 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 }}
|
||||
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-[12px] font-medium">Shortlist</span>
|
||||
</motion.button>
|
||||
|
||||
|
||||
<img
|
||||
src={profile.image}
|
||||
alt={profile.name}
|
||||
className="w-full h-65 object-cover"
|
||||
/>
|
||||
|
||||
{/* <LazyImage
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
|
||||
alt="Profile"
|
||||
className="w-full h-90 object-cover"
|
||||
/> */}
|
||||
|
||||
{/* White Gradient Overlay at bottom of image */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-25 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgb(255, 255, 255) 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay - positioned at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
<p className="text-[14px] text-gray-700 leading-relaxed">
|
||||
Matrimony ID: {profile.userId}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats and Follow Section */}
|
||||
<div
|
||||
className="px-4 pt-[-2px] pb-4 flex flex-col gap-2 "
|
||||
style={{
|
||||
background: "rgb(255, 255, 255)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Age : {profile.age}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Height: {profile.height}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<GroupsIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.religion}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<SchoolIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.education}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<LocationOnIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.location}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
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"
|
||||
/>
|
||||
<div
|
||||
className="py-10 bg-cover bg-center bg-no-repeat"
|
||||
// style={{ backgroundImage: `url(${profilebg})` }}
|
||||
|
||||
{/* Crown Icon */}
|
||||
<div className="absolute top-3 left-3 bg-orange-500 text-white p-2 rounded-full text-xs font-bold">
|
||||
👑
|
||||
</div>
|
||||
</div>
|
||||
>
|
||||
<div className="w-[100%] max-w-[1400px] mx-auto">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold mb-3">
|
||||
Your Matching List
|
||||
</h1>
|
||||
<p className="text-gray-600 text-[12px]">Find your perfect match today</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4">
|
||||
<h3 className="text-xl font-bold">{p.name}</h3>
|
||||
{/* Swiper Container */}
|
||||
<div className="relative">
|
||||
<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: 10
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 15
|
||||
},
|
||||
1280: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 10
|
||||
}
|
||||
}}
|
||||
className="pb-16"
|
||||
>
|
||||
{profiles.map((profile) => (
|
||||
<SwiperSlide key={profile.id}>
|
||||
<ProfileCard profile={profile} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
<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>
|
||||
{/* 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/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6 text-gray-700" />
|
||||
</motion.button>
|
||||
|
||||
<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>
|
||||
<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/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 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>
|
||||
|
||||
<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>
|
||||
{/* 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-6 py-3 bg-[#034E08] text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-shadow"
|
||||
>
|
||||
View All Matches
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Custom Swiper Styles */}
|
||||
<style jsx global>{`
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #A70710;
|
||||
opacity: 0.5;
|
||||
|
||||
<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);
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
`}</style>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -2,65 +2,122 @@ import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import { motion } from 'framer-motion';
|
||||
import { Crown, Bookmark, User, Briefcase, MapPin, X, Send, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useRef } from "react";
|
||||
import LazyImage from "../common/LazyImage";
|
||||
|
||||
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",
|
||||
img: "https://images.unsplash.com/photo-1519744792095-2f2205e87b6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&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",
|
||||
img: "https://images.unsplash.com/photo-1519744792095-2f2205e87b6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&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",
|
||||
img: "https://images.unsplash.com/photo-1519744792095-2f2205e87b6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&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",
|
||||
img: "https://images.unsplash.com/photo-1519744792095-2f2205e87b6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&q=80"
|
||||
},
|
||||
{
|
||||
title: "Communication Secrets for Couples",
|
||||
img: "https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=800&q=80",
|
||||
},
|
||||
img: "https://images.unsplash.com/photo-1482849297070-f4fae2173efe?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&q=80"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const MatrimonyArticles = () => {
|
||||
const swiperRef = useRef(null);
|
||||
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">
|
||||
<div className="custom-article-swiper py-10 px-2 max-w-[1400px] mx-auto my-10">
|
||||
<h2 className="pb-10 text-[20px] text-[#034E08]
|
||||
sm:text-[22px] lg:text-[24px] font-bold text-center">
|
||||
Matrimony Articles
|
||||
</h2>
|
||||
|
||||
|
||||
<div className="relative px-4 sm:px-4">
|
||||
<Swiper
|
||||
modules={[Navigation]}
|
||||
navigation={true}
|
||||
ref={swiperRef}
|
||||
modules={[Navigation, ]}
|
||||
|
||||
spaceBetween={20}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1 }, // mobile
|
||||
640: { slidesPerView: 2 }, // tablet
|
||||
1024: { slidesPerView: 4 }, // large
|
||||
1024: { slidesPerView: 2 }, // large
|
||||
}}
|
||||
loop={true}
|
||||
className="mySwiper"
|
||||
>
|
||||
{articleData.map((item, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="rounded-xl overflow-hidden shadow-lg bg-white">
|
||||
<div className="w-full max-w-[600px] rounded-[10px] overflow-hidden border border-2 border-[#f2f2f2] bg-white">
|
||||
|
||||
<div className="relative w-full">
|
||||
<img
|
||||
src={item.img}
|
||||
className="w-full h-48 object-cover"
|
||||
className="w-full h-88 object-cover"
|
||||
alt={item.title}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold">{item.title}</h3>
|
||||
|
||||
{/* <LazyImage
|
||||
src={item.img}
|
||||
className="w-full h-48 object-cover"
|
||||
alt={item.title}
|
||||
/> */}
|
||||
|
||||
{/* White Gradient Overlay at bottom of image */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-30 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay - positioned at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-gray-900">
|
||||
<div className="">
|
||||
<h3 className="text-[16px] font-semibold">{item.title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</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/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
|
||||
>
|
||||
<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/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 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>
|
||||
<style>{`
|
||||
.custom-article-swiper .swiper-button-prev,
|
||||
.custom-article-swiper .swiper-button-next {
|
||||
|
||||
89
src/components/profiledashboard/MembershipCard.jsx
Normal file
89
src/components/profiledashboard/MembershipCard.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
|
||||
import { Phone, MessageCircle, ThumbsUp, Eye } from 'lucide-react';
|
||||
import promogirl from "../../assets/images/mobile.png"
|
||||
const MembershipCard = ()=>{
|
||||
return (
|
||||
|
||||
<>
|
||||
|
||||
<div className=" flex items-center justify-center my-2 mt-2">
|
||||
<div className="py-6 w-full max-w-6xl bg-gradient-to-br from-red-50 to-grren-50 rounded-3xl border border-gray-200 overflow-hidden">
|
||||
<div className="flex flex-col lg:flex-row items-center lg:items-stretch">
|
||||
|
||||
{/* Left Content Section */}
|
||||
<div className="flex flex-col p-2 lg:p-4 lg:w-3/5">
|
||||
{/* Heading */}
|
||||
<h1 className="text-[12px]] font-bold text-gray-900 mb-4">
|
||||
Become a paid member
|
||||
</h1>
|
||||
|
||||
{/* Subheading with offer */}
|
||||
<p className="text-[12px] lg:text-[14px] text-gray-900 mb-4">
|
||||
Get up to <span className="text-orange-600 font-bold">58% OFF</span> on paid membership!
|
||||
</p>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="space-y-2 mb-2">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-4 h-4 flex-shrink-0 mt-0">
|
||||
<Phone className="w-4 h-4 text-gray-700" />
|
||||
</div>
|
||||
<p className="text-[12px] lg:text-[12px] text-gray-900 font-medium">
|
||||
Call/WhatsApp matches
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-4 h-4 flex-shrink-0 mt-0">
|
||||
<MessageCircle className="w-4 h-4 text-gray-700" />
|
||||
</div>
|
||||
<p className="text-[12px] lg:text-[12px] text-gray-900 font-medium">
|
||||
Unlimited messages
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-4 h-4 flex-shrink-0 mt-0">
|
||||
<ThumbsUp className="w-4 h-4 text-gray-700" />
|
||||
</div>
|
||||
<p className="text-[12px] lg:text-[12px] text-gray-900 font-medium">
|
||||
Higher chances of response
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-4 h-4 flex-shrink-0 mt-0">
|
||||
<Eye className="w-4 h-4 text-gray-700" />
|
||||
</div>
|
||||
<p className="text-[12px] lg:text-[12px] text-gray-900 font-medium">
|
||||
View and match horoscopes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<button className="mt-2 bg-[#034E08] hover:bg-[#A70710] text-white font-bold text-[14px] lg:text-[14px] py-4 px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
|
||||
See membership plans
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Right Image Section */}
|
||||
<div className="overflow-visible w-full relative lg:w-2/5 flex itemes-center justify-center">
|
||||
<div className="">
|
||||
<img
|
||||
src={promogirl}
|
||||
alt="Happy woman presenting membership benefits"
|
||||
className="w-full h-full object-contain "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</>);
|
||||
};
|
||||
export default MembershipCard
|
||||
|
||||
368
src/components/profiledashboard/NewJoinedProfile.jsx
Normal file
368
src/components/profiledashboard/NewJoinedProfile.jsx
Normal file
@ -0,0 +1,368 @@
|
||||
import { useRef, useState } 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 CakeIcon from "@mui/icons-material/Cake";
|
||||
import HeightIcon from "@mui/icons-material/Height";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import TempleHinduIcon from "@mui/icons-material/TempleHindu";
|
||||
import SchoolIcon from "@mui/icons-material/School";
|
||||
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
||||
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
|
||||
import profilebg from "../../assets/images/profilebg.jpg";
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/effect-coverflow';
|
||||
|
||||
const NewJoinedProfile = () => {
|
||||
|
||||
|
||||
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 }) => {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
return (
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
|
||||
className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 border-gray-200">
|
||||
{/* Profile Image Section */}
|
||||
<div className="relative">
|
||||
|
||||
{/* 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 }}
|
||||
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-[12px] font-medium">Shortlist</span>
|
||||
</motion.button>
|
||||
|
||||
|
||||
<img
|
||||
src={profile.image}
|
||||
alt={profile.name}
|
||||
className="w-full h-65 object-cover"
|
||||
/>
|
||||
|
||||
{/* <LazyImage
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
|
||||
alt="Profile"
|
||||
className="w-full h-90 object-cover"
|
||||
/> */}
|
||||
|
||||
{/* White Gradient Overlay at bottom of image */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-25 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgb(255, 255, 255) 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay - positioned at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
<p className="text-[14px] text-gray-700 leading-relaxed">
|
||||
Matrimony ID: {profile.userId}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats and Follow Section */}
|
||||
<div
|
||||
className="px-4 pt-[-2px] pb-4 flex flex-col gap-2 "
|
||||
style={{
|
||||
background: "rgb(255, 255, 255)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Age : {profile.age}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
Height: {profile.height}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<GroupsIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.religion}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<SchoolIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.education}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<LocationOnIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-600 text-gray-900">
|
||||
{profile.location}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
<div
|
||||
className="py-10 bg-cover bg-center bg-no-repeat"
|
||||
// style={{ backgroundImage: `url(${profilebg})` }}
|
||||
|
||||
>
|
||||
<div className="w-[100%] max-w-[1400px] mx-auto">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold mb-3">
|
||||
New Joined
|
||||
</h1>
|
||||
<p className="text-gray-600 text-[12px]">Find your perfect match today</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Swiper Container */}
|
||||
<div className="relative">
|
||||
<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: 10
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 15
|
||||
},
|
||||
1280: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 10
|
||||
}
|
||||
}}
|
||||
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/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
|
||||
>
|
||||
<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/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 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-6 py-3 bg-[#034E08] text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-shadow"
|
||||
>
|
||||
View All
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Custom Swiper Styles */}
|
||||
<style jsx global>{`
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #A70710;
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
`}</style>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default NewJoinedProfile
|
||||
@ -1,9 +1,11 @@
|
||||
import membershipgirl from "../../assets/images/membership.avif";
|
||||
|
||||
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">
|
||||
|
||||
<div className="max-w-[1200px] mx-auto px-4 pt-10">
|
||||
<div className="bg-gradient-to-br from-red-50 to-green-50 rounded-3xl shadow-md border p-6 pb-0 flex flex-col md:flex-row items-center gap-10">
|
||||
|
||||
{/* Left Content */}
|
||||
<div className="flex-1">
|
||||
@ -12,7 +14,7 @@ const PaidMemberCard = () => {
|
||||
</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!
|
||||
Get up to <span className="text-[#A70710] font-bold">58% OFF</span> on paid membership!
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
@ -39,7 +41,7 @@ const PaidMemberCard = () => {
|
||||
</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">
|
||||
<button className="mt-6 bg-[#034E08] hover:bg-[#A70710] text-white font-semibold py-3 px-6 rounded-full text-lg transition-all">
|
||||
See membership plans
|
||||
</button>
|
||||
</div>
|
||||
@ -47,7 +49,7 @@ const PaidMemberCard = () => {
|
||||
{/* 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"
|
||||
src={membershipgirl}
|
||||
alt="Paid Member Offer"
|
||||
className="w-full max-w-xs md:max-w-sm object-contain"
|
||||
/>
|
||||
|
||||
@ -1,35 +1,43 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Camera, Sparkles, Users } from 'lucide-react';
|
||||
const ProfileCompletion = () => {
|
||||
import React, { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import LazyImage from "../common/LazyImage";
|
||||
import ProfileIcon from "../../assets/images/profileicon.png";
|
||||
import HoroscodeIcon from "../../assets/images/horoscopericon.png";
|
||||
import FamilyIcon from "../../assets/images/homeicon.png";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import AstroChatUI from "./AstroChatUI";
|
||||
import MembershipCard from "./MembershipCard";
|
||||
|
||||
const [completeness, setCompleteness] = useState(30);
|
||||
const ProfileCompletion = () => {
|
||||
const [completeness, setCompleteness] = useState(30);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const cards = [
|
||||
{
|
||||
id: 1,
|
||||
icon: Camera,
|
||||
title: 'Add Photo(s)',
|
||||
bgColor: 'bg-green-50',
|
||||
iconColor: 'text-green-600',
|
||||
borderColor: 'border-green-200'
|
||||
icon: ProfileIcon,
|
||||
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'
|
||||
icon: HoroscodeIcon,
|
||||
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'
|
||||
}
|
||||
icon: FamilyIcon,
|
||||
title: "Family Details",
|
||||
bgColor: "bg-orange-50",
|
||||
iconColor: "text-orange-600",
|
||||
borderColor: "border-orange-200",
|
||||
},
|
||||
];
|
||||
|
||||
const container = {
|
||||
@ -37,132 +45,143 @@ const ProfileCompletion = () => {
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const item = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
show: { opacity: 1, y: 0 }
|
||||
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 */}
|
||||
<div className="max-w-[1400px] w-[100%] mx-auto my-10 px-2 sm:p-2 lg:p-2">
|
||||
<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"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="max-w-6xl mx-auto"
|
||||
>
|
||||
{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`}
|
||||
{/* Header Section */}
|
||||
<div className="bg-green-50 rounded-2xl border border-1 border-gray-200 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"
|
||||
>
|
||||
<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>
|
||||
Complete Your Profile
|
||||
</motion.h1>
|
||||
|
||||
{/* 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"
|
||||
{/* 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"
|
||||
>
|
||||
{card.title}
|
||||
</motion.h3>
|
||||
{completeness}%
|
||||
</motion.span>
|
||||
</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`}
|
||||
/>
|
||||
{/* 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>
|
||||
))}
|
||||
</motion.div>
|
||||
</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>
|
||||
{/* Cards Section */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 ">
|
||||
|
||||
{/* Desktop Logo */}
|
||||
{/* <Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
|
||||
<LazyImage
|
||||
src={Logo}
|
||||
className="w-full h-[50px] rounded-lg object-cover"
|
||||
/>
|
||||
</Box> */}
|
||||
|
||||
<AstroChatUI/>
|
||||
<div className="my-4 rounded-2xl bg-green-50 border border-1 border-green-200 p-4 ">
|
||||
<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) => (
|
||||
|
||||
<div className=" border border-1 border-red-50 bg-white rounded-3xl hover:bg-red-50 hover:border-2
|
||||
flex flex-col items-center space-x-2 h-32 justify-center transition-colors duration-500
|
||||
cursor-pointer ">
|
||||
{/* 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-0 rounded-xl border ${card.borderColor}`}
|
||||
>
|
||||
<LazyImage
|
||||
src={card.icon}
|
||||
alt={card.title}
|
||||
className="w-ful h-full "
|
||||
/>
|
||||
</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-[14px] sm:text-[16px] font-semibold text-gray-900"
|
||||
>
|
||||
{card.title}
|
||||
</motion.h3>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<MembershipCard/>
|
||||
|
||||
</div>
|
||||
</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>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileCompletion
|
||||
export default ProfileCompletion;
|
||||
|
||||
365
src/components/profiledashboard/VideoSwiperGallery.jsx
Normal file
365
src/components/profiledashboard/VideoSwiperGallery.jsx
Normal file
@ -0,0 +1,365 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
import { Play, X, Heart, Share2, Eye, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
|
||||
const VideoSwiperGallery = () => {
|
||||
const [selectedVideo, setSelectedVideo] = useState(null);
|
||||
const swiperRef = useRef(null);
|
||||
|
||||
// Video data with online sources
|
||||
const videos = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Priya & Rahul - Wedding Story',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1519741497674-611481863552?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
||||
views: '2.4K',
|
||||
likes: '142',
|
||||
duration: '3:45'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Aisha - Profile Introduction',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1606216794079-e48e3e2a3f6a?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
|
||||
views: '1.8K',
|
||||
likes: '98',
|
||||
duration: '2:30'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Rohan - Life Journey',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
|
||||
views: '3.2K',
|
||||
likes: '256',
|
||||
duration: '4:15'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Divya - Family Values',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
|
||||
views: '1.5K',
|
||||
likes: '87',
|
||||
duration: '3:00'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Karthik & Meera - First Meet',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
|
||||
views: '4.1K',
|
||||
likes: '312',
|
||||
duration: '5:20'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Sneha - Hobbies & Interests',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
|
||||
views: '2.7K',
|
||||
likes: '178',
|
||||
duration: '2:45'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Arjun - Career & Dreams',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
|
||||
views: '1.9K',
|
||||
likes: '134',
|
||||
duration: '3:30'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Lakshmi - Traditional Values',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
|
||||
views: '3.5K',
|
||||
likes: '267',
|
||||
duration: '4:00'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Vikram - Adventure Life',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1519167758481-83f29da8c4f3?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
||||
views: '5.2K',
|
||||
likes: '423',
|
||||
duration: '4:30'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Anjali - Creative Journey',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
|
||||
views: '3.8K',
|
||||
likes: '289',
|
||||
duration: '3:15'
|
||||
}
|
||||
];
|
||||
|
||||
const VideoCard = ({ video }) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="group cursor-pointer h-full"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={() => setSelectedVideo(video)}
|
||||
>
|
||||
<div className="relative rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full">
|
||||
{/* Thumbnail */}
|
||||
<div className="relative aspect-video">
|
||||
<img
|
||||
src={video.thumbnail}
|
||||
alt={video.title}
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-60 group-hover:opacity-80 transition-opacity" />
|
||||
|
||||
{/* Play Button */}
|
||||
<motion.div
|
||||
initial={{ scale: 1 }}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
>
|
||||
<div className="w-14 h-14 bg-white/90 rounded-full flex items-center justify-center shadow-xl group-hover:bg-[#A70710] transition-all">
|
||||
<Play className="w-7 h-7 text-[#034E08] group-hover:text-white ml-1" fill="currentColor" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Duration Badge */}
|
||||
<div className="absolute top-2 right-2 bg-black/70 text-white text-xs font-semibold px-2 py-1 rounded">
|
||||
{video.duration}
|
||||
</div>
|
||||
|
||||
{/* Stats at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-3">
|
||||
<h3 className="text-white font-semibold text-sm mb-2 line-clamp-2">
|
||||
{video.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 text-white/90 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye className="w-3 h-3" />
|
||||
<span>{video.views}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Heart className="w-3 h-3" />
|
||||
<span>{video.likes}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
// Video Modal
|
||||
const VideoModal = () => {
|
||||
if (!selectedVideo) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4 z-[9999]"
|
||||
onClick={() => setSelectedVideo(null)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
className="relative w-full max-w-5xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => setSelectedVideo(null)}
|
||||
className="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<X className="w-8 h-8" />
|
||||
</button>
|
||||
|
||||
{/* Video Player */}
|
||||
<div className="bg-[#034E08] rounded-2xl overflow-y-scroll h-[100%] max-h-[480px] shadow-2xl">
|
||||
<video
|
||||
src={selectedVideo.videoUrl}
|
||||
controls
|
||||
autoPlay
|
||||
className="w-full aspect-video"
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
{/* Video Info */}
|
||||
<div className="bg-gray-900 p-6">
|
||||
<h2 className="text-white text-2xl font-bold mb-3">
|
||||
{selectedVideo.title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-6 text-gray-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye className="w-5 h-5" />
|
||||
<span>{selectedVideo.views} views</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Heart className="w-5 h-5" />
|
||||
<span>{selectedVideo.likes} likes</span>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 ml-auto bg-[#034E08] hover:bg-green-700 text-white px-6 py-2 rounded-full transition-colors">
|
||||
<Share2 className="w-4 h-4" />
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className=" my-12">
|
||||
<div className="max-w-[1400px] mx-auto ">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold mb-3">
|
||||
Video Gallery
|
||||
</h1>
|
||||
<p className="text-gray-600 text-[12px]">
|
||||
Discover profiles through their stories
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Swiper Container */}
|
||||
<div className="relative ">
|
||||
<Swiper
|
||||
ref={swiperRef}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={20}
|
||||
slidesPerView={1}
|
||||
autoplay={{
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: true
|
||||
}}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
dynamicBullets: true
|
||||
}}
|
||||
loop={true}
|
||||
speed={800}
|
||||
breakpoints={{
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 20
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 25
|
||||
}
|
||||
}}
|
||||
className="pb-16"
|
||||
>
|
||||
{videos.map((video) => (
|
||||
<SwiperSlide key={video.id}>
|
||||
<VideoCard video={video} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
{/* Custom Navigation Buttons */}
|
||||
{/* 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/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
|
||||
>
|
||||
<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/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 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-3 bg-[#034E08] hover:bg-green-700 text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all"
|
||||
>
|
||||
View All Videos
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Video Modal */}
|
||||
{selectedVideo && <VideoModal />}
|
||||
|
||||
{/* Custom Swiper Styles */}
|
||||
<style jsx global>{`
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #A70710;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
display: flex;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoSwiperGallery;
|
||||
725
src/components/profiledetail/MatrimonyProfile.jsx
Normal file
725
src/components/profiledetail/MatrimonyProfile.jsx
Normal file
@ -0,0 +1,725 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import {
|
||||
Heart,
|
||||
X,
|
||||
ChevronRight,
|
||||
SkipForward,
|
||||
Bookmark,
|
||||
MessageCircle,
|
||||
Ban,
|
||||
Flag,
|
||||
ChevronLeft,
|
||||
} from "lucide-react";
|
||||
|
||||
// Import Swiper React components and styles
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation, Pagination, Thumbs } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/thumbs";
|
||||
|
||||
const MatrimonyProfile = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState(null);
|
||||
const mainSwiperRef = useRef(null);
|
||||
const modalSwiperRef = useRef(null);
|
||||
|
||||
const profile = {
|
||||
name: "Sudharshan M",
|
||||
id: "M8355880",
|
||||
verified: true,
|
||||
lastSeen: "Last seen few hour ago",
|
||||
age: "30 yrs",
|
||||
height: "5'5\"",
|
||||
caste: "Brahmin",
|
||||
education: "Engineer - Non IT",
|
||||
location: "Chennai",
|
||||
maritalStatus: "Never Married",
|
||||
createdBy: "Profile created by sibling",
|
||||
images: [
|
||||
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=800&fit=crop",
|
||||
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=600&h=800&fit=crop",
|
||||
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&h=800&fit=crop",
|
||||
"https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=600&h=800&fit=crop",
|
||||
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=600&h=800&fit=crop",
|
||||
],
|
||||
};
|
||||
|
||||
const openModal = (index) => {
|
||||
setIsModalOpen(true);
|
||||
setTimeout(() => {
|
||||
if (modalSwiperRef.current) {
|
||||
modalSwiperRef.current.slideTo(index);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div
|
||||
className="max-w-[1200px] mx-auto
|
||||
bg-white rounded-[10px] border border-1 border-gray-200 overflow-hidden"
|
||||
>
|
||||
<div className="grid md:grid-cols-[320px_auto] gap-0">
|
||||
{/* Image Section with Swiper */}
|
||||
<div className="relative ">
|
||||
<div className=" relative overflow-hidden w-[320px] h-[330px]">
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination]}
|
||||
spaceBetween={0}
|
||||
slidesPerView={1}
|
||||
navigation={{
|
||||
prevEl: ".swiper-button-prev-custom",
|
||||
nextEl: ".swiper-button-next-custom",
|
||||
}}
|
||||
pagination={{
|
||||
type: "fraction",
|
||||
el: ".swiper-pagination-custom",
|
||||
}}
|
||||
onSwiper={(swiper) => {
|
||||
mainSwiperRef.current = swiper;
|
||||
}}
|
||||
className="h-full w-full"
|
||||
>
|
||||
{profile.images.map((img, idx) => (
|
||||
<SwiperSlide key={idx}>
|
||||
<div
|
||||
className="w-[320px] h-[330px] cursor-pointer"
|
||||
onClick={() => openModal(idx)}
|
||||
>
|
||||
<img
|
||||
src={img}
|
||||
alt={`${profile.name} ${idx + 1}`}
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
{/* Swiper Navigation Buttons */}
|
||||
<button className="swiper-button-prev-custom absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors">
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<button className="swiper-button-next-custom absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors">
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{/* Pagination */}
|
||||
{/* <div className="swiper-pagination-custom absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm z-10"></div> */}
|
||||
|
||||
{/* Thumbnail Navigation */}
|
||||
{/* <div className="absolute bottom-0 right-3 flex flex-row gap-2 z-10">
|
||||
{profile.images.slice(0, 4).map((img, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="w-12 h-12 rounded-lg overflow-hidden border-2 border-white cursor-pointer hover:scale-110 transition-transform shadow-lg"
|
||||
onClick={() => mainSwiperRef.current?.slideTo(idx)}
|
||||
>
|
||||
<img src={img} alt="" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
))}
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profile Details Section */}
|
||||
<div className="p-6 md:p-8">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-blue-500 text-white p-1 rounded-full">
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-blue-600 font-semibold">ID verified</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowMenu(!showMenu)}
|
||||
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
</button>
|
||||
{showMenu && (
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border z-10">
|
||||
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
|
||||
<Bookmark className="w-4 h-4" /> Shortlist
|
||||
</button>
|
||||
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
|
||||
<MessageCircle className="w-4 h-4" /> Send Message
|
||||
</button>
|
||||
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
|
||||
<Ban className="w-4 h-4" /> Block Profile
|
||||
</button>
|
||||
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 text-red-600">
|
||||
<Flag className="w-4 h-4" /> Report Profile
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
<p className="text-gray-500 text-sm mb-4">
|
||||
{profile.id} | {profile.lastSeen}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2 mb-6 text-gray-700">
|
||||
<p className="flex flex-wrap gap-2">
|
||||
<span className="font-semibold">{profile.maritalStatus}</span>
|
||||
<span>•</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{profile.createdBy}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>{profile.age}</span>
|
||||
<span>•</span>
|
||||
<span>{profile.height}</span>
|
||||
<span>•</span>
|
||||
<span>{profile.caste}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">{profile.education}</span>
|
||||
<span> • </span>
|
||||
<span>{profile.location}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-start gap-3">
|
||||
<button className="w-[fit-content] border-2 border-gray-300 text-gray-700 py-2 px-6 rounded-full hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 text-sm">
|
||||
<X className="w-5 h-5" /> Don't Show
|
||||
</button>
|
||||
{/* <button className="w-[fit-content] border-2 border-orange-500 text-orange-600 py-2 px-6 rounded-full hover:bg-orange-50 transition-colors flex items-center justify-center gap-2 text-sm">
|
||||
<SkipForward className="w-5 h-5" /> Skip
|
||||
</button> */}
|
||||
<button className="w-[fit-content] bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition-colors flex items-center justify-center gap-2 font-semibold text-sm">
|
||||
<Heart className="w-5 h-5" /> Send Interest
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Modal with Swiper */}
|
||||
{isModalOpen && (
|
||||
<div
|
||||
style={{ backdropFilter: "blur(5px)" }}
|
||||
className="fixed inset-0 bg-[#1010108f] z-[9999] flex items-center justify-center p-4"
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="absolute top-4 right-4 text-white bg-black/20 rounded-full p-2 hover:bg-black/70 transition-colors z-20"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
|
||||
<div className="max-w-4xl w-full bg-white p-4 rounded-md">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
{/* Main Modal Swiper */}
|
||||
<div
|
||||
className="relative bg-gray-900 rounded-lg overflow-hidden"
|
||||
style={{ height: "65vh" }}
|
||||
>
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Thumbs]}
|
||||
spaceBetween={0}
|
||||
slidesPerView={1}
|
||||
navigation={{
|
||||
prevEl: ".modal-swiper-button-prev",
|
||||
nextEl: ".modal-swiper-button-next",
|
||||
}}
|
||||
pagination={{
|
||||
type: "fraction",
|
||||
el: ".swiper-pagination-modal",
|
||||
}}
|
||||
thumbs={{
|
||||
swiper:
|
||||
thumbsSwiper && !thumbsSwiper.destroyed
|
||||
? thumbsSwiper
|
||||
: null,
|
||||
}}
|
||||
onSwiper={(swiper) => {
|
||||
modalSwiperRef.current = swiper;
|
||||
}}
|
||||
className="h-full w-full"
|
||||
>
|
||||
{profile.images.map((img, idx) => (
|
||||
<SwiperSlide key={idx}>
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<img
|
||||
src={img}
|
||||
alt={`${profile.name} ${idx + 1}`}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
{/* Modal Navigation Buttons */}
|
||||
<button className="modal-swiper-button-prev absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors">
|
||||
<ChevronLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<button className="modal-swiper-button-next absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors">
|
||||
<ChevronRight className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Top Info Bar */}
|
||||
<div className="bg-white rounded-t-lg p-4 mb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="swiper-pagination-modal text-lg font-semibold"></div>
|
||||
<div className="text-right">
|
||||
<h3 className="font-bold text-lg">{profile.name}</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
{profile.id} | {profile.createdBy}
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
{profile.age} • {profile.height} • {profile.caste} • BE
|
||||
• {profile.education} • {profile.location}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Thumbnail Swiper */}
|
||||
<Swiper
|
||||
modules={[Thumbs]}
|
||||
watchSlidesProgress
|
||||
onSwiper={setThumbsSwiper}
|
||||
spaceBetween={10}
|
||||
slidesPerView={5}
|
||||
className="mb-2"
|
||||
>
|
||||
{profile.images.map((img, idx) => (
|
||||
<SwiperSlide key={idx}>
|
||||
<div className="w-full h-16 rounded-lg overflow-hidden border-2 border-white cursor-pointer hover:border-orange-500 transition-colors">
|
||||
<img
|
||||
src={img}
|
||||
alt=""
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
{/* Bottom Action Bar */}
|
||||
<div className="bg-white p-4 rounded-b-lg mt-2 text-center">
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
Like this member?
|
||||
</p>
|
||||
<button className="bg-orange-600 text-white px-8 py-2 rounded-full hover:bg-orange-700 transition-colors font-semibold">
|
||||
Send Interest
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-[100%] max-w-[1200px] mx-auto my-10 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{/* Personal Information Section */}
|
||||
<div className=" border border-gray-200 rounded-lg bg-pink-50/30">
|
||||
<div className="flex items-center gap-2 mb-4 p-3 py-3 bg-green-100">
|
||||
<div className="bg-pink-100 p-2 rounded-full">
|
||||
<svg
|
||||
className="w-5 h-5 text-pink-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">Personal Information</h3>
|
||||
</div>
|
||||
|
||||
<div className="p-5 mb-6 space-y-3 text-sm">
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Age</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">30 Years and 8 months</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Height</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">5'5"</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Weight</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">97 Kg</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Body Type</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Average</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Spoken Languages</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">
|
||||
Tamil (Mother Tongue), English, Hindi
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Profile Created By</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Sibling</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Marital Status</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Never Married</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Lives In</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Chennai, Tamil Nadu</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Eating Habits</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Vegetarian</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Religion</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Hindu</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Caste</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Brahmin - Iyer</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Subcaste</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Brahacharmam</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Gothra(m)</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Kashyapa / Kaashyapa</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Dosha(m)</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Don't know</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Date Of Birth</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<button className="ml-3 text-orange-600 hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Upgrade to view
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Star</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<button className="ml-3 text-orange-600 hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Upgrade to view
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Rassi</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<button className="ml-3 text-orange-600 hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Upgrade to view
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Horoscope</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<button className="ml-3 text-orange-600 hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Upgrade to view
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Employment</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Employed in private</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Income</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">₹ 4 - 5 Lakhs</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Education</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">BE</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Occupation</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Engineer - Non IT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Family Information Section */}
|
||||
<div className="border border-gray-200 rounded-lg bg-pink-50/30 ">
|
||||
<div className="flex items-center gap-2 p-3 bg-pink-100">
|
||||
<div className="bg-white p-2 rounded-full">
|
||||
<svg
|
||||
className="w-5 h-5 text-pink-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">Family Information</h3>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-3 text-sm">
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Parents</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">
|
||||
Father Passed Away, Mother is a Home Maker
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Ancestral Origin</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Rameshwaram</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Contact Information Section */}
|
||||
<div className="my-8">
|
||||
<div className="flex items-center gap-2 p-3 bg-pink-100">
|
||||
<div className="bg-white p-2 rounded-full">
|
||||
<svg
|
||||
className="w-5 h-5 text-pink-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">Contact Information</h3>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-3 text-sm">
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Mobile Number</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<div className="ml-3 flex items-center gap-2">
|
||||
<svg
|
||||
className="w-3 h-3 text-green-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
|
||||
</svg>
|
||||
<svg
|
||||
className="w-3 h-3 text-red-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-gray-900">+91 99••••••••</span>
|
||||
<button className="text-orange-600 hover:text-orange-700 text-xs font-medium">
|
||||
Upgrade to view
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* About Myself Section */}
|
||||
<div className="my-8">
|
||||
<div className="flex items-center gap-2 p-3 bg-pink-100">
|
||||
<div className="bg-white p-2 rounded-full">
|
||||
<svg
|
||||
className="w-5 h-5 text-pink-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">About Myself</h3>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-4 text-sm">
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-2">
|
||||
About Sudharshan M
|
||||
</h4>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
I am making this profile for my brother. He completed his
|
||||
bachelor's degree and is now working as a project engineer -
|
||||
non IT. We belong to a middle class, nuclear family with
|
||||
traditional values, currently settled in Chennai.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-2">
|
||||
What we are looking for
|
||||
</h4>
|
||||
<p className="text-gray-700">
|
||||
Traditional, homely girl with moderate values
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lifestyle Section */}
|
||||
<div className="my-8">
|
||||
<div className="flex items-center gap-2 p-3 bg-pink-100">
|
||||
<div className="bg-white p-2 rounded-full">
|
||||
<svg
|
||||
className="w-5 h-5 text-pink-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">Lifestyle</h3>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-3 text-sm">
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Cuisine</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">
|
||||
Chinese, North Indian, South Indian
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Books</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">
|
||||
History, Philosophy / Spiritual
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Hobbies</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Cooking</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Movies</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">
|
||||
Anime, Comedy, Sci-Fi
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Sports</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Yoga / Meditation</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Smoking Habits</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Doesn't Smoke</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Drinking Habits</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<span className="ml-3 text-gray-900">Doesn't Drink</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MatrimonyProfile;
|
||||
116
src/components/profiledetail/PartnerPreferences.jsx
Normal file
116
src/components/profiledetail/PartnerPreferences.jsx
Normal file
@ -0,0 +1,116 @@
|
||||
import React from 'react';
|
||||
import { Check, X } from 'lucide-react';
|
||||
|
||||
const PartnerPreferences = () => {
|
||||
const basicPreferences = [
|
||||
{ label: "Preferred Bride's Age", value: "22-29 yrs", match: true },
|
||||
{ label: "Preferred Height", value: "5'0\" - 5'5\"", match: false },
|
||||
{ label: "Preferred Marital Status", value: "Never Married", match: true },
|
||||
{ label: "Preferred Mother Tongue", value: "Tamil", match: true },
|
||||
{ label: "Preferred Physical Status", value: "Normal", match: true },
|
||||
{ label: "Preferred Eating Habits", value: "Vegetarian", match: false },
|
||||
{ label: "Preferred Smoking Habits", value: "Doesn't Matter", match: true },
|
||||
{ label: "Preferred Drinking Habits", value: "Doesn't Matter", match: true },
|
||||
];
|
||||
|
||||
const religiousPreferences = [
|
||||
{ label: "Preferred Religion", value: "Hindu", match: true },
|
||||
{ label: "Preferred Caste", value: "Brahmin - Iyer", match: false },
|
||||
{ label: "Preferred Subcaste", value: "Any", match: false },
|
||||
{ label: "Preferred Star", value: "Any", match: true },
|
||||
{ label: "Preferred Dosham", value: "No Dosham", match: true },
|
||||
];
|
||||
|
||||
const PreferenceItem = ({ label, value, match }) => (
|
||||
<div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
|
||||
<span className="text-sm text-gray-600 font-medium flex-1">{label}</span>
|
||||
<span className="text-sm text-gray-900 font-semibold flex-1 text-left">{value}</span>
|
||||
<div className="flex-none w-8 flex justify-end">
|
||||
{match ? (
|
||||
<div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
|
||||
<Check className="w-4 h-4 text-green-600" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center">
|
||||
<X className="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-red-50 via-green-50 to-red-50 p-4 sm:p-6 lg:p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-6">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-gray-800 mb-2 flex items-center justify-center gap-2">
|
||||
<span className="text-pink-400">✨</span>
|
||||
His Partner Preferences
|
||||
<span className="text-pink-400">✨</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Match Score Card */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<img
|
||||
src="https://api.dicebear.com/7.x/avataaars/svg?seed=male1"
|
||||
alt="Profile"
|
||||
className="w-16 h-16 sm:w-20 sm:h-20 rounded-xl border-4 border-pink-100"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm mb-1">You match</p>
|
||||
<p className="text-2xl sm:text-3xl font-bold text-pink-600">
|
||||
14<span className="text-gray-400">/20</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">of his preferences</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="https://api.dicebear.com/7.x/avataaars/svg?seed=female1"
|
||||
alt="Your Profile"
|
||||
className="w-16 h-16 sm:w-20 sm:h-20 rounded-xl border-4 border-purple-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Basic Preferences Section */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-bold text-gray-800">Basic Preferences</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">You match</span>
|
||||
<div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
|
||||
<Check className="w-4 h-4 text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{basicPreferences.map((pref, index) => (
|
||||
<PreferenceItem key={index} {...pref} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Religious Preferences Section */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h2 className="text-lg font-bold text-gray-800 mb-4">Religious Preferences</h2>
|
||||
<div className="space-y-1">
|
||||
{religiousPreferences.map((pref, index) => (
|
||||
<PreferenceItem key={index} {...pref} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Note */}
|
||||
<div className="text-center mt-6 text-sm text-gray-500">
|
||||
<p>Preferences are used to find compatible matches</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PartnerPreferences;
|
||||
347
src/pages/AccountSettingsPage.jsx
Normal file
347
src/pages/AccountSettingsPage.jsx
Normal file
@ -0,0 +1,347 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { Phone, MessageSquare, Shield, Bell, UserCheck, ChevronLeft } from 'lucide-react';
|
||||
|
||||
function TabPanel(props) {
|
||||
const { children, value, index, ...other } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`tabpanel-${index}`}
|
||||
aria-labelledby={`tab-${index}`}
|
||||
{...other}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{value === index && (
|
||||
<Box sx={{ p: 0 }}>
|
||||
{children}
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
TabPanel.propTypes = {
|
||||
children: PropTypes.node,
|
||||
index: PropTypes.number.isRequired,
|
||||
value: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
function a11yProps(index, isMobile) {
|
||||
return {
|
||||
id: `${isMobile ? 'horizontal' : 'vertical'}-tab-${index}`,
|
||||
'aria-controls': `${isMobile ? 'horizontal' : 'vertical'}-tabpanel-${index}`,
|
||||
};
|
||||
}
|
||||
|
||||
const SettingItem = ({ title, description, enabled, onToggle }) => (
|
||||
<Box sx={{ py: 2, borderBottom: '1px solid #e5e7eb', '&:last-child': { borderBottom: 'none' } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold', color: '#111827', fontSize: { xs: '0.875rem', sm: '1rem' } }}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={onToggle}
|
||||
sx={{
|
||||
'& .MuiSwitch-switchBase.Mui-checked': {
|
||||
color: '#fff',
|
||||
},
|
||||
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
|
||||
backgroundColor: '#16a34a',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ color: '#6b7280', lineHeight: 1.6, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
|
||||
{description}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const TabContent = ({ title, settings, states, onToggle }) => (
|
||||
<Box sx={{borderRadius:"10px", flex: 1, bgcolor: '#ebf7ff', height: { xs: 'auto', md: '100vh' }, overflow: 'auto', width:"100%", maxWidth:"600px", margin:"0 auto" }}>
|
||||
<Box sx={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
bgcolor: '#034E08',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
px: { xs: 2, sm: 3 },
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
zIndex: 10,
|
||||
borderRadius:"10px",
|
||||
}}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold', color: '#fefefeff', fontSize: { xs: '1rem', sm: '1.25rem' } }}>
|
||||
{title}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ px: { xs: 2, sm: 3 }, py: 2 }}>
|
||||
{settings.map((setting, index) => (
|
||||
<SettingItem
|
||||
key={index}
|
||||
title={setting.title}
|
||||
description={setting.description}
|
||||
enabled={states[setting.key]}
|
||||
onToggle={() => onToggle(setting.key)}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default function AccountSettingPage() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const [value, setValue] = React.useState(0);
|
||||
const [settings, setSettings] = React.useState({
|
||||
phoneVisibility: true,
|
||||
chatAlertsNotification: true,
|
||||
chatProtection: true,
|
||||
protectProfilePhoto: true,
|
||||
callProtection: true,
|
||||
matchAlerts: true,
|
||||
profileViews: false,
|
||||
messagePermission: true,
|
||||
blockUnverified: false,
|
||||
});
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const toggleSetting = (key) => {
|
||||
setSettings(prev => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 0,
|
||||
label: 'Phone Number',
|
||||
fullLabel: 'Phone Number Visibility Controls',
|
||||
icon: <Phone size={20} />,
|
||||
settings: [
|
||||
{
|
||||
key: 'phoneVisibility',
|
||||
title: 'Phone Number Visibility',
|
||||
description: 'You can control phone number visibility through temporary and permanent methods on your phone. For a single call, dial *67 before the number.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: 'Chat Alerts',
|
||||
fullLabel: 'Chat Alerts',
|
||||
icon: <MessageSquare size={20} />,
|
||||
settings: [
|
||||
{
|
||||
key: 'chatAlertsNotification',
|
||||
title: 'Chat Alerts Notification',
|
||||
description: 'Matrimony sites send chat alerts with standard, automated content to notify you of new interactions related to your profile.',
|
||||
},
|
||||
{
|
||||
key: 'chatProtection',
|
||||
title: 'Chat Protection',
|
||||
description: 'To protect yourself while using matrimonial sites, the primary "chat protection content" is restricting the personal and sensitive information you share both on your public profile and in early conversations.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Profile',
|
||||
fullLabel: 'Profile Protection',
|
||||
icon: <Shield size={20} />,
|
||||
settings: [
|
||||
{
|
||||
key: 'protectProfilePhoto',
|
||||
title: 'Protect Profile photo to all',
|
||||
description: 'The photograph privacy settings options are available in the \'My Photos\' section of the \'My Profile\' page.',
|
||||
},
|
||||
{
|
||||
key: 'callProtection',
|
||||
title: 'Call Protection',
|
||||
description: 'To implement call protection, most major matrimony sites offer built-in privacy features that allow you to control who sees your contact details and photos.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Match Alerts',
|
||||
fullLabel: 'Match Alerts Preferences',
|
||||
icon: <Bell size={20} />,
|
||||
settings: [
|
||||
{
|
||||
key: 'matchAlerts',
|
||||
title: 'Match Alert Notifications',
|
||||
description: 'Receive notifications when new profiles match your preferences and requirements.',
|
||||
},
|
||||
{
|
||||
key: 'profileViews',
|
||||
title: 'Profile View Alerts',
|
||||
description: 'Get notified when someone views your profile or shows interest in connecting with you.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: 'Messages',
|
||||
fullLabel: 'Who Can Message Me?',
|
||||
icon: <UserCheck size={20} />,
|
||||
settings: [
|
||||
{
|
||||
key: 'messagePermission',
|
||||
title: 'Message Permissions',
|
||||
description: 'Control who can send you messages. You can restrict messages to only verified profiles or profiles that match your preferences.',
|
||||
},
|
||||
{
|
||||
key: 'blockUnverified',
|
||||
title: 'Block Unverified Profiles',
|
||||
description: 'Automatically block messages from profiles that haven\'t completed verification process.',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1,
|
||||
display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap:"20px",
|
||||
minHeight: '90vh', marginTop:"50px", marginBottom:"50px" }}>
|
||||
{/* Desktop: Vertical Sidebar */}
|
||||
{!isMobile && (
|
||||
<Box sx={{ width: 300, borderRadius:"10px" ,background:"#ffeac9", borderRight: '1px solid #e5e7eb', display: { xs: 'none', md: 'block' } }}>
|
||||
<Box sx={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
bgcolor: '#ffeac9',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
px: 3,
|
||||
py: 2,
|
||||
zIndex: 10,
|
||||
borderRadius:"10px" ,
|
||||
}}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 'bold', color: '#111827' }}>
|
||||
Settings
|
||||
</Typography>
|
||||
</Box>
|
||||
<Tabs
|
||||
orientation="vertical"
|
||||
variant="scrollable"
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
aria-label="Settings tabs"
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
left: 0,
|
||||
width: 4,
|
||||
backgroundColor: '#A70710',
|
||||
},
|
||||
'& .MuiTab-root': {
|
||||
// alignItems: 'flex-start',
|
||||
// textAlign: 'left',
|
||||
justifyContent:"left",
|
||||
minHeight: 64,
|
||||
px: 3,
|
||||
py: 2,
|
||||
textTransform: 'none',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
color: '#374151',
|
||||
'&.Mui-selected': {
|
||||
color: '#A70710',
|
||||
backgroundColor: '#fff7ed',
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: '#f9fafb',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, index) => (
|
||||
<Tab
|
||||
key={tab.id}
|
||||
icon={tab.icon}
|
||||
iconPosition="start"
|
||||
label={tab.fullLabel}
|
||||
{...a11yProps(index, false)}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Mobile: Horizontal Tabs */}
|
||||
{isMobile && (
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e5e7eb', display: { xs: 'block', md: 'none' } }}>
|
||||
<Box sx={{ px: 2, py: 2 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold', color: '#111827' }}>
|
||||
Settings
|
||||
</Typography>
|
||||
</Box>
|
||||
<Tabs
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
variant="scrollable"
|
||||
scrollButtons="auto"
|
||||
aria-label="Settings tabs"
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
backgroundColor: '#A70710',
|
||||
height: 3,
|
||||
},
|
||||
'& .MuiTab-root': {
|
||||
textTransform: 'none',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 500,
|
||||
minWidth: 'auto',
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
color: '#ffffffff',
|
||||
'&.Mui-selected': {
|
||||
color: '#A70710',
|
||||
},
|
||||
},
|
||||
'& .MuiTabs-flexContainer': {
|
||||
gap: 1,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, index) => (
|
||||
<Tab
|
||||
key={tab.id}
|
||||
icon={tab.icon}
|
||||
iconPosition="start"
|
||||
label={tab.label}
|
||||
{...a11yProps(index, true)}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Tab Content */}
|
||||
<Box sx={{ flex: 1, width: '100%' }}>
|
||||
{tabs.map((tab, index) => (
|
||||
<TabPanel key={tab.id} value={value} index={index}>
|
||||
<TabContent
|
||||
title={tab.fullLabel}
|
||||
settings={tab.settings}
|
||||
states={settings}
|
||||
onToggle={toggleSetting}
|
||||
/>
|
||||
</TabPanel>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
340
src/pages/BlockedProfileListPage.jsx
Normal file
340
src/pages/BlockedProfileListPage.jsx
Normal file
@ -0,0 +1,340 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Tabs, Tab, Box, Chip } from '@mui/material';
|
||||
import { CheckCircle, Phone, ExpandMore } from '@mui/icons-material';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
|
||||
const BlockedProfile = ({ profile }) => (
|
||||
<div className="bg-white border border-1 border-red-100 rounded-lg shadow-sm p-6 mb-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="relative flex-shrink-0">
|
||||
<img
|
||||
src={profile.image}
|
||||
alt={profile.name}
|
||||
className="w-32 h-32 rounded-2xl object-cover border-2 border-[#A70710]"
|
||||
/>
|
||||
<button className="w-8 h-8 flex justify-center items-center absolute bottom-0 right-0 bg-[#A70710] text-white rounded-full shadow-lg">
|
||||
<Phone className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<CheckCircle className="text-green-500 w-5 h-5" />
|
||||
<span className="text-green-500 font-medium">Verified</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-1">{profile.name}</h2>
|
||||
<p className="text-gray-500 text-sm mb-3">{profile.id} | Profile Created by Parent</p>
|
||||
|
||||
<div className="space-y-1 text-gray-700">
|
||||
<p className="font-medium">{profile.age} yrs, {profile.height}, {profile.language},</p>
|
||||
<p className="font-medium">{profile.location},</p>
|
||||
<p className="font-medium">{profile.education}, {profile.occupation}, ₹ {profile.income}, {profile.state}, India</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center justify-between border-t border-[#A70710] pt-4">
|
||||
<p className="text-gray-600">You have blocked this profile</p>
|
||||
<button className="bg-[#A70710] hover:bg-red-600 text-white px-8 py-2 rounded-full font-medium transition-colors">
|
||||
UnBlock
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ReportedProfile = ({ profile, onViewReason }) => {
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-md p-4 mb-1 border border-1 border-red-100 hover:shadow-lg transition-shadow">
|
||||
<div className="flex flex-col sm:flex-row items-start gap-4">
|
||||
<div className='overflow-hidden w-[100%] h-[100%] max-w-50 max-h-45 rounded-lg flex-shrink-0'>
|
||||
<img
|
||||
src={profile.image}
|
||||
alt={profile.name}
|
||||
className="w-full h-full object-cover "
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 w-full">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-1">{profile.name}</h3>
|
||||
<p className="text-sm text-gray-500 mb-2">
|
||||
ID : {profile.id} <span className="text-xs ml-1">Last seen {profile.lastSeen}</span>
|
||||
</p>
|
||||
|
||||
<div className="space-y-1.5 text-sm">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-gray-400">•</span>
|
||||
<span className="text-gray-600">Profile created by Parent</span>
|
||||
<span className="text-gray-400">•</span>
|
||||
<span className="text-gray-600">{profile.age} yrs</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400">•</span>
|
||||
<span className="text-gray-600">{profile.caste}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-gray-400">•</span>
|
||||
<span className="text-gray-600">{profile.occupation}</span>
|
||||
<span className="text-gray-400">•</span>
|
||||
<span className="text-gray-600">{profile.location}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => onViewReason(profile)}
|
||||
className="flex items-center gap-1 text-red-500 hover:text-red-600 mt-3 text-sm font-medium transition-colors"
|
||||
>
|
||||
View Report Reason
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ReportReasonModal = ({ profile, onClose }) => {
|
||||
if (!profile) return null;
|
||||
|
||||
return (
|
||||
<div style={{backdropFilter:"blur(5px)"}} className="fixed inset-0 bg-[#0000006b] bg-opacity-50 flex items-center justify-center z-50 p-4 animate-fadeIn">
|
||||
<div className="bg-white rounded-lg shadow-2xl max-w-md w-full p-6 animate-slideUp">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<img
|
||||
src={profile.image}
|
||||
alt={profile.name}
|
||||
className="w-16 h-20 rounded-lg object-cover flex-shrink-0"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900">{profile.name}</h3>
|
||||
<p className="text-sm text-gray-500">ID : {profile.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4">
|
||||
<h4 className="font-bold text-gray-900 mb-3">Reason For Report</h4>
|
||||
<p className="text-sm text-gray-600 leading-relaxed bg-gray-50 p-3 rounded-lg mb-4">
|
||||
{profile.reportReason}
|
||||
</p>
|
||||
</div>
|
||||
<div className='w-full flex justify-center'>
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
className=" w-[fit-content] px-8 rounded-full bg-green-500 hover:bg-red-600 text-white py-2.5 font-medium transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
function BlockedProfileListPage() {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [selectedReport, setSelectedReport] = useState(null);
|
||||
const blockedProfiles = [
|
||||
{
|
||||
id: 'M6075010',
|
||||
name: 'Aravindh Vinayak M',
|
||||
age: 37,
|
||||
height: "5'6\"",
|
||||
language: 'Tamil',
|
||||
location: 'Karuneegar',
|
||||
education: 'BE',
|
||||
occupation: 'Clerk',
|
||||
income: '9 - 10 Lakhs',
|
||||
state: 'Tamil Nadu',
|
||||
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop'
|
||||
},
|
||||
{
|
||||
id: 'M6075010',
|
||||
name: 'Aravindh Vinayak M',
|
||||
age: 37,
|
||||
height: "5'6\"",
|
||||
language: 'Tamil',
|
||||
location: 'Karuneegar',
|
||||
education: 'BE',
|
||||
occupation: 'Clerk',
|
||||
income: '9 - 10 Lakhs',
|
||||
state: 'Tamil Nadu',
|
||||
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop'
|
||||
},
|
||||
{
|
||||
id: 'M6075010',
|
||||
name: 'Aravindh Vinayak M',
|
||||
age: 37,
|
||||
height: "5'6\"",
|
||||
language: 'Tamil',
|
||||
location: 'Karuneegar',
|
||||
education: 'BE',
|
||||
occupation: 'Clerk',
|
||||
income: '9 - 10 Lakhs',
|
||||
state: 'Tamil Nadu',
|
||||
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop'
|
||||
},
|
||||
{
|
||||
id: 'M6075010',
|
||||
name: 'Aravindh Vinayak M',
|
||||
age: 37,
|
||||
height: "5'6\"",
|
||||
language: 'Tamil',
|
||||
location: 'Karuneegar',
|
||||
education: 'BE',
|
||||
occupation: 'Clerk',
|
||||
income: '9 - 10 Lakhs',
|
||||
state: 'Tamil Nadu',
|
||||
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop'
|
||||
}
|
||||
];
|
||||
|
||||
const reportedProfiles = [
|
||||
{
|
||||
id: 'TK52586A',
|
||||
name: 'Pavilash . P',
|
||||
age: 23,
|
||||
lastSeen: 'Nov 25',
|
||||
caste: 'Agamudayar / Arcot / Thuluva vellala',
|
||||
occupation: 'Engineer-non – IT',
|
||||
location: 'Chennai',
|
||||
image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=400&fit=crop',
|
||||
showReason: true,
|
||||
reportReason: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
|
||||
},
|
||||
{
|
||||
id: 'TK52586A',
|
||||
name: 'Pavilash . P',
|
||||
age: 23,
|
||||
lastSeen: 'Nov 25',
|
||||
caste: 'Agamudayar / Arcot / Thuluva vellala',
|
||||
occupation: 'Engineer-non – IT',
|
||||
location: 'Chennai',
|
||||
image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=400&fit=crop',
|
||||
showReason: true,
|
||||
reportReason: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
|
||||
},
|
||||
{
|
||||
id: 'TK52586A',
|
||||
name: 'Pavilash . P',
|
||||
age: 23,
|
||||
lastSeen: 'Nov 25',
|
||||
caste: 'Agamudayar / Arcot / Thuluva vellala',
|
||||
occupation: 'Engineer-non – IT',
|
||||
location: 'Chennai',
|
||||
image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=400&fit=crop',
|
||||
showReason: true,
|
||||
reportReason: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
|
||||
},
|
||||
{
|
||||
id: 'TK52586A',
|
||||
name: 'Pavilash . P',
|
||||
age: 23,
|
||||
lastSeen: 'Nov 25',
|
||||
caste: 'Agamudayar / Arcot / Thuluva vellala',
|
||||
occupation: 'Engineer-non – IT',
|
||||
location: 'Chennai',
|
||||
image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=400&fit=crop',
|
||||
showReason: true,
|
||||
reportReason: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
|
||||
}
|
||||
];
|
||||
|
||||
const handleTabChange = (event, newValue) => {
|
||||
setActiveTab(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className=" py-4 md:py-8">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<h1 className="text-center text-[24px] font-bold text-green-900 mb-6">Blocked & Reported Profiles</h1>
|
||||
|
||||
<Box sx={{ mb: 3, width:"100%", maxWidth:"300px", marginRight:"auto", marginLeft:" auto" , marginBottom:"30px"}}>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
sx={{
|
||||
'& .MuiTab-root': {
|
||||
textTransform: 'none',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
minWidth: 120,
|
||||
},
|
||||
'& .Mui-selected': {
|
||||
color: '#fff',
|
||||
background:"#A70710"
|
||||
},
|
||||
'& .MuiTabs-indicator': {
|
||||
backgroundColor: '#A70710',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab label="Block List" />
|
||||
<Tab label="Reported List" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<div className="transition-all duration-300">
|
||||
{activeTab === 0 && (
|
||||
<div className='w-[100%] max-w-[1400px] mx-auto grid grid-cols-1 md:grid-cols-2 gap-2'>
|
||||
{blockedProfiles.map((profile, index) => (
|
||||
<BlockedProfile key={index} profile={profile} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 1 && (
|
||||
<div className='w-[100%] max-w-[1400px] mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-2'>
|
||||
{reportedProfiles.map((profile, index) => (
|
||||
<ReportedProfile
|
||||
key={index}
|
||||
profile={profile}
|
||||
onViewReason={setSelectedReport}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
{/* Report Reason Modal */}
|
||||
<ReportReasonModal
|
||||
profile={selectedReport}
|
||||
onClose={() => setSelectedReport(null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
.animate-slideUp {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlockedProfileListPage;
|
||||
416
src/pages/InterestSendPage.jsx
Normal file
416
src/pages/InterestSendPage.jsx
Normal file
@ -0,0 +1,416 @@
|
||||
import * as React from "react";
|
||||
import { useState } from "react";
|
||||
import { Crown, Bookmark } from "lucide-react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Tab from "@mui/material/Tab";
|
||||
import TabContext from "@mui/lab/TabContext";
|
||||
import TabList from "@mui/lab/TabList";
|
||||
import TabPanel from "@mui/lab/TabPanel";
|
||||
|
||||
// Icons as inline SVG components
|
||||
const CakeIcon = () => (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const AccessibilityIcon = () => (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const GroupsIcon = () => (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SchoolIcon = () => (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const LocationIcon = () => (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
// Profile Card Component
|
||||
function ProfileCard({ profile,activeTab }) {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-[10px] shadow-xl overflow-hidden border border-green-200">
|
||||
{/* Profile Image Section */}
|
||||
<div className="relative">
|
||||
{/* Premium Badge */}
|
||||
{profile.isPremium && (
|
||||
<div 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" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Shortlist Button */}
|
||||
<button 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-[12px] font-medium">Shortlist</span>
|
||||
</button>
|
||||
|
||||
<img
|
||||
src={profile.image}
|
||||
alt="Profile"
|
||||
className="w-full h-80 object-cover"
|
||||
/>
|
||||
|
||||
{/* White Gradient Overlay */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
<p className="text-[14px] text-gray-700 leading-relaxed">
|
||||
Matrimony ID: {profile.matrimonyId}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profile Details */}
|
||||
<div className="px-4 pt-2 pb-4 flex flex-col gap-2 bg-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Age: {profile.age}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Height: {profile.height}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<GroupsIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
{profile.religion}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<SchoolIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
{profile.education}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<LocationIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
{profile.location}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 my-2 justify-between">
|
||||
|
||||
{/* ❌ Cross button always visible */}
|
||||
<button className="w-[60px] h-[60px] bg-[#A70710] hover:bg-red-300 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center transform hover:scale-90">
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* ❤️ Like Button → ONLY visible when tab = "2" (Sent Requests) */}
|
||||
{activeTab === "2" && (
|
||||
<button
|
||||
className="w-[60px] h-[60px] bg-[#034E08] hover:bg-green-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={() => setIsLiked(!isLiked)}
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#EF4444" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67 10.94 4.61a5.5 5.5 0 0 0-7.78 7.78L4.22 13.45 12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Main Component
|
||||
export default function InterestSendPage() {
|
||||
const [value, setValue] = useState("1");
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
// Sample data for different categories
|
||||
const profilesData = {
|
||||
received: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Priya Sharma",
|
||||
matrimonyId: "PS2847593",
|
||||
age: 24,
|
||||
height: "5.4",
|
||||
religion: "Hindu / Brahmin",
|
||||
education: "MBA / Marketing Manager",
|
||||
location: "Mumbai",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop",
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Ananya Reddy",
|
||||
matrimonyId: "AR2847594",
|
||||
age: 23,
|
||||
height: "5.3",
|
||||
religion: "Hindu / Reddy",
|
||||
education: "B.Tech / Software Engineer",
|
||||
location: "Hyderabad",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=800&fit=crop",
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Divya Patel",
|
||||
matrimonyId: "DP2847595",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
religion: "Hindu / Patel",
|
||||
education: "CA / Chartered Accountant",
|
||||
location: "Ahmedabad",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&h=800&fit=crop",
|
||||
isPremium: true,
|
||||
},
|
||||
],
|
||||
sent: [
|
||||
{
|
||||
id: 4,
|
||||
name: "Kavya Iyer",
|
||||
matrimonyId: "KI2847596",
|
||||
age: 22,
|
||||
height: "5.2",
|
||||
religion: "Hindu / Iyer",
|
||||
education: "BCA / Data Analyst",
|
||||
location: "Chennai",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=600&h=800&fit=crop",
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Neha Singh",
|
||||
matrimonyId: "NS2847597",
|
||||
age: 26,
|
||||
height: "5.6",
|
||||
religion: "Hindu / Rajput",
|
||||
education: "MD / Doctor",
|
||||
location: "Delhi",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600&h=800&fit=crop",
|
||||
isPremium: false,
|
||||
},
|
||||
],
|
||||
accepted: [
|
||||
{
|
||||
id: 6,
|
||||
name: "Shreya Nair",
|
||||
matrimonyId: "SN2847598",
|
||||
age: 24,
|
||||
height: "5.4",
|
||||
religion: "Hindu / Nair",
|
||||
education: "B.Sc / Nurse",
|
||||
location: "Kochi",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=600&h=800&fit=crop",
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Meera Desai",
|
||||
matrimonyId: "MD2847599",
|
||||
age: 23,
|
||||
height: "5.3",
|
||||
religion: "Hindu / Desai",
|
||||
education: "BBA / HR Manager",
|
||||
location: "Pune",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1517841905240-472988babdf9?w=600&h=800&fit=crop",
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Riya Kumar",
|
||||
matrimonyId: "RK2847600",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
religion: "Hindu / Kumar",
|
||||
education: "M.Tech / Project Manager",
|
||||
location: "Bangalore",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=600&h=800&fit=crop",
|
||||
isPremium: true,
|
||||
},
|
||||
],
|
||||
rejected: [
|
||||
{
|
||||
id: 9,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
religion: "Hindu / Joshi",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=600&h=800&fit=crop",
|
||||
isPremium: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className=" py-8 px-2">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">
|
||||
Interest Management
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Manage your matrimony profile interests
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* MUI Tabs */}
|
||||
<Box sx={{ width: "100%", typography: "body1" }}>
|
||||
<TabContext value={value}>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: 1,
|
||||
borderColor: "divider",
|
||||
width: "100%",
|
||||
maxWidth: "800px",
|
||||
margin: "0px auto",
|
||||
}}
|
||||
>
|
||||
<TabList
|
||||
onChange={handleChange}
|
||||
aria-label="interest management tabs"
|
||||
variant="scrollable"
|
||||
// scrollButtons="auto"
|
||||
scrollButtons="on"
|
||||
allowScrollButtonsMobile
|
||||
sx={{
|
||||
"& .MuiTabs-scrollButtons": {
|
||||
display: "flex !important", // force visible
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "36px",
|
||||
height: "36px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#034E08",
|
||||
color: "white",
|
||||
margin: "0 6px",
|
||||
boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
|
||||
},
|
||||
|
||||
"& .MuiTabs-scrollButtons:hover": {
|
||||
backgroundColor: "#046b0b",
|
||||
},
|
||||
|
||||
"& .MuiTabs-scrollButtons.Mui-disabled": {
|
||||
opacity: 0.4,
|
||||
backgroundColor: "#9bcf9d",
|
||||
},
|
||||
|
||||
"& .MuiTab-root": {
|
||||
fontSize: { xs: "14px", sm: "16px" },
|
||||
fontWeight: 600,
|
||||
textTransform: "none",
|
||||
minWidth: { xs: 120, sm: 150 },
|
||||
color: "#666",
|
||||
},
|
||||
"& .Mui-selected": {
|
||||
color: "#034E08 !important",
|
||||
},
|
||||
"& .MuiTabs-indicator": {
|
||||
backgroundColor: "#034E08",
|
||||
height: 3,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab label="Received Requests" value="1" />
|
||||
<Tab label="Sent Requests" value="2" />
|
||||
<Tab label="Accepted" value="3" />
|
||||
<Tab label="Rejected" value="4" />
|
||||
</TabList>
|
||||
</Box>
|
||||
|
||||
{/* Received Requests */}
|
||||
<TabPanel value="1" sx={{ padding: "24px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-[100%] max-w-[1200px] mx-auto">
|
||||
{profilesData.received.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
{/* Sent Requests */}
|
||||
<TabPanel value="2" sx={{ padding: "24px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-[100%] max-w-[1200px] mx-auto">
|
||||
{profilesData.sent.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
{/* Accepted */}
|
||||
<TabPanel value="3" sx={{ padding: "24px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-[100%] max-w-[1200px] mx-auto">
|
||||
{profilesData.accepted.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
{/* Rejected */}
|
||||
<TabPanel value="4" sx={{ padding: "24px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-[100%] max-w-[1200px] mx-auto">
|
||||
{profilesData.rejected.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
</div>
|
||||
</TabPanel>
|
||||
</TabContext>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
src/pages/MatchesPage.jsx
Normal file
15
src/pages/MatchesPage.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
import MatchesInterface from "../components/matches/MatchesProfilesTab"
|
||||
import SearchUI from "../components/matches/SearchUI"
|
||||
|
||||
const MatchesPage = () => {
|
||||
return (
|
||||
<>
|
||||
<SearchUI/>
|
||||
<MatchesInterface/>
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MatchesPage
|
||||
16
src/pages/ProfileDetailPage.jsx
Normal file
16
src/pages/ProfileDetailPage.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import MatrimonyProfile from "../components/profiledetail/MatrimonyProfile"
|
||||
import PartnerPreferences from "../components/profiledetail/PartnerPreferences"
|
||||
|
||||
const ProfileDetailPage = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-[100%] max-w-[1400px] mx-auto my-10">
|
||||
<MatrimonyProfile/>
|
||||
<PartnerPreferences/>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProfileDetailPage
|
||||
@ -8,20 +8,33 @@ import DailyRecommendedCard from '../components/profiledashboard/DailyRecommende
|
||||
import MatrimonyArticles from '../components/profiledashboard/MatrimonyArticles';
|
||||
import MatchingList from '../components/profiledashboard/MatchingList';
|
||||
import PaidMemberCard from '../components/profiledashboard/PaidMemberCard';
|
||||
import LazyImage from '../components/common/LazyImage';
|
||||
import weddingpromo1 from "../assets/images/weddingpromo1.jpg";
|
||||
import weddingpromo2 from "../assets/images/weddingpromo2.jpg";
|
||||
|
||||
import weddingpromo3 from "../assets/images/weddingpromo3.jpg";
|
||||
|
||||
import weddingpromo4 from "../assets/images/weddingpromo4.jpg";
|
||||
import ProfileCard from '../components/common/ProfileCard';
|
||||
import NewJoinedProfile from '../components/profiledashboard/NewJoinedProfile';
|
||||
import CustomerSupportCard from '../components/profiledashboard/CustomerSupportCard';
|
||||
import VideoSwiperGallery from '../components/profiledashboard/VideoSwiperGallery';
|
||||
|
||||
|
||||
const images = [
|
||||
weddingpromo1, // bride in saree
|
||||
weddingpromo2, // traditional jewellery
|
||||
weddingpromo3, // flower details
|
||||
weddingpromo4, // couple hands
|
||||
weddingpromo1, // bride close-up
|
||||
weddingpromo3, // groom + bride portrait
|
||||
weddingpromo2, // wedding decor
|
||||
weddingpromo4, // bride in temple
|
||||
weddingpromo1, // traditional ceremony
|
||||
weddingpromo3 // couple full shot
|
||||
];
|
||||
|
||||
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
|
||||
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
|
||||
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
|
||||
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
|
||||
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
|
||||
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
|
||||
];
|
||||
const UserDashboardHome = () => {
|
||||
return (
|
||||
<>
|
||||
@ -62,6 +75,12 @@ const UserDashboardHome = () => {
|
||||
alt={`Slide ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* <LazyImage
|
||||
src={img}
|
||||
alt={`Slide ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/> */}
|
||||
{/* <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm px-6 py-2 rounded-full">
|
||||
<span className="text-white font-semibold text-lg">Slide {idx + 1}</span>
|
||||
</div> */}
|
||||
@ -71,109 +90,7 @@ const UserDashboardHome = () => {
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
{/* <style>{`
|
||||
.swiper {
|
||||
width: 100%;
|
||||
// padding: 60px 80px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
transition: all 0.4s ease;
|
||||
opacity: 1;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.swiper-slide-active {
|
||||
width: 630px !important;
|
||||
height: 320px !important;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 2;
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.swiper-slide {
|
||||
width: 300px;
|
||||
height: 150px; }
|
||||
|
||||
.swiper-slide-active {
|
||||
|
||||
width: 300px;
|
||||
height: 150px ! important;
|
||||
}
|
||||
}
|
||||
.swiper-slide > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-button-prev-custom,
|
||||
.swiper-button-next-custom {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.swiper {
|
||||
padding: 50px 60px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 240px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.swiper-slide-active {
|
||||
width: 380px !important;
|
||||
height: 480px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.swiper {
|
||||
padding: 40px 50px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 180px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.swiper-slide-active {
|
||||
width: 300px !important;
|
||||
height: 280px !important;
|
||||
}
|
||||
|
||||
.swiper-button-prev-custom,
|
||||
.swiper-button-next-custom {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.swiper {
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 140px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.swiper-slide-active {
|
||||
width: 300px !important;
|
||||
height: 220px !important;
|
||||
}
|
||||
|
||||
.swiper-button-prev-custom,
|
||||
.swiper-button-next-custom {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
`}</style> */}
|
||||
|
||||
<style>{`
|
||||
.custom-swiper-hero .swiper {
|
||||
@ -275,6 +192,10 @@ const UserDashboardHome = () => {
|
||||
<MatrimonyArticles/>
|
||||
<MatchingList/>
|
||||
<PaidMemberCard/>
|
||||
|
||||
<NewJoinedProfile/>
|
||||
<CustomerSupportCard/>
|
||||
<VideoSwiperGallery/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -6,6 +6,11 @@ import TermsAndConditionPage from '../pages/TermsAndCondition';
|
||||
import SafetyCentrePage from '../pages/SafetyCentre';
|
||||
import SubscriptionPlanPage from '../pages/SubscriptionPlan';
|
||||
import SubscriptionHistoryPage from '../pages/SubscriptionHistory'
|
||||
import MatchesPage from "../pages/MatchesPage";
|
||||
import InterestSendPage from "../pages/InterestSendPage";
|
||||
import BlockedProfileListPage from "../pages/BlockedProfileListPage";
|
||||
import AccountSettingPage from "../pages/AccountSettingsPage";
|
||||
import ProfileDetailPage from "../pages/ProfileDetailPage";
|
||||
|
||||
const UserRoutes = () => {
|
||||
|
||||
@ -14,6 +19,23 @@ const UserRoutes = () => {
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/main/dashboard" element={<UserDashboardHome />} />
|
||||
</Route>
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/matches" element={<MatchesPage />} />
|
||||
</Route>
|
||||
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/interest" element={<InterestSendPage />} />
|
||||
</Route>
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/profile-detail" element={<ProfileDetailPage />} />
|
||||
</Route>
|
||||
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/block-report-profilelist" element={<BlockedProfileListPage />} />
|
||||
</Route>
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/account-settings" element={<AccountSettingPage />} />
|
||||
</Route>
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/terms-and-condition" element={<TermsAndConditionPage />} />
|
||||
</Route>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user