we are going to complete frontend now

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",

client/src/App.jsx

@@ -6,16 +6,28 @@ 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 (
     <>
       <BrowserRouter>
         <Navbar />
         <Routes>
+          <Route element={<Home />} path="/" />
           <Route element={<Login />} path="/login" />
           <Route element={<Register />} path="/register" />
           <Route element={<Profile />} path="/user/profile" />
+          <Route element={<Community />} path="/user/community" />
+          <Route element={<Contact />} path="/user/contact" />
+          <Route element={<About />} path="/user/about" />
+          <Route element={<Partner />} path="/user/partner" />
+          <Route element={<Membership />} path="/user/membership" />
           <Route element={<UserDetails />} path="/registration/user/details" />
           <Route element={<VerifyDocs />} path="/registration/user/VerifyDocs" />
         </Routes>

client/src/components/about/About.jsx

@@ -0,0 +1,69 @@
+const About = () => {
+    return (
+        <>
+            <section className="w-full py-28 animate-fade bg-[#FFF7FC] ">
+                <h1 className="text-center text-4xl md:text-5xl font-extrabold font-serif text-gray-800">RISHTA</h1>
+                <h2 className="text-xl md:text-2xl text-center text-violet-700 mt-4">About Us</h2>
+
+                <div id="container" className="max-w-7xl px-4 md:px-10 flex flex-col md:flex-row mx-auto gap-8 md:gap-16 py-16">
+                    <div id="left" className="w-full md:w-2/3">
+                        <h1 className="text-xl md:text-2xl font-semibold text-red-400 mb-4">Connecting Hearts, Fulfilling Dreams - Your Perfect Match Awaits</h1>
+                        <p className="text-gray-700 mb-6">
+                            We match people as life partners based on their requirements. We are a matrimony organization dedicated to helping individuals find their suitable relationships.
+                        </p>
+
+                        <div id="mission" className="py-10">
+                            <h2 className="text-xl md:text-2xl font-extrabold text-gray-800 mb-4">Our Goal</h2>
+                            <p className="text-gray-700 leading-relaxed">
+                                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.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div id="right" className="w-full md:w-1/3 items-center">
+                        <img
+                            src="https://plus.unsplash.com/premium_photo-1670588775988-ae6d15872e3c?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y291cGxlfGVufDB8fDB8fHww"
+                            alt="profile"
+                            className="w-2/3 h-2/3  object-cover rounded-full border-4 border-gray-200 shadow-lg"
+                        />
+                    </div>
+                </div>
+
+                <div id="introduction" className="w-full max-w-4xl mx-auto">
+                    <div id="box" className="mx-auto w-full max-w-md shadow-xl border px-6 md:px-10 py-8 md:py-12 bg-white rounded-lg">
+                        <img
+                            src="https://plus.unsplash.com/premium_photo-1670588775988-ae6d15872e3c?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y291cGxlfGVufDB8fDB8fHww"
+                            alt="owner"
+                            className="w-20 md:w-24 h-20 md:h-24 object-cover rounded-full mx-auto mb-6"
+                        />
+                        <h1 className="text-center text-xl font-bold text-gray-800">Owner</h1>
+                        <h2 className="text-center text-lg font-semibold text-gray-700 mt-2 mb-4">Shalini Wankhade</h2>
+                        <p className="text-gray-600 leading-relaxed">
+                            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.
+                        </p>
+                    </div>
+                </div>
+
+                <div id="testimonials" className="w-full max-w-7xl mx-auto mt-20 py-10 bg-white rounded-lg shadow-md">
+                    <h2 className="text-xl md:text-2xl font-extrabold text-center text-gray-800 mb-8">Testimonials</h2>
+                    <div className="flex flex-col md:flex-row justify-around gap-8 px-4 md:px-10">
+                        <div className="w-full md:w-1/3 p-4 border rounded-lg shadow-sm">
+                            <p className="text-gray-700 italic">RISHTA helped me find the love of my life! The personalized approach made all the difference.</p>
+                            <p className="mt-4 text-gray-800 font-semibold">- Aisha Khan</p>
+                        </div>
+                        <div className="w-full md:w-1/3 p-4 border rounded-lg shadow-sm">
+                            <p className="text-gray-700 italic">A wonderful service that truly cares about its clients. Highly recommended!</p>
+                            <p className="mt-4 text-gray-800 font-semibold">- Raj Patel</p>
+                        </div>
+                        <div className="w-full md:w-1/3 p-4 border rounded-lg shadow-sm">
+                            <p className="text-gray-700 italic">I found my soulmate through RISHTA. The team was supportive and attentive throughout.</p>
+                            <p className="mt-4 text-gray-800 font-semibold">- Priya Sharma</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default About;

client/src/components/community/Community.jsx

@@ -0,0 +1,182 @@
+import { Link } from "react-router-dom";
+
+const Community = () => {
+  return (
+    <>
+      <section className="w-full min-h-screen bg-[#FFF7FC] py-28 flex flex-col gap-10 animate-fade">
+
+<h1 className="text-3xl text-center font-semibold">welcome to Rishta community</h1>
+
+        <div
+          id="CommunityBox"
+          className="bg-white w-full max-w-4xl mx-auto p-6 rounded-lg shadow-lg sm:p-4"
+        >
+          <h2 className="text-lg font-bold flex items-center justify-between mb-4 sm:flex-col sm:items-start sm:mb-2">
+            <Link
+              to="#user@123"
+              className="hover:text-indigo-600 hover:underline sm:mb-2"
+            >
+              user@123
+            </Link>
+            <span className="text-sm text-gray-500">22 Jan 10:20 am</span>
+          </h2>
+          <p className="py-4 px-6 bg-gray-50 rounded-lg shadow-sm sm:py-2 sm:px-4">
+            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.
+          </p>
+          <div className="flex items-center justify-between mt-4">
+            <div>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full mr-2">
+                Like
+              </button>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full mr-2">
+                Comment
+              </button>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full">
+                Share
+              </button>
+            </div>
+
+            {/* it shows how may comments are there */}
+            <div className="text-sm text-gray-500">
+              1 comment</div>
+          </div>
+          <div className="mt-4 bg-white p-4 rounded-lg shadow-sm">
+            <h3 className="text-lg font-bold mb-2 text-gray-700">Comments</h3>
+            <div className="bg-gray-100 p-4 rounded-lg">
+              <span><Link to="#userWhoCommented" className="text-sm underline text-blue-600">@userWhoCommented</Link></span>
+{/* his / her comments */}
+              <p>Comment no. 1</p>
+            </div>
+          </div>
+        </div>
+
+        <div
+          id="CommunityBox"
+          className="bg-white w-full max-w-4xl mx-auto p-6 rounded-lg shadow-lg sm:p-4"
+        >
+          <h2 className="text-lg font-bold flex items-center justify-between mb-4 sm:flex-col sm:items-start sm:mb-2">
+            <Link
+              to="#user@123"
+              className="hover:text-indigo-600 hover:underline sm:mb-2"
+            >
+              user@123
+            </Link>
+            <span className="text-sm text-gray-500">22 Jan 10:20 am</span>
+          </h2>
+          <p className="py-4 px-6 bg-gray-50 rounded-lg shadow-sm sm:py-2 sm:px-4">
+            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.
+          </p>
+          <div className="flex items-center justify-between mt-4">
+            <div>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full mr-2">
+                Like
+              </button>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full mr-2">
+                Comment
+              </button>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full">
+                Share
+              </button>
+            </div>
+
+            {/* it shows how may comments are there */}
+            <div className="text-sm text-gray-500">
+              1 comment</div>
+          </div>
+          <div className="mt-4 bg-white p-4 rounded-lg shadow-sm">
+            <h3 className="text-lg font-bold mb-2 text-gray-700">Comments</h3>
+            <div className="bg-gray-100 p-4 rounded-lg">
+              <span><Link to="#userWhoCommented" className="text-sm underline text-blue-600">@userWhoCommented</Link></span>
+              {/* his / her comments */}
+              <p>Comment no. 1</p>
+            </div>
+          </div>
+        </div>
+
+        <div
+          id="CommunityBox"
+          className="bg-white w-full max-w-4xl mx-auto p-6 rounded-lg shadow-lg sm:p-4"
+        >
+          <h2 className="text-lg font-bold flex items-center justify-between mb-4 sm:flex-col sm:items-start sm:mb-2">
+            <Link
+              to="#user@123"
+              className="hover:text-indigo-600 hover:underline sm:mb-2"
+            >
+              user@123
+            </Link>
+            <span className="text-sm text-gray-500">22 Jan 10:20 am</span>
+          </h2>
+          <p className="py-4 px-6 bg-gray-50 rounded-lg shadow-sm sm:py-2 sm:px-4">
+            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.
+          </p>
+          <div className="flex items-center justify-between mt-4">
+            <div>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full mr-2">
+                Like
+              </button>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full mr-2">
+                Comment
+              </button>
+              <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full">
+                Share
+              </button>
+            </div>
+
+            {/* it shows how may comments are there */}
+            <div className="text-sm text-gray-500">
+              1 comment</div>
+          </div>
+          <div className="mt-4 bg-white p-4 rounded-lg shadow-sm">
+            <h3 className="text-lg font-bold mb-2 text-gray-700">Comments</h3>
+            <div className="bg-gray-100 p-4 rounded-lg">
+              <span><Link to="#userWhoCommented" className="text-sm underline text-blue-600">@userWhoCommented</Link></span>
+              {/* his / her comments */}
+              <p>Comment no. 1</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Community;