From f11e0bc79f722f0938c4bcf17848e7f4fa1494ee Mon Sep 17 00:00:00 2001 From: nikhil wankhade Date: Wed, 5 Jun 2024 15:17:30 +0530 Subject: [PATCH] we are going to complete frontend now --- client/README.md | 9 - client/package-lock.json | 6 +- client/package.json | 1 + client/src/App.jsx | 12 ++ client/src/components/about/About.jsx | 69 +++++++ client/src/components/community/Community.jsx | 182 ++++++++++++++++++ client/src/components/contact/Contact.jsx | 138 +++++++++++++ client/src/components/home/Home.jsx | 52 ++++- .../src/components/membership/Membership.jsx | 46 +++++ client/src/components/navbar/Navbar.jsx | 13 +- client/src/components/partner/Partner.jsx | 125 ++++++++++++ client/src/components/profile/Profile.jsx | 34 ++-- .../components/user/registration/Register.jsx | 35 ++-- client/src/components/utils/GradientLink.jsx | 22 +++ client/tailwind.config.js | 2 +- 15 files changed, 696 insertions(+), 50 deletions(-) delete mode 100644 client/README.md create mode 100644 client/src/components/about/About.jsx create mode 100644 client/src/components/community/Community.jsx create mode 100644 client/src/components/contact/Contact.jsx create mode 100644 client/src/components/membership/Membership.jsx create mode 100644 client/src/components/partner/Partner.jsx create mode 100644 client/src/components/utils/GradientLink.jsx diff --git a/client/README.md b/client/README.md deleted file mode 100644 index 450de42..0000000 --- a/client/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# React + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh -"# matromony" diff --git a/client/package-lock.json b/client/package-lock.json index d7ffffb..1b9528e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -8,6 +8,7 @@ "name": "client", "version": "0.0.0", "dependencies": { + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^5.2.1", @@ -3655,7 +3656,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -4121,7 +4121,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -4191,8 +4190,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-refresh": { "version": "0.14.2", diff --git a/client/package.json b/client/package.json index aeb868d..04468f6 100644 --- a/client/package.json +++ b/client/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^5.2.1", diff --git a/client/src/App.jsx b/client/src/App.jsx index c1e3e2c..d805638 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -6,6 +6,12 @@ import Register from "./components/user/registration/Register.jsx" import Profile from "./components/profile/Profile.jsx" import UserDetails from "./components/user/userDetails.jsx/UserDetails.jsx" import VerifyDocs from "./components/user/verification/VerifyDocs.jsx" +import Community from "./components/community/Community.jsx" +import Contact from "./components/contact/Contact.jsx" +import About from "./components/about/About.jsx" +import Home from "./components/home/Home.jsx" +import Membership from "./components/membership/Membership.jsx" +import Partner from "./components/partner/Partner.jsx" const App = () => { return ( @@ -13,9 +19,15 @@ const App = () => { + } path="/" /> } path="/login" /> } path="/register" /> } path="/user/profile" /> + } path="/user/community" /> + } path="/user/contact" /> + } path="/user/about" /> + } path="/user/partner" /> + } path="/user/membership" /> } path="/registration/user/details" /> } path="/registration/user/VerifyDocs" /> diff --git a/client/src/components/about/About.jsx b/client/src/components/about/About.jsx new file mode 100644 index 0000000..65c339e --- /dev/null +++ b/client/src/components/about/About.jsx @@ -0,0 +1,69 @@ +const About = () => { + return ( + <> +
+

RISHTA

+

About Us

+ +
+
+

Connecting Hearts, Fulfilling Dreams - Your Perfect Match Awaits

+

+ We match people as life partners based on their requirements. We are a matrimony organization dedicated to helping individuals find their suitable relationships. +

+ +
+

Our Goal

+

+ At RISHTA, our mission is to facilitate meaningful connections and help individuals find their perfect life partner. We believe that every person deserves a fulfilling relationship, and we are dedicated to making that dream a reality through a trusted and personalized platform. +

+
+
+ + +
+ +
+
+ owner +

Owner

+

Shalini Wankhade

+

+ As the head of our premier matchmaking organization, I specialize in helping individuals find their perfect life partners based on their unique preferences. We are committed to creating meaningful connections and ensuring each match aligns with our clients desires and values. Let us guide you on your journey to finding true love. +

+
+
+ +
+

Testimonials

+
+
+

RISHTA helped me find the love of my life! The personalized approach made all the difference.

+

- Aisha Khan

+
+
+

A wonderful service that truly cares about its clients. Highly recommended!

+

- Raj Patel

+
+
+

I found my soulmate through RISHTA. The team was supportive and attentive throughout.

+

- Priya Sharma

