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

new code

Browse Source
This commit is contained in:
Nithish-stoic 2025-12-29 18:09:25 +05:30
parent 26b39fe52a
commit 32b1347223
8 changed files with 401 additions and 374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

26
src/assets/images/astrology-horoscope-svgrepo-com.svg Normal file
View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.616,0,0,114.614,0,256s114.616,256,256,256c141.386,0,256-114.614,256-256S397.386,0,256,0z M428.717,135.014
c17.777,25.264,29.667,53.969,34.961,84.403l-76.655-17.69L428.717,135.014z M376.984,83.281l-66.712,41.695l-17.69-76.654
C323.016,53.617,351.72,65.504,376.984,83.281z M219.418,48.322l-17.69,76.654l-66.712-41.693
C160.28,65.506,188.984,53.617,219.418,48.322z M83.281,135.016l41.695,66.712l-76.654,17.69
C53.617,188.984,65.506,160.28,83.281,135.016z M83.281,376.983c-17.775-25.263-29.666-53.968-34.959-84.402l76.654,17.69
L83.281,376.983z M135.014,428.716l66.714-41.695l17.69,76.657C188.982,458.383,160.279,446.494,135.014,428.716z M256,421.29
l-24.496-106.151l-92.381,57.737l57.737-92.38L90.71,256l106.151-24.496l-57.74-92.381l92.383,57.737L256,90.71l24.496,106.15
l92.38-57.739l-57.739,92.383L421.289,256l-106.15,24.496l57.739,92.381l-92.381-57.737L256,421.29z M292.582,463.679
l17.69-76.655l66.712,41.695C351.72,446.496,323.016,458.385,292.582,463.679z M428.717,376.984l-41.695-66.712l76.655-17.69
C458.383,323.016,446.494,351.72,428.717,376.984z"/>
</g>
</g>
<g>
<g>
<path d="M264.016,256c0-17.331,12.604-31.714,29.145-34.489c-7.873-6.664-18.046-10.687-29.145-10.687
c-24.91,0-45.176,20.265-45.176,45.176c0,24.91,20.266,45.176,45.176,45.176c11.098,0,21.272-4.024,29.145-10.689
C276.62,287.712,264.016,273.328,264.016,256z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

4
src/assets/images/scorpio-svgrepo-com.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3C0.552285 3 1 3.44772 1 4V14H3V4C3 3.44772 3.44772 3 4 3C4.55228 3 5 3.44772 5 4V14H7V4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4V11.1716C9 13.8443 12.2314 15.1828 14.1213 13.2929L14.4571 12.9571L15 13.5H16V10H12.5V11L13.0429 11.5429L12.7071 11.8787C12.0771 12.5086 11 12.0625 11 11.1716V4C11 2.34315 9.65685 1 8 1C7.23165 1 6.53076 1.28885 6 1.76389C5.46924 1.28885 4.76835 1 4 1C3.23165 1 2.53076 1.28885 2 1.76389C1.46924 1.28885 0.768354 1 0 1V3Z" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 715 B

93
src/components/common/Footer.jsx
View File

