pages
This commit is contained in:
parent
916519c7c9
commit
7eb48d702f
68
src/pages/PoliciesPage.jsx
Normal file
68
src/pages/PoliciesPage.jsx
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { ArrowBackIosNew, Security, Shield, VerifiedUser } from '@mui/icons-material';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
const text = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.`;
|
||||||
|
|
||||||
|
export default function PoliciesPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 relative z-20">
|
||||||
|
{/* Green Luxury Header */}
|
||||||
|
<motion.header
|
||||||
|
initial={{ y: -100 }}
|
||||||
|
animate={{ y: 0 }}
|
||||||
|
className="bg-gradient-to-r from-green-600 to-emerald-700 text-white shadow-2xl relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-black/10" />
|
||||||
|
<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">
|
||||||
|
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3 }}
|
||||||
|
className="inline-block p-4 bg-white/20 rounded-2xl mb-3">
|
||||||
|
<Shield className="text-4xl text-green-200" />
|
||||||
|
</motion.div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div className="w-12" />
|
||||||
|
</div>
|
||||||
|
</motion.header>
|
||||||
|
|
||||||
|
<main className="px-5 py-10 max-w-4xl 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">
|
||||||
|
<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">
|
||||||
|
<Security className="text-white text-3xl" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-bold text-green-900 mb-3">Privacy Policy</h3>
|
||||||
|
<p className="text-gray-800 text-lg leading-8 font-light tracking-wide">{text}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div whileHover={{ scale: 1.02 }} className="bg-white/90 backdrop-blur rounded-3xl p-8 shadow-xl border border-green-100">
|
||||||
|
<h3 className="text-xl font-bold text-emerald-900 mb-3">Safety Guidelines</h3>
|
||||||
|
<p className="text-gray-800 text-lg leading-8 font-light tracking-wide">{text}</p>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
<div className="flex justify-center gap-3 mt-6">
|
||||||
|
<VerifiedUser className="text-4xl animate-ping text-green-200" />
|
||||||
|
<Shield className="text-5xl text-white" />
|
||||||
|
<VerifiedUser className="text-4xl animate-ping text-green-200" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<div className="h-32" />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
138
src/pages/SafetyCentre.jsx
Normal file
138
src/pages/SafetyCentre.jsx
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { ArrowBackIosNew, Security, Report, Lock, Psychology } from '@mui/icons-material';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
const dummyImage = "https://images.unsplash.com/photo-1594736797933-d0501ba2fe65?w=800&q=80&fit=crop";
|
||||||
|
|
||||||
|
export default function SafetyCentre() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const safetyTips = [
|
||||||
|
{
|
||||||
|
icon: <Security className="text-3xl" />,
|
||||||
|
title: "Safety Tips",
|
||||||
|
color: "red",
|
||||||
|
desc: "Follow these practical guidelines to protect yourself while connecting with potential Matches."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Report className="text-3xl" />,
|
||||||
|
title: "Report a Profile",
|
||||||
|
color: "orange",
|
||||||
|
desc: "Report any suspicious or inappropriate behavior immediately—especially requests for money, unsolicited contact, or blackmail threats."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Lock className="text-3xl" />,
|
||||||
|
title: "Privacy Settings",
|
||||||
|
color: "pink",
|
||||||
|
desc: "Manage who sees your photos, contact info, & profile and always be in control."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Psychology className="text-3xl" />,
|
||||||
|
title: "Mental Wellbeing",
|
||||||
|
color: "blue",
|
||||||
|
desc: "Here's how you can prioritize your mental well-being while making this life-changing decision."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-b from-rose-50 via-white to-green-50 relative z-20">
|
||||||
|
{/* Premium Header */}
|
||||||
|
<motion.header
|
||||||
|
initial={{ y: -100 }}
|
||||||
|
animate={{ y: 0 }}
|
||||||
|
className="bg-gradient-to-r from-red-600 to-rose-700 text-white shadow-xl"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between 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>
|
||||||
|
<div className="w-12" />
|
||||||
|
</div>
|
||||||
|
</motion.header>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="px-6 pt-8 pb-10">
|
||||||
|
<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">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Beautiful Hero Image */}
|
||||||
|
<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 */}
|
||||||
|
<section className="px-6 py-12 max-w-5xl mx-auto space-y-10">
|
||||||
|
{safetyTips.map((tip, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<div className={`p-4 rounded-2xl bg-gradient-to-br ${
|
||||||
|
tip.color === "red" ? "from-red-500 to-rose-600" :
|
||||||
|
tip.color === "orange" ? "from-orange-500 to-amber-600" :
|
||||||
|
tip.color === "pink" ? "from-pink-500 to-rose-500" :
|
||||||
|
"from-blue-500 to-indigo-600"
|
||||||
|
} text-white shadow-lg`}>
|
||||||
|
{tip.icon}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className={`text-2xl font-bold mb-3 ${
|
||||||
|
tip.color === "red" ? "text-red-600" :
|
||||||
|
tip.color === "orange" ? "text-orange-600" :
|
||||||
|
tip.color === "pink" ? "text-pink-600" :
|
||||||
|
"text-blue-600"
|
||||||
|
}`}>
|
||||||
|
{tip.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-700 text-lg leading-relaxed">{tip.desc}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Final Trust Message */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: 50, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.8 }}
|
||||||
|
className="bg-gradient-to-r from-green-600 to-emerald-700 text-white py-16 text-center"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
Our 24×7 Safety Team is always watching. One tap to report — and we take immediate action.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center gap-4 mt-8">
|
||||||
|
<Security className="text-5xl animate-pulse text-green-200" />
|
||||||
|
<Psychology className="text-6xl text-white" />
|
||||||
|
<Security className="text-5xl animate-pulse text-green-200" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="h-32" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
168
src/pages/SubscriptionHistory.jsx
Normal file
168
src/pages/SubscriptionHistory.jsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
// src/pages/SubscriptionHistory.jsx
|
||||||
|
import React from 'react';
|
||||||
|
import { ArrowBackIosNew, CalendarToday, AccessTime, CreditCard, Person, Visibility } from '@mui/icons-material';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { CrownIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
const subscriptions = [
|
||||||
|
{
|
||||||
|
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: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function SubscriptionHistory() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-amber-50">
|
||||||
|
{/* Royal Header */}
|
||||||
|
<motion.header
|
||||||
|
initial={{ y: -100 }}
|
||||||
|
animate={{ y: 0 }}
|
||||||
|
className="bg-gradient-to-r from-red-600 to-rose-700 text-white shadow-2xl"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<div className="w-12" />
|
||||||
|
</div>
|
||||||
|
</motion.header>
|
||||||
|
|
||||||
|
{/* Current Plan Title */}
|
||||||
|
<div className="px-6 pt-8">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
className="text-3xl font-bold text-gray-900 flex items-center gap-3"
|
||||||
|
>
|
||||||
|
<CrownIcon className="text-amber-500 text-4xl" />
|
||||||
|
Current Plan
|
||||||
|
</motion.h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subscription Cards */}
|
||||||
|
<div className="px-6 py-8 space-y-8 max-w-4xl mx-auto pb-32">
|
||||||
|
{subscriptions.map((sub, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.2 }}
|
||||||
|
className={`relative rounded-3xl overflow-hidden shadow-2xl border-4 ${
|
||||||
|
sub.isActive
|
||||||
|
? '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'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* 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 ${
|
||||||
|
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" />
|
||||||
|
{sub.plan}
|
||||||
|
{sub.isActive && <span className="ml-2 text-xs bg-green-400 text-black px-3 py-1 rounded-full">ACTIVE</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-10 pb-8 px-8">
|
||||||
|
{/* Subscription ID */}
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<p className="text-sm text-gray-600">Subscription ID</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{sub.id}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Row */}
|
||||||
|
<div className="grid grid-cols-2 gap-6 mb-8">
|
||||||
|
<div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center shadow-lg">
|
||||||
|
<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-sm text-gray-600">Profile Count</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center shadow-lg">
|
||||||
|
<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-sm text-gray-600">Used Count</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Details Grid */}
|
||||||
|
<div className="space-y-4 text-lg">
|
||||||
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-4">
|
||||||
|
<span className="flex items-center gap-3 text-gray-700">
|
||||||
|
<CalendarToday className="text-amber-600" /> Billing Cycle
|
||||||
|
</span>
|
||||||
|
<span className="font-bold text-gray-900">{sub.billingCycle}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-4">
|
||||||
|
<span className="flex items-center gap-3 text-gray-700">
|
||||||
|
<CalendarToday className="text-red-600" /> Expire Date
|
||||||
|
</span>
|
||||||
|
<span className="font-bold text-red-600">{sub.expireDate}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-4">
|
||||||
|
<span className="flex items-center gap-3 text-gray-700">
|
||||||
|
<AccessTime className="text-green-600" /> Start Date & Time
|
||||||
|
</span>
|
||||||
|
<span className="font-bold text-gray-900">{sub.startDate} | {sub.startTime}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-4">
|
||||||
|
<span className="flex items-center gap-3 text-gray-700">
|
||||||
|
<CreditCard className="text-purple-600" /> Payment Method
|
||||||
|
</span>
|
||||||
|
<span className="font-bold text-purple-700">{sub.paymentMethod}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Total Amount */}
|
||||||
|
<div className="mt-8 text-center">
|
||||||
|
<p className="text-lg text-gray-600">Total Plan Amount</p>
|
||||||
|
<p className="text-5xl font-bold text-gray-900 mt-2">
|
||||||
|
₹{sub.amount.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Final Message */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.6 }}
|
||||||
|
className="fixed bottom-0 left-0 right-0 bg-gradient-to-r from-red-600 to-rose-700 text-white py-8 text-center shadow-2xl"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
180
src/pages/SubscriptionPlan.jsx
Normal file
180
src/pages/SubscriptionPlan.jsx
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { ArrowBackIosNew, Check, Star, AutoAwesome } from '@mui/icons-material';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
export default function SubscriptionPlan() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [isAnnual, setIsAnnual] = useState(true);
|
||||||
|
|
||||||
|
const plans = [
|
||||||
|
{
|
||||||
|
name: "Gold Plan",
|
||||||
|
monthlyPrice: 1800,
|
||||||
|
annualPrice: 1299,
|
||||||
|
color: "from-amber-400 to-yellow-600",
|
||||||
|
button: "from-amber-500 to-orange-600",
|
||||||
|
features: [
|
||||||
|
"Unlimited Profile Views",
|
||||||
|
"Send Personalized Messages",
|
||||||
|
"Featured Profile for 30 Days",
|
||||||
|
"Priority Customer Support",
|
||||||
|
"Verified Badge",
|
||||||
|
"Horoscope Matching",
|
||||||
|
"100+ Daily Matches"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Diamond Plan",
|
||||||
|
monthlyPrice: 2800,
|
||||||
|
annualPrice: 1999,
|
||||||
|
color: "from-purple-500 to-pink-600",
|
||||||
|
button: "from-purple-600 to-pink-700",
|
||||||
|
popular: true,
|
||||||
|
features: [
|
||||||
|
"Everything in Gold",
|
||||||
|
"Top of Search Results",
|
||||||
|
"Profile Highlight in Gold Border",
|
||||||
|
"Personal Relationship Manager",
|
||||||
|
"Video Call with Matches",
|
||||||
|
"Astro Compatibility Report",
|
||||||
|
"200+ Premium Matches Daily"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Platinum Plan",
|
||||||
|
monthlyPrice: 4800,
|
||||||
|
annualPrice: 3499,
|
||||||
|
color: "from-emerald-500 to-teal-600",
|
||||||
|
button: "from-emerald-600 to-teal-700",
|
||||||
|
features: [
|
||||||
|
"Everything in Diamond",
|
||||||
|
"Guaranteed 10+ Interests/Month",
|
||||||
|
"Exclusive VIP Events Invite",
|
||||||
|
"Profile Boost Every Week",
|
||||||
|
"Family Member Login Access",
|
||||||
|
"Lifetime Profile Visibility",
|
||||||
|
"Dedicated Matchmaking Expert"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
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">
|
||||||
|
{/* Luxury Header */}
|
||||||
|
<motion.header
|
||||||
|
initial={{ y: -100 }}
|
||||||
|
animate={{ y: 0 }}
|
||||||
|
className="relative bg-black/30 backdrop-blur-xl"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/50 to-rose-600/50" />
|
||||||
|
<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" />
|
||||||
|
</button>
|
||||||
|
<h1 className="text-2xl font-bold">Subscription Plan</h1>
|
||||||
|
<div className="w-12" />
|
||||||
|
</div>
|
||||||
|
</motion.header>
|
||||||
|
|
||||||
|
{/* Annual / Monthly Toggle */}
|
||||||
|
<div className="flex justify-center -mt-6 relative z-10">
|
||||||
|
<motion.div
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
className="bg-white/20 backdrop-blur-xl rounded-full p-2 flex gap-2 shadow-2xl"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsAnnual(true)}
|
||||||
|
className={`px-8 py-4 rounded-full font-bold text-lg transition-all ${isAnnual ? 'bg-white text-purple-900 shadow-lg' : 'text-white/80'}`}
|
||||||
|
>
|
||||||
|
ANNUAL PLAN
|
||||||
|
<span className="block text-xs font-normal mt-1 text-green-300">Save up to 40%</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsAnnual(false)}
|
||||||
|
className={`px-8 py-4 rounded-full font-bold text-lg transition-all ${!isAnnual ? 'bg-white text-purple-900 shadow-lg' : 'text-white/80'}`}
|
||||||
|
>
|
||||||
|
MONTHLY PLAN
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pricing Cards */}
|
||||||
|
<div className="px-5 py-10 max-w-7xl mx-auto">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{plans.map((plan, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.2 }}
|
||||||
|
className={`relative bg-white/10 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 && (
|
||||||
|
<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">
|
||||||
|
<AutoAwesome className="text-lg" /> MOST POPULAR <AutoAwesome className="text-lg" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="p-8 text-center">
|
||||||
|
<h3 className="text-3xl font-bold mb-4">{plan.name}</h3>
|
||||||
|
<div className="text-5xl font-bold mb-2">
|
||||||
|
₹{isAnnual ? plan.annualPrice.toLocaleString() : plan.monthlyPrice.toLocaleString()}
|
||||||
|
<span className="text-lg font-normal text-white/70"> /{isAnnual ? 'month' : 'month'}</span>
|
||||||
|
</div>
|
||||||
|
{isAnnual && (
|
||||||
|
<p className="text-green-300 font-bold text-lg mb-6">
|
||||||
|
Billed annually @ ₹{(plan.annualPrice * 12).toLocaleString()}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
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`}
|
||||||
|
>
|
||||||
|
Select Plan
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<div className="mt-8 text-left space-y-4">
|
||||||
|
<h4 className="text-xl font-bold text-white/90">Features</h4>
|
||||||
|
{plan.features.map((feature, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-3">
|
||||||
|
<Check className="text-green-400 text-2xl" />
|
||||||
|
<span className="text-white/90">{feature}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Final CTA */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.8 }}
|
||||||
|
className="text-center mt-16"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl font-bold mb-4">Find Your Perfect Life Partner</h2>
|
||||||
|
<p className="text-xl text-white/80 max-w-2xl mx-auto mb-10">
|
||||||
|
Choose the plan that’s right for your sacred journey. Every premium member gets closer to their soulmate.
|
||||||
|
</p>
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
className="bg-gradient-to-r from-red-600 to-rose-700 px-12 py-6 rounded-full text-2xl font-bold shadow-2xl hover:shadow-red-500/50 transition-all"
|
||||||
|
>
|
||||||
|
Choose This Plan
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="h-32" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
114
src/pages/TermsAndCondition.jsx
Normal file
114
src/pages/TermsAndCondition.jsx
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ArrowBackIosNew, Favorite, AutoStories } from '@mui/icons-material';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
const loremText = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.`;
|
||||||
|
|
||||||
|
export default function TermsAndCondition() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-amber-50 overflow-hidden relative z-20">
|
||||||
|
{/* Luxury Header with Gold & Maroon */}
|
||||||
|
<motion.header
|
||||||
|
initial={{ y: -100 }}
|
||||||
|
animate={{ y: 0 }}
|
||||||
|
className="relative bg-gradient-to-r from-maroon-800 via-red-900 to-rose-900 text-white shadow-2xl"
|
||||||
|
>
|
||||||
|
{/* 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">
|
||||||
|
<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">
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
className="flex justify-center mb-3"
|
||||||
|
>
|
||||||
|
<div className="p-4 bg-white/20 backdrop-blur rounded-2xl">
|
||||||
|
<Favorite className="text-4xl text-amber-300 drop-shadow-lg" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-12" />
|
||||||
|
</div>
|
||||||
|
</motion.header>
|
||||||
|
|
||||||
|
{/* Luxury Content Cards with Gold Accents */}
|
||||||
|
<main className="px-5 py-10 max-w-4xl mx-auto">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.4 }}
|
||||||
|
className="space-y-8"
|
||||||
|
>
|
||||||
|
{/* Card 1 */}
|
||||||
|
<motion.div
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
className="bg-white/90 backdrop-blur-lg rounded-3xl p-8 shadow-xl border border-amber-100 relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-amber-200 to-transparent rounded-full blur-3xl opacity-40" />
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-3 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl shadow-lg">
|
||||||
|
<AutoStories className="text-white text-2xl" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-gray-800 text-lg leading-8 font-light tracking-wide">
|
||||||
|
{loremText}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Card 2 */}
|
||||||
|
<motion.div
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
className="bg-gradient-to-r from-pink-50 to-rose-50 rounded-3xl p-8 shadow-xl border border-pink-200 relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute -top-10 -right-10 w-40 h-40">
|
||||||
|
<Favorite className="text-pink-200 text-9xl opacity-50" />
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-800 text-lg leading-8 font-light tracking-wide relative z-10">
|
||||||
|
{loremText}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Final Trust Message */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0.9 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold mb-3">We Are Here For Your Forever</h2>
|
||||||
|
<p className="text-amber-100 text-lg">
|
||||||
|
Every relationship built here is protected with love, trust, and complete privacy.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center gap-2 mt-6">
|
||||||
|
<Favorite className="text-3xl animate-ping" />
|
||||||
|
<Favorite className="text-4xl text-amber-300" />
|
||||||
|
<Favorite className="text-3xl animate-ping" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Bottom spacing */}
|
||||||
|
<div className="h-32" />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,16 +1,34 @@
|
|||||||
import { Route, useNavigate } from "react-router-dom";
|
import { Route, useNavigate } from "react-router-dom";
|
||||||
import ProfileLayout from "../layout/ProfileLayout";
|
import ProfileLayout from "../layout/ProfileLayout";
|
||||||
import UserDashboardHome from "../pages/UserDashboardHome";
|
import UserDashboardHome from "../pages/UserDashboardHome";
|
||||||
|
import PoliciesPage from '../pages/PoliciesPage';
|
||||||
|
import TermsAndConditionPage from '../pages/TermsAndCondition';
|
||||||
|
import SafetyCentrePage from '../pages/SafetyCentre';
|
||||||
|
import SubscriptionPlanPage from '../pages/SubscriptionPlan';
|
||||||
|
import SubscriptionHistoryPage from '../pages/SubscriptionHistory'
|
||||||
|
|
||||||
const UserRoutes = () => {
|
const UserRoutes = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Route element={<ProfileLayout />}>
|
<Route element={<ProfileLayout />}>
|
||||||
<Route path="/main/dashboard" element={<UserDashboardHome />} />
|
<Route path="/main/dashboard" element={<UserDashboardHome />} />
|
||||||
</Route>
|
</Route>
|
||||||
{/* <Route element={<ProfileLayout />}>
|
<Route element={<ProfileLayout />}>
|
||||||
<Route path="/terms" element={<UserDashboardHome />} />
|
<Route path="/terms-and-condition" element={<TermsAndConditionPage />} />
|
||||||
</Route> */}
|
</Route>
|
||||||
|
<Route element={<ProfileLayout />}>
|
||||||
|
<Route path="/policies" element={<PoliciesPage />} />
|
||||||
|
</Route>
|
||||||
|
<Route element={<ProfileLayout />}>
|
||||||
|
<Route path="/safety-centre" element={<SafetyCentrePage />} />
|
||||||
|
</Route>
|
||||||
|
<Route element={<ProfileLayout />}>
|
||||||
|
<Route path="/subscription-plan" element={<SubscriptionPlanPage />} />
|
||||||
|
</Route>
|
||||||
|
<Route element={<ProfileLayout />}>
|
||||||
|
<Route path="/subscription-history" element={<SubscriptionHistoryPage />} />
|
||||||
|
</Route>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user