ui enhance
This commit is contained in:
parent
d35bd08f5f
commit
05f30375d7
76
package-lock.json
generated
76
package-lock.json
generated
@ -27,6 +27,8 @@
|
||||
"lucide-react": "^0.553.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-intersection-observer": "^10.0.0",
|
||||
"react-lazy-load-image-component": "^1.6.3",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.9.6",
|
||||
@ -88,7 +90,6 @@
|
||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.5",
|
||||
@ -434,7 +435,6 @@
|
||||
"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"
|
||||
}
|
||||
@ -450,7 +450,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
|
||||
"integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.13.5",
|
||||
@ -494,7 +493,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
|
||||
"integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.13.5",
|
||||
@ -1379,7 +1377,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
|
||||
"integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/core-downloads-tracker": "^7.3.5",
|
||||
@ -1513,7 +1510,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.5.tgz",
|
||||
"integrity": "sha512-yPaf5+gY3v80HNkJcPi6WT+r9ebeM4eJzrREXPxMt7pNTV/1eahyODO4fbH3Qvd8irNxDFYn5RQ3idHW55rA6g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/private-theming": "^7.3.5",
|
||||
@ -2380,8 +2376,7 @@
|
||||
}
|
||||
],
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tsparticles/interaction-external-attract": {
|
||||
"version": "3.9.1",
|
||||
@ -2999,7 +2994,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.4.tgz",
|
||||
"integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
@ -3049,7 +3043,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.181.0.tgz",
|
||||
"integrity": "sha512-MLF1ks8yRM2k71D7RprFpDb9DOX0p22DbdPqT/uAkc6AtQXjxWCVDjCy23G9t1o8HcQPk7woD2NIyiaWcWPYmA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@dimforge/rapier3d-compat": "~0.12.0",
|
||||
"@tweenjs/tween.js": "~23.1.3",
|
||||
@ -3322,7 +3315,6 @@
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@ -3599,7 +3591,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.25",
|
||||
"caniuse-lite": "^1.0.30001754",
|
||||
@ -4147,7 +4138,6 @@
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
@ -4262,8 +4252,7 @@
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
||||
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/embla-carousel-react": {
|
||||
"version": "8.6.0",
|
||||
@ -4440,7 +4429,6 @@
|
||||
"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
@ -5042,6 +5030,15 @@
|
||||
"integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/goober": {
|
||||
"version": "2.1.18",
|
||||
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.18.tgz",
|
||||
"integrity": "sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"csstype": "^3.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
@ -6063,7 +6060,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.18.0.tgz",
|
||||
"integrity": "sha512-FYZZqD0UUHUswKz3LQl2Z7H24AhD14XGTsIRw3SJaXUxyfVMi+1yiZGmqTcPt/CkPpdU7rrxqcyQ1zJE5DjvIQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.8",
|
||||
"@types/react-reconciler": "^0.26.7",
|
||||
@ -6146,7 +6142,6 @@
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
|
||||
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
@ -6742,7 +6737,6 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@ -6851,7 +6845,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@ -7104,7 +7097,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@ -7114,7 +7106,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
@ -7156,6 +7147,38 @@
|
||||
"react": "^16.8.0 || ^17 || ^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hot-toast": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
|
||||
"integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.1.3",
|
||||
"goober": "^2.1.16"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16",
|
||||
"react-dom": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/react-intersection-observer": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-10.0.0.tgz",
|
||||
"integrity": "sha512-JJRgcnFQoVXmbE5+GXr1OS1NDD1gHk0HyfpLcRf0575IbJz+io8yzs4mWVlfaqOQq1FiVjLvuYAdEEcrrCfveg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
|
||||
@ -7180,7 +7203,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
@ -7407,8 +7429,7 @@
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
@ -7638,7 +7659,6 @@
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@ -7838,7 +7858,6 @@
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz",
|
||||
"integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@emotion/is-prop-valid": "1.2.2",
|
||||
"@emotion/unitless": "0.8.1",
|
||||
@ -8381,7 +8400,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
|
||||
"integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.5.0",
|
||||
@ -8534,7 +8552,6 @@
|
||||
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
|
||||
"integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@discoveryjs/json-ext": "^0.5.0",
|
||||
"@webpack-cli/configtest": "^1.2.0",
|
||||
@ -8697,7 +8714,6 @@
|
||||
"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
|
||||
@ -29,6 +29,8 @@
|
||||
"lucide-react": "^0.553.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-intersection-observer": "^10.0.0",
|
||||
"react-lazy-load-image-component": "^1.6.3",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.9.6",
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import "./App.css";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
import AppRoutes from "./routes/AppRoutes";
|
||||
|
||||
import { Toaster } from "react-hot-toast";
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<> <Toaster position="top-center" />
|
||||
<Router>
|
||||
<AppRoutes />
|
||||
</Router>
|
||||
|
||||
BIN
src/assets/images/bride1.jpg
Normal file
BIN
src/assets/images/bride1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
BIN
src/assets/images/bride2.jpg
Normal file
BIN
src/assets/images/bride2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
src/assets/images/bride3.jpg
Normal file
BIN
src/assets/images/bride3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
BIN
src/assets/images/bride4.jpg
Normal file
BIN
src/assets/images/bride4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
BIN
src/assets/images/groom1.jpg
Normal file
BIN
src/assets/images/groom1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/groom2.jpg
Normal file
BIN
src/assets/images/groom2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/images/groom3.jpg
Normal file
BIN
src/assets/images/groom3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/images/groom4.jpg
Normal file
BIN
src/assets/images/groom4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
src/assets/images/horoscopeicon.png
Normal file
BIN
src/assets/images/horoscopeicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@ -3,16 +3,16 @@ import { Facebook, Instagram, Linkedin, Twitter, Youtube } from 'lucide-react';
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-gradient-to-b from-green-50 to-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<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">
|
||||
{/* Need Help Section */}
|
||||
<div>
|
||||
<h3 className="text-red-600 font-bold text-lg mb-4">Need Help?</h3>
|
||||
<h3 className="text-[#A70710] font-bold text-lg mb-4">Need Help?</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Member Login</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Sign Up</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Partner Search</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">How to Use Shaadi.com</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">How to Use Thirukalyanam Matrimony App</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Premium Memberships</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Customer Support</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Site Map</a></li>
|
||||
@ -21,20 +21,19 @@ export default function Footer() {
|
||||
|
||||
{/* Company Section */}
|
||||
<div>
|
||||
<h3 className="text-red-600 font-bold text-lg mb-4">Company</h3>
|
||||
<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">About Us</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Shaadi Blog</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Thirukalyanam Blog</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Careers</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Awards & Recognition</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Cov-Aid</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Privacy & You Section */}
|
||||
<div>
|
||||
<h3 className="text-red-600 font-bold text-lg mb-4">Privacy & You</h3>
|
||||
<h3 className="text-[#A70710] font-bold text-lg mb-4">Privacy & You</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Terms of Use</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Privacy Policy</a></li>
|
||||
@ -45,23 +44,19 @@ export default function Footer() {
|
||||
|
||||
{/* More Section */}
|
||||
<div>
|
||||
<h3 className="text-red-600 font-bold text-lg mb-4">More</h3>
|
||||
<h3 className="text-[#A70710] font-bold text-lg mb-4">More</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">VIP Shaadi</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Select Shaadi</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Sangam</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Shaadi Centres</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">VIP Thirukalyanam</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Thirukalyanam Centres</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Success Stories</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Shaadi Live</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Elite Matrimony by Shaadi.com</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Astrochat.com</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Chat with Astrologers</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Thirukalyanam Live</a></li>
|
||||
<li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Chart Generate</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Social Media & Apps Section */}
|
||||
<div>
|
||||
<h3 className="text-red-600 font-bold text-lg mb-4">Find us on:</h3>
|
||||
<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" />
|
||||
@ -80,7 +75,7 @@ export default function Footer() {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h3 className="text-red-600 font-bold text-lg mb-4">Get the Shaadi App</h3>
|
||||
<h3 className="text-[#A70710] font-bold text-lg mb-4">Get the Thirukalyanam App</h3>
|
||||
<div className="space-y-3">
|
||||
<a href="#" className="block">
|
||||
<img
|
||||
@ -109,11 +104,12 @@ export default function Footer() {
|
||||
{/* 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">
|
||||
© 1996-2025 Shaadi.com, The World's Leading Matchmaking Service™
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mb-4 md:mb-0">
|
||||
© 1991-{new Date().getFullYear()} Thirukalyanam, The World's Leading Matchmaking Service™
|
||||
</p>
|
||||
|
||||
<p className="text-sm text-gray-600">
|
||||
Passionately created by <span className="text-green-600 font-semibold">People Group</span> ▶
|
||||
Passionately created by <span className="text-[#034E08] font-semibold">Amrithaa</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,28 @@
|
||||
import { useState, useRef, useMemo } from 'react';
|
||||
import { useState, useEffect,useRef, useMemo } from 'react';
|
||||
import { Heart, X, RotateCcw, MapPin, Briefcase, GraduationCap } from 'lucide-react';
|
||||
import LazyImage from './LazyImage';
|
||||
import nomoreimg from "../../assets/images/nomoreimg.png";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import bride1 from "../../assets/images/bride1.jpg";
|
||||
import bride2 from "../../assets/images/bride2.jpg";
|
||||
|
||||
import bride3 from "../../assets/images/bride3.jpg";
|
||||
|
||||
import bride4 from "../../assets/images/bride4.jpg";
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
const TinderCard = ({ children, onSwipe, onCardLeftScreen, preventSwipe, className }) => {
|
||||
const [pos, setPos] = useState({ x: 0, y: 0 });
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const [startPos, setStartPos] = useState({ x: 0, y: 0 });
|
||||
const [gone, setGone] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Reset state on mount
|
||||
setPos({ x: 0, y: 0 });
|
||||
setDragging(false);
|
||||
setGone(false);
|
||||
}, []);
|
||||
|
||||
const handleStart = (clientX, clientY) => {
|
||||
if (gone) return;
|
||||
setDragging(true);
|
||||
@ -77,7 +92,7 @@ const profiles = [
|
||||
profession: 'Software Engineer',
|
||||
education: 'B.Tech from IIT Bombay',
|
||||
about: 'Love traveling, reading, and cooking. Looking for someone who values family.',
|
||||
image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop'
|
||||
image: bride1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@ -87,7 +102,7 @@ const profiles = [
|
||||
profession: 'Doctor',
|
||||
education: 'MBBS from AIIMS',
|
||||
about: 'Passionate about healthcare and music. Seeking a caring life partner.',
|
||||
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop'
|
||||
image: bride2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@ -97,7 +112,7 @@ const profiles = [
|
||||
profession: 'CA',
|
||||
education: 'CA from ICAI',
|
||||
about: 'Enjoy yoga and meditation. Looking for someone with similar values.',
|
||||
image: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=500&fit=crop'
|
||||
image: bride3
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@ -107,7 +122,7 @@ const profiles = [
|
||||
profession: 'Marketing Manager',
|
||||
education: 'MBA from ISB',
|
||||
about: 'Creative soul who loves art and dance. Seeking a supportive partner.',
|
||||
image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=400&h=500&fit=crop'
|
||||
image: bride4
|
||||
}
|
||||
];
|
||||
|
||||
@ -117,10 +132,24 @@ export default function MatrimonySwipeCards() {
|
||||
const [likedProfiles, setLikedProfiles] = useState([]);
|
||||
const [dislikedProfiles, setDislikedProfiles] = useState([]);
|
||||
const [key, setKey] = useState(0);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const activeProfiles = profiles.filter(p => !swipedCards.has(p.id));
|
||||
const canSwipe = activeProfiles.length > 0;
|
||||
|
||||
|
||||
// **CHECK TOKEN FOR BLUR CONTROL**
|
||||
const hasValidToken = useMemo(() => {
|
||||
return !!localStorage.getItem("token");
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
// **FIX: Ensure consistent order - Priya Sharma first**
|
||||
const displayProfiles = useMemo(() => {
|
||||
return activeProfiles.sort((a, b) => b.id - a.id ); // Sort by ID ascending (1,2,3,4)
|
||||
}, [activeProfiles]);
|
||||
|
||||
const swiped = (direction, profile) => {
|
||||
setLastDirection(direction);
|
||||
setSwipedCards(prev => new Set([...prev, profile.id]));
|
||||
@ -131,12 +160,30 @@ export default function MatrimonySwipeCards() {
|
||||
}
|
||||
};
|
||||
|
||||
// const swipe = (dir) => {
|
||||
// if (canSwipe) {
|
||||
// const topProfile = activeProfiles[activeProfiles.length - 1];
|
||||
// swiped(dir, topProfile);
|
||||
// }
|
||||
// };
|
||||
|
||||
const swipe = (dir) => {
|
||||
if (canSwipe) {
|
||||
const topProfile = activeProfiles[activeProfiles.length - 1];
|
||||
swiped(dir, topProfile);
|
||||
}
|
||||
};
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
if (!token) {
|
||||
navigate("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
navigate("/match");
|
||||
|
||||
if (canSwipe) {
|
||||
// const topProfile = activeProfiles[activeProfiles.length - 1];
|
||||
const topProfile = displayProfiles[0]; // Priya Sharma first
|
||||
swiped(dir, topProfile);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const reset = () => {
|
||||
setSwipedCards(new Set());
|
||||
@ -149,12 +196,12 @@ export default function MatrimonySwipeCards() {
|
||||
return (
|
||||
<div className=" w-[100%] max-w-[fit-screen] p-2 md:px-6 overflow-hidden">
|
||||
<div className="max-w-md mx-auto">
|
||||
{/* <h1 className="text-2xl font-bold text-center text-purple-800 mb-2">
|
||||
💍 Find Your Match
|
||||
<h1 className="text-2xl font-bold text-center text-gray-800 mb-2">
|
||||
Find Your Match
|
||||
</h1>
|
||||
<p className="text-center text-gray-600 mb-4 text-sm">
|
||||
Swipe right to like, left to pass
|
||||
</p> */}
|
||||
</p>
|
||||
|
||||
{/* Card Container with overflow hidden */}
|
||||
<div className="relative h-[480px] w-full overflow-hidden rounded-2xl">
|
||||
@ -176,26 +223,57 @@ export default function MatrimonySwipeCards() {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
profiles
|
||||
.filter(p => !swipedCards.has(p.id))
|
||||
.map((profile, index) => (
|
||||
<TinderCard
|
||||
displayProfiles
|
||||
.slice(0, 4) // Limit to 3 cards for stack effect
|
||||
|
||||
.map((profile, index) => {
|
||||
|
||||
const isTopCard = index === 3; // ALWAYS FIXED TOP CARD
|
||||
// **NO BLUR IF TOKEN EXISTS**
|
||||
const shouldBlur = !hasValidToken && !isTopCard;
|
||||
|
||||
return (
|
||||
<TinderCard
|
||||
key={`${key}-${profile.id}`}
|
||||
onSwipe={(dir) => swiped(dir, profile)}
|
||||
onCardLeftScreen={() => {}}
|
||||
preventSwipe={['up', 'down']}
|
||||
className="absolute w-full max-w-sm cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-xl overflow-hidden select-none">
|
||||
<div onClick={(e) => e.stopPropagation()} className="bg-white rounded-2xl shadow-xl overflow-hidden select-none">
|
||||
<div className="relative">
|
||||
<div classname=" relative 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-72 object-cover pointer-events-none"
|
||||
className={`w-full h-full object-cover
|
||||
${shouldBlur ? "blur-[4px] brightness-75 p-2" : ""}
|
||||
`}
|
||||
draggable={false}
|
||||
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
|
||||
{/* LOCK ICON FOR NON TOP CARDS */}
|
||||
{shouldBlur && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<svg width="60" height="60" fill="white">
|
||||
<path d="M12 22v-6a10 10 0 1120 0v6h2a2 2 0 012 2v18a2 2 0 01-2 2H10a2 2 0 01-2-2V24a2 2 0 012-2h2zm4 0h16v-6a8 8 0 10-16 0v6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* White Gradient Overlay at bottom of image */}
|
||||
<div
|
||||
className="z-1 absolute bottom-0 left-0 right-0 h-15 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>
|
||||
|
||||
<div className="z-2 absolute bottom-1 left-0 right-0 pb-0 p-4">
|
||||
<h2 className=" text-[22px] font-bold text-black">
|
||||
{profile.name}, {profile.age}
|
||||
</h2>
|
||||
</div>
|
||||
@ -220,34 +298,47 @@ export default function MatrimonySwipeCards() {
|
||||
</div>
|
||||
</div>
|
||||
</TinderCard>
|
||||
))
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{canSwipe && (
|
||||
<div className="flex justify-center gap-6 mt-4">
|
||||
<button
|
||||
onClick={() => swipe('left')}
|
||||
className="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-red-50 transition border-2 border-red-200 hover:border-red-400 active:scale-95"
|
||||
>
|
||||
<X size={32} className="text-red-500" />
|
||||
</button>
|
||||
<button
|
||||
onClick={reset}
|
||||
className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-50 transition border-2 border-yellow-200 hover:border-yellow-400 active:scale-95 self-center"
|
||||
>
|
||||
<RotateCcw size={20} className="text-yellow-500" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => swipe('right')}
|
||||
className="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-green-50 transition border-2 border-green-200 hover:border-green-400 active:scale-95"
|
||||
>
|
||||
<Heart size={32} className="text-green-500" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* Action Buttons */}
|
||||
{canSwipe && (
|
||||
<div className="flex justify-center gap-6 mt-4">
|
||||
{/* Decline Button with MUI Tooltip */}
|
||||
<Tooltip title="Decline" placement="top" arrow>
|
||||
<button
|
||||
onClick={() => swipe('left')}
|
||||
className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-red-50 transition border-2 border-red-200 hover:border-red-400 active:scale-95"
|
||||
>
|
||||
<X size={26} className="text-red-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
{/* Reset Button with MUI Tooltip */}
|
||||
<Tooltip title="Reset" placement="top" arrow>
|
||||
<button
|
||||
onClick={reset}
|
||||
className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-50 transition border-2 border-yellow-200 hover:border-yellow-400 active:scale-95 self-center"
|
||||
>
|
||||
<RotateCcw size={20} className="text-yellow-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
{/* Interest Button with MUI Tooltip */}
|
||||
<Tooltip title="Show Interest" placement="top" arrow>
|
||||
<button
|
||||
onClick={() => swipe('right')}
|
||||
className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-green-50 transition border-2 border-green-200 hover:border-green-400 active:scale-95"
|
||||
>
|
||||
<Heart size={26} className="text-green-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Stats */}
|
||||
{/* <div className="mt-6 flex gap-4 text-sm">
|
||||
|
||||
61
src/components/common/ReportModal.jsx
Normal file
61
src/components/common/ReportModal.jsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React from "react";
|
||||
import { Modal, Box } from "@mui/material";
|
||||
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
|
||||
|
||||
const ReportModal = ({ open, onClose, onSubmit }) => {
|
||||
const [reason, setReason] = React.useState("");
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "90%",
|
||||
maxWidth: 400,
|
||||
bgcolor: "#fff",
|
||||
p: 3,
|
||||
borderRadius: 3,
|
||||
mx: "auto",
|
||||
mt: "20vh",
|
||||
boxShadow: 24,
|
||||
outline: "none",
|
||||
}}
|
||||
>
|
||||
{/* Back Arrow + Title */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<ArrowBackIosNewIcon
|
||||
onClick={onClose}
|
||||
className="cursor-pointer"
|
||||
fontSize="small"
|
||||
/>
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
Profile Report Form
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-gray-600 text-center leading-relaxed mb-4">
|
||||
If you find any incorrect information or suspicious activity, please
|
||||
report this profile so we can review it.
|
||||
</p>
|
||||
|
||||
{/* Textarea */}
|
||||
<textarea
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
className="w-full h-28 border border-gray-300 rounded-xl p-3 text-sm outline-none focus:border-black transition"
|
||||
placeholder="Enter your reason here"
|
||||
/>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
onClick={() => onSubmit(reason)}
|
||||
className="w-full mt-4 bg-green-900 text-white py-2 rounded-xl text-sm font-medium hover:bg-green-800 transition"
|
||||
>
|
||||
Submit Report
|
||||
</button>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReportModal;
|
||||
71
src/components/common/ShareModal.jsx
Normal file
71
src/components/common/ShareModal.jsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { Dialog } from "@mui/material";
|
||||
|
||||
const ShareModal = ({ open, onClose, url }) => {
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
className: "rounded-2xl p-4"
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold">Share Modal</h2>
|
||||
<button onClick={onClose} className="text-gray-500">✕</button>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<p className="text-gray-600 text-sm mb-3">Share this link via</p>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="flex items-center gap-4 mb-5 justify-center">
|
||||
<a href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target="_blank">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" className="w-10 h-10" />
|
||||
</a>
|
||||
|
||||
<a href={`https://twitter.com/intent/tweet?url=${url}`} target="_blank">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" className="w-10 h-10" />
|
||||
</a>
|
||||
|
||||
<a href={`https://www.instagram.com`} target="_blank">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" className="w-10 h-10" />
|
||||
</a>
|
||||
|
||||
<a href={`https://api.whatsapp.com/send?text=${url}`} target="_blank">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" className="w-10 h-10" />
|
||||
</a>
|
||||
|
||||
<a href={`https://t.me/share/url?url=${url}`} target="_blank">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" className="w-10 h-10" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* OR Copy link */}
|
||||
<p className="text-gray-600 text-sm mb-2">Or copy link</p>
|
||||
|
||||
<div className="flex items-center gap-2 border rounded-xl p-2">
|
||||
<span className="text-gray-500">🔗</span>
|
||||
<input
|
||||
type="text"
|
||||
value={url}
|
||||
readOnly
|
||||
className="flex-1 outline-none text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShareModal;
|
||||
@ -1,5 +1,8 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
|
||||
import {
|
||||
Users,
|
||||
Shield,
|
||||
@ -183,10 +186,11 @@ const AppPromoteSection = () => {
|
||||
|
||||
|
||||
<div className="mt-6 ">
|
||||
{/* Jeevansathi Match Hour */}
|
||||
{/* <div className="absolute bottom-0 left-0 w-full h-[300px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%)"}} />
|
||||
Match Hour */}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900 relative after:content-[''] after:block after:w-15 after:h-1 after:bg-[#A70710] after:rounded-full after:mt-1">
|
||||
Jeevansathi Match Hour
|
||||
Thirukalyanam Match Hour
|
||||
</h2>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Register to join an online event to connect with members of your community in a short time
|
||||
@ -239,42 +243,110 @@ const AppPromoteSection = () => {
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<motion.section
|
||||
className="py-16 bg-[#fff]"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
{/* Stats Section with MUI Counter */}
|
||||
<motion.section
|
||||
className="py-16 bg-[#fff]"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
{[
|
||||
{ number: 25, label: "Years of Trust" },
|
||||
{ number: 10000000, label: "Happy Users" },
|
||||
{ number: 100, label: "Verified Profiles" },
|
||||
{ number: 24, label: "Support" },
|
||||
].map((stat, index) => {
|
||||
const [ref, inView] = useInView({
|
||||
threshold: 0.3,
|
||||
triggerOnce: true,
|
||||
delay: index * 100,
|
||||
});
|
||||
|
||||
const Counter = ({ endValue }) => {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
const duration = 2000; // 2 seconds
|
||||
const startTime = Date.now();
|
||||
|
||||
const animate = () => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeProgress = 1 - Math.pow(1 - progress, 3); // easeOut cubic
|
||||
const currentValue = Math.floor(easeProgress * endValue);
|
||||
setCount(currentValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(endValue);
|
||||
}
|
||||
};
|
||||
animate();
|
||||
}
|
||||
}, [inView, endValue]);
|
||||
|
||||
return (
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontSize: { xs: '1.5rem', md: '2rem' },
|
||||
fontWeight: 700,
|
||||
color: '#A70710',
|
||||
|
||||
mb: 1,
|
||||
fontFamily: 'inherit'
|
||||
}}
|
||||
>
|
||||
{stat.number >= 1000000
|
||||
? `${(count / 1000000).toFixed(0)}M+`
|
||||
: stat.number === 100
|
||||
? `${count}%`
|
||||
: stat.number === 24
|
||||
? `${count}/7`
|
||||
: `+${count}`
|
||||
}
|
||||
</Typography>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
style={{background:"#eaf7deff", padding:"20px 5px", borderRadius:"10px"}}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
{[
|
||||
{ number: "25+", label: "Years of Trust" },
|
||||
{ number: "10M+", label: "Happy Users" },
|
||||
{ number: "100%", label: "Verified Profiles" },
|
||||
{ number: "24/7", label: "Support" },
|
||||
].map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<motion.h3
|
||||
className="text-4xl md:text-5xl font-bold text-pink-500 mb-2"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
>
|
||||
{stat.number}
|
||||
</motion.h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 font-medium">
|
||||
{stat.label}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
<Box ref={ref}>
|
||||
<Counter endValue={stat.number} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
color: 'grey.600',
|
||||
fontWeight: 500,
|
||||
fontSize: '1.1rem'
|
||||
}}
|
||||
>
|
||||
{stat.label}
|
||||
</Typography>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
||||
@ -4,7 +4,7 @@ import LazyImage from '../common/LazyImage';
|
||||
const AppQRCode = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="relative z-9 bg-[#034f08] text-white">
|
||||
<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="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
|
||||
{/* Left Content Section */}
|
||||
|
||||
@ -11,13 +11,29 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
|
||||
import PersonAddIcon from "@mui/icons-material/PersonAdd";
|
||||
import { motion } from 'framer-motion';
|
||||
import FilterModal from "../../feature/FilterModal";
|
||||
import bride1 from "../../assets/images/bride1.jpg";
|
||||
import bride2 from "../../assets/images/bride2.jpg";
|
||||
import bride3 from "../../assets/images/bride3.jpg";
|
||||
import bride4 from "../../assets/images/bride4.jpg";
|
||||
|
||||
import groom1 from "../../assets/images/groom1.jpg";
|
||||
import groom2 from "../../assets/images/groom2.jpg";
|
||||
import groom3 from "../../assets/images/groom3.jpg";
|
||||
import groom4 from "../../assets/images/groom4.jpg";
|
||||
|
||||
import horoscope from "../../assets/images/horoscopeicon.png";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button, Fab } from "@mui/material";
|
||||
import MessageIcon from '@mui/icons-material/Message';
|
||||
import PhoneIcon from '@mui/icons-material/Phone';
|
||||
// Profile Card Component
|
||||
function ProfileCard({ profile }) {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border border-green-200">
|
||||
<div
|
||||
onClick={() => navigate(`/profile-details/${profile.id}`)}
|
||||
className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border border-green-200">
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
@ -36,22 +52,26 @@ function ProfileCard({ profile }) {
|
||||
<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"
|
||||
className="w-full h-96 object-cover"
|
||||
className="w-full h-full object-cover bg-gray-200"
|
||||
style={{
|
||||
// objectFit:"inherit",
|
||||
objectPosition:"top"}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
|
||||
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.6) 40%, rgb(255, 255, 255) 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 pb-1 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
@ -62,6 +82,12 @@ function ProfileCard({ profile }) {
|
||||
</div>
|
||||
|
||||
<div className="px-4 pt-2 pb-4 flex flex-col gap-2 bg-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<VisibilityIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
{profile.lastseen}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon className="w-4 h-4 text-gray-700" />
|
||||
@ -78,19 +104,9 @@ function ProfileCard({ profile }) {
|
||||
</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" />
|
||||
@ -99,8 +115,12 @@ function ProfileCard({ profile }) {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 my-2 justify-between w-full px-[0px]">
|
||||
<button className="gap-2 px-3 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white
|
||||
{/* <div className="flex gap-3 my-2 justify-between w-full px-[0px]">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// your decline logic
|
||||
}} className="gap-2 px-3 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white
|
||||
font-semibold text-base py-2 rounded-[20px] shadow-md
|
||||
hover:shadow-lg transition-all duration-300 flex items-center justify-center transform hover:scale-95">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
@ -113,7 +133,11 @@ function ProfileCard({ profile }) {
|
||||
className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-semibold text-base
|
||||
rounded-[20px] px-3 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={() => setIsLiked(!isLiked)}
|
||||
onClick={(e) =>{
|
||||
|
||||
e.stopPropagation();
|
||||
setIsLiked(!isLiked);
|
||||
} }
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
@ -127,7 +151,29 @@ function ProfileCard({ profile }) {
|
||||
|
||||
Interest
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="flex gap-3 my-2 justify-between w-full px-[0px]">
|
||||
<div className="flex gap-2">
|
||||
|
||||
<Fab size="medium" color="primary" aria-label="add">
|
||||
<MessageIcon />
|
||||
</Fab>
|
||||
|
||||
<Fab size="medium" color="secondary" aria-label="add">
|
||||
<PhoneIcon />
|
||||
</Fab>
|
||||
|
||||
</div>
|
||||
|
||||
<Button variant="contained" color="#f5fbff" onClick={(e) =>{ e.stopPropagation();
|
||||
navigate(`/profile-details/${profile.id}`)}
|
||||
} sx={{color:"#000000", background:"#f5fbff", fontWeight:"600", borderRadius:"30px"}}>
|
||||
|
||||
View Details
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -135,6 +181,7 @@ function ProfileCard({ profile }) {
|
||||
|
||||
// Main Component
|
||||
export default function MatchesInterface() {
|
||||
const navigate = useNavigate();
|
||||
const [selectedTab, setSelectedTab] = useState('your-matches');
|
||||
|
||||
const tabs = [
|
||||
@ -181,40 +228,80 @@ export default function MatchesInterface() {
|
||||
name: 'Jerome Bell',
|
||||
age: 22,
|
||||
height: '5.2',
|
||||
community: 'Hindu / Agamudiyar/thular',
|
||||
lastseen: 'Last seen 14 Nov 2025',
|
||||
education: 'BCA / Data analyst',
|
||||
location: 'Chennai',
|
||||
image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top'
|
||||
image: bride1
|
||||
},
|
||||
{
|
||||
id: 'SA8392847',
|
||||
name: 'Sarah Anderson',
|
||||
age: 24,
|
||||
height: '5.4',
|
||||
community: 'Hindu / Iyer',
|
||||
lastseen: 'Last seen 14 Nov 2025',
|
||||
education: 'MBA / Marketing Manager',
|
||||
location: 'Bangalore',
|
||||
image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=800&fit=crop&crop=faces,top'
|
||||
image: bride4
|
||||
},
|
||||
{
|
||||
id: 'PR9384756',
|
||||
name: 'Priya Reddy',
|
||||
age: 23,
|
||||
height: '5.3',
|
||||
community: 'Hindu / Reddy',
|
||||
lastseen: 'Last seen 14 Nov 2025',
|
||||
education: 'B.Tech / Software Engineer',
|
||||
location: 'Hyderabad',
|
||||
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&h=800&fit=crop&crop=faces,top'
|
||||
image: bride2
|
||||
},
|
||||
{
|
||||
id: 'AN4758392',
|
||||
name: 'Ananya Krishnan',
|
||||
age: 25,
|
||||
height: '5.5',
|
||||
community: 'Hindu / Nair',
|
||||
lastseen: 'Last seen 14 Nov 2025',
|
||||
education: 'MD / Doctor',
|
||||
location: 'Kochi',
|
||||
image: 'https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=600&h=800&fit=crop&crop=faces,top'
|
||||
image: bride3
|
||||
},
|
||||
{
|
||||
id: 'AN4758392',
|
||||
name: 'Ananya Krishnan',
|
||||
age: 25,
|
||||
height: '5.5',
|
||||
lastseen: 'Last seen 14 Nov 2025',
|
||||
education: 'MD / Doctor',
|
||||
location: 'Kochi',
|
||||
image: groom1
|
||||
},
|
||||
{
|
||||
id: 'AN4758392',
|
||||
name: 'Ananya Krishnan',
|
||||
age: 25,
|
||||
height: '5.5',
|
||||
lastseen: 'Last seen 14 Nov 2025',
|
||||
education: 'MD / Doctor',
|
||||
location: 'Kochi',
|
||||
image: groom2
|
||||
},
|
||||
{
|
||||
id: 'AN4758392',
|
||||
name: 'Ananya Krishnan',
|
||||
age: 25,
|
||||
height: '5.5',
|
||||
lastseen: 'Last seen 14 Nov 2025',
|
||||
education: 'MD / Doctor',
|
||||
location: 'Kochi',
|
||||
image: groom4
|
||||
},
|
||||
{
|
||||
id: 'AN4758392',
|
||||
name: 'Ananya Krishnan',
|
||||
age: 25,
|
||||
height: '5.5',
|
||||
lastseen: 'Last seen 14 Nov 2025',
|
||||
education: 'MD / Doctor',
|
||||
location: 'Kochi',
|
||||
image: groom3
|
||||
}
|
||||
];
|
||||
|
||||
@ -294,8 +381,14 @@ export default function MatchesInterface() {
|
||||
<h1 className="text-[24px] font-bold text-gray-900 ">
|
||||
{tabs.find(t => t.id === selectedTab)?.title}
|
||||
</h1>
|
||||
<div className="flex gap-2 items-center">
|
||||
|
||||
<FilterModal/>
|
||||
<img src={horoscope} onClick={()=>{
|
||||
navigate("/horoscoper-generate")
|
||||
}}/>
|
||||
<FilterModal/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-2">
|
||||
{profiles.map((profile) => (
|
||||
|
||||
@ -6,18 +6,39 @@ export default function SearchUI() {
|
||||
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',
|
||||
];
|
||||
const allSuggestions = [
|
||||
'Bride profiles',
|
||||
'Groom profiles',
|
||||
'Hindu matrimony',
|
||||
'Christian matrimony',
|
||||
'Muslim matrimony',
|
||||
'Tamil bride',
|
||||
'Tamil groom',
|
||||
'Telugu matrimony',
|
||||
'Kannada matrimony',
|
||||
'Malayalam matrimony',
|
||||
'Marathi matrimony',
|
||||
'North Indian bride',
|
||||
'Caste based search',
|
||||
'Community matches',
|
||||
'Horoscope matching',
|
||||
'Verified profiles',
|
||||
'Premium matches',
|
||||
'Divorced / Widowed profiles',
|
||||
'NRI matrimony',
|
||||
'Professional matches',
|
||||
'Doctor groom',
|
||||
'Engineer bride',
|
||||
'IT professional matches',
|
||||
'Age based search',
|
||||
'Height based search',
|
||||
'Education based matches',
|
||||
'Location based matches',
|
||||
'Same mother tongue profiles',
|
||||
'Partner preference search',
|
||||
'Wedding matchmaking',
|
||||
];
|
||||
|
||||
|
||||
// Filter suggestions based on search value
|
||||
const filteredSuggestions = searchValue.trim()
|
||||
@ -38,14 +59,14 @@ export default function SearchUI() {
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center px-2 py-9">
|
||||
<div className="w-full max-w-2xl">
|
||||
<div className="w-full max-w-4xl">
|
||||
{/* Search Container */}
|
||||
<div className="relative">
|
||||
{/* Shadow/Glow Effect */}
|
||||
<div className="absolute -inset-1 bg-green-600/20 rounded-full blur-xl"></div>
|
||||
<div className="absolute -inset-1 bg-green-200/20 rounded-full blur-sm"></div>
|
||||
|
||||
{/* Main Search Bar */}
|
||||
<div className="relative flex items-center bg-white rounded-full shadow-lg overflow-hidden border-2 border-green-600">
|
||||
<div className="relative flex items-center bg-white rounded-full shadow-sm overflow-hidden border-1 border-green-600">
|
||||
{/* Search Input */}
|
||||
<input
|
||||
type="text"
|
||||
@ -61,13 +82,13 @@ export default function SearchUI() {
|
||||
}
|
||||
}}
|
||||
placeholder="Search"
|
||||
className="flex-1 px-8 py-4 text-lg text-gray-700 placeholder-red-600 bg-transparent outline-none font-medium"
|
||||
className="flex-1 px-8 py-2 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]"
|
||||
className="bg-green-600 hover:bg-green-700 transition-colors px-8 py-3 flex items-center justify-center min-w-[80px]"
|
||||
aria-label="Search"
|
||||
>
|
||||
<Search className="w-7 h-7 text-white" strokeWidth={2.5} />
|
||||
@ -76,7 +97,7 @@ export default function SearchUI() {
|
||||
|
||||
{/* 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">
|
||||
<div className="z-99 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}
|
||||
|
||||
@ -15,9 +15,11 @@ import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/effect-coverflow';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const DailyRecommendedCard = () => {
|
||||
const swiperRef = useRef(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Sample profile data
|
||||
const profiles = [
|
||||
@ -106,7 +108,7 @@ const DailyRecommendedCard = () => {
|
||||
|
||||
const ProfileCard = ({ profile }) => {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
|
||||
<motion.div
|
||||
@ -115,6 +117,8 @@ const ProfileCard = ({ profile }) => {
|
||||
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-1 border-green-200">
|
||||
{/* Profile Image Section */}
|
||||
<div className="relative">
|
||||
@ -136,18 +140,22 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
|
||||
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-90 object-cover"
|
||||
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"
|
||||
@ -164,7 +172,7 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay - positioned at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 pb-1 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
@ -225,33 +233,45 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
|
||||
</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"/>
|
||||
<div className="flex gap-3 my-2 justify-between w-full px-[0px]">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// your decline logic
|
||||
}}
|
||||
className="gap-2 px-3 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white
|
||||
font-semibold text-base py-2 rounded-[20px] shadow-md
|
||||
hover:shadow-lg transition-all duration-300 flex items-center justify-center transform hover:scale-95">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
Decline
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-semibold text-base
|
||||
rounded-[20px] px-3 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={(e) =>{
|
||||
|
||||
e.stopPropagation();
|
||||
setIsLiked(!isLiked);
|
||||
} }
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-4 h-4" 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>
|
||||
</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>
|
||||
) : (
|
||||
<svg className="w-4 h-4" 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>
|
||||
)}
|
||||
|
||||
Interest
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@ -276,11 +296,11 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
|
||||
</motion.div>
|
||||
|
||||
{/* Swiper Container */}
|
||||
<div className="relative px-4 sm:px-12">
|
||||
<div className="relative px-0 sm:px-0">
|
||||
<Swiper
|
||||
ref={swiperRef}
|
||||
modules={[Navigation, Pagination, Autoplay, EffectCoverflow]}
|
||||
spaceBetween={30}
|
||||
spaceBetween={10}
|
||||
slidesPerView={1}
|
||||
autoplay={{
|
||||
delay: 5000,
|
||||
@ -296,15 +316,15 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
|
||||
breakpoints={{
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20
|
||||
spaceBetween: 10
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 25
|
||||
spaceBetween: 10
|
||||
},
|
||||
1280: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 5
|
||||
}
|
||||
}}
|
||||
className="pb-16"
|
||||
@ -351,7 +371,9 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
|
||||
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 Recommendations
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
@ -373,10 +395,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
display: flex;
|
||||
}
|
||||
// .swiper-slide {
|
||||
// // height: auto;
|
||||
// // display: flex;
|
||||
// }
|
||||
|
||||
`}</style>
|
||||
</div>
|
||||
|
||||
@ -16,10 +16,12 @@ 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 navigate = useNavigate();
|
||||
|
||||
// Sample profile data
|
||||
const profiles = [
|
||||
@ -108,6 +110,7 @@ const MatchingList = () => {
|
||||
|
||||
const ProfileCard = ({ profile }) => {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
|
||||
@ -116,7 +119,7 @@ const ProfileCard = ({ profile }) => {
|
||||
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">
|
||||
{/* Profile Image Section */}
|
||||
<div className="relative">
|
||||
@ -138,18 +141,24 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
|
||||
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-65 object-cover"
|
||||
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"
|
||||
@ -166,7 +175,7 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay - positioned at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<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}
|
||||
</h1>
|
||||
@ -329,7 +338,9 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
|
||||
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>
|
||||
|
||||
@ -9,28 +9,35 @@ import LazyImage from "../common/LazyImage";
|
||||
|
||||
const articleData = [
|
||||
{
|
||||
title: "How to Choose the Right Life Partner",
|
||||
title: "Marriage is not just finding the right partner, it's creating a lifetime of moments together Find someone who understands your heart and walks with you in every season.",
|
||||
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",
|
||||
title: "Top 10 Qualities for a Happy Marriage, A perfect match begins with trust, respect, and shared dreams",
|
||||
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",
|
||||
title: "Expert Tips for a Strong Relationship, A perfect match begins with trust, respect, and shared dreams",
|
||||
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",
|
||||
title: "How to Build Trust in Marriage, A perfect match begins with trust, respect, and shared dreams",
|
||||
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",
|
||||
title: "Communication Secrets for Couples, A perfect match begins with trust, respect, and shared dreams,A perfect match begins with trust, respect, and shared dreams.A perfect match begins with trust, respect, and shared dreams.A perfect match begins with trust, respect, and shared dreams,Real relationships are built on honesty, compassion, and understanding.,Real relationships are built on honesty, compassion, and understanding.",
|
||||
img: "https://images.unsplash.com/photo-1482849297070-f4fae2173efe?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&q=80"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const twoLineStyle = {
|
||||
display: '-webkit-box',
|
||||
WebkitBoxOrient: 'vertical',
|
||||
WebkitLineClamp: 2,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'normal'
|
||||
};
|
||||
const MatrimonyArticles = () => {
|
||||
const swiperRef = useRef(null);
|
||||
return (
|
||||
@ -51,7 +58,7 @@ const MatrimonyArticles = () => {
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1 }, // mobile
|
||||
640: { slidesPerView: 2 }, // tablet
|
||||
1024: { slidesPerView: 2 }, // large
|
||||
1024: { slidesPerView: 3 }, // large
|
||||
}}
|
||||
loop={true}
|
||||
className="mySwiper"
|
||||
@ -61,12 +68,14 @@ const MatrimonyArticles = () => {
|
||||
<div className="w-full max-w-[600px] rounded-[10px] overflow-hidden border border-2 border-[#f2f2f2] bg-white">
|
||||
|
||||
<div className="relative w-full">
|
||||
<div classname=" bg-gray-200 overflow-hidden w-full max-w-sm " style={{height:"240px"}}>
|
||||
|
||||
<img
|
||||
src={item.img}
|
||||
className="w-full h-88 object-cover"
|
||||
alt={item.title}
|
||||
/>
|
||||
|
||||
</div>
|
||||
{/* <LazyImage
|
||||
src={item.img}
|
||||
className="w-full h-48 object-cover"
|
||||
@ -74,18 +83,29 @@ const MatrimonyArticles = () => {
|
||||
/> */}
|
||||
|
||||
{/* White Gradient Overlay at bottom of image */}
|
||||
|
||||
|
||||
{/* Profile Info Overlay - positioned at bottom */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-30 pointer-events-none"
|
||||
className="px-4 pb-4 flex flex-col gap-2 relative "
|
||||
style={{
|
||||
background: "rgb(255, 255, 255)",
|
||||
}}
|
||||
>
|
||||
|
||||
<div
|
||||
className="z-9 absolute top-[-40px] left-0 right-0 h-10 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 className="z-10 relative pb-4" style={{
|
||||
background: "rgb(255, 255, 255)",
|
||||
}}>
|
||||
<h3 className="text-[16px] font-semibold two-line-ellipsis" style={twoLineStyle} >{item.title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -129,7 +129,7 @@ const MatrimonyProfile = () => {
|
||||
<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">
|
||||
<div className="bg-[#034E08] text-white p-1 rounded-full">
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="currentColor"
|
||||
@ -142,7 +142,7 @@ const MatrimonyProfile = () => {
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-blue-600 font-semibold">ID verified</span>
|
||||
<span className="text-[#034E08] font-semibold">ID verified</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button
|
||||
@ -209,10 +209,10 @@ const MatrimonyProfile = () => {
|
||||
<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">
|
||||
{/* <button className="w-[fit-content] border-2 border-orange-500 text-[#034E08] 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">
|
||||
<button className="w-[fit-content] bg-[#034E08] text-white py-2 px-6 rounded-full hover:bg-[#A70710] transition-colors flex items-center justify-center gap-2 font-semibold text-sm">
|
||||
<Heart className="w-5 h-5" /> Send Interest
|
||||
</button>
|
||||
</div>
|
||||
@ -332,7 +332,7 @@ const MatrimonyProfile = () => {
|
||||
<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">
|
||||
<button className="bg-[#034E08] text-white px-8 py-2 rounded-full hover:bg-orange-700 transition-colors font-semibold">
|
||||
Send Interest
|
||||
</button>
|
||||
</div>
|
||||
@ -348,7 +348,7 @@ const MatrimonyProfile = () => {
|
||||
<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"
|
||||
className="w-5 h-5 text-[#A70710]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
@ -438,7 +438,7 @@ const MatrimonyProfile = () => {
|
||||
<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">
|
||||
<button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
@ -457,7 +457,7 @@ const MatrimonyProfile = () => {
|
||||
<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">
|
||||
<button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
@ -476,7 +476,7 @@ const MatrimonyProfile = () => {
|
||||
<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">
|
||||
<button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
@ -495,7 +495,7 @@ const MatrimonyProfile = () => {
|
||||
<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">
|
||||
<button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
@ -539,7 +539,7 @@ const MatrimonyProfile = () => {
|
||||
<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"
|
||||
className="w-5 h-5 text-[#A70710]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
@ -568,7 +568,7 @@ const MatrimonyProfile = () => {
|
||||
<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"
|
||||
className="w-5 h-5 text-[#A70710]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
@ -602,7 +602,7 @@ const MatrimonyProfile = () => {
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-gray-900">+91 99••••••••</span>
|
||||
<button className="text-orange-600 hover:text-orange-700 text-xs font-medium">
|
||||
<button className="text-[#034E08] hover:text-orange-700 text-xs font-medium">
|
||||
Upgrade to view
|
||||
</button>
|
||||
</div>
|
||||
@ -615,7 +615,7 @@ const MatrimonyProfile = () => {
|
||||
<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"
|
||||
className="w-5 h-5 text-[#A70710]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
@ -657,7 +657,7 @@ const MatrimonyProfile = () => {
|
||||
<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"
|
||||
className="w-5 h-5 text-[#A70710]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
|
||||
@ -40,10 +40,10 @@ const PartnerPreferences = () => {
|
||||
);
|
||||
|
||||
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">
|
||||
<div className="min-h-screen ">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-6">
|
||||
<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
|
||||
@ -52,7 +52,7 @@ const PartnerPreferences = () => {
|
||||
</div>
|
||||
|
||||
{/* Match Score Card */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-6">
|
||||
<div className="bg-[#f5fbff] rounded-2xl border border-1 border-gray-200 p-6 mb-6 w-full max-w-[1200px] mx-auto">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<img
|
||||
@ -62,8 +62,8 @@ const PartnerPreferences = () => {
|
||||
/>
|
||||
<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 className="text-2xl sm:text-3xl font-bold text-red-600">
|
||||
14<span className="text-[#034E08]">/20</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">of his preferences</p>
|
||||
</div>
|
||||
@ -76,9 +76,11 @@ const PartnerPreferences = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 gap-2 md:grid-cols-2 mb-8 pt-4'>
|
||||
|
||||
{/* Basic Preferences Section */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
<div className="flex items-center justify-between mb-4 bg-[#f5fbff] pt-4 pb-4 px-6">
|
||||
<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>
|
||||
@ -87,7 +89,7 @@ const PartnerPreferences = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="space-y-1 p-6">
|
||||
{basicPreferences.map((pref, index) => (
|
||||
<PreferenceItem key={index} {...pref} />
|
||||
))}
|
||||
@ -95,15 +97,24 @@ const PartnerPreferences = () => {
|
||||
</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">
|
||||
<div className="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
|
||||
<div className="flex items-center justify-between mb-4 bg-[#f5fbff] pt-4 pb-4 px-6">
|
||||
<h2 className="text-lg font-bold text-gray-800">Religious 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 p-6">
|
||||
{religiousPreferences.map((pref, index) => (
|
||||
<PreferenceItem key={index} {...pref} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* Footer Note */}
|
||||
<div className="text-center mt-6 text-sm text-gray-500">
|
||||
<p>Preferences are used to find compatible matches</p>
|
||||
|
||||
@ -21,14 +21,14 @@ const ThreeDMarquee = ({ images = [], className = "", cols = 4, onImageClick })
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`mx-auto block h-[680px] max-sm:h-[400px]
|
||||
className={`mx-auto block h-[680px] max-sm:h-[400px] rounded-[10px]
|
||||
overflow-hidden bg-[#034E08] relative ${className} max-w-[1400px] ` }
|
||||
|
||||
style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(2, 77, 14, 1) 70%)"}}
|
||||
>
|
||||
<div className="absolute bottom-0 left-0 w-full h-[300px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%)"}} />
|
||||
<div className="absolute top-0 left-0 w-full h-[200px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0.88) 10%, rgba(255, 255, 255, 0) 70% )"}} />
|
||||
<div className="text-white rounded-[0px] md:rounded-[10px] p-[20px] absolute md:top-[40%] md:left-[30%] w-full md:max-w-[600px] h-[100%] md:h-[230px] z-9 backdrop-blur-[5px] bg-[#a70710a8]">
|
||||
<div className="text-white rounded-[0px] md:rounded-[10px] p-[20px] absolute md:top-[40%] md:left-[30%] w-full md:max-w-[600px] h-[100%] md:h-[230px] z-9 backdrop-blur-[5px] bg-[#a70710]">
|
||||
|
||||
<h2 className="text-center text-[45px] font-900 pb-2">Now, chat for free !</h2>
|
||||
<p className="text-center text-[22px] font-900 pb-4">Finding your perfect match just become easier</p>
|
||||
@ -36,6 +36,9 @@ style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(2, 77, 14,
|
||||
<Button variant="contained" size="medium" sx={{width:"fit-content", padding:"10px 20px"}}>Regsiter Now</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="absolute top-0 left-0 w-full h-full " style={{background: "#00000", zIndex:"1"}} /> */}
|
||||
|
||||
<div
|
||||
className="flex w-full h-full items-center justify-center"
|
||||
style={{
|
||||
|
||||
@ -67,9 +67,9 @@ const FilterForm = () => {
|
||||
<div className="max-w-6xl mx-auto p-4 md:p-6 ">
|
||||
<div className="bg-white rounded-lg shadow-sm">
|
||||
{/* Header */}
|
||||
<div className="border-b p-4">
|
||||
<Typography variant="h5" className="font-semibold">
|
||||
Filter Options
|
||||
<div className="border-b border-pink-200 p-4 bg-[#fff5ed]">
|
||||
<Typography variant="h5" className="font-semibold text-center">
|
||||
Partner Filter preference
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -80,8 +80,14 @@ const FilterForm = () => {
|
||||
onChange={handleAccordionChange("basic")}
|
||||
className="mb-4"
|
||||
>
|
||||
<AccordionSummary expandIcon={<ChevronDown />}>
|
||||
<Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
|
||||
<AccordionSummary expandIcon={<ChevronDown />}
|
||||
sx={{
|
||||
backgroundColor: "#f5fbff", // green-900
|
||||
"&:hover": {
|
||||
backgroundColor: "#fff6f0", // optional hover
|
||||
}
|
||||
}}>
|
||||
<Typography className="font-semibold -mx-4 -my-2 px-4 py-2 w-full">
|
||||
Basic Details
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
@ -185,8 +191,13 @@ const FilterForm = () => {
|
||||
onChange={handleAccordionChange("religious")}
|
||||
className="mb-4"
|
||||
>
|
||||
<AccordionSummary expandIcon={<ChevronDown />}>
|
||||
<Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
|
||||
<AccordionSummary expandIcon={<ChevronDown />} sx={{
|
||||
backgroundColor: "#f5fbff", // green-900
|
||||
"&:hover": {
|
||||
backgroundColor: "#fff6f0", // optional hover
|
||||
}
|
||||
}}>
|
||||
<Typography className="font-semibold -mx-4 -my-2 px-4 py-2 w-full">
|
||||
Religious Details
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
@ -327,9 +338,16 @@ const FilterForm = () => {
|
||||
expanded={expandedSections.professional}
|
||||
onChange={handleAccordionChange("professional")}
|
||||
className="mb-4"
|
||||
|
||||
|
||||
>
|
||||
<AccordionSummary expandIcon={<ChevronDown />}>
|
||||
<Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
|
||||
<AccordionSummary expandIcon={<ChevronDown />} sx={{
|
||||
backgroundColor: "#f5fbff", // green-900
|
||||
"&:hover": {
|
||||
backgroundColor: "#fff6f0", // optional hover
|
||||
}
|
||||
}}>
|
||||
<Typography className="font-semibold -mx-4 -my-2 px-4 py-2 w-full">
|
||||
Professional Details
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
@ -410,8 +428,13 @@ const FilterForm = () => {
|
||||
onChange={handleAccordionChange("location")}
|
||||
className="mb-4"
|
||||
>
|
||||
<AccordionSummary expandIcon={<ChevronDown />}>
|
||||
<Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
|
||||
<AccordionSummary expandIcon={<ChevronDown />} sx={{
|
||||
backgroundColor: "#f5fbff", // green-900
|
||||
"&:hover": {
|
||||
backgroundColor: "#fff6f0", // optional hover
|
||||
}
|
||||
}}>
|
||||
<Typography className="font-semibold -mx-4 -my-2 px-4 py-2 w-full">
|
||||
Location Details
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
@ -474,8 +497,13 @@ const FilterForm = () => {
|
||||
onChange={handleAccordionChange("lifestyle")}
|
||||
className="mb-4"
|
||||
>
|
||||
<AccordionSummary expandIcon={<ChevronDown />}>
|
||||
<Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
|
||||
<AccordionSummary expandIcon={<ChevronDown />} sx={{
|
||||
backgroundColor: "#f5fbff", // green-900
|
||||
"&:hover": {
|
||||
backgroundColor: "#fff6f0", // optional hover
|
||||
}
|
||||
}}>
|
||||
<Typography className="font-semibold -mx-4 -my-2 px-4 py-2 w-full">
|
||||
Lifestyle Details
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
@ -542,8 +570,13 @@ const FilterForm = () => {
|
||||
onChange={handleAccordionChange("family")}
|
||||
className="mb-4"
|
||||
>
|
||||
<AccordionSummary expandIcon={<ChevronDown />}>
|
||||
<Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
|
||||
<AccordionSummary expandIcon={<ChevronDown />} sx={{
|
||||
backgroundColor: "#f5fbff", // green-900
|
||||
"&:hover": {
|
||||
backgroundColor: "#fff6f0", // optional hover
|
||||
}
|
||||
}}>
|
||||
<Typography className="font-semibold -mx-4 -my-2 px-4 py-2 w-full">
|
||||
Family Details
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
|
||||
@ -27,9 +27,9 @@ const FilterModal = () => {
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
maxWidth="lg" // adjust: "sm" | "md" | "lg"
|
||||
maxWidth="md" // adjust: "sm" | "md" | "lg"
|
||||
>
|
||||
<DialogTitle>
|
||||
<DialogTitle sx={{background:"#f5fbff"}}>
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between">
|
||||
<span>Filter Options</span>
|
||||
<IconButton onClick={handleClose} aria-label="close">
|
||||
|
||||
@ -5,7 +5,7 @@ const ProfileLayout = () => {
|
||||
return (
|
||||
<>
|
||||
<ProfileHeader/>
|
||||
<div className=" w-[100%] max-w-[1400px] mx-auto p-2" style={{ marginBottom:'90px', overflowX:"hidden" }}>
|
||||
<div className=" w-[100%] max-w-[1400px] mx-auto p-2" style={{ marginBottom:'10px', overflowX:"hidden" }}>
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
|
||||
@ -89,14 +89,14 @@ const HoroscopeGenerator = () => {
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="max-w-[1400px] mx-auto p-4">
|
||||
{/* Header */}
|
||||
<div className="text-center py-4 border-b">
|
||||
<h1 className="text-lg font-semibold text-gray-800">
|
||||
<div className="text-center py-4 ">
|
||||
<h1 className="text-[24px] font-semibold text-gray-800">
|
||||
Astrology / Horoscope
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Date Input Section */}
|
||||
<div className="py-6 border-b">
|
||||
<div className="py-6 w-full max-w-[400px] mx-auto">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Birth Date
|
||||
</label>
|
||||
@ -105,12 +105,12 @@ const HoroscopeGenerator = () => {
|
||||
type="date"
|
||||
value={dob}
|
||||
onChange={(e) => setDob(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
|
||||
className="w-full px-4 py-3 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-[950px] mx-auto'>
|
||||
|
||||
<div>
|
||||
|
||||
@ -205,11 +205,11 @@ const HoroscopeGenerator = () => {
|
||||
|
||||
|
||||
{/* Working Hours Button */}
|
||||
<div className="pb-6">
|
||||
<div className="pb-6 flex justify-center w-full my-5">
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={!dob}
|
||||
className="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white py-4 rounded-lg font-semibold text-base transition-colors shadow-md"
|
||||
className="w-[fit-content] px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white py-4 rounded-lg font-semibold text-base transition-colors shadow-md"
|
||||
>
|
||||
Working Hours
|
||||
</button>
|
||||
@ -217,7 +217,7 @@ const HoroscopeGenerator = () => {
|
||||
|
||||
{/* Result Display */}
|
||||
{showHoroscope && userZodiacIndex >= 0 && (
|
||||
<div className="mb-6 p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
|
||||
<div className="mb-6 p-4 bg-blue-50 border-2 border-blue-200 rounded-lg w-full max-w-[300px] mx-auto">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl mb-2">{zodiacSigns[userZodiacIndex].emoji}</div>
|
||||
<div className="text-lg font-bold text-gray-800">
|
||||
|
||||
@ -1,11 +1,48 @@
|
||||
import * as React from "react";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useRef, 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";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
|
||||
import MessageIcon from '@mui/icons-material/Message';
|
||||
import PhoneIcon from '@mui/icons-material/Phone';
|
||||
import { Button, Fab } from "@mui/material";
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import GridViewIcon from '@mui/icons-material/GridView';
|
||||
|
||||
import BookmarkAddOutlinedIcon from "@mui/icons-material/BookmarkAddOutlined";
|
||||
import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
|
||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||
import BlockIcon from "@mui/icons-material/Block";
|
||||
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
|
||||
import { Modal, } from "@mui/material";
|
||||
import {
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle
|
||||
} from "@mui/material";
|
||||
|
||||
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
|
||||
import ReportModal from "../components/common/ReportModal";
|
||||
import ShareModal from "../components/common/ShareModal";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import bride1 from "../assets/images/bride1.jpg";
|
||||
import bride2 from "../assets/images/bride2.jpg";
|
||||
import bride3 from "../assets/images/bride3.jpg";
|
||||
import bride4 from "../assets/images/bride4.jpg";
|
||||
|
||||
import groom1 from "../assets/images/groom1.jpg";
|
||||
import groom2 from "../assets/images/groom2.jpg";
|
||||
import groom3 from "../assets/images/groom3.jpg";
|
||||
import groom4 from "../assets/images/groom4.jpg";
|
||||
|
||||
|
||||
|
||||
// Icons as inline SVG components
|
||||
const CakeIcon = () => (
|
||||
@ -39,32 +76,234 @@ const LocationIcon = () => (
|
||||
);
|
||||
|
||||
// Profile Card Component
|
||||
function ProfileCard({ profile,activeTab }) {
|
||||
function ProfileCard({ profile,activeTab ,handleDelete}) {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
const menuRef = useRef(null);
|
||||
const [openReport, setOpenReport] = useState(false);
|
||||
const [openShare, setOpenShare] = useState(false);
|
||||
const [openBlockConfirm, setOpenBlockConfirm] = useState(false);
|
||||
const baseUrl = window.location.origin;
|
||||
|
||||
const profileUrl = `${baseUrl}/profile-details/${profile.id}`;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event) {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
||||
setOpenMenu(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
// NEW: Handle block confirmation
|
||||
const handleBlockConfirm = () => {
|
||||
setOpenBlockConfirm(false);
|
||||
setOpenMenu(false);
|
||||
toast.success("Profile blocked successfully!", { duration: 2000 });
|
||||
// Add your block API call here
|
||||
};
|
||||
|
||||
const renderMenu = () => {
|
||||
if (activeTab === "1") {
|
||||
return (
|
||||
<>
|
||||
<button className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<BookmarkAddOutlinedIcon className="w-4 h-4" />
|
||||
Shortlisted
|
||||
</button>
|
||||
|
||||
<button onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ShareOutlinedIcon className="w-4 h-4" />
|
||||
Share
|
||||
</button>
|
||||
|
||||
<button onClick={() => setOpenReport(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ErrorOutlineIcon className="w-4 h-4" />
|
||||
Report
|
||||
</button>
|
||||
|
||||
<button onClick={() => {
|
||||
setOpenMenu(false);
|
||||
setOpenBlockConfirm(true);
|
||||
}} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<BlockIcon className="w-4 h-4" />
|
||||
Block Profile
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (activeTab === "2") {
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ShareOutlinedIcon className="w-4 h-4" />
|
||||
Share Profile
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleDelete(profile.id)}
|
||||
className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<DeleteOutlineIcon className="w-4 h-4" />
|
||||
Delete
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (activeTab === "3") {
|
||||
return (
|
||||
<>
|
||||
<button className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<BookmarkAddOutlinedIcon className="w-4 h-4" />
|
||||
Shortlisted
|
||||
</button>
|
||||
|
||||
<button onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ShareOutlinedIcon className="w-4 h-4" />
|
||||
Share
|
||||
</button>
|
||||
|
||||
<button onClick={() => setOpenReport(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ErrorOutlineIcon className="w-4 h-4" />
|
||||
Report
|
||||
</button>
|
||||
|
||||
<button onClick={() => {
|
||||
setOpenMenu(false);
|
||||
setOpenBlockConfirm(true);
|
||||
}} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<BlockIcon className="w-4 h-4" />
|
||||
Block Profile
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-[10px] shadow-xl overflow-hidden border border-green-200">
|
||||
|
||||
<>
|
||||
<ReportModal open={openReport} onClose={() => setOpenReport(false)} />
|
||||
<ShareModal
|
||||
open={openShare}
|
||||
onClose={() => setOpenShare(false)}
|
||||
url={profileUrl}
|
||||
/>
|
||||
|
||||
|
||||
{/* NEW: Block Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={openBlockConfirm}
|
||||
onClose={() => setOpenBlockConfirm(false)}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
>
|
||||
<DialogTitle sx={{ fontWeight: 600, color: '#A70710' }}>
|
||||
<BlockIcon sx={{ fontSize: 24, mr: 1, verticalAlign: 'middle' }} />
|
||||
Block Profile
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText sx={{ color: 'grey.700', lineHeight: 1.6 }}>
|
||||
Are you sure you want to block {profile.name}? This action cannot be undone and they will no longer be able to contact you.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ p: 2, pt: 0 }}>
|
||||
<Button
|
||||
onClick={() => setOpenBlockConfirm(false)}
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
borderRadius: '20px',
|
||||
color: 'grey.600'
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleBlockConfirm}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: '#A70710',
|
||||
textTransform: 'none',
|
||||
borderRadius: '20px',
|
||||
fontWeight: 600,
|
||||
'&:hover': {
|
||||
backgroundColor: '#8e060d'
|
||||
}
|
||||
}}
|
||||
startIcon={<BlockIcon />}
|
||||
>
|
||||
Block
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
onClick={() => navigate(`/profile-details/${profile.id}`)}
|
||||
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">
|
||||
<div className="absolute top-4 left-4 z-10 bg-[#DF1D46] 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>
|
||||
{/* Shortlist / Options Button */}
|
||||
|
||||
|
||||
{activeTab !== "4" && (
|
||||
<div className="absolute top-4 right-4 z-20" ref={menuRef}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setOpenMenu(!openMenu);
|
||||
}}
|
||||
className="bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg hover:bg-gray-50 transition"
|
||||
>
|
||||
<GridViewIcon className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{openMenu && (
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="absolute right-0 mt-1 w-40 bg-white rounded-xl shadow-[0_4px_20px_rgba(0,0,0,0.1)] border p-0 space-y-1"
|
||||
>
|
||||
|
||||
{renderMenu()}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
<div classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]" style={{height:"300px"}}>
|
||||
|
||||
<img
|
||||
src={profile.image}
|
||||
alt="Profile"
|
||||
className="w-full h-80 object-cover"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
</div>
|
||||
{/* White Gradient Overlay */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
|
||||
@ -75,7 +314,7 @@ function ProfileCard({ profile,activeTab }) {
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 pb-1 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
@ -87,74 +326,142 @@ function ProfileCard({ profile,activeTab }) {
|
||||
|
||||
{/* Profile Details */}
|
||||
<div className="px-4 pt-2 pb-4 flex flex-col gap-2 bg-white">
|
||||
{(activeTab === "1" || activeTab === "2" || activeTab === "3") && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<VisibilityIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
{profile.lastseen}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
<span className="text-[14px] 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">
|
||||
<span className="text-[14px] 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">
|
||||
<LocationIcon className="text-red-900" />
|
||||
<span className="text-[14px] 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>
|
||||
{/* Action Buttons */}
|
||||
|
||||
{/* ❤️ 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>
|
||||
)}
|
||||
{(activeTab === "1" || activeTab === "2") && (
|
||||
<div className="flex gap-3 my-2 justify-between w-full px-[0px]">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// your decline logic
|
||||
}}
|
||||
className="gap-1 px-2 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white
|
||||
font-600 text-[12px] py-2 rounded-[20px] shadow-md
|
||||
hover:shadow-lg transition-all duration-300
|
||||
flex items-center justify-center transform hover:scale-95">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
Reject Request
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-600 text-[12px]
|
||||
rounded-[20px] px-2 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={(e) =>{
|
||||
|
||||
</div>
|
||||
e.stopPropagation();
|
||||
setIsLiked(!isLiked);
|
||||
} }
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-4 h-4" 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-4 h-4" 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>
|
||||
)}
|
||||
|
||||
Accepted Request
|
||||
</button>
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
{activeTab === "3" && (
|
||||
|
||||
<>
|
||||
|
||||
<div className="flex gap-3 my-2 justify-between w-full px-[0px]">
|
||||
<div className="flex gap-2">
|
||||
|
||||
<Fab size="medium" color="primary" aria-label="add">
|
||||
<MessageIcon />
|
||||
</Fab>
|
||||
|
||||
<Fab size="medium" color="secondary" aria-label="add">
|
||||
<PhoneIcon />
|
||||
</Fab>
|
||||
|
||||
</div>
|
||||
|
||||
<Button variant="contained" color="#f5fbff" onClick={(e) =>{ e.stopPropagation();
|
||||
navigate(`/profile-details/${profile.id}`)}
|
||||
} sx={{color:"#000000", background:"#f5fbff",fontWeight:"600", borderRadius:"30px"}}>
|
||||
|
||||
View Details
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{activeTab === "4" && ( <>
|
||||
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<VisibilityIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
Received Interest 14 Nov 2025
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<VisibilityIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
Rejected 15 Nov 2025
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@ -175,11 +482,11 @@ export default function InterestSendPage() {
|
||||
matrimonyId: "PS2847593",
|
||||
age: 24,
|
||||
height: "5.4",
|
||||
religion: "Hindu / Brahmin",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "MBA / Marketing Manager",
|
||||
location: "Mumbai",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop",
|
||||
bride1,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
@ -188,11 +495,11 @@ export default function InterestSendPage() {
|
||||
matrimonyId: "AR2847594",
|
||||
age: 23,
|
||||
height: "5.3",
|
||||
religion: "Hindu / Reddy",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "B.Tech / Software Engineer",
|
||||
location: "Hyderabad",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=800&fit=crop",
|
||||
bride2,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
@ -201,107 +508,222 @@ export default function InterestSendPage() {
|
||||
matrimonyId: "DP2847595",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
religion: "Hindu / Patel",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "CA / Chartered Accountant",
|
||||
location: "Ahmedabad",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&h=800&fit=crop",
|
||||
bride3,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Divya Patel",
|
||||
matrimonyId: "DP2847595",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "CA / Chartered Accountant",
|
||||
location: "Ahmedabad",
|
||||
image:
|
||||
groom2,
|
||||
isPremium: true,
|
||||
},
|
||||
],
|
||||
sent: [
|
||||
{
|
||||
id: 4,
|
||||
id: 5,
|
||||
name: "Kavya Iyer",
|
||||
matrimonyId: "KI2847596",
|
||||
age: 22,
|
||||
height: "5.2",
|
||||
religion: "Hindu / Iyer",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "BCA / Data Analyst",
|
||||
location: "Chennai",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=600&h=800&fit=crop",
|
||||
bride4,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: 6,
|
||||
name: "Neha Singh",
|
||||
matrimonyId: "NS2847597",
|
||||
age: 26,
|
||||
height: "5.6",
|
||||
religion: "Hindu / Rajput",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "MD / Doctor",
|
||||
location: "Delhi",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600&h=800&fit=crop",
|
||||
bride1,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Neha Singh",
|
||||
matrimonyId: "NS2847597",
|
||||
age: 26,
|
||||
height: "5.6",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "MD / Doctor",
|
||||
location: "Delhi",
|
||||
image:
|
||||
bride2,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Neha Singh",
|
||||
matrimonyId: "NS2847597",
|
||||
age: 26,
|
||||
height: "5.6",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "MD / Doctor",
|
||||
location: "Delhi",
|
||||
image:
|
||||
bride3,
|
||||
isPremium: false,
|
||||
},
|
||||
],
|
||||
accepted: [
|
||||
{
|
||||
id: 6,
|
||||
id: 9,
|
||||
name: "Shreya Nair",
|
||||
matrimonyId: "SN2847598",
|
||||
age: 24,
|
||||
height: "5.4",
|
||||
religion: "Hindu / Nair",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "B.Sc / Nurse",
|
||||
location: "Kochi",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=600&h=800&fit=crop",
|
||||
groom1,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
id: 10,
|
||||
name: "Meera Desai",
|
||||
matrimonyId: "MD2847599",
|
||||
age: 23,
|
||||
height: "5.3",
|
||||
religion: "Hindu / Desai",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "BBA / HR Manager",
|
||||
location: "Pune",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1517841905240-472988babdf9?w=600&h=800&fit=crop",
|
||||
groom2,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
id: 11,
|
||||
name: "Riya Kumar",
|
||||
matrimonyId: "RK2847600",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
religion: "Hindu / Kumar",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "M.Tech / Project Manager",
|
||||
location: "Bangalore",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=600&h=800&fit=crop",
|
||||
groom3,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "Riya Kumar",
|
||||
matrimonyId: "RK2847600",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "M.Tech / Project Manager",
|
||||
location: "Bangalore",
|
||||
image:
|
||||
groom1,
|
||||
isPremium: true,
|
||||
},
|
||||
],
|
||||
rejected: [
|
||||
{
|
||||
id: 9,
|
||||
id: 13,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
religion: "Hindu / Joshi",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=600&h=800&fit=crop",
|
||||
groom4,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
groom3,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
bride1,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
bride2,
|
||||
isPremium: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
// Step 1: Use state for profiles
|
||||
const [profiles, setProfiles] = useState({
|
||||
received: [...profilesData.received],
|
||||
sent: [...profilesData.sent],
|
||||
accepted: [...profilesData.accepted],
|
||||
rejected: [...profilesData.rejected],
|
||||
});
|
||||
|
||||
// Corrected handleDelete to update profiles state properly
|
||||
const handleDelete = (id) => {
|
||||
setProfiles((prev) => {
|
||||
const updated = { ...prev };
|
||||
Object.keys(updated).forEach((key) => {
|
||||
updated[key] = updated[key].filter((p) => p.id !== id);
|
||||
});
|
||||
return updated;
|
||||
});
|
||||
toast.success("Profile deleted successfully!", {
|
||||
duration: 2000,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className=" py-8 px-2">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className=" py-8 px-0">
|
||||
<div className="max-w-[1400px] 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
|
||||
Received Interest
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Manage your matrimony profile interests
|
||||
@ -309,15 +731,20 @@ export default function InterestSendPage() {
|
||||
</div>
|
||||
|
||||
{/* MUI Tabs */}
|
||||
<Box sx={{ width: "100%", typography: "body1" }}>
|
||||
<Box sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}>
|
||||
<TabContext value={value}>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: 1,
|
||||
borderColor: "divider",
|
||||
|
||||
width: "100%",
|
||||
maxWidth: "800px",
|
||||
margin: "0px auto",
|
||||
marginBottom:"40px",
|
||||
display:"flex",
|
||||
justifyContent:"center",
|
||||
background:"#f5fbff",
|
||||
borderRadius:"10px",
|
||||
padding:"20px 15px",
|
||||
}}
|
||||
>
|
||||
<TabList
|
||||
@ -339,6 +766,8 @@ export default function InterestSendPage() {
|
||||
color: "white",
|
||||
margin: "0 6px",
|
||||
boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
|
||||
|
||||
|
||||
},
|
||||
|
||||
"& .MuiTabs-scrollButtons:hover": {
|
||||
@ -366,16 +795,17 @@ export default function InterestSendPage() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab label="Received Requests" value="1" />
|
||||
<Tab label="Sent Requests" value="2" />
|
||||
<Tab label="All " value="1" />
|
||||
<Tab label="Pending" 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">
|
||||
<TabPanel value="1" sx={{ padding: "10px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6
|
||||
w-[100%] max-w-[1400px] mx-auto">
|
||||
{profilesData.received.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
@ -384,16 +814,16 @@ export default function InterestSendPage() {
|
||||
|
||||
{/* 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">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
|
||||
{profilesData.sent.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} handleDelete={handleDelete}/>
|
||||
))}
|
||||
</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">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
|
||||
{profilesData.accepted.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
@ -402,7 +832,7 @@ export default function InterestSendPage() {
|
||||
|
||||
{/* 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">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
|
||||
{profilesData.rejected.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import MatrimonyProfile from "../components/profiledetail/MatrimonyProfile"
|
||||
import PartnerPreferences from "../components/profiledetail/PartnerPreferences"
|
||||
import MatchingList from "../components/profiledashboard/MatchingList";
|
||||
|
||||
const ProfileDetailPage = () => {
|
||||
const { id } = useParams();
|
||||
return (
|
||||
<>
|
||||
<div className="w-[100%] max-w-[1400px] mx-auto my-10">
|
||||
<MatrimonyProfile/>
|
||||
<PartnerPreferences/>
|
||||
|
||||
<MatchingList/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -4,10 +4,11 @@ import LandingLayout from "../layout/LandingLayout";
|
||||
import LoginPage from "../pages/auth/LoginPage";
|
||||
import ForgotPasswordPage from "../pages/auth/ForgotPasswordPage";
|
||||
import ChangePasswordPage from "../components/auth/ChangePasswordForm";
|
||||
import ProfileLayout from "../layout/ProfileLayout";
|
||||
const PublicRoutes = () => {
|
||||
return (
|
||||
<>
|
||||
<Route element={<LandingLayout />}>
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
|
||||
</Route>
|
||||
|
||||
@ -31,7 +31,7 @@ const UserRoutes = () => {
|
||||
</Route>
|
||||
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/" element={<UserDashboardHome />} />
|
||||
<Route path="/dashboard-home" element={<UserDashboardHome />} />
|
||||
</Route>
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/main/dashboard" element={<UserDashboardHome />} />
|
||||
@ -55,9 +55,11 @@ const UserRoutes = () => {
|
||||
|
||||
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/profile-detail" element={<ProfileDetailPage />} />
|
||||
<Route path="/profile-details/:id" element={<ProfileDetailPage />} />
|
||||
</Route>
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/profile-edit" element={<StepperForm />} />
|
||||
</Route>
|
||||
|
||||
<Route element={<ProfileLayout />}>
|
||||
<Route path="/change-password" element={<ChangePasswordPage />} />
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user