@ -5,7 +5,7 @@ export default function Footer() {
return (
<footer className="bg-gradient-to-b from-green-50 to-white">
<div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-4">
{/* Need Help Section */}
<div>
<h3 className="text-[#A70710] font-bold text-lg mb-4">
@ -13,8 +13,8 @@ export default function Footer() {
</h3>
<ul className="space-y-2">
<li>
<Link to="/login"
<Link
to="/login"
className="text-gray-600 hover:text-green-600 transition-colors"
>
Member Login
@ -70,20 +70,20 @@ export default function Footer() {
</li> */}
</ul>
<ul className="space-y-2 py-2">
<Link
to="/contact"
className="text-gray-600 hover:text-green-600 transition-colors"
>
Contact Us
</Link>
</ul>
<Link
to="/contact"
className="text-gray-600 hover:text-green-600 transition-colors"
>
Contact Us
</Link>
</ul>
</div>
{/* Company Section */}
{/* <div> */}
{/* <h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3> */}
{/* <ul className="space-y-2"> */}
{/* <li>
{/* <h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3> */}
{/* <ul className="space-y-2"> */}
{/* <li>
<a
href="#"
className="text-gray-600 hover:text-green-600 transition-colors"
@ -91,7 +91,7 @@ export default function Footer() {
About Us
</a>
</li> */}
{/* <li>
{/* <li>
<a
href="#"
className="text-gray-600 hover:text-green-600 transition-colors"
@ -99,7 +99,7 @@ export default function Footer() {
Thirukalyanam Blog
</a>
</li> */}
{/* <li>
{/* <li>
<a
href="#"
className="text-gray-600 hover:text-green-600 transition-colors"
@ -107,7 +107,7 @@ export default function Footer() {
Careers
</a>
</li> */}
{/* <li>
{/* <li>
<a
href="#"
className="text-gray-600 hover:text-green-600 transition-colors"
@ -115,7 +115,7 @@ export default function Footer() {
Awards & Recognition
</a>
</li> */}
{/* <li>
{/* <li>
<Link
to="/contact"
className="text-gray-600 hover:text-green-600 transition-colors"
@ -123,7 +123,7 @@ export default function Footer() {
Contact Us
</Link>
</li> */}
{/* </ul>
{/* </ul>
</div> */}
{/* Privacy & You Section */}
@ -190,7 +190,7 @@ export default function Footer() {
</ul>
</div>
{/* Social Media Section */}
{/* Social Media Section */}
<div className="mb-4">
<h3 className="text-[#A70710] font-bold text-lg mb-4">
Find us on:
@ -227,50 +227,10 @@ export default function Footer() {
<Youtube className="w-5 h-5 text-gray-700" />
</a>
</div>
</div>
{/* Social Media & Apps Section */}
<div>
{/* <h3 className="text-[#A70710] font-bold text-lg mb-4">
Find us on:
</h3> */}
{/* <div className="flex gap-3 mb-6">
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Facebook className="w-5 h-5 text-gray-700" />
</a>
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Instagram className="w-5 h-5 text-gray-700" />
</a>
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Linkedin className="w-5 h-5 text-gray-700" />
</a>
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Twitter className="w-5 h-5 text-gray-700" />
</a>
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Youtube className="w-5 h-5 text-gray-700" />
</a>
</div> */}
<h3 className="text-[#A70710] font-bold text-lg mb-4">
Get the Thirukalyanam App
</h3>
<div className="space-y-3">
<div className="flex gap-3">
<a href="#" className="block">
<img
src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg"
@ -286,21 +246,18 @@ export default function Footer() {
/>
</a>
</div>
<p className="text-xs text-gray-500 mt-3">
Apple and the Apple Logo are trademarks of Apple Inc.
</p>
<p className="text-xs text-gray-500 mt-1">
Google Play and the Google Play logo are trademarks of Google LLC.
</p>
</div>
{/* Social Media & Apps Section */}
</div>
{/* Bottom Copyright Section */}
<div className="border-t border-gray-200 pt-6">
<div className="flex flex-col md:flex-row justify-between items-center">
<p className="text-sm text-gray-600 mb-4 md:mb-0">
© {new Date().getFullYear()} Thirukalyanam, The World's
Leading Matchmaking Service™
© {new Date().getFullYear()} Thirukalyanam, The World's Leading
Matchmaking Service™
</p>
<p className="text-sm text-gray-600">

101
src/components/common/Threemarquee.jsx
View File

@ -2,6 +2,7 @@ import ThreeDScrollTriggerRow, {
ThreeDScrollTriggerContainer,
} from "../lightswind/ThreeDScrollTrigger";
import React, { useState } from "react";
const reviews = [
{
name: "Aria Thompson",
@ -28,51 +29,41 @@ const reviews = [
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
},
{
name: "Liam Patel",
company: "NextGen Interfaces",
name: "Sarah Mitchell",
company: "DesignFlow Co",
image:
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&w=96&h=96&facepad=2",
review:
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
"The component library is extensive and well-documented. Saved us months of development time.",
},
{
name: "Liam Patel",
company: "NextGen Interfaces",
name: "James Chen",
company: "TechVision Labs",
image:
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=facearea&w=96&h=96&facepad=2",
review:
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
"Outstanding support and continuous updates. Lightswind UI keeps getting better every release.",
},
{
name: "Liam Patel",
company: "NextGen Interfaces",
name: "Emma Davis",
company: "PixelPerfect Studios",
image:
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=facearea&w=96&h=96&facepad=2",
review:
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
},
{
name: "Liam Patel",
company: "NextGen Interfaces",
image:
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
review:
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
"Responsive by default and looks amazing on all devices. This is exactly what we needed.",
},
];
export default function ThreeScrollTrigger() {
// Split reviews across 3 rows for masonry feel
// Split reviews across 3 rows
const row1 = [reviews[0], reviews[1]];
const row2 = [reviews[2], reviews[3]];
const row3 = [reviews[4], reviews[5], reviews[6]];
// Split reviews into 2 rows with 3 cards each
const row1 = reviews.slice(0, 3);
const row2 = reviews.slice(3, 6);
const [paused, setPaused] = useState(false);
return (
<div className="w-full mx-auto max-w-[1300px] overflow-hidden">
<ThreeDScrollTriggerContainer className="py-8 space-y-8">
return (
<div className="w-full mx-auto max-w-[1400px] overflow-hidden">
<ThreeDScrollTriggerContainer className="py-8 space-y-8">
{/* Row 1 - 3 Cards scrolling right */}
<ThreeDScrollTriggerRow baseVelocity={2} direction={1} paused={paused}>
<div className="flex flex-row gap-6 px-3 py-1">
{row1.map((rev, idx) => (
@ -86,48 +77,54 @@ export default function ThreeScrollTrigger() {
</div>
</ThreeDScrollTriggerRow>
<ThreeDScrollTriggerRow baseVelocity={2} direction={-1}>
{/* Row 2 - 3 Cards scrolling left */}
<ThreeDScrollTriggerRow baseVelocity={2} direction={-1} paused={paused}>
<div className="flex flex-row gap-6 px-3 py-1">
{row2.map((rev, idx) => (
<ReviewCard key={idx} {...rev} onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)} />
<ReviewCard
key={idx}
{...rev}
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
/>
))}
</div>
</ThreeDScrollTriggerRow>
{/* <ThreeDScrollTriggerRow baseVelocity={2} direction={1}>
<div className="flex flex-row gap-6 px-3 py-1">
{row3.map((rev, idx) => (
<ReviewCard key={idx} {...rev} onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)} />
))}
</div>
</ThreeDScrollTriggerRow> */}
</ThreeDScrollTriggerContainer>
</div>
);
}
// Card component for clarity and reuse
function ReviewCard({ name, company, image, review ,onMouseEnter, onMouseLeave}) {
function ReviewCard({
name,
company,
image,
review,
onMouseEnter,
onMouseLeave,
}) {
return (
<div className="bg-[#fbfbfb] rounded-xl shadow-md p-5 w-72 " onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
<div className="flex items-center mb-2">
<div
className="bg-[#fbfbfb] rounded-xl shadow-md p-6 w-80 min-w-80 flex-shrink-0 hover:shadow-lg transition-shadow"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div className="flex items-center gap-3 mb-4">
<img
src={image}
alt={name}
className="w-10 h-10 rounded-full mr-3 object-cover"
className="w-12 h-12 rounded-full object-cover flex-shrink-0"
loading="lazy"
/>
<div>
<div className="font-semibold text-gray-900">{name}</div>
<div className="text-xs text-gray-400">{company}</div>
<div className="flex-1 min-w-0">
<div className="font-semibold text-gray-900 truncate">{name}</div>
<div className="text-xs text-gray-500 truncate">{company}</div>
</div>
</div>
<div className="text-sm text-gray-700 break-words text-wrap">
{review}
<div className="text-sm text-gray-700 line-clamp-4">
"{review}"
</div>
</div>
);
}
}

6
src/components/landing/AppQRCode.jsx
View File

@ -4,8 +4,8 @@ import LazyImage from '../common/LazyImage';
const AppQRCode = () => {
return (
<>
<div className="relative z-9 bg-[#034f08] text-white rounded-[10px]">
<div className="container mx-auto px-4 py-8 lg:py-16">
<div className="relative z-9 bg-[#034f08] text-white ">
<div className="container mx-auto max-w-[1400px] px-2 md:px-0 py-8 lg:py-16">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
{/* Left Content Section */}
<div className="space-y-6 lg:space-y-8">
@ -171,7 +171,7 @@ const AppQRCode = () => {
</div>
</div> */}
<div className=''>
<div className='flex justify-center lg:justify-end'>
<LazyImage
src={apppromo}

3
src/components/profiledashboard/AstroChatUI.jsx
View File

@ -5,12 +5,13 @@ const AstroChatUI = () => {
return (
<>
<div className="flex items-center justify-center py-4 px-4">
<div className="flex items-center justify-center py-4">
<div className="w-full max-w-[690px] h-full max-h-[690px] md:max-h-[600px] sm:max-h-[500px] pt-6 sm:pt-8 md:pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-2xl sm:rounded-3xl p-4 sm:p-6 md:p-8 relative overflow-hidden">
{/* Logo Section */}
<div className="mb-4 sm:mb-6 md:mb-8">
<div className="flex items-center gap-2 mb-2">
<div className="relative">
{/* Planet Icon */}
<svg className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16" viewBox="0 0 64 64" fill="none">

542
src/components/profiledashboard/MatchingList.jsx
View File

@ -1,8 +1,23 @@
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 { 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";
@ -10,155 +25,174 @@ 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 AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
import profilebg from "../../assets/images/profilebg.jpg";
import Image from "../../assets/images/astrology-horoscope-svgrepo-com.svg";
import Image1 from "../../assets/images/scorpio-svgrepo-com.svg";
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow';
import { useNavigate } from 'react-router-dom';
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/effect-coverflow";
import { useNavigate } from "react-router-dom";
const MatchingList = () => {
const swiperRef = useRef(null);
const MatchingList = () => {
const swiperRef = useRef(null);
const navigate = useNavigate();
// Sample profile data
const profiles = [
{
id: 1,
name: 'Selva Kumar . R',
userId: 'TK52586A',
lastSeen: '14 Nov 25',
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
height: "5'2\"",
salary: "5-10 LPA",
location: "chennai",
caste: "Brahmin",
zodiac1: "Aries",
zodiac2: "Scorpio",
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',
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
height: "5'4\"",
salary: "8-12 LPA",
location: "hyderabad",
caste: "Brahmin",
zodiac1: "Aries",
zodiac2: "Scorpio",
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',
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
height: "5'10\"",
salary: "6-11 LPA",
location: "Mumbai",
caste: "Brahmin",
zodiac1: "Aries",
zodiac2: "Scorpio",
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',
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
height: "5'5\"",
salary: "7-11 LPA",
location: "Bangalore",
caste: "Brahmin",
zodiac1: "Aries",
zodiac2: "Scorpio",
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',
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
height: "5'8\"",
salary: "9-14 LPA",
location: "kerala",
caste: "Brahmin",
zodiac1: "Aries",
zodiac2: "Scorpio",
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',
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
}
height: "5'3\"",
salary: "5-10 LPA",
location: "madya pradesh",
caste: "Brahmin",
zodiac1: "Aries",
zodiac2: "Scorpio",
image:
"https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=500&fit=crop",
isPremium: true,
},
];
// Profile Card Component
const ProfileCard = ({ profile }) => {
const ProfileCard = ({ profile }) => {
const [isLiked, setIsLiked] = useState(false);
const navigate = useNavigate();
const navigate = useNavigate();
return (
<motion.div
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
onClick={() => navigate(`/profile-details/${profile.id}`)}
className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 border-gray-200">
transition={{ duration: 0.5 }}
onClick={() => navigate(`/profile-details/${profile.id}`)}
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-red-900 rounded-full p-2 shadow-lg"
>
<Crown className="w-5 h-5 text-white" />
</motion.div>
)}
{/* 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-red-900 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"
onClick={(e) => {
e.stopPropagation();
// shortlist logic
}}
>
<Bookmark className="w-4 h-4" />
<span className="text-[12px] font-medium">Shortlist</span>
</motion.button>
{/* 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"
onClick={(e) => {
e.stopPropagation();
// shortlist logic
}}
>
<Bookmark className="w-4 h-4" />
<span className="text-[12px] font-medium">Shortlist</span>
</motion.button>
<div classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]" style={{height:"300px"}}>
<img
src={profile.image}
alt={profile.name}
className="w-full h-full object-cover"
/>
</div>
<div
classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]"
style={{ height: "300px" }}
>
<img
src={profile.image}
alt={profile.name}
className="w-full h-full object-cover"
/>
</div>
{/* <LazyImage
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
alt="Profile"
@ -177,10 +211,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
{/* Profile Info Overlay - positioned at bottom */}
<div className="absolute bottom-1 left-0 right-0 p-6 pb-1 text-gray-900">
<h1 className="text-[18px] text-green-900 font-bold mb-2">
{profile.name}
{profile.name}
</h1>
<p className="text-[14px] text-gray-700 leading-relaxed">
Matrimony ID: {profile.userId}
Matrimony ID: {profile.userId}
</p>
</div>
</div>
@ -194,183 +228,191 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<CakeIcon className="w-4 h-4 text-gray-700" />
<CakeIcon className="w-4 h-4 text-gray-700" />
<span className="text-[14px] font-600 text-gray-900">
Age : {profile.age}
Age : {profile.age}
</span>
</div>
<div className="flex items-center gap-2">
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
<span className="text-[14px] font-600 text-gray-900">
Height: {profile.height}
Height: {profile.height}
</span>
</div>
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<AccountBalanceWalletIcon className="w-4 h-4 text-gray-700" />
<span className="text-[14px] font-600 text-gray-900">
{profile.salary}
</span>
</div>
<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 className="flex items-center gap-4">
<div className="flex items-center gap-2">
<GroupsIcon className="w-4 h-4 text-gray-700" />
<TempleHinduIcon className="w-4 h-4 text-gray-700" />
<span className="text-[14px] font-600 text-gray-900">
{profile.religion}
{profile.caste}
</span>
</div>
<div className="flex items-center gap-2">
<img src={Image} alt="" className="w-4 h-4 text-gray-700" />
<span className="text-[14px] font-600 text-gray-900">
{profile.zodiac1}
</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" />
<img src={Image1} alt="" className="w-4 h-4 text-gray-700" />
<span className="text-[14px] font-600 text-gray-900">
{profile.education}
{profile.zodiac2}
</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-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
Your Matching List
</h1>
<p className="text-gray-900 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"
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"
>
{profiles.map((profile) => (
<SwiperSlide key={profile.id}>
<ProfileCard profile={profile} />
</SwiperSlide>
))}
</Swiper>
<h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
Your Matching List
</h1>
<p className="text-gray-900 text-[12px]">
Find your perfect match today
</p>
</motion.div>
{/* 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
{/* 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>
>
<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
<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"
>
<ChevronRight className="w-6 h-6 text-gray-700" />
</motion.button>
<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"
onClick={() => navigate("/matches")}
>
View All Matches
</motion.button>
</motion.div>
</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"
onClick={() => navigate("/matches")}
>
View All Matches
</motion.button>
</motion.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>
{/* 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 MatchingList
export default MatchingList;