+
+
+
+
+ + ); +}; + +export default About; \ No newline at end of file diff --git a/client/src/components/community/Community.jsx b/client/src/components/community/Community.jsx new file mode 100644 index 0000000..2408d76 --- /dev/null +++ b/client/src/components/community/Community.jsx @@ -0,0 +1,182 @@ +import { Link } from "react-router-dom"; + +const Community = () => { + return ( + <> +
+ +

welcome to Rishta community

+ +
+

+ + user@123 + + 22 Jan 10:20 am +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo + pariatur fuga cupiditate voluptatem reprehenderit? Optio repellat + distinctio magnam a praesentium, amet fugit quidem blanditiis! + Tempore sequi ipsa labore sunt veniam, odit debitis, aut itaque modi + illum voluptatibus numquam expedita non unde, voluptas natus + consequuntur! Voluptates pariatur nesciunt quas aliquid ut + necessitatibus nobis soluta modi quia aut eos excepturi distinctio + provident laboriosam commodi tenetur consequatur, a rerum, totam + quibusdam blanditiis perferendis voluptatem error officia. Officia + exercitationem non quia dolor temporibus et accusantium! Harum nihil + nesciunt eaque eum quaerat quia rem aperiam deleniti distinctio odit + labore, est asperiores provident illum eos saepe error dolore quam + explicabo. Impedit, magni inventore laudantium minima + necessitatibus, animi voluptatibus dicta ex ad tempora facere. +

+
+
+ + + +
+ + {/* it shows how may comments are there */} +
+ 1 comment
+
+
+

Comments

+
+ @userWhoCommented +{/* his / her comments */} +

Comment no. 1

+
+
+
+ +
+

+ + user@123 + + 22 Jan 10:20 am +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo + pariatur fuga cupiditate voluptatem reprehenderit? Optio repellat + distinctio magnam a praesentium, amet fugit quidem blanditiis! + Tempore sequi ipsa labore sunt veniam, odit debitis, aut itaque modi + illum voluptatibus numquam expedita non unde, voluptas natus + consequuntur! Voluptates pariatur nesciunt quas aliquid ut + necessitatibus nobis soluta modi quia aut eos excepturi distinctio + provident laboriosam commodi tenetur consequatur, a rerum, totam + quibusdam blanditiis perferendis voluptatem error officia. Officia + exercitationem non quia dolor temporibus et accusantium! Harum nihil + nesciunt eaque eum quaerat quia rem aperiam deleniti distinctio odit + labore, est asperiores provident illum eos saepe error dolore quam + explicabo. Impedit, magni inventore laudantium minima + necessitatibus, animi voluptatibus dicta ex ad tempora facere. +

+
+
+ + + +
+ + {/* it shows how may comments are there */} +
+ 1 comment
+
+
+

Comments

+
+ @userWhoCommented + {/* his / her comments */} +

Comment no. 1

+
+
+
+ +
+

+ + user@123 + + 22 Jan 10:20 am +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo + pariatur fuga cupiditate voluptatem reprehenderit? Optio repellat + distinctio magnam a praesentium, amet fugit quidem blanditiis! + Tempore sequi ipsa labore sunt veniam, odit debitis, aut itaque modi + illum voluptatibus numquam expedita non unde, voluptas natus + consequuntur! Voluptates pariatur nesciunt quas aliquid ut + necessitatibus nobis soluta modi quia aut eos excepturi distinctio + provident laboriosam commodi tenetur consequatur, a rerum, totam + quibusdam blanditiis perferendis voluptatem error officia. Officia + exercitationem non quia dolor temporibus et accusantium! Harum nihil + nesciunt eaque eum quaerat quia rem aperiam deleniti distinctio odit + labore, est asperiores provident illum eos saepe error dolore quam + explicabo. Impedit, magni inventore laudantium minima + necessitatibus, animi voluptatibus dicta ex ad tempora facere. +

+
+
+ + + +
+ + {/* it shows how may comments are there */} +
+ 1 comment
+
+
+

Comments

+
+ @userWhoCommented + {/* his / her comments */} +

Comment no. 1

+
+
+
+
+ + ); +}; + +export default Community; \ No newline at end of file diff --git a/client/src/components/contact/Contact.jsx b/client/src/components/contact/Contact.jsx new file mode 100644 index 0000000..664251a --- /dev/null +++ b/client/src/components/contact/Contact.jsx @@ -0,0 +1,138 @@ +import { FaEnvelope, FaPhoneAlt, FaWhatsapp } from 'react-icons/fa'; +import { FaInstagramSquare, FaFacebook } from 'react-icons/fa'; + +const Contact = () => ( +
+
+
+

Get in Touch

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ + +
+
+); + +export default Contact; diff --git a/client/src/components/home/Home.jsx b/client/src/components/home/Home.jsx index 21ae1d7..b1396a1 100644 --- a/client/src/components/home/Home.jsx +++ b/client/src/components/home/Home.jsx @@ -1,8 +1,54 @@ +import { CgProfile } from "react-icons/cg"; +import { CiSearch } from "react-icons/ci"; +import { CiHeart } from "react-icons/ci"; +import GradientLink from "../utils/GradientLink"; const Home = () => { - return ( -
Home
- ) + return ( + <> +
+
+

rishta - naye bandhano ka

+
+
+

find your perfect partner

+

Our matrimony service connects compatible singles, helping you find your soulmate.

+
+ + + +
+
+ +
+
+

how it works

+

A Simple 3-Step Process

+

Our matrimony service makes it easy to find your perfect match. Simply sign up, create your profile, and start connecting with compatible singles.

+
    +
  • + +

    Create Profile

    +

    Sign up and create a detailed profile to showcase your interests and preferences.

    +
    • +
  • + +

    Find Matches

    +

    Our advanced matching algorithm will suggest compatible singles based on your preferences

    +
    • +
  • + +

    Connect & Communicate

    +

    Reach out to your matches, chat, and build meaningful connections.

    +
    • +
+
+
+
+ + ) } export default Home \ No newline at end of file diff --git a/client/src/components/membership/Membership.jsx b/client/src/components/membership/Membership.jsx new file mode 100644 index 0000000..b19ad02 --- /dev/null +++ b/client/src/components/membership/Membership.jsx @@ -0,0 +1,46 @@ +import { MdOutlineCardMembership } from "react-icons/md"; + +const Membership = () => ( +
+
+ {/* Instructions and information */} +
+
+ + Buy our membership plan +
+

+ Why You Should Buy Our Membership +

+
    +
  • + Better Matches: Access a larger pool of verified and serious profiles, increasing your chances of finding a compatible partner. +
    • +
  • + More Features: Unlock advanced search filters, direct messaging, and enhanced privacy settings to improve your matchmaking experience. +
    • +
  • + Higher Visibility: Enjoy increased profile visibility, making it easier for potential matches to find and connect with you. +
    • +
+
+ {/* Membership pack design */} +
+ premium membership plan +

+ By purchasing this premium plan, you will gain access to all the app's features, including the ability to chat with admins, make video calls, and receive more detailed partner information for enhanced searching. Additionally, we will provide personalized partner recommendations for you. +

+ +
+
+
+); + +export default Membership; \ No newline at end of file diff --git a/client/src/components/navbar/Navbar.jsx b/client/src/components/navbar/Navbar.jsx index cf70687..fba3c50 100644 --- a/client/src/components/navbar/Navbar.jsx +++ b/client/src/components/navbar/Navbar.jsx @@ -5,9 +5,10 @@ const logoImg = "/public/img/RISHTA.png"; const navItems = [ { to: "/", label: "Home", className: "text-white hover:text-gray-400" }, - { to: "/about", label: "About", className: "text-white hover:text-gray-400" }, - { to: "/contact", label: "Contact", className: "text-white hover:text-gray-400" }, - { to: "/partner", label: "Partner", className: "text-white hover:text-gray-400" }, + { to: "/user/about", label: "About", className: "text-white hover:text-gray-400" }, + { to: "/user/contact", label: "Contact", className: "text-white hover:text-gray-400" }, + { to: "/user/partner", label: "Partner", className: "text-white hover:text-gray-400" }, + { to: "/user/community", label: "community", className: "text-white hover:text-gray-400" }, { to: "/login", label: "Login", className: "bg-white text-black rounded-2xl hover:bg-gray-300" }, ]; @@ -25,9 +26,9 @@ const Navbar = () => { logo -
    +
      {navItems.map((item, index) => ( -
    • +
    • {item.label} @@ -36,7 +37,7 @@ const Navbar = () => { ))} -
    • +
    • my profile diff --git a/client/src/components/partner/Partner.jsx b/client/src/components/partner/Partner.jsx new file mode 100644 index 0000000..e8b8238 --- /dev/null +++ b/client/src/components/partner/Partner.jsx @@ -0,0 +1,125 @@ +import { useState } from "react"; +import { CgGenderFemale, CgGenderMale } from "react-icons/cg"; +import { FaVoteYea } from "react-icons/fa"; +import { FaLocationDot } from "react-icons/fa6"; +import { IoColorWand } from "react-icons/io5"; +import { MdCastForEducation } from "react-icons/md"; +import { PiCheckSquareLight } from "react-icons/pi"; + +const Partner = () => { + const [selectStatus, setSelectStatus] = useState("add"); + + const selectStatusButton = () => { + setSelectStatus(selectStatus === "add" ? "remove" : "add"); + }; + + return ( + <> +
      +

      find your partner

      + +
      + + + + + + + + + + + + + + + + + + + + + + + +
      + +
      + {/* card where people details */} +
      + partners image + +
        +
      • name : nikhil wankhade
        • +
      • age : 18
        • +
      • education : bca
        • +
      • job-title : software developer
        • +
      • job type : private
        • +
      • location : amravati
        • +
      • religion : religion
        • +
      + + +
      + + + +
      +
      + + ); +}; + +export default Partner; diff --git a/client/src/components/profile/Profile.jsx b/client/src/components/profile/Profile.jsx index be6b05b..81357ae 100644 --- a/client/src/components/profile/Profile.jsx +++ b/client/src/components/profile/Profile.jsx @@ -1,23 +1,31 @@ const Profile = () => { const personalInfo = [ - { label: 'First Name', value: 'Nikhil' }, - { label: 'Last Name', value: 'Wankhade' }, - { label: 'Email', value: 'nikhil@example.com' }, - { label: 'Phone', value: '+91 1234567890' }, - { label: 'Job', value: 'Data Analyst' }, - { label: 'Job Type', value: 'Private' }, - { label: 'Qualification', value: 'B.C.A., Degree College of Physical Education, H.V.P.M.' }, - { label: 'Salary', value: '$ 30,000' }, + { label: "Name", value: "John Doe" }, + { label: "Father's Name", value: "Richard Doe" }, + { label: "Surname", value: "Doe" }, + { label: "Mother's Name", value: "Jane Doe" }, + { label: "Age", value: "30" }, + { label: "Gender", value: "Male" }, + { label: "Date of Birth", value: "1994-05-23" }, + { label: "Phone Number", value: "+91 1234567890" }, + { label: "Email", value: "john.doe@example.com" }, + { label: "Address", value: "123 Main Street, Anytown, 123456" }, ]; const otherInfo = [ - { label: 'City', value: 'Amravati' }, - { label: 'State', value: 'Maharashtra' }, - { label: 'Property', value: '$ 1,00,000' }, - { label: 'Hometown', value: 'Pune' }, - { label: 'Address', value: 'Chaitanya Colony, Amravati, 444606' }, + { label: "Height", value: "5'11\"" }, + { label: "Weight", value: "70kg" }, + { label: "Complexion", value: "Fair" }, + { label: "Education", value: "MSc Computer Science" }, + { label: "Occupation", value: "Software Engineer" }, + { label: "Annual Income", value: "$70,000" }, + { label: "Preferred Age Range", value: "25-30" }, + { label: "Preferred Height Range", value: "5'5\" - 5'10\"" }, + { label: "Preferred Education", value: "Graduate" }, + { label: "Preferred Profession", value: "Engineer" }, ]; + const hobbies = ['Reading', 'Traveling', 'Music', 'Photography']; return ( diff --git a/client/src/components/user/registration/Register.jsx b/client/src/components/user/registration/Register.jsx index a582afe..f9716b8 100644 --- a/client/src/components/user/registration/Register.jsx +++ b/client/src/components/user/registration/Register.jsx @@ -1,33 +1,40 @@ import { FcGoogle } from "react-icons/fc"; -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; const Register = () => { + + const navigate = useNavigate() + const registerProfile = () => { + navigate("/registration/user/details") + } + return ( <> -
      +
      -
      +
      -

      Register

      +

      Rishta Register

      welcome to Rishta

      -
      + + {/* form for register */} + - - + + + - - + forgot password +
      -
      -

      OR

      +

      OR

      - continue with google + continue with google -

      already have an account

      -
      +

      don`t have an account

      diff --git a/client/src/components/utils/GradientLink.jsx b/client/src/components/utils/GradientLink.jsx new file mode 100644 index 0000000..05827bd --- /dev/null +++ b/client/src/components/utils/GradientLink.jsx @@ -0,0 +1,22 @@ + import { Link } from 'react-router-dom'; +import PropTypes from 'prop-types'; + +const GradientLink = ({ toWhere, LinkText }) => { + return ( + <> + + {LinkText} +
      +
      +
      + + + ); +}; + +GradientLink.propTypes = { + toWhere: PropTypes.string.isRequired, + LinkText: PropTypes.string.isRequired, +}; + +export default GradientLink; diff --git a/client/tailwind.config.js b/client/tailwind.config.js index beba639..219a3d5 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -4,7 +4,7 @@ export default { theme: { extend: { animation: { - fade: "fadeIn .3s ease-in-out", + fade: "fadeIn .4s ease-in-out", }, keyframes: {