all pages
This commit is contained in:
parent
8a670b461a
commit
e773f6b7e1
1
package-lock.json
generated
1
package-lock.json
generated
@ -398,7 +398,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
|
||||||
"integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
|
"integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/memoize": "^0.9.0"
|
"@emotion/memoize": "^0.9.0"
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
src/assets/images/banner1.png
Normal file
BIN
src/assets/images/banner1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
src/assets/images/contactimg.jpg
Normal file
BIN
src/assets/images/contactimg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/images/safegirl.jpg
Normal file
BIN
src/assets/images/safegirl.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
@ -313,7 +313,7 @@ const ChangePasswordPage = () => {
|
|||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
minHeight: '100vh',
|
minHeight: '100vh',
|
||||||
backgroundColor: '#f5f5f5',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
py: 4,
|
py: 4,
|
||||||
@ -334,7 +334,8 @@ const ChangePasswordPage = () => {
|
|||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
flex: { md: 1 },
|
flex: { md: 1 },
|
||||||
background: 'linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%)',
|
// background: 'linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%)',
|
||||||
|
background:'#034E08',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@ -460,9 +461,7 @@ const ChangePasswordPage = () => {
|
|||||||
>
|
>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
|
||||||
<IconButton onClick={handleBack} sx={{ mr: 1 }}>
|
|
||||||
<ArrowBackIcon />
|
|
||||||
</IconButton>
|
|
||||||
<Typography variant="h5" sx={{ fontWeight: 700, color: '#333' }}>
|
<Typography variant="h5" sx={{ fontWeight: 700, color: '#333' }}>
|
||||||
Change Password
|
Change Password
|
||||||
</Typography>
|
</Typography>
|
||||||
@ -548,25 +547,28 @@ const ChangePasswordPage = () => {
|
|||||||
|
|
||||||
{/* Submit Button */}
|
{/* Submit Button */}
|
||||||
<Button
|
<Button
|
||||||
fullWidth
|
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
sx={{
|
sx={{
|
||||||
|
width:"fit-content",
|
||||||
|
mx: 'auto',
|
||||||
mt: 3,
|
mt: 3,
|
||||||
py: 1.5,
|
py: 1.5,
|
||||||
|
px: 5,
|
||||||
borderRadius: 50,
|
borderRadius: 50,
|
||||||
backgroundColor: '#FF9800',
|
backgroundColor: '#A70710',
|
||||||
fontSize: '1rem',
|
fontSize: '1rem',
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
boxShadow: '0 4px 12px rgba(255, 152, 0, 0.4)',
|
boxShadow: '0 4px 12px rgba(255, 152, 0, 0.4)',
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
backgroundColor: '#F57C00',
|
backgroundColor: '#A70710',
|
||||||
boxShadow: '0 6px 16px rgba(255, 152, 0, 0.5)',
|
boxShadow: '0 6px 16px rgba(255, 17, 0, 0.5)',
|
||||||
},
|
},
|
||||||
'&:disabled': {
|
'&:disabled': {
|
||||||
backgroundColor: '#FFB74D',
|
backgroundColor: '#A70710',
|
||||||
color: 'white',
|
color: 'white',
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
@ -589,7 +591,7 @@ const ChangePasswordPage = () => {
|
|||||||
textTransform: 'none',
|
textTransform: 'none',
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
color: '#FF9800',
|
color: '#A70710',
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -14,29 +14,43 @@ import Tooltip from "@mui/material/Tooltip";
|
|||||||
import MenuIcon from "@mui/icons-material/Menu";
|
import MenuIcon from "@mui/icons-material/Menu";
|
||||||
import CloseIcon from "@mui/icons-material/Close";
|
import CloseIcon from "@mui/icons-material/Close";
|
||||||
import Divider from "@mui/material/Divider";
|
import Divider from "@mui/material/Divider";
|
||||||
import { InboxIcon, MailIcon } from "lucide-react";
|
import Modal from "@mui/material/Modal";
|
||||||
|
import Button from "@mui/material/Button";
|
||||||
import LazyImage from "./LazyImage";
|
import LazyImage from "./LazyImage";
|
||||||
import Logo from "../../assets/images/logo.png";
|
import Logo from "../../assets/images/logo.png";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import Drawer from "@mui/material/Drawer";
|
|
||||||
import { useState, useRef, useEffect } from "react";
|
import { useState, useRef, useEffect } from "react";
|
||||||
import { useTheme, useMediaQuery, ListItemIcon } from "@mui/material";
|
import { useTheme, useMediaQuery, ListItemIcon } from "@mui/material";
|
||||||
import {Badge, } from "@mui/material";
|
|
||||||
import { Home, Users, Heart, MessageCircle, Search, Bell } from "lucide-react";
|
import { Home, Users, Heart, MessageCircle, Search, Bell } from "lucide-react";
|
||||||
|
|
||||||
const NAV_LINKS = [
|
const NAV_LINKS = [
|
||||||
{ label: "Home", path: "/" },
|
{ label: "Home", path: "/" },
|
||||||
{ label: "Matches", path: "/matches" },
|
{ label: "Matches", path: "/matches" },
|
||||||
{ label: "Interest", path: "/interest" },
|
{ label: "Interest", path: "/interest" },
|
||||||
{ label: "Messages", path: "/messages" },
|
{ label: "Messages", path: "/chat" },
|
||||||
{ label: "Search", path: "/search" },
|
{ label: "Search", path: "/search" },
|
||||||
{ label: "Notifications", path: "/notifications" }
|
{ label: "Notifications", path: "/notifications" }
|
||||||
];
|
];
|
||||||
|
|
||||||
/* ----------------------------------------------------
|
const PROFILE_MENU = [
|
||||||
SPARKLE NAVBAR (same as your original code)
|
{ label: "Profile", path: "/profile" },
|
||||||
---------------------------------------------------- */
|
{ label: "Subscription", path: "/subscription-plan" },
|
||||||
// Sparkle Navbar Component
|
{ label: "Subscription History", path: "/subscription-history" },
|
||||||
|
{ label: "Change Password", path: "/change-password" },
|
||||||
|
{ label: "View Reports", path: "/block-report-profilelist" },
|
||||||
|
{ label: "Blocked Users", path: "/block-report-profilelist" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const ACCOUNT_SETTINGS = [
|
||||||
|
{ label: "Privacy Settings", path: "/account-settings" },
|
||||||
|
{ label: "Privacy Policy", path: "/privacy-policy" },
|
||||||
|
{ label: "Terms & Conditions", path: "/terms" },
|
||||||
|
{ label: "Contact Us", path: "/contact" },
|
||||||
|
{ label: "Be Safe Online", path: "/safe-online" },
|
||||||
|
{ label: "Delete Account", action: "delete" },
|
||||||
|
{ label: "Logout", action: "logout" }
|
||||||
|
];
|
||||||
|
|
||||||
const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick }) => {
|
const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick }) => {
|
||||||
const [activeIndex, setActiveIndex] = useState(0);
|
const [activeIndex, setActiveIndex] = useState(0);
|
||||||
const [indicatorStyle, setIndicatorStyle] = useState({});
|
const [indicatorStyle, setIndicatorStyle] = useState({});
|
||||||
@ -102,7 +116,6 @@ const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick }) => {
|
|||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{/* Underline only - no dots */}
|
|
||||||
<div
|
<div
|
||||||
className="absolute bottom-3 h-[3px] w-9 rounded-full transition-all duration-300 ease-out"
|
className="absolute bottom-3 h-[3px] w-9 rounded-full transition-all duration-300 ease-out"
|
||||||
style={{
|
style={{
|
||||||
@ -116,13 +129,12 @@ const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
/* ----------------------------------------------------
|
|
||||||
MAIN COMPONENT — UPDATED WITH PROFILE DRAWER
|
|
||||||
---------------------------------------------------- */
|
|
||||||
const ProfileHeader = () => {
|
const ProfileHeader = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
|
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
|
||||||
const [profileDrawerOpen, setProfileDrawerOpen] = useState(false);
|
const [profileDrawerOpen, setProfileDrawerOpen] = useState(false);
|
||||||
|
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
|
||||||
|
const [logoutModalOpen, setLogoutModalOpen] = useState(false);
|
||||||
|
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
|
const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
|
||||||
@ -131,9 +143,52 @@ const ProfileHeader = () => {
|
|||||||
const toggleProfileDrawer = (open) => () => setProfileDrawerOpen(open);
|
const toggleProfileDrawer = (open) => () => setProfileDrawerOpen(open);
|
||||||
|
|
||||||
const [selectedItem, setSelectedItem] = useState("Home");
|
const [selectedItem, setSelectedItem] = useState("Home");
|
||||||
/* -----------------------------------------
|
|
||||||
PROFILE DRAWER CONTENT (RIGHT SIDE)
|
const handleMenuClick = (item) => {
|
||||||
------------------------------------------ */
|
if (item.action === "delete") {
|
||||||
|
setDeleteModalOpen(true);
|
||||||
|
setProfileDrawerOpen(false);
|
||||||
|
} else if (item.action === "logout") {
|
||||||
|
setLogoutModalOpen(true);
|
||||||
|
setProfileDrawerOpen(false);
|
||||||
|
} else if (item.path) {
|
||||||
|
navigate(item.path);
|
||||||
|
setProfileDrawerOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteAccount = () => {
|
||||||
|
// Add your delete account logic here
|
||||||
|
console.log("Account deleted");
|
||||||
|
setDeleteModalOpen(false);
|
||||||
|
navigate("/");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
// Add your logout logic here
|
||||||
|
console.log("Logged out");
|
||||||
|
setLogoutModalOpen(false);
|
||||||
|
navigate("/login");
|
||||||
|
};
|
||||||
|
|
||||||
|
const modalStyle = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: isDesktop ? 400 : '90%',
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
borderRadius: 2,
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNavIcon = (index) => {
|
||||||
|
const icons = [Home, Users, Heart, MessageCircle, Search, Bell];
|
||||||
|
const IconComponent = icons[index % icons.length];
|
||||||
|
return <IconComponent size={20} />;
|
||||||
|
};
|
||||||
|
|
||||||
const ProfileDrawerContent = (
|
const ProfileDrawerContent = (
|
||||||
<Box sx={{ width: isDesktop ? 300 : 250 }}>
|
<Box sx={{ width: isDesktop ? 300 : 250 }}>
|
||||||
<Box
|
<Box
|
||||||
@ -155,17 +210,10 @@ const ProfileHeader = () => {
|
|||||||
<Divider />
|
<Divider />
|
||||||
|
|
||||||
<List>
|
<List>
|
||||||
{[
|
{PROFILE_MENU.map((item) => (
|
||||||
"Profile",
|
<ListItem key={item.label} disablePadding>
|
||||||
"Subscription",
|
<ListItemButton onClick={() => handleMenuClick(item)}>
|
||||||
"Subscription History",
|
<ListItemText primary={item.label} />
|
||||||
"Change Password",
|
|
||||||
"View Reports",
|
|
||||||
"Blocked Users",
|
|
||||||
].map((text) => (
|
|
||||||
<ListItem key={text} disablePadding>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemText primary={text} />
|
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
))}
|
))}
|
||||||
@ -176,17 +224,10 @@ const ProfileHeader = () => {
|
|||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<List>
|
<List>
|
||||||
{[
|
{ACCOUNT_SETTINGS.map((item) => (
|
||||||
"Privacy Policy",
|
<ListItem key={item.label} disablePadding>
|
||||||
"Terms & Conditions",
|
<ListItemButton onClick={() => handleMenuClick(item)}>
|
||||||
"Contact Us",
|
<ListItemText primary={item.label} />
|
||||||
"Be Safe Online",
|
|
||||||
"Delete Account",
|
|
||||||
"Logout",
|
|
||||||
].map((text) => (
|
|
||||||
<ListItem key={text} disablePadding>
|
|
||||||
<ListItemButton>
|
|
||||||
<ListItemText primary={text} />
|
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
))}
|
))}
|
||||||
@ -194,9 +235,6 @@ const ProfileHeader = () => {
|
|||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
||||||
/* -----------------------------------------
|
|
||||||
MOBILE LEFT DRAWER
|
|
||||||
------------------------------------------ */
|
|
||||||
const MobileDrawerMenu = (
|
const MobileDrawerMenu = (
|
||||||
<Box sx={{ width: 250 }}>
|
<Box sx={{ width: 250 }}>
|
||||||
<Box sx={{ p: 2, display: "flex", justifyContent: "space-between" }}>
|
<Box sx={{ p: 2, display: "flex", justifyContent: "space-between" }}>
|
||||||
@ -218,7 +256,7 @@ const ProfileHeader = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
{getNavIcon(index)}
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
<ListItemText primary={label} />
|
<ListItemText primary={label} />
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
@ -230,26 +268,23 @@ const ProfileHeader = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* --------------------------- NAVBAR ----------------------------- */}
|
|
||||||
<AppBar position="sticky" sx={{ backgroundColor: "#fff" }}>
|
<AppBar position="sticky" sx={{ backgroundColor: "#fff" }}>
|
||||||
<Container maxWidth="xl">
|
<Container maxWidth="xl">
|
||||||
<Toolbar disableGutters>
|
<Toolbar disableGutters>
|
||||||
{/* Desktop Logo */}
|
|
||||||
<Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
|
<Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
|
||||||
<LazyImage
|
<LazyImage
|
||||||
src={Logo}
|
src={Logo}
|
||||||
className="w-full h-[50px] rounded-lg object-cover"
|
className="w-full h-[70px] my-2 rounded-lg object-cover cursor-pointer"
|
||||||
|
onClick={() => navigate("/")}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* MOBILE: Menu Button */}
|
|
||||||
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
|
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
|
||||||
<IconButton onClick={toggleMobileDrawer(true)}>
|
<IconButton onClick={toggleMobileDrawer(true)}>
|
||||||
<MenuIcon />
|
<MenuIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Mobile Logo */}
|
|
||||||
<Box
|
<Box
|
||||||
sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}
|
sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}
|
||||||
onClick={() => navigate("/")}
|
onClick={() => navigate("/")}
|
||||||
@ -260,21 +295,18 @@ const ProfileHeader = () => {
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Desktop Menu */}
|
|
||||||
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
|
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
|
||||||
<SparkleNavbar
|
<SparkleNavbar
|
||||||
items={NAV_LINKS.map(link => link.label)}
|
items={NAV_LINKS.map(link => link.label)}
|
||||||
color="#034E08"
|
color="#034E08"
|
||||||
onItemClick={(item) => {
|
onItemClick={(item) => {
|
||||||
setSelectedItem(item);
|
setSelectedItem(item);
|
||||||
const link = NAV_LINKS.find(l => l.label === item);
|
const link = NAV_LINKS.find(l => l.label === item);
|
||||||
if (link) navigate(link.path);
|
if (link) navigate(link.path);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* AVATAR CLICK → RIGHT DRAWER */}
|
|
||||||
<Box sx={{ flexGrow: 0 }}>
|
<Box sx={{ flexGrow: 0 }}>
|
||||||
<Tooltip title="Account Menu">
|
<Tooltip title="Account Menu">
|
||||||
<IconButton onClick={toggleProfileDrawer(true)}>
|
<IconButton onClick={toggleProfileDrawer(true)}>
|
||||||
@ -286,7 +318,6 @@ const ProfileHeader = () => {
|
|||||||
</Container>
|
</Container>
|
||||||
</AppBar>
|
</AppBar>
|
||||||
|
|
||||||
{/* MOBILE LEFT DRAWER */}
|
|
||||||
<SwipeableDrawer
|
<SwipeableDrawer
|
||||||
anchor="left"
|
anchor="left"
|
||||||
open={mobileDrawerOpen}
|
open={mobileDrawerOpen}
|
||||||
@ -296,7 +327,6 @@ const ProfileHeader = () => {
|
|||||||
{MobileDrawerMenu}
|
{MobileDrawerMenu}
|
||||||
</SwipeableDrawer>
|
</SwipeableDrawer>
|
||||||
|
|
||||||
{/* PROFILE RIGHT DRAWER */}
|
|
||||||
<SwipeableDrawer
|
<SwipeableDrawer
|
||||||
anchor="right"
|
anchor="right"
|
||||||
open={profileDrawerOpen}
|
open={profileDrawerOpen}
|
||||||
@ -305,8 +335,96 @@ const ProfileHeader = () => {
|
|||||||
>
|
>
|
||||||
{ProfileDrawerContent}
|
{ProfileDrawerContent}
|
||||||
</SwipeableDrawer>
|
</SwipeableDrawer>
|
||||||
|
|
||||||
|
{/* Delete Account Modal */}
|
||||||
|
<Modal
|
||||||
|
open={deleteModalOpen}
|
||||||
|
onClose={() => setDeleteModalOpen(false)}
|
||||||
|
aria-labelledby="delete-modal-title"
|
||||||
|
>
|
||||||
|
<Box sx={modalStyle}>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||||
|
<Typography id="delete-modal-title" variant="h6" component="h2">
|
||||||
|
Delete Account
|
||||||
|
</Typography>
|
||||||
|
<IconButton onClick={() => setDeleteModalOpen(false)} size="small">
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
<Typography sx={{ mb: 3 }}>
|
||||||
|
Are you sure you want to delete your account? This action cannot be undone.
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => setDeleteModalOpen(false)}
|
||||||
|
sx={{
|
||||||
|
color: '#4caf50',
|
||||||
|
borderColor: '#4caf50',
|
||||||
|
'&:hover': { borderColor: '#45a049', backgroundColor: 'rgba(76, 175, 80, 0.04)' }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleDeleteAccount}
|
||||||
|
sx={{
|
||||||
|
bgcolor: '#f44336',
|
||||||
|
'&:hover': { bgcolor: '#d32f2f' }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
{/* Logout Modal */}
|
||||||
|
<Modal
|
||||||
|
open={logoutModalOpen}
|
||||||
|
onClose={() => setLogoutModalOpen(false)}
|
||||||
|
aria-labelledby="logout-modal-title"
|
||||||
|
>
|
||||||
|
<Box sx={modalStyle}>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||||
|
<Typography id="logout-modal-title" variant="h6" component="h2">
|
||||||
|
Logout
|
||||||
|
</Typography>
|
||||||
|
<IconButton onClick={() => setLogoutModalOpen(false)} size="small">
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
<Typography sx={{ mb: 3 }}>
|
||||||
|
Are you sure you want to logout?
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => setLogoutModalOpen(false)}
|
||||||
|
sx={{
|
||||||
|
color: '#4caf50',
|
||||||
|
borderColor: '#4caf50',
|
||||||
|
'&:hover': { borderColor: '#45a049', backgroundColor: 'rgba(76, 175, 80, 0.04)' }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleLogout}
|
||||||
|
sx={{
|
||||||
|
bgcolor: '#f44336',
|
||||||
|
'&:hover': { bgcolor: '#d32f2f' }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ProfileHeader;
|
export default ProfileHeader;
|
||||||
@ -69,7 +69,7 @@ const SettingItem = ({ title, description, enabled, onToggle }) => (
|
|||||||
);
|
);
|
||||||
|
|
||||||
const TabContent = ({ title, settings, states, onToggle }) => (
|
const TabContent = ({ title, settings, states, onToggle }) => (
|
||||||
<Box sx={{borderRadius:"10px", flex: 1, bgcolor: '#ebf7ff', height: { xs: 'auto', md: '100vh' }, overflow: 'auto', width:"100%", maxWidth:"600px", margin:"0 auto" }}>
|
<Box sx={{borderRadius:"10px", flex: 1, bgcolor: '#ebf7ff', height: { xs: 'auto', md: '100vh' }, overflow: 'auto', width:"100%", maxWidth:"1000px", margin:"0 auto" }}>
|
||||||
<Box sx={{
|
<Box sx={{
|
||||||
position: 'sticky',
|
position: 'sticky',
|
||||||
top: 0,
|
top: 0,
|
||||||
|
|||||||
@ -262,7 +262,7 @@ function BlockedProfileListPage() {
|
|||||||
minWidth: 120,
|
minWidth: 120,
|
||||||
},
|
},
|
||||||
'& .Mui-selected': {
|
'& .Mui-selected': {
|
||||||
color: '#fff',
|
color: '#fff !important',
|
||||||
background:"#A70710"
|
background:"#A70710"
|
||||||
},
|
},
|
||||||
'& .MuiTabs-indicator': {
|
'& .MuiTabs-indicator': {
|
||||||
|
|||||||
577
src/pages/ChatPage.jsx
Normal file
577
src/pages/ChatPage.jsx
Normal file
@ -0,0 +1,577 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Search, MoreVertical, Send, Phone, Video, Check, CheckCheck, ArrowLeft, Star, Share2, Flag, Ban, Trash2 } from 'lucide-react';
|
||||||
|
|
||||||
|
const ChatUI = () => {
|
||||||
|
const [selectedChat, setSelectedChat] = useState(null);
|
||||||
|
const [message, setMessage] = useState('');
|
||||||
|
const [showChatOnMobile, setShowChatOnMobile] = useState(false);
|
||||||
|
const [showCallHistory, setShowCallHistory] = useState(false);
|
||||||
|
const [showMenu, setShowMenu] = useState(false);
|
||||||
|
const [showChatMenu, setShowChatMenu] = useState(false);
|
||||||
|
|
||||||
|
const contacts = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Kalai',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Kalai',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Sabitha',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sabitha',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Lia',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lia',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'Moi',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Moi',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'Sri',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sri',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: 'Lyana',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lyana',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: 'Lyana',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lyana',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: 'Lyana',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lyana',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
name: 'Lyana',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lyana',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
name: 'Lyana',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lyana',
|
||||||
|
lastMessage: 'Hi bro!n how are you Long time no see',
|
||||||
|
time: '10 Nov 2025, 10 : 23 AM',
|
||||||
|
online: false
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const messages = {
|
||||||
|
1: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
sender: 'other',
|
||||||
|
text: 'Let\'s do it! I\'m in a meeting until noon.',
|
||||||
|
time: '10 Nov',
|
||||||
|
isDate: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
sender: 'me',
|
||||||
|
text: 'That\'s perfect! There\'s a new place on Main St I\'ve been wanting to check out. I hear their hawaiian pizza is awesome!',
|
||||||
|
time: '07:21',
|
||||||
|
isDate: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
sender: 'date',
|
||||||
|
text: 'Today',
|
||||||
|
isDate: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
sender: 'me',
|
||||||
|
text: 'Can\'s get lunch. How about tomorrow?',
|
||||||
|
time: '09:42',
|
||||||
|
isDate: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
sender: 'other',
|
||||||
|
text: 'Let\'s do it! I\'m in a meeting until noon.',
|
||||||
|
time: '',
|
||||||
|
isDate: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
sender: 'me',
|
||||||
|
text: 'That\'s perfect! There\'s a new place on Main St I\'ve been wanting to check out. I hear their hawaiian pizza is awesome!',
|
||||||
|
time: '',
|
||||||
|
isDate: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const callHistory = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Kalai',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Kalai',
|
||||||
|
status: 'Incoming call',
|
||||||
|
time: '10 : 00 AM',
|
||||||
|
date: 'Today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Lia',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lia',
|
||||||
|
status: 'Outgoing',
|
||||||
|
time: '10 : 00 AM',
|
||||||
|
date: 'Today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Moi',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Moi',
|
||||||
|
status: 'Incoming call',
|
||||||
|
time: '10 : 00 AM',
|
||||||
|
date: 'Today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'Sri',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sri',
|
||||||
|
status: 'Outgoing',
|
||||||
|
time: '10 : 00 AM',
|
||||||
|
date: 'Today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'Kalai',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Kalai',
|
||||||
|
status: 'Outgoing',
|
||||||
|
time: '10 : 00 AM',
|
||||||
|
date: 'Today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: 'Kalai',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Kalai',
|
||||||
|
status: 'Outgoing',
|
||||||
|
time: '10 : 00 AM',
|
||||||
|
date: 'Today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: 'Kalai',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Kalai',
|
||||||
|
status: 'Outgoing',
|
||||||
|
time: '10 : 00 AM',
|
||||||
|
date: 'Today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: 'Kalai',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Kalai',
|
||||||
|
status: 'Outgoing',
|
||||||
|
time: '10 : 00 AM',
|
||||||
|
date: 'Today'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const [chatMessages, setChatMessages] = useState({
|
||||||
|
1: [
|
||||||
|
{ id: 1, sender: 'other', text: "Let's do it! I'm in a meeting until noon.", time: '10 Nov', isDate: false , read: false },
|
||||||
|
{ id: 2, sender: 'me', text: "That's perfect! There's a new place...", time: '07:21', isDate: false , read: false },
|
||||||
|
{ id: 3, sender: 'date', text: 'Today', isDate: true, read: true | false },
|
||||||
|
{ id: 4, sender: 'me', text: "Can's get lunch. How about tomorrow?", time: '09:42', isDate: false , read: true },
|
||||||
|
{ id: 5, sender: 'other', text: "Let's do it! I'm in a meeting until noon.", time: '', isDate: false, read: true },
|
||||||
|
{ id: 6, sender: 'me', text: "That's perfect! There's a new place...", time: '', isDate: false, read: true },
|
||||||
|
],
|
||||||
|
// 2,3,... if needed
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const handleSendMessage = () => {
|
||||||
|
if (!message.trim() || !selectedChat) return;
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||||
|
|
||||||
|
setChatMessages(prev => {
|
||||||
|
const prevMsgs = prev[selectedChat] || [];
|
||||||
|
const newMsg = {
|
||||||
|
id: prevMsgs.length ? prevMsgs[prevMsgs.length - 1].id + 1 : 1,
|
||||||
|
sender: 'me',
|
||||||
|
text: message.trim(),
|
||||||
|
time: timeString,
|
||||||
|
isDate: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
[selectedChat]: [...prevMsgs, newMsg],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
setMessage('');
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const handleChatSelect = (contactId) => {
|
||||||
|
setSelectedChat(contactId);
|
||||||
|
setShowChatOnMobile(true);
|
||||||
|
setShowCallHistory(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackToList = () => {
|
||||||
|
setShowChatOnMobile(false);
|
||||||
|
setShowCallHistory(false);
|
||||||
|
setShowChatMenu(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCallHistoryClick = () => {
|
||||||
|
setShowCallHistory(true);
|
||||||
|
setShowChatOnMobile(false);
|
||||||
|
setShowMenu(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-[1400px] mx-auto flex h-screen gap-[20px] bg-gray-50">
|
||||||
|
{/* Sidebar - Chat List */}
|
||||||
|
<div className={`w-full md:w-96 bg-white border border-1 border-gray-200 rounded-[10px] flex flex-col ${
|
||||||
|
showChatOnMobile || showCallHistory ? 'hidden md:flex' : 'flex'
|
||||||
|
}`}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-4 border-b border-gray-200">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h1 className="text-xl font-semibold">Chat</h1>
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowMenu(!showMenu)}
|
||||||
|
className="p-2 hover:bg-gray-100 rounded"
|
||||||
|
>
|
||||||
|
<MoreVertical className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{showMenu && (
|
||||||
|
<div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
|
||||||
|
<button
|
||||||
|
onClick={handleCallHistoryClick}
|
||||||
|
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100"
|
||||||
|
>
|
||||||
|
<Phone className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Call History</span>
|
||||||
|
</button>
|
||||||
|
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
|
||||||
|
<span className="text-sm">Clear chat</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search */}
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search your partner here..."
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact List */}
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{contacts.map((contact) => (
|
||||||
|
<div
|
||||||
|
key={contact.id}
|
||||||
|
onClick={() => handleChatSelect(contact.id)}
|
||||||
|
className={`flex items-center gap-3 p-4 cursor-pointer hover:bg-gray-50 border-b border-gray-100 ${
|
||||||
|
selectedChat === contact.id ? 'bg-blue-50' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src={contact.avatar}
|
||||||
|
alt={contact.name}
|
||||||
|
className="w-12 h-12 rounded-full"
|
||||||
|
/>
|
||||||
|
{contact.online && (
|
||||||
|
<div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<h3 className="font-medium text-gray-900">{contact.name}</h3>
|
||||||
|
<span className="text-xs text-gray-500">{contact.time}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600 truncate">
|
||||||
|
{contact.lastMessage}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Call History View */}
|
||||||
|
{showCallHistory && (
|
||||||
|
<div className={`flex-1 bg-white ${showCallHistory ? 'flex' : 'hidden md:flex'} flex-col`}>
|
||||||
|
{/* Call History Header */}
|
||||||
|
<div className="p-4 border-b border-gray-200">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={handleBackToList}
|
||||||
|
className="md:hidden p-2 hover:bg-gray-100 rounded"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-5 h-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<img
|
||||||
|
src="https://api.dicebear.com/7.x/avataaars/svg?seed=User"
|
||||||
|
alt="User"
|
||||||
|
className="w-10 h-10 rounded-full"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold">Dalahamanner-Hv</h2>
|
||||||
|
<p className="text-xs text-gray-500">ID: TKS258AA</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button className="p-2 hover:bg-gray-100 rounded">
|
||||||
|
<Phone className="w-5 h-5 text-blue-600" />
|
||||||
|
</button>
|
||||||
|
<button className="p-2 hover:bg-gray-100 rounded">
|
||||||
|
<MoreVertical className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Tabs */}
|
||||||
|
<div className="flex gap-2 p-4 border-b border-gray-200">
|
||||||
|
<button className="px-4 py-1.5 bg-red-500 text-white rounded-full text-sm font-medium">
|
||||||
|
All
|
||||||
|
</button>
|
||||||
|
<button className="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200">
|
||||||
|
Incoming Call
|
||||||
|
</button>
|
||||||
|
<button className="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200">
|
||||||
|
Outgoing
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Call History List */}
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
<div className="p-4">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">Today</h3>
|
||||||
|
{callHistory.map((call) => (
|
||||||
|
<div
|
||||||
|
key={call.id}
|
||||||
|
className="flex items-center gap-3 py-3 border-b border-gray-100"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={call.avatar}
|
||||||
|
alt={call.name}
|
||||||
|
className="w-12 h-12 rounded-full"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className="font-medium text-gray-900">{call.name}</h4>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||||
|
<Phone className="w-3 h-3" />
|
||||||
|
<span>{call.status}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-500">{call.time}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Chat Area */}
|
||||||
|
{selectedChat && !showCallHistory && (
|
||||||
|
<div className={`border border-1 border-gray-200 rounded-[10px] flex-1 flex flex-col bg-white ${
|
||||||
|
showChatOnMobile ? 'flex' : 'hidden md:flex'
|
||||||
|
}`}>
|
||||||
|
{/* Chat Header */}
|
||||||
|
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={handleBackToList}
|
||||||
|
className="md:hidden p-2 hover:bg-gray-100 rounded"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-5 h-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
<img
|
||||||
|
src={contacts.find(c => c.id === selectedChat)?.avatar}
|
||||||
|
alt="Avatar"
|
||||||
|
className="w-10 h-10 rounded-full"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-gray-900">
|
||||||
|
Priya
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center gap-1 text-xs text-green-500">
|
||||||
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||||
|
<span>Online</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button className="p-2 hover:bg-gray-100 rounded">
|
||||||
|
<Phone className="w-5 h-5 text-blue-600" />
|
||||||
|
</button>
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowChatMenu(!showChatMenu)}
|
||||||
|
className="p-2 hover:bg-gray-100 rounded"
|
||||||
|
>
|
||||||
|
<MoreVertical className="w-5 h-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{showChatMenu && (
|
||||||
|
<div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
|
||||||
|
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
|
||||||
|
<Star className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Shortlisted</span>
|
||||||
|
</button>
|
||||||
|
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
|
||||||
|
<Share2 className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Share</span>
|
||||||
|
</button>
|
||||||
|
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
|
||||||
|
<Flag className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Report</span>
|
||||||
|
</button>
|
||||||
|
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
|
||||||
|
<Ban className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Block Profile</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
|
||||||
|
{chatMessages[selectedChat]?.map((msg) => (
|
||||||
|
<div key={msg.id}>
|
||||||
|
{msg.isDate ? (
|
||||||
|
<div className="text-center text-xs text-gray-500 my-4">
|
||||||
|
{msg.text}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={`flex ${
|
||||||
|
msg.sender === 'me' ? 'justify-end' : 'justify-start'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`max-w-xs md:max-w-md px-4 py-2 rounded-2xl ${
|
||||||
|
msg.sender === 'me'
|
||||||
|
? 'bg-[#cbf5ea] text-gray-900 rounded-br-sm'
|
||||||
|
: 'bg-white text-gray-900 rounded-bl-sm'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="text-sm">{msg.text}</p>
|
||||||
|
<div className='flex gap-1 items-center justify-end mt-1'>
|
||||||
|
{msg.time && (
|
||||||
|
<div className="flex items-center justify-end ">
|
||||||
|
<span className={`text-xs ${msg.sender === 'me' ? 'text-gray-900' : 'text-gray-500'}`}>
|
||||||
|
{msg.time}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
{msg.sender === 'me' && (
|
||||||
|
<div className="flex items-center justify-end">
|
||||||
|
<span className="text-xs text-blue-100">{msg.time}</span>
|
||||||
|
{msg.read ? (
|
||||||
|
<CheckCheck className="w-4 h-4 text-[#034E08]" />
|
||||||
|
) : (
|
||||||
|
<Check className="w-4 h-4 text-[#034E08]" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Input */}
|
||||||
|
<div className="p-4 border-t border-gray-200 bg-white">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={message}
|
||||||
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
|
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
|
||||||
|
placeholder="Start Typing..."
|
||||||
|
className="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:border-[#034E08]"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleSendMessage}
|
||||||
|
className="p-2.5 bg-[#034E08] text-white rounded-lg hover:bg-blue-600"
|
||||||
|
>
|
||||||
|
<Send className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Empty State */}
|
||||||
|
{!selectedChat && !showCallHistory && (
|
||||||
|
<div className="flex-1 hidden md:flex items-center justify-center bg-gray-50">
|
||||||
|
<p className="text-gray-500">Select a conversation to start messaging</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChatUI;
|
||||||
111
src/pages/ContactUsPage.jsx
Normal file
111
src/pages/ContactUsPage.jsx
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import contactimg from "../assets/images/contactimg.jpg";
|
||||||
|
import LazyImage from '../components/common/LazyImage';
|
||||||
|
|
||||||
|
import InstagramIcon from '@mui/icons-material/Instagram';
|
||||||
|
import FacebookIcon from '@mui/icons-material/Facebook';
|
||||||
|
import TwitterIcon from '@mui/icons-material/Twitter';
|
||||||
|
import CloseIcon from '@mui/icons-material/Close'; // using as X icon
|
||||||
|
import SvgIcon from "@mui/material/SvgIcon";
|
||||||
|
|
||||||
|
function XIcon(props) {
|
||||||
|
return (
|
||||||
|
<SvgIcon {...props} viewBox="0 0 24 24">
|
||||||
|
<path d="M18.3 2H21L13.4 10.5L22 22H15.6L10.7 15.7L5 22H2L9.9 13L2 2H8.5L13.9 8.8L18.3 2Z" />
|
||||||
|
</SvgIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ContactUsPage = () => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const socialLinks = [
|
||||||
|
{ name: "Instagram", icon: <InstagramIcon fontSize="large" />, color: "from-purple-500 to-[#d93f87]", url: "#" },
|
||||||
|
{ name: "Facebook", icon: <FacebookIcon fontSize="large" />, color: "from-blue-900 to-blue-800", url: "#" },
|
||||||
|
{ name: "Twitter", icon: <TwitterIcon fontSize="large" />, color: "from-blue-400 to-blue-500", url: "#" },
|
||||||
|
{ name: "X", icon: <XIcon fontSize="large" />, color: "from-gray-800 to-black", url: "#" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen my-8">
|
||||||
|
<div className='grid grid-cols-1 md:grid-cols-2 gap-2 items-center' style={{justifyItems:"center"}}>
|
||||||
|
|
||||||
|
<LazyImage src={contactimg} className=""/>
|
||||||
|
|
||||||
|
<div className="max-w-md mx-auto px-4 py-8">
|
||||||
|
|
||||||
|
{/* Get in touch section */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2 className="text-2xl font-bold text-[#034E08] mb-3">Get in touch</h2>
|
||||||
|
<p className="text-gray-600 text-sm leading-relaxed">
|
||||||
|
If you have inquiries get in touch with us we'll happy to help you
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Information Cards */}
|
||||||
|
<div className="space-y-4 mb-8">
|
||||||
|
{/* Phone Card */}
|
||||||
|
<a href="tel:9345656442" className="block bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow p-5 border border-gray-100">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-12 h-12 bg-[#A70710] rounded-xl flex items-center justify-center mr-4 shadow-lg">
|
||||||
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-[14px] text-gray-500 mb-1">Call us</p>
|
||||||
|
<p className="text-base font-semibold text-gray-800">93456 56442</p>
|
||||||
|
</div>
|
||||||
|
<svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* Email Card */}
|
||||||
|
<a href="mailto:ddsmile.03@gmailcom" className="block bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow p-5 border border-gray-100">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-12 h-12 bg-[#A70710] rounded-xl flex items-center justify-center mr-4 shadow-lg">
|
||||||
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-[14px] text-gray-500 mb-1">Email us</p>
|
||||||
|
<p className="text-base font-semibold text-gray-800">ddsmile.03@gmailcom</p>
|
||||||
|
</div>
|
||||||
|
<svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Social Media Section */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h3 className="text-lg font-bold text-gray-800 mb-4 text-center">Social Media</h3>
|
||||||
|
<div className="flex justify-center gap-4">
|
||||||
|
{socialLinks.map((social, idx) => (
|
||||||
|
<a
|
||||||
|
key={idx}
|
||||||
|
href={social.url}
|
||||||
|
className={`w-14 h-14 bg-gradient-to-br ${social.color} rounded-2xl flex items-center justify-center text-white text-2xl shadow-lg hover:scale-110 transition-transform`}
|
||||||
|
>
|
||||||
|
{social.icon}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContactUsPage;
|
||||||
234
src/pages/HoroscoperGeneratePage.jsx
Normal file
234
src/pages/HoroscoperGeneratePage.jsx
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const HoroscopeGenerator = () => {
|
||||||
|
const [dob, setDob] = useState('');
|
||||||
|
const [showHoroscope, setShowHoroscope] = useState(false);
|
||||||
|
|
||||||
|
const rasiPositions = [
|
||||||
|
{ id: 1, label: 'Rasi', position: 'top-left' },
|
||||||
|
{ id: 2, label: 'Rasi', position: 'top-center-left' },
|
||||||
|
{ id: 3, label: 'Rasi', position: 'top-center-right' },
|
||||||
|
{ id: 4, label: 'Rasi', position: 'top-right' },
|
||||||
|
{ id: 5, label: 'Rasi', position: 'middle-left' },
|
||||||
|
{ id: 6, label: 'Rasi', position: 'middle-right' },
|
||||||
|
{ id: 7, label: 'Rasi', position: 'bottom-left' },
|
||||||
|
{ id: 8, label: 'Rasi', position: 'bottom-center-left' },
|
||||||
|
{ id: 9, label: 'Rasi', position: 'bottom-center-right' },
|
||||||
|
{ id: 10, label: 'Rasi', position: 'bottom-right' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const navamsaPositions = [
|
||||||
|
{ id: 1, label: 'Navamsam', position: 'top-left' },
|
||||||
|
{ id: 2, label: 'Navamsam', position: 'top-center-left' },
|
||||||
|
{ id: 3, label: 'Navamsam', position: 'top-center-right' },
|
||||||
|
{ id: 4, label: 'Navamsam', position: 'top-right' },
|
||||||
|
{ id: 5, label: 'Navamsam', position: 'middle-left' },
|
||||||
|
{ id: 6, label: 'Navamsam', position: 'middle-right' },
|
||||||
|
{ id: 7, label: 'Navamsam', position: 'bottom-left' },
|
||||||
|
{ id: 8, label: 'Navamsam', position: 'bottom-center-left' },
|
||||||
|
{ id: 9, label: 'Navamsam', position: 'bottom-center-right' },
|
||||||
|
{ id: 10, label: 'Navamsam', position: 'bottom-right' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const zodiacSigns = [
|
||||||
|
{ name: 'Aries', emoji: '♈' },
|
||||||
|
{ name: 'Taurus', emoji: '♉' },
|
||||||
|
{ name: 'Gemini', emoji: '♊' },
|
||||||
|
{ name: 'Cancer', emoji: '♋' },
|
||||||
|
{ name: 'Leo', emoji: '♌' },
|
||||||
|
{ name: 'Virgo', emoji: '♍' },
|
||||||
|
{ name: 'Libra', emoji: '♎' },
|
||||||
|
{ name: 'Scorpio', emoji: '♏' },
|
||||||
|
{ name: 'Sagittarius', emoji: '♐' },
|
||||||
|
{ name: 'Capricorn', emoji: '♑' },
|
||||||
|
{ name: 'Aquarius', emoji: '♒' },
|
||||||
|
{ name: 'Pisces', emoji: '♓' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const getZodiacSign = (date) => {
|
||||||
|
const month = date.getMonth() + 1;
|
||||||
|
const day = date.getDate();
|
||||||
|
|
||||||
|
if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return 0;
|
||||||
|
if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return 1;
|
||||||
|
if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) return 2;
|
||||||
|
if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) return 3;
|
||||||
|
if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return 4;
|
||||||
|
if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return 5;
|
||||||
|
if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) return 6;
|
||||||
|
if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) return 7;
|
||||||
|
if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) return 8;
|
||||||
|
if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) return 9;
|
||||||
|
if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return 10;
|
||||||
|
return 11;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGenerate = () => {
|
||||||
|
if (dob) {
|
||||||
|
setShowHoroscope(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const userZodiacIndex = dob ? getZodiacSign(new Date(dob)) : -1;
|
||||||
|
|
||||||
|
const ChartBox = ({ label, onClick }) => (
|
||||||
|
<div
|
||||||
|
onClick={onClick}
|
||||||
|
className="bg-white border border-gray-300 rounded-lg p-2 flex flex-col items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors min-h-[60px]"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 text-gray-600 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="10" strokeWidth="2"/>
|
||||||
|
<line x1="12" y1="8" x2="12" y2="16" strokeWidth="2"/>
|
||||||
|
<line x1="8" y1="12" x2="16" y2="12" strokeWidth="2"/>
|
||||||
|
</svg>
|
||||||
|
<span className="text-[10px] font-medium text-gray-700 text-center">{label}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
Astrology / Horoscope
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date Input Section */}
|
||||||
|
<div className="py-6 border-b">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Birth Date
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
{/* Add Rasi Section */}
|
||||||
|
<div className="py-6">
|
||||||
|
<h2 className="text-base font-semibold text-gray-800 mb-4">
|
||||||
|
Add Rasi
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Rasi Chart Grid */}
|
||||||
|
<div className="grid grid-cols-4 gap-2">
|
||||||
|
{/* Top Row - 4 boxes */}
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
|
||||||
|
{/* Middle Row - Left box, Center image, Right box */}
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
<div className="col-span-2 row-span-2 flex items-center justify-center">
|
||||||
|
<div className="w-full aspect-square rounded-full overflow-hidden border-4 border-gray-200 shadow-lg">
|
||||||
|
<img
|
||||||
|
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='grad1'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(240,240,240);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23grad1)'/%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M 0,-80 L 20,-20 L 80,-20 L 30,20 L 50,80 L 0,40 L -50,80 L -30,20 L -80,-20 L -20,-20 Z' fill='%23FFD700' stroke='%23FFA500' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='15' fill='%23FF6B6B'/%3E%3Ctext x='0' y='5' font-size='20' text-anchor='middle' fill='white' font-family='Arial'%3E♈%3C/text%3E%3C/g%3E%3C/svg%3E"
|
||||||
|
alt="Horoscope Chart"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
|
||||||
|
{/* Middle Row 2 - Left box continues, Right box continues */}
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
|
||||||
|
{/* Bottom Row - 4 boxes */}
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
<ChartBox label="Rasi" onClick={() => {}} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
{/* Add Navamsam Section */}
|
||||||
|
<div className="py-6">
|
||||||
|
<h2 className="text-base font-semibold text-gray-800 mb-4">
|
||||||
|
Add Navamsam
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Navamsam Chart Grid */}
|
||||||
|
<div className="grid grid-cols-4 gap-2">
|
||||||
|
{/* Top Row - 4 boxes */}
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
|
||||||
|
{/* Middle Row - Left box, Center image, Right box */}
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
<div className="col-span-2 row-span-2 flex items-center justify-center">
|
||||||
|
<div className="w-full aspect-square rounded-full overflow-hidden border-4 border-gray-200 shadow-lg">
|
||||||
|
<img
|
||||||
|
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='grad2'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(240,240,240);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23grad2)'/%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M 0,-80 L 20,-20 L 80,-20 L 30,20 L 50,80 L 0,40 L -50,80 L -30,20 L -80,-20 L -20,-20 Z' fill='%23FFD700' stroke='%23FFA500' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='15' fill='%2366BB6A'/%3E%3Ctext x='0' y='5' font-size='20' text-anchor='middle' fill='white' font-family='Arial'%3E♉%3C/text%3E%3C/g%3E%3C/svg%3E"
|
||||||
|
alt="Navamsam Chart"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
|
||||||
|
{/* Middle Row 2 */}
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
|
||||||
|
{/* Bottom Row - 4 boxes */}
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{/* Working Hours Button */}
|
||||||
|
<div className="pb-6">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
Working Hours
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Result Display */}
|
||||||
|
{showHoroscope && userZodiacIndex >= 0 && (
|
||||||
|
<div className="mb-6 p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-4xl mb-2">{zodiacSigns[userZodiacIndex].emoji}</div>
|
||||||
|
<div className="text-lg font-bold text-gray-800">
|
||||||
|
Your Zodiac Sign: {zodiacSigns[userZodiacIndex].name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HoroscopeGenerator;
|
||||||
@ -10,22 +10,20 @@ export default function PoliciesPage() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 relative z-20">
|
<div className="min-h-screen relative z-20">
|
||||||
{/* Green Luxury Header */}
|
{/* Green Luxury Header */}
|
||||||
<motion.header
|
<motion.header
|
||||||
initial={{ y: -100 }}
|
initial={{ y: -100 }}
|
||||||
animate={{ y: 0 }}
|
animate={{ y: 0 }}
|
||||||
className="bg-gradient-to-r from-green-600 to-emerald-700 text-white shadow-2xl relative overflow-hidden"
|
className="my-8 rounded-[10px] relative bg-gradient-to-r from-[#034E08] via-[#034E08] to-[#034E08] text-white shadow-2xl relative overflow-hidden"
|
||||||
>
|
>
|
||||||
<div className="absolute inset-0 bg-black/10" />
|
<div className="absolute inset-0 bg-black/10" />
|
||||||
<div className="relative flex items-center justify-between px-6 py-8 safe-area-top">
|
<div className="relative flex items-center justify-between px-6 py-8 safe-area-top">
|
||||||
<button onClick={() => navigate(-1)} className="p-3 bg-white/25 backdrop-blur rounded-full hover:bg-white/40 transition group">
|
|
||||||
<ArrowBackIosNew className="group-hover:scale-110 transition" />
|
|
||||||
</button>
|
|
||||||
<div className="text-center flex-1">
|
<div className="text-center flex-1">
|
||||||
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3 }}
|
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3 }}
|
||||||
className="inline-block p-4 bg-white/20 rounded-2xl mb-3">
|
className="inline-block p-4 bg-white/20 rounded-2xl mb-3">
|
||||||
<Shield className="text-4xl text-green-200" />
|
<Shield className="text-4xl text-[#A70710]" />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<h1 className="text-3xl font-bold tracking-wider">Policies</h1>
|
<h1 className="text-3xl font-bold tracking-wider">Policies</h1>
|
||||||
<p className="text-green-100 text-sm mt-1">Your Safety Is Our First Priority</p>
|
<p className="text-green-100 text-sm mt-1">Your Safety Is Our First Priority</p>
|
||||||
@ -34,7 +32,7 @@ export default function PoliciesPage() {
|
|||||||
</div>
|
</div>
|
||||||
</motion.header>
|
</motion.header>
|
||||||
|
|
||||||
<main className="px-5 py-10 max-w-4xl mx-auto space-y-8">
|
<main className="md:px-4 py-10 max-w-[1400px] mx-auto space-y-8">
|
||||||
<motion.div whileHover={{ scale: 1.02 }} className="bg-white/90 backdrop-blur rounded-3xl p-8 shadow-xl border border-green-100">
|
<motion.div whileHover={{ scale: 1.02 }} className="bg-white/90 backdrop-blur rounded-3xl p-8 shadow-xl border border-green-100">
|
||||||
<div className="flex items-start gap-5">
|
<div className="flex items-start gap-5">
|
||||||
<div className="p-4 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl shadow-lg">
|
<div className="p-4 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl shadow-lg">
|
||||||
@ -52,13 +50,13 @@ export default function PoliciesPage() {
|
|||||||
<p className="text-gray-800 text-lg leading-8 font-light tracking-wide">{text}</p>
|
<p className="text-gray-800 text-lg leading-8 font-light tracking-wide">{text}</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<motion.div initial={{ scale: 0.9 }} animate={{ scale: 1 }} className="bg-gradient-to-r from-green-600 to-emerald-700 text-white rounded-3xl p-10 text-center shadow-2xl">
|
<motion.div initial={{ scale: 0.9 }} animate={{ scale: 1 }} className="bg-[#f5fbff] text-black rounded-3xl p-10 text-center shadow-2xl">
|
||||||
<h2 className="text-2xl font-bold mb-3">Protected With Love & Care</h2>
|
<h2 className="text-2xl font-bold mb-3">Protected With Love & Care</h2>
|
||||||
<p className="text-green-100 text-lg">Every profile, every chat, every dream — safeguarded 24×7.</p>
|
<p className="text-black text-lg">Every profile, every chat, every dream — safeguarded 24×7.</p>
|
||||||
<div className="flex justify-center gap-3 mt-6">
|
<div className="flex justify-center gap-3 mt-6">
|
||||||
<VerifiedUser className="text-4xl animate-ping text-green-200" />
|
<VerifiedUser className="text-4xl animate-ping text-[#A70710]" />
|
||||||
<Shield className="text-5xl text-white" />
|
<Shield className="text-5xl text-[#A70710]" />
|
||||||
<VerifiedUser className="text-4xl animate-ping text-green-200" />
|
<VerifiedUser className="text-4xl animate-ping text-[#A70710]" />
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<div className="h-32" />
|
<div className="h-32" />
|
||||||
|
|||||||
@ -3,7 +3,8 @@ import React from 'react';
|
|||||||
import { ArrowBackIosNew, Security, Report, Lock, Psychology } from '@mui/icons-material';
|
import { ArrowBackIosNew, Security, Report, Lock, Psychology } from '@mui/icons-material';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
|
import LazyImage from '../components/common/LazyImage';
|
||||||
|
import safegirl from "../assets/images/safegirl.jpg";
|
||||||
const dummyImage = "https://images.unsplash.com/photo-1594736797933-d0501ba2fe65?w=800&q=80&fit=crop";
|
const dummyImage = "https://images.unsplash.com/photo-1594736797933-d0501ba2fe65?w=800&q=80&fit=crop";
|
||||||
|
|
||||||
export default function SafetyCentre() {
|
export default function SafetyCentre() {
|
||||||
@ -37,59 +38,49 @@ export default function SafetyCentre() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-b from-rose-50 via-white to-green-50 relative z-20">
|
<div className="min-h-screen relative z-20">
|
||||||
{/* Premium Header */}
|
{/* Premium Header */}
|
||||||
<motion.header
|
<motion.header
|
||||||
initial={{ y: -100 }}
|
initial={{ y: -100 }}
|
||||||
animate={{ y: 0 }}
|
animate={{ y: 0 }}
|
||||||
className="bg-gradient-to-r from-red-600 to-rose-700 text-white shadow-xl"
|
className="bg-[#034E08] rounded-[10px] text-white shadow-xl"
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between px-5 py-8 safe-area-top">
|
<div className="flex items-center justify-center px-5 py-8 safe-area-top">
|
||||||
<button onClick={() => navigate(-1)} className="p-3 bg-white/25 backdrop-blur rounded-full hover:bg-white/40 transition group">
|
|
||||||
<ArrowBackIosNew className="group-hover:scale-110 transition" />
|
|
||||||
</button>
|
|
||||||
<h1 className="text-2xl font-bold">Be Safe Online</h1>
|
<h1 className="text-2xl font-bold">Be Safe Online</h1>
|
||||||
<div className="w-12" />
|
<div className="w-12" />
|
||||||
</div>
|
</div>
|
||||||
</motion.header>
|
</motion.header>
|
||||||
|
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section className="px-6 pt-8 pb-10">
|
|
||||||
|
<div className='grid grid-cols-1 md:grid-cols-2 gap-2 my-4'>
|
||||||
|
|
||||||
|
<section className="md:px-6 pt-8 pb-10">
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Safety Centre</h2>
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">Safety Centre</h2>
|
||||||
<p className="text-xl text-gray-600 leading-relaxed max-w-2xl">
|
<p className="text-xl text-gray-600 text-justify leading-relaxed max-w-[900px]">
|
||||||
Your safety matters deeply at <span className="font-bold text-red-600">Thirukalyanam</span>.
|
Your safety matters deeply at <span className="font-bold text-red-600">Thirukalyanam</span>.
|
||||||
Our team works with advanced tools to ensure your matchmaking journey remains secure and safe.
|
Our team works with advanced tools to ensure your matchmaking journey remains secure and safe.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
<LazyImage src={safegirl} className="rounded-tl-[50px] rounded-tr-[0px] rounded-bl-[50px] rounded-br-[50px]"/>
|
||||||
|
|
||||||
{/* Beautiful Hero Image */}
|
</div>
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ delay: 0.3 }}
|
|
||||||
className="relative mx-6 rounded-3xl overflow-hidden shadow-2xl"
|
|
||||||
>
|
|
||||||
<img src={dummyImage} alt="Safe Matrimony" className="w-full h-80 object-cover" />
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
|
|
||||||
<div className="absolute bottom-6 left-6 text-white">
|
|
||||||
<div className="bg-white/20 backdrop-blur-md rounded-2xl px-5 py-3 inline-flex items-center gap-3">
|
|
||||||
<span className="text-2xl font-bold">Is Online Matrimony</span>
|
|
||||||
<span className="text-3xl font-bold text-red-400">Safe?</span>
|
|
||||||
<span className="text-5xl">Yes</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Safety Tips Grid */}
|
{/* Safety Tips Grid */}
|
||||||
<section className="px-6 py-12 max-w-5xl mx-auto space-y-10">
|
<section className="px-6 py-12 max-w-[1400px] mx-auto space-y-4">
|
||||||
{safetyTips.map((tip, index) => (
|
{safetyTips.map((tip, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={index}
|
key={index}
|
||||||
initial={{ opacity: 0, x: -50 }}
|
initial={{ opacity: 0, x: -50 }}
|
||||||
animate={{ opacity: 1, x: 0 }}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
transition={{ delay: index * 0.15 }}
|
transition={{ delay: index * 0.15 }}
|
||||||
whileHover={{ scale: 1.02 }}
|
|
||||||
className="bg-white rounded-3xl p-8 shadow-xl border border-gray-100 flex items-start gap-6"
|
className="bg-white rounded-3xl p-8 border border-gray-100 flex items-start gap-6"
|
||||||
>
|
>
|
||||||
<div className={`p-4 rounded-2xl bg-gradient-to-br ${
|
<div className={`p-4 rounded-2xl bg-gradient-to-br ${
|
||||||
tip.color === "red" ? "from-red-500 to-rose-600" :
|
tip.color === "red" ? "from-red-500 to-rose-600" :
|
||||||
@ -119,16 +110,16 @@ export default function SafetyCentre() {
|
|||||||
initial={{ y: 50, opacity: 0 }}
|
initial={{ y: 50, opacity: 0 }}
|
||||||
animate={{ y: 0, opacity: 1 }}
|
animate={{ y: 0, opacity: 1 }}
|
||||||
transition={{ delay: 0.8 }}
|
transition={{ delay: 0.8 }}
|
||||||
className="bg-gradient-to-r from-green-600 to-emerald-700 text-white py-16 text-center"
|
className="bg-[#f5fbff] text-black py-8 text-center"
|
||||||
>
|
>
|
||||||
<h2 className="text-3xl font-bold mb-4">You're Never Alone</h2>
|
<h2 className="text-3xl font-bold mb-4">You're Never Alone</h2>
|
||||||
<p className="text-xl text-green-100 max-w-3xl mx-auto px-6">
|
<p className="text-xl text-black max-w-3xl mx-auto px-6">
|
||||||
Our 24×7 Safety Team is always watching. One tap to report — and we take immediate action.
|
Our 24×7 Safety Team is always watching. One tap to report — and we take immediate action.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex justify-center gap-4 mt-8">
|
<div className="flex justify-center gap-4 mt-8">
|
||||||
<Security className="text-5xl animate-pulse text-green-200" />
|
<Security className="text-5xl animate-pulse text-[#A70710]" />
|
||||||
<Psychology className="text-6xl text-white" />
|
<Psychology className="text-6xl text-[#A70710]" />
|
||||||
<Security className="text-5xl animate-pulse text-green-200" />
|
<Security className="text-5xl animate-pulse text-[#A70710]" />
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
|
|||||||
@ -31,6 +31,19 @@ const subscriptions = [
|
|||||||
paymentMethod: "UPI Mode",
|
paymentMethod: "UPI Mode",
|
||||||
amount: 1800,
|
amount: 1800,
|
||||||
isActive: false
|
isActive: false
|
||||||
|
},
|
||||||
|
|
||||||
|
{ id: "SUB722HSN",
|
||||||
|
plan: "Gold Plan",
|
||||||
|
profileCount: 150,
|
||||||
|
usedCount: 70,
|
||||||
|
billingCycle: "Monthly",
|
||||||
|
expireDate: "19/11/2025",
|
||||||
|
startDate: "19/10/2025",
|
||||||
|
startTime: "10:00 AM",
|
||||||
|
paymentMethod: "UPI Mode",
|
||||||
|
amount: 1800,
|
||||||
|
isActive: false
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -38,20 +51,15 @@ export default function SubscriptionHistory() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-amber-50">
|
<div className="min-h-screen ">
|
||||||
{/* Royal Header */}
|
{/* Royal Header */}
|
||||||
<motion.header
|
<motion.header
|
||||||
initial={{ y: -100 }}
|
initial={{ y: -100 }}
|
||||||
animate={{ y: 0 }}
|
animate={{ y: 0 }}
|
||||||
className="bg-gradient-to-r from-red-600 to-rose-700 text-white shadow-2xl"
|
className="bg-[#034E08] text-white shadow-2xl rounded-[10px]"
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between px-5 py-8 safe-area-top relative">
|
<div className="flex items-center justify-between px-5 py-8 safe-area-top relative">
|
||||||
<button
|
|
||||||
onClick={() => navigate(-1)}
|
|
||||||
className="p-3 bg-white/25 backdrop-blur rounded-full hover:bg-white/40 transition group"
|
|
||||||
>
|
|
||||||
<ArrowBackIosNew className="group-hover:scale-110 transition" />
|
|
||||||
</button>
|
|
||||||
<h1 className="text-2xl font-bold">Subscription History</h1>
|
<h1 className="text-2xl font-bold">Subscription History</h1>
|
||||||
<div className="w-12" />
|
<div className="w-12" />
|
||||||
</div>
|
</div>
|
||||||
@ -69,82 +77,83 @@ export default function SubscriptionHistory() {
|
|||||||
</motion.h2>
|
</motion.h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className=''>
|
||||||
{/* Subscription Cards */}
|
{/* Subscription Cards */}
|
||||||
<div className="px-6 py-8 space-y-8 max-w-4xl mx-auto pb-32">
|
<div className="px-2 py-8 pb-32 grid grid-cols-1 md:grid-cols-3 gap-2">
|
||||||
{subscriptions.map((sub, index) => (
|
{subscriptions.map((sub, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={index}
|
key={index}
|
||||||
initial={{ opacity: 0, y: 50 }}
|
initial={{ opacity: 0, y: 50 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: index * 0.2 }}
|
transition={{ delay: index * 0.2 }}
|
||||||
className={`relative rounded-3xl overflow-hidden shadow-2xl border-4 ${
|
className={`relative rounded-3xl overflow-hidden border border-1 border-gray-200 w-full max-w-md ${
|
||||||
sub.isActive
|
sub.isActive
|
||||||
? 'border-amber-400 bg-gradient-to-br from-amber-50 to-pink-50'
|
? 'border-amber-400 bg-gradient-to-br from-amber-50 to-pink-50'
|
||||||
: 'border-pink-200 bg-gradient-to-br from-pink-50 to-rose-50 opacity-90'
|
: 'border-pink-200 bg-gradient-to-br from-pink-50 to-rose-50 opacity-90'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{/* Crown Badge */}
|
{/* Crown Badge */}
|
||||||
<div className={`absolute -top-5 left-1/2 -translate-x-1/2 px-8 py-3 rounded-b-3xl font-bold text-white shadow-xl flex items-center gap-2 ${
|
<div className={` text-[12px] absolute z-[999] -top-1 left-1/2 -translate-x-1/2 px-8 py-2 rounded-b-3xl font-bold text-white shadow-xl flex items-center gap-2 ${
|
||||||
sub.isActive ? 'bg-gradient-to-r from-amber-500 to-orange-600' : 'bg-gradient-to-r from-pink-500 to-rose-600'
|
sub.isActive ? 'bg-gradient-to-r from-amber-500 to-orange-600' : 'bg-gradient-to-r from-pink-500 to-rose-600'
|
||||||
}`}>
|
}`}>
|
||||||
<CrownIcon className="text-2xl" />
|
<CrownIcon className="text-[12px]" />
|
||||||
{sub.plan}
|
{sub.plan}
|
||||||
{sub.isActive && <span className="ml-2 text-xs bg-green-400 text-black px-3 py-1 rounded-full">ACTIVE</span>}
|
{sub.isActive && <span className="ml-2 text-[12px] bg-green-400 text-black px-3 py-1 rounded-full">ACTIVE</span>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pt-10 pb-8 px-8">
|
<div className="pt-14 pb-8 px-8">
|
||||||
{/* Subscription ID */}
|
{/* Subscription ID */}
|
||||||
<div className="text-center mb-6">
|
<div className="text-center mb-6">
|
||||||
<p className="text-sm text-gray-600">Subscription ID</p>
|
<p className="text-sm text-gray-600">Subscription ID</p>
|
||||||
<p className="text-2xl font-bold text-gray-900">{sub.id}</p>
|
<p className="text-[18px] font-bold text-gray-900">{sub.id}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats Row */}
|
{/* Stats Row */}
|
||||||
<div className="grid grid-cols-2 gap-6 mb-8">
|
<div className="grid grid-cols-2 gap-6 mb-4">
|
||||||
<div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center shadow-lg">
|
<div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center ">
|
||||||
<Person className="text-4xl text-amber-600 mx-auto mb-2" />
|
<Person className="text-4xl text-amber-600 mx-auto mb-2" />
|
||||||
<p className="text-3xl font-bold text-gray-900">{sub.profileCount}</p>
|
<p className="text-[18px] font-bold text-gray-900">{sub.profileCount}</p>
|
||||||
<p className="text-sm text-gray-600">Profile Count</p>
|
<p className="text-sm text-gray-600">Profile Count</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center shadow-lg">
|
<div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center ">
|
||||||
<Visibility className="text-4xl text-green-600 mx-auto mb-2" />
|
<Visibility className="text-4xl text-green-600 mx-auto mb-2" />
|
||||||
<p className="text-3xl font-bold text-gray-900">{sub.usedCount}</p>
|
<p className="text-[18px] font-bold text-gray-900">{sub.usedCount}</p>
|
||||||
<p className="text-sm text-gray-600">Used Count</p>
|
<p className="text-sm text-gray-600">Used Count</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Details Grid */}
|
{/* Details Grid */}
|
||||||
<div className="space-y-4 text-lg">
|
<div className="space-y-2 text-lg">
|
||||||
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-4">
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
|
||||||
<span className="flex items-center gap-3 text-gray-700">
|
<span className="flex items-center gap-3 text-gray-700 text-[14px]">
|
||||||
<CalendarToday className="text-amber-600" /> Billing Cycle
|
<CalendarToday className="text-amber-600" /> Billing Cycle
|
||||||
</span>
|
</span>
|
||||||
<span className="font-bold text-gray-900">{sub.billingCycle}</span>
|
<span className="font-bold text-gray-900 text-[14px]">{sub.billingCycle}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-4">
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
|
||||||
<span className="flex items-center gap-3 text-gray-700">
|
<span className="flex items-center gap-3 text-gray-700 text-[14px]">
|
||||||
<CalendarToday className="text-red-600" /> Expire Date
|
<CalendarToday className="text-red-600" /> Expire Date
|
||||||
</span>
|
</span>
|
||||||
<span className="font-bold text-red-600">{sub.expireDate}</span>
|
<span className="font-bold text-red-600 text-[14px]">{sub.expireDate}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-4">
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
|
||||||
<span className="flex items-center gap-3 text-gray-700">
|
<span className="flex items-center gap-3 text-gray-700 text-[14px]">
|
||||||
<AccessTime className="text-green-600" /> Start Date & Time
|
<AccessTime className="text-green-600" /> Start Date & Time
|
||||||
</span>
|
</span>
|
||||||
<span className="font-bold text-gray-900">{sub.startDate} | {sub.startTime}</span>
|
<span className="font-bold text-gray-900 text-[14px]">{sub.startDate} | {sub.startTime}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-4">
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
|
||||||
<span className="flex items-center gap-3 text-gray-700">
|
<span className="flex items-center gap-3 text-gray-700 text-[14px]">
|
||||||
<CreditCard className="text-purple-600" /> Payment Method
|
<CreditCard className="text-purple-600" /> Payment Method
|
||||||
</span>
|
</span>
|
||||||
<span className="font-bold text-purple-700">{sub.paymentMethod}</span>
|
<span className="font-bold text-purple-700 text-[14px]">{sub.paymentMethod}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Total Amount */}
|
{/* Total Amount */}
|
||||||
<div className="mt-8 text-center">
|
<div className="mt-8 text-center flex gap-4 items-center justify-center flex-wrap">
|
||||||
<p className="text-lg text-gray-600">Total Plan Amount</p>
|
<p className="text-lg text-gray-600">Total Plan Amount</p>
|
||||||
<p className="text-5xl font-bold text-gray-900 mt-2">
|
<p className="text-[18px] font-bold text-gray-900 bg-white/70 backdrop-blur px-4 py-2 rounded-[10px]">
|
||||||
₹{sub.amount.toLocaleString()}
|
₹{sub.amount.toLocaleString()}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -152,9 +161,9 @@ export default function SubscriptionHistory() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* Final Message */}
|
{/* Final Message */}
|
||||||
<motion.div
|
{/* <motion.div
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
transition={{ delay: 0.6 }}
|
transition={{ delay: 0.6 }}
|
||||||
@ -162,7 +171,7 @@ export default function SubscriptionHistory() {
|
|||||||
>
|
>
|
||||||
<p className="text-xl font-bold">Your journey to forever is fully powered</p>
|
<p className="text-xl font-bold">Your journey to forever is fully powered</p>
|
||||||
<p className="text-green-200 mt-2">Enjoy unlimited matches with your Gold Plan</p>
|
<p className="text-green-200 mt-2">Enjoy unlimited matches with your Gold Plan</p>
|
||||||
</motion.div>
|
</motion.div> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -61,19 +61,17 @@ export default function SubscriptionPlan() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-red-900 to-rose-900 text-white overflow-hidden relative z-20">
|
<div className="min-h-screen mt-4 text-black overflow-hidden relative z-20">
|
||||||
{/* Luxury Header */}
|
{/* Luxury Header */}
|
||||||
<motion.header
|
<motion.header
|
||||||
initial={{ y: -100 }}
|
initial={{ y: -100 }}
|
||||||
animate={{ y: 0 }}
|
animate={{ y: 0 }}
|
||||||
className="relative bg-black/30 backdrop-blur-xl"
|
className="relative "
|
||||||
>
|
>
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/50 to-rose-600/50" />
|
<div className="absolute inset-0 bg-[#034E08] rounded-[15px]" />
|
||||||
<div className="relative flex items-center justify-between px-5 py-8 safe-area-top">
|
<div className="relative flex items-center justify-between px-5 py-8 safe-area-top">
|
||||||
<button onClick={() => navigate(-1)} className="p-3 bg-white/20 rounded-full hover:bg-white/30 transition group">
|
|
||||||
<ArrowBackIosNew className="group-hover:scale-110 transition" />
|
<h1 className="text-2xl font-bold text-center text-white">Subscription Plan</h1>
|
||||||
</button>
|
|
||||||
<h1 className="text-2xl font-bold">Subscription Plan</h1>
|
|
||||||
<div className="w-12" />
|
<div className="w-12" />
|
||||||
</div>
|
</div>
|
||||||
</motion.header>
|
</motion.header>
|
||||||
@ -82,7 +80,8 @@ export default function SubscriptionPlan() {
|
|||||||
<div className="flex justify-center -mt-6 relative z-10">
|
<div className="flex justify-center -mt-6 relative z-10">
|
||||||
<motion.div
|
<motion.div
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
className="bg-white/20 backdrop-blur-xl rounded-full p-2 flex gap-2 shadow-2xl"
|
className="bg-[#A70710] backdrop-blur-xl rounded-full p-2 flex gap-2 shadow-2xl"
|
||||||
|
// style={{background:"linear-gradient(98.05deg, #FAFBFF 0%, #FCC4FF 100%)"}}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsAnnual(true)}
|
onClick={() => setIsAnnual(true)}
|
||||||
@ -109,9 +108,11 @@ export default function SubscriptionPlan() {
|
|||||||
initial={{ opacity: 0, y: 50 }}
|
initial={{ opacity: 0, y: 50 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: index * 0.2 }}
|
transition={{ delay: index * 0.2 }}
|
||||||
className={`relative bg-white/10 backdrop-blur-xl rounded-3xl overflow-hidden border ${
|
className={`relative backdrop-blur-xl rounded-3xl overflow-hidden border ${
|
||||||
plan.popular ? 'border-yellow-400 shadow-2xl shadow-yellow-500/30 scale-105' : 'border-white/30'
|
plan.popular ? 'border-yellow-400 shadow-2xl shadow-yellow-500/30 scale-105' : 'border-white/30'
|
||||||
}`}
|
}`}
|
||||||
|
|
||||||
|
style={{background:"linear-gradient(98.05deg, #FAFBFF 0%, #FCC4FF 100%)"}}
|
||||||
>
|
>
|
||||||
{plan.popular && (
|
{plan.popular && (
|
||||||
<div className="absolute -top-1 left-1/2 -translate-x-1/2 bg-gradient-to-r from-yellow-400 to-amber-500 text-purple-900 px-8 py-2 rounded-b-2xl font-bold text-sm flex items-center gap-2">
|
<div className="absolute -top-1 left-1/2 -translate-x-1/2 bg-gradient-to-r from-yellow-400 to-amber-500 text-purple-900 px-8 py-2 rounded-b-2xl font-bold text-sm flex items-center gap-2">
|
||||||
@ -119,14 +120,14 @@ export default function SubscriptionPlan() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="p-8 text-center">
|
<div className="mt-6 p-8 text-center">
|
||||||
<h3 className="text-3xl font-bold mb-4">{plan.name}</h3>
|
<h3 className="text-3xl font-bold mb-4">{plan.name}</h3>
|
||||||
<div className="text-5xl font-bold mb-2">
|
<div className="text-[25px] font-bold mb-2">
|
||||||
₹{isAnnual ? plan.annualPrice.toLocaleString() : plan.monthlyPrice.toLocaleString()}
|
₹{isAnnual ? plan.annualPrice.toLocaleString() : plan.monthlyPrice.toLocaleString()}
|
||||||
<span className="text-lg font-normal text-white/70"> /{isAnnual ? 'month' : 'month'}</span>
|
<span className="text-[18px] font-normal text-black"> /{isAnnual ? 'month' : 'month'}</span>
|
||||||
</div>
|
</div>
|
||||||
{isAnnual && (
|
{isAnnual && (
|
||||||
<p className="text-green-300 font-bold text-lg mb-6">
|
<p className="text-[#00903F] font-bold text-lg mb-6">
|
||||||
Billed annually @ ₹{(plan.annualPrice * 12).toLocaleString()}
|
Billed annually @ ₹{(plan.annualPrice * 12).toLocaleString()}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
@ -134,17 +135,18 @@ export default function SubscriptionPlan() {
|
|||||||
<motion.button
|
<motion.button
|
||||||
whileHover={{ scale: 1.05 }}
|
whileHover={{ scale: 1.05 }}
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
className={`w-full py-5 rounded-2xl text-white font-bold text-xl shadow-xl bg-gradient-to-r ${plan.button} hover:shadow-2xl transition-all`}
|
className={`w-[fit-content] py-4 px-8 rounded-full text-white font-semibold text-[16px] shadow-xl bg-gradient-to-r ${plan.button} hover:shadow-2xl transition-all`}
|
||||||
|
style={{background:"#A70710"}}
|
||||||
>
|
>
|
||||||
Select Plan
|
Select Plan
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
|
||||||
<div className="mt-8 text-left space-y-4">
|
<div className="mt-8 text-left space-y-4">
|
||||||
<h4 className="text-xl font-bold text-white/90">Features</h4>
|
<h4 className="text-xl font-bold text-black">Features</h4>
|
||||||
{plan.features.map((feature, i) => (
|
{plan.features.map((feature, i) => (
|
||||||
<div key={i} className="flex items-center gap-3">
|
<div key={i} className="flex items-center gap-3">
|
||||||
<Check className="text-green-400 text-2xl" />
|
<Check className="text-green-400 text-2xl" />
|
||||||
<span className="text-white/90">{feature}</span>
|
<span className="text-black">{feature}</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -154,7 +156,7 @@ export default function SubscriptionPlan() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Final CTA */}
|
{/* Final CTA */}
|
||||||
<motion.div
|
{/* <motion.div
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
transition={{ delay: 0.8 }}
|
transition={{ delay: 0.8 }}
|
||||||
@ -171,7 +173,7 @@ export default function SubscriptionPlan() {
|
|||||||
>
|
>
|
||||||
Choose This Plan
|
Choose This Plan
|
||||||
</motion.button>
|
</motion.button>
|
||||||
</motion.div>
|
</motion.div> */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="h-32" />
|
<div className="h-32" />
|
||||||
|
|||||||
@ -9,25 +9,18 @@ export default function TermsAndCondition() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-amber-50 overflow-hidden relative z-20">
|
<div className="min-h-screen overflow-hidden relative z-20">
|
||||||
{/* Luxury Header with Gold & Maroon */}
|
{/* Luxury Header with Gold & Maroon */}
|
||||||
<motion.header
|
<motion.header
|
||||||
initial={{ y: -100 }}
|
initial={{ y: -100 }}
|
||||||
animate={{ y: 0 }}
|
animate={{ y: 0 }}
|
||||||
className="relative bg-gradient-to-r from-maroon-800 via-red-900 to-rose-900 text-white shadow-2xl"
|
className="my-8 rounded-[10px] relative bg-gradient-to-r from-[#034E08] via-[#034E08] to-[#034E08] text-white shadow-2xl"
|
||||||
>
|
>
|
||||||
{/* Decorative Mandala Pattern */}
|
{/* Decorative Mandala Pattern */}
|
||||||
<div className="absolute inset-0 opacity-10">
|
|
||||||
<img src="/mandala-pattern.png" alt="" className="w-full h-full object-cover" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative flex items-center justify-between px-6 py-8 safe-area-top">
|
<div className="relative flex items-center justify-between px-6 py-8 safe-area-top">
|
||||||
<button
|
|
||||||
onClick={() => navigate(-1)}
|
|
||||||
className="p-3 bg-white/20 backdrop-blur-md rounded-full hover:bg-white/30 transition-all duration-300 group"
|
|
||||||
>
|
|
||||||
<ArrowBackIosNew className="text-white group-hover:scale-110 transition" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="text-center flex-1">
|
<div className="text-center flex-1">
|
||||||
<motion.div
|
<motion.div
|
||||||
@ -37,11 +30,11 @@ export default function TermsAndCondition() {
|
|||||||
className="flex justify-center mb-3"
|
className="flex justify-center mb-3"
|
||||||
>
|
>
|
||||||
<div className="p-4 bg-white/20 backdrop-blur rounded-2xl">
|
<div className="p-4 bg-white/20 backdrop-blur rounded-2xl">
|
||||||
<Favorite className="text-4xl text-amber-300 drop-shadow-lg" />
|
<Favorite className="text-4xl text-[#A70710] drop-shadow-lg" />
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<h1 className="text-3xl font-bold tracking-wider">Terms & Conditions</h1>
|
<h1 className="text-3xl font-bold tracking-wider">Terms & Conditions</h1>
|
||||||
<p className="text-amber-200 text-sm mt-1 font-medium">Your Trust, Our Promise</p>
|
<p className="text-[#ffff] text-sm mt-1 font-medium">Your Trust, Our Promise</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-12" />
|
<div className="w-12" />
|
||||||
@ -49,7 +42,7 @@ export default function TermsAndCondition() {
|
|||||||
</motion.header>
|
</motion.header>
|
||||||
|
|
||||||
{/* Luxury Content Cards with Gold Accents */}
|
{/* Luxury Content Cards with Gold Accents */}
|
||||||
<main className="px-5 py-10 max-w-4xl mx-auto">
|
<main className="px-5 py-10 max-w-[1400px] mx-auto">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 50 }}
|
initial={{ opacity: 0, y: 50 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
@ -92,16 +85,16 @@ export default function TermsAndCondition() {
|
|||||||
initial={{ scale: 0.9 }}
|
initial={{ scale: 0.9 }}
|
||||||
animate={{ scale: 1 }}
|
animate={{ scale: 1 }}
|
||||||
transition={{ delay: 0.6 }}
|
transition={{ delay: 0.6 }}
|
||||||
className="bg-gradient-to-r from-amber-600 to-red-600 text-white rounded-3xl p-10 text-center shadow-2xl"
|
className="bg-[#f5fbff] text-black rounded-3xl p-10 text-center shadow-2xl"
|
||||||
>
|
>
|
||||||
<h2 className="text-2xl font-bold mb-3">We Are Here For Your Forever</h2>
|
<h2 className="text-2xl font-bold mb-3">We Are Here For Your Forever</h2>
|
||||||
<p className="text-amber-100 text-lg">
|
<p className="text-gray-800 text-lg">
|
||||||
Every relationship built here is protected with love, trust, and complete privacy.
|
Every relationship built here is protected with love, trust, and complete privacy.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex justify-center gap-2 mt-6">
|
<div className="flex justify-center gap-2 mt-6">
|
||||||
<Favorite className="text-3xl animate-ping" />
|
<Favorite className="text-3xl text-[#A70710] animate-ping" />
|
||||||
<Favorite className="text-4xl text-amber-300" />
|
<Favorite className="text-4xl text-[#A70710]" />
|
||||||
<Favorite className="text-3xl animate-ping" />
|
<Favorite className="text-3xl text-[#A70710] animate-ping" />
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@ -14,7 +14,7 @@ const PublicRoutes = () => {
|
|||||||
|
|
||||||
<Route path="/login" element={<LoginPage />} />
|
<Route path="/login" element={<LoginPage />} />
|
||||||
<Route path="/forgot-password" element={<ForgotPasswordPage />} />
|
<Route path="/forgot-password" element={<ForgotPasswordPage />} />
|
||||||
<Route path="/change-password" element={<ChangePasswordPage />} />
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -11,6 +11,10 @@ import InterestSendPage from "../pages/InterestSendPage";
|
|||||||
import BlockedProfileListPage from "../pages/BlockedProfileListPage";
|
import BlockedProfileListPage from "../pages/BlockedProfileListPage";
|
||||||
import AccountSettingPage from "../pages/AccountSettingsPage";
|
import AccountSettingPage from "../pages/AccountSettingsPage";
|
||||||
import ProfileDetailPage from "../pages/ProfileDetailPage";
|
import ProfileDetailPage from "../pages/ProfileDetailPage";
|
||||||
|
import ChatUI from "../pages/ChatPage";
|
||||||
|
import HoroscopeGenerator from "../pages/HoroscoperGeneratePage";
|
||||||
|
import ContactUsPage from "../pages/ContactUsPage";
|
||||||
|
import ChangePasswordPage from "../components/auth/ChangePasswordForm";
|
||||||
|
|
||||||
const UserRoutes = () => {
|
const UserRoutes = () => {
|
||||||
|
|
||||||
@ -26,10 +30,27 @@ const UserRoutes = () => {
|
|||||||
<Route element={<ProfileLayout />}>
|
<Route element={<ProfileLayout />}>
|
||||||
<Route path="/interest" element={<InterestSendPage />} />
|
<Route path="/interest" element={<InterestSendPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
|
<Route element={<ProfileLayout />}>
|
||||||
|
<Route path="/chat" element={<ChatUI />} />
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route element={<ProfileLayout />}>
|
||||||
|
<Route path="/horoscoper-generate" element={<HoroscopeGenerator />} />
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Route element={<ProfileLayout />}>
|
<Route element={<ProfileLayout />}>
|
||||||
<Route path="/profile-detail" element={<ProfileDetailPage />} />
|
<Route path="/profile-detail" element={<ProfileDetailPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
|
<Route element={<ProfileLayout />}>
|
||||||
|
<Route path="/change-password" element={<ChangePasswordPage />} />
|
||||||
|
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
|
||||||
<Route element={<ProfileLayout />}>
|
<Route element={<ProfileLayout />}>
|
||||||
<Route path="/block-report-profilelist" element={<BlockedProfileListPage />} />
|
<Route path="/block-report-profilelist" element={<BlockedProfileListPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
@ -40,10 +61,13 @@ const UserRoutes = () => {
|
|||||||
<Route path="/terms-and-condition" element={<TermsAndConditionPage />} />
|
<Route path="/terms-and-condition" element={<TermsAndConditionPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route element={<ProfileLayout />}>
|
<Route element={<ProfileLayout />}>
|
||||||
<Route path="/policies" element={<PoliciesPage />} />
|
<Route path="/privacy-policy" element={<PoliciesPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route element={<ProfileLayout />}>
|
<Route element={<ProfileLayout />}>
|
||||||
<Route path="/safety-centre" element={<SafetyCentrePage />} />
|
<Route path="/safe-online" element={<SafetyCentrePage />} />
|
||||||
|
</Route>
|
||||||
|
<Route element={<ProfileLayout />}>
|
||||||
|
<Route path="/contact" element={<ContactUsPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route element={<ProfileLayout />}>
|
<Route element={<ProfileLayout />}>
|
||||||
<Route path="/subscription-plan" element={<SubscriptionPlanPage />} />
|
<Route path="/subscription-plan" element={<SubscriptionPlanPage />} />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user