From 7eb48d702f59c7adf3d6c6a76654ee70fb7404fd Mon Sep 17 00:00:00 2001 From: sarankumar Date: Mon, 24 Nov 2025 14:35:07 +0530 Subject: [PATCH] pages --- src/pages/PoliciesPage.jsx | 68 +++++++++++ src/pages/SafetyCentre.jsx | 138 +++++++++++++++++++++++ src/pages/SubscriptionHistory.jsx | 168 ++++++++++++++++++++++++++++ src/pages/SubscriptionPlan.jsx | 180 ++++++++++++++++++++++++++++++ src/pages/TermsAndCondition.jsx | 114 +++++++++++++++++++ src/routes/UserRoutes.jsx | 32 ++++-- 6 files changed, 693 insertions(+), 7 deletions(-) create mode 100644 src/pages/PoliciesPage.jsx create mode 100644 src/pages/SafetyCentre.jsx create mode 100644 src/pages/SubscriptionHistory.jsx create mode 100644 src/pages/SubscriptionPlan.jsx create mode 100644 src/pages/TermsAndCondition.jsx diff --git a/src/pages/PoliciesPage.jsx b/src/pages/PoliciesPage.jsx new file mode 100644 index 0000000..efdfd1b --- /dev/null +++ b/src/pages/PoliciesPage.jsx @@ -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 ( +
+ {/* Green Luxury Header */} + +
+
+ +
+ + + +

Policies

+

Your Safety Is Our First Priority

+
+
+
+ + +
+ +
+
+ +
+
+

Privacy Policy

+

{text}

+
+
+ + + +

Safety Guidelines

+

{text}

+ + + +

Protected With Love & Care

+

Every profile, every chat, every dream — safeguarded 24×7.

+
+ + + +
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/src/pages/SafetyCentre.jsx b/src/pages/SafetyCentre.jsx new file mode 100644 index 0000000..74c1d7b --- /dev/null +++ b/src/pages/SafetyCentre.jsx @@ -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: , + title: "Safety Tips", + color: "red", + desc: "Follow these practical guidelines to protect yourself while connecting with potential Matches." + }, + { + icon: , + title: "Report a Profile", + color: "orange", + desc: "Report any suspicious or inappropriate behavior immediately—especially requests for money, unsolicited contact, or blackmail threats." + }, + { + icon: , + title: "Privacy Settings", + color: "pink", + desc: "Manage who sees your photos, contact info, & profile and always be in control." + }, + { + icon: , + title: "Mental Wellbeing", + color: "blue", + desc: "Here's how you can prioritize your mental well-being while making this life-changing decision." + } + ]; + + return ( +
+ {/* Premium Header */} + +
+ +

Be Safe Online

+
+
+ + + {/* Hero Section */} +
+

Safety Centre

+

+ Your safety matters deeply at Thirukalyanam. + Our team works with advanced tools to ensure your matchmaking journey remains secure and safe. +

+
+ + {/* Beautiful Hero Image */} + + Safe Matrimony +
+
+
+ Is Online Matrimony + Safe? + Yes +
+
+ + + {/* Safety Tips Grid */} +
+ {safetyTips.map((tip, index) => ( + +
+ {tip.icon} +
+
+

+ {tip.title} +

+

{tip.desc}

+
+ + ))} +
+ + {/* Final Trust Message */} + +

You're Never Alone

+

+ Our 24×7 Safety Team is always watching. One tap to report — and we take immediate action. +

+
+ + + +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/SubscriptionHistory.jsx b/src/pages/SubscriptionHistory.jsx new file mode 100644 index 0000000..9154f09 --- /dev/null +++ b/src/pages/SubscriptionHistory.jsx @@ -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 ( +
+ {/* Royal Header */} + +
+ +

Subscription History

+
+
+ + + {/* Current Plan Title */} +
+ + + Current Plan + +
+ + {/* Subscription Cards */} +
+ {subscriptions.map((sub, index) => ( + + {/* Crown Badge */} +
+ + {sub.plan} + {sub.isActive && ACTIVE} +
+ +
+ {/* Subscription ID */} +
+

Subscription ID

+

{sub.id}

+
+ + {/* Stats Row */} +
+
+ +

{sub.profileCount}

+

Profile Count

+
+
+ +

{sub.usedCount}

+

Used Count

+
+
+ + {/* Details Grid */} +
+
+ + Billing Cycle + + {sub.billingCycle} +
+
+ + Expire Date + + {sub.expireDate} +
+
+ + Start Date & Time + + {sub.startDate} | {sub.startTime} +
+
+ + Payment Method + + {sub.paymentMethod} +
+
+ + {/* Total Amount */} +
+

Total Plan Amount

+

+ ₹{sub.amount.toLocaleString()} +

+
+
+ + ))} +
+ + {/* Final Message */} + +

Your journey to forever is fully powered

+

Enjoy unlimited matches with your Gold Plan

+ +
+ ); +} \ No newline at end of file diff --git a/src/pages/SubscriptionPlan.jsx b/src/pages/SubscriptionPlan.jsx new file mode 100644 index 0000000..4317680 --- /dev/null +++ b/src/pages/SubscriptionPlan.jsx @@ -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 ( +
+ {/* Luxury Header */} + +
+
+ +

Subscription Plan

+
+
+ + + {/* Annual / Monthly Toggle */} +
+ + + + +
+ + {/* Pricing Cards */} +
+
+ {plans.map((plan, index) => ( + + {plan.popular && ( +
+ MOST POPULAR +
+ )} + +
+

{plan.name}

+
+ ₹{isAnnual ? plan.annualPrice.toLocaleString() : plan.monthlyPrice.toLocaleString()} + /{isAnnual ? 'month' : 'month'} +
+ {isAnnual && ( +

+ Billed annually @ ₹{(plan.annualPrice * 12).toLocaleString()} +

+ )} + + + Select Plan + + +
+

Features

+ {plan.features.map((feature, i) => ( +
+ + {feature} +
+ ))} +
+
+ + ))} +
+ + {/* Final CTA */} + +

Find Your Perfect Life Partner

+

+ Choose the plan that’s right for your sacred journey. Every premium member gets closer to their soulmate. +

+ + Choose This Plan + + +
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/TermsAndCondition.jsx b/src/pages/TermsAndCondition.jsx new file mode 100644 index 0000000..65dbe43 --- /dev/null +++ b/src/pages/TermsAndCondition.jsx @@ -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 ( +
+ {/* Luxury Header with Gold & Maroon */} + + {/* Decorative Mandala Pattern */} +
+ +
+ +
+ + +
+ +
+ +
+ +

Terms & Conditions

+

Your Trust, Our Promise

+
+ +
+
+ + + {/* Luxury Content Cards with Gold Accents */} +
+ + {/* Card 1 */} + +
+
+
+ +
+
+

+ {loremText} +

+
+
+ + + {/* Card 2 */} + +
+ +
+

+ {loremText} +

+ + + {/* Final Trust Message */} + +

We Are Here For Your Forever

+

+ Every relationship built here is protected with love, trust, and complete privacy. +

+
+ + + +
+ + + + {/* Bottom spacing */} +
+
+
+ ); +} \ No newline at end of file diff --git a/src/routes/UserRoutes.jsx b/src/routes/UserRoutes.jsx index fe9ecd0..4a21c57 100644 --- a/src/routes/UserRoutes.jsx +++ b/src/routes/UserRoutes.jsx @@ -1,16 +1,34 @@ -import { Route, useNavigate } from "react-router-dom"; +import { Route, useNavigate } from "react-router-dom"; import ProfileLayout from "../layout/ProfileLayout"; 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 = () => { return ( <> - }> - } /> - - {/* }> - } /> - */} + }> + } /> + + }> + } /> + + }> + } /> + + }> + } /> + + }> + } /> + + }> + } /> + ) }