From 46860ed59427301fa716105d2bebd5d60ea70b57 Mon Sep 17 00:00:00 2001
From: Nayan Mahera <maheranayan18@gmail.com>
Date: Sat, 12 Oct 2024 15:44:33 +0530
Subject: [PATCH 1/3] custom cursor added

---
 client/package-lock.json |  10 ++
 client/package.json      |   1 +
 client/src/App.jsx       | 315 ++++++++++++++++++++++++++++++---------
 client/src/index.css     |  83 ++++++-----
 client/src/main.jsx      |  12 +-
 5 files changed, 305 insertions(+), 116 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index b9d9209..9f66c5d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -36,6 +36,7 @@
         "otp-input-react": "^0.3.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-animated-cursor": "^2.11.2",
         "react-bootstrap": "^2.10.2",
         "react-dom": "^18.2.0",
         "react-google-recaptcha": "^3.1.0",
@@ -7591,6 +7592,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-animated-cursor": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/react-animated-cursor/-/react-animated-cursor-2.11.2.tgz",
+      "integrity": "sha512-LV0PtST61tdeW/chCqFt1JLp6i0d5fD9v2uradBcPAkKKCi2Iw7sAcD11ADS1TjXPPj9MOoD9YubEt++/IbZ+g==",
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/react-async-script": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
diff --git a/client/package.json b/client/package.json
index 336849e..f0c76dd 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,6 +38,7 @@
     "otp-input-react": "^0.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-animated-cursor": "^2.11.2",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 1b93f97..d99a553 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,66 +1,66 @@
-import { useEffect, useState } from 'react';
-import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
-import './App.css';
-import './index.css';
-import LoadingBar from 'react-top-loading-bar';
-import About from './component/About';
-import Alert from './component/Alert';
-import Footer from './component/Footer';
-import Home from './component/Home';
-import Login from './component/Login';
-import Navbar from './component/Navbar';
-import Signup from './component/Signup';
-import ProjectState from './context/ProjectState';
-import ProfileState from './context/ProfileState';
-import CodeOfConduct from './component/Footers/Codeofconduct';
-import Feedback from './component/Footers/Feedback';
-import ContactUs from './component/Footers/Contactus';
-import PrivacyPolicy from './component/Footers/Privacypolicy';
-import TermOfUse from './component/Footers/TermOfUse';
-import Community from './component/Community';
-import MyProfile from './component/MyProfile';
-import ScrollTop from './component/ScrollTop';
-import EditProfile from './component/EditProfile';
-import Contributers from './component/Contributers';
-import Discussion from './component/Discussion';
-import { useAtom } from 'jotai';
-import { modeAtom } from './atom/Atom';
-import ForgotPassword from './component/forgotpass';
-import VerifyEmail from './component/Verify';
-import NotFound from './component/NotFound';
+import { useEffect, useState } from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useLocation,
+} from "react-router-dom";
+import "./App.css";
+import "./index.css";
+import LoadingBar from "react-top-loading-bar";
+import About from "./component/About";
+import Alert from "./component/Alert";
+import Footer from "./component/Footer";
+import Home from "./component/Home";
+import Login from "./component/Login";
+import Navbar from "./component/Navbar";
+import Signup from "./component/Signup";
+import ProjectState from "./context/ProjectState";
+import ProfileState from "./context/ProfileState";
+import CodeOfConduct from "./component/Footers/Codeofconduct";
+import Feedback from "./component/Footers/Feedback";
+import ContactUs from "./component/Footers/Contactus";
+import PrivacyPolicy from "./component/Footers/Privacypolicy";
+import TermOfUse from "./component/Footers/TermOfUse";
+import Community from "./component/Community";
+import MyProfile from "./component/MyProfile";
+import ScrollTop from "./component/ScrollTop";
+import EditProfile from "./component/EditProfile";
+import Contributers from "./component/Contributers";
+import Discussion from "./component/Discussion";
+import { useAtom } from "jotai";
+import { modeAtom } from "./atom/Atom";
+import ForgotPassword from "./component/forgotpass";
+import VerifyEmail from "./component/Verify";
+import NotFound from "./component/NotFound";
+import AnimatedCursor from "react-animated-cursor";
+
 // Main Layout Component
 const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
   const location = useLocation(); // Use location inside Router
-  
+
   // Define routes where the footer or navbar should not be shown
-  const hideNavbarRoutes = ['/login', '/signup'];
-  const hideFooterRoutes = ['/login', '/signup'];
+  const hideNavbarRoutes = ["/login", "/signup"];
+  const hideFooterRoutes = ["/login", "/signup"];
 
   return (
     <>
       {/* Conditionally render the Navbar */}
-      {!hideNavbarRoutes.includes(location.pathname) && (
-        <Navbar 
-        />
-      )}
+      {!hideNavbarRoutes.includes(location.pathname) && <Navbar />}
 
       {/* Main content */}
       {children}
 
       {/* Conditionally render the Footer */}
       {!hideFooterRoutes.includes(location.pathname) && (
-        <Footer 
-          mode={mode} 
-          setProgress={setProgress} 
-          setAlert={showAlert} 
-        />
+        <Footer mode={mode} setProgress={setProgress} setAlert={showAlert} />
       )}
     </>
   );
 };
 
 function App() {
-  const [mode]= useAtom(modeAtom)
+  const [mode] = useAtom(modeAtom);
   const [alert, setAlert] = useState(null);
   const showAlert = (message, type) => {
     setAlert({ msg: message, type: type });
@@ -69,34 +69,51 @@ function App() {
     }, 1500);
   };
 
-  
   const [progress, setProgress] = useState(0);
 
   useEffect(() => {
-    localStorage.setItem('mode', mode);
+    localStorage.setItem("mode", mode);
   }, [mode]);
 
   const toggleMode = () => {
-    if (mode === 'light') {
-      setMode('dark');
-      document.body.style.backgroundColor = 'black';
-      document.querySelectorAll('*').forEach(element => element.style.color = 'white');
+    if (mode === "light") {
+      setMode("dark");
+      document.body.style.backgroundColor = "black";
+      document
+        .querySelectorAll("*")
+        .forEach((element) => (element.style.color = "white"));
       showAlert("Dark Mode Enabled", "success");
     } else {
-      setMode('light');
-      document.body.style.backgroundColor = 'white';
-      document.querySelectorAll('*').forEach(element => element.style.color = '');
+      setMode("light");
+      document.body.style.backgroundColor = "white";
+      document
+        .querySelectorAll("*")
+        .forEach((element) => (element.style.color = ""));
       showAlert("Light Mode Enabled", "success");
     }
   };
 
   return (
     <div>
+      <AnimatedCursor
+        innerSize={8}
+        outerSize={35}
+        innerScale={1}
+        outerScale={2}
+        outerAlpha={0}
+        hasBlendMode={true}
+        innerStyle={{
+          backgroundColor: "var(--cursor-color)",
+        }}
+        outerStyle={{
+          border: "3px solid var(--cursor-color)",
+        }}
+      />
       <ProjectState>
         <ProfileState>
           <Router>
             <LoadingBar
-              color='blue'
+              color="blue"
               progress={progress}
               onLoaderFinished={() => setProgress(0)}
             />
@@ -106,28 +123,182 @@ function App() {
             <ScrollTop />
 
             {/* Wrap everything inside the Layout component */}
-            <Layout mode={mode} setProgress={setProgress} toggleMode={toggleMode} showAlert={showAlert}>
+            <Layout
+              mode={mode}
+              setProgress={setProgress}
+              toggleMode={toggleMode}
+              showAlert={showAlert}
+            >
               <Routes>
-                <Route exact path="/" element={<Home mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/discussion" element={<Discussion mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/community" element={<Community mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/about" element={<About mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/myprofile" element={<MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/editprofile" element={<EditProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/contributers" element={<Contributers mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/login" element={<Login mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/signup" element={<Signup mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/ForgotPassword" element={<ForgotPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/codeofconduct" element={<CodeOfConduct mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/feedback" element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/contactus" element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/privacypolicy" element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/termofuse" element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/verify/:token" element={<VerifyEmail/>} />
+                <Route
+                  exact
+                  path="/"
+                  element={
+                    <Home
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/discussion"
+                  element={
+                    <Discussion
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/community"
+                  element={
+                    <Community
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/about"
+                  element={
+                    <About
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/myprofile"
+                  element={
+                    <MyProfile
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/editprofile"
+                  element={
+                    <EditProfile
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/contributers"
+                  element={
+                    <Contributers
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/login"
+                  element={
+                    <Login
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/signup"
+                  element={
+                    <Signup
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/ForgotPassword"
+                  element={
+                    <ForgotPassword
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/codeofconduct"
+                  element={
+                    <CodeOfConduct
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/feedback"
+                  element={
+                    <Feedback
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/contactus"
+                  element={
+                    <ContactUs
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/privacypolicy"
+                  element={
+                    <PrivacyPolicy
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/termofuse"
+                  element={
+                    <TermOfUse
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route exact path="/verify/:token" element={<VerifyEmail />} />
                 {/* 404 Route */}
-                <Route exact path="*" element={<NotFound/>} /> 
+                <Route exact path="*" element={<NotFound />} />
               </Routes>
-                
             </Layout>
           </Router>
         </ProfileState>
diff --git a/client/src/index.css b/client/src/index.css
index 6df5df8..dae3ff7 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -2,43 +2,50 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  --cursor-color: #333
+}
+
+html.dark-mode {
+  --cursor-color: #fff
+}
 
 .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-  }
-  
-  .modal-content {
-    width: 400px;
-    background-color: white;
-    padding: 40px;
-    border-radius: 10px;
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    text-align: center;
-  }
-  
-  .modal-content h3 {
-    margin-bottom: 15px;
-  }
-  
-  .modal-content button {
-    background-color: #007bff;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  
-  .modal-content button:hover {
-    background-color: #0056b3;
-  }
-  
\ No newline at end of file
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  /* Semi-transparent background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  width: 400px;
+  background-color: white;
+  padding: 40px;
+  border-radius: 10px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.modal-content h3 {
+  margin-bottom: 15px;
+}
+
+.modal-content button {
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.modal-content button:hover {
+  background-color: #0056b3;
+}
\ No newline at end of file
diff --git a/client/src/main.jsx b/client/src/main.jsx
index bf98035..5977e23 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,9 +1,9 @@
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <>
     <App />
-  </>,
-)
+  </>
+);

From d04724d014ae5aafd98446b53d5a316dffe101fc Mon Sep 17 00:00:00 2001
From: Jay-1409 <jay_shah@outlook.in>
Date: Sat, 12 Oct 2024 15:55:22 +0530
Subject: [PATCH 2/3] Upgraded the feedback form and its UI

---
 client/src/component/Footers/Feedback.jsx | 114 ++++++++++++++++------
 client/src/component/css/Feedback.css     |  84 ++++++++++------
 2 files changed, 139 insertions(+), 59 deletions(-)

diff --git a/client/src/component/Footers/Feedback.jsx b/client/src/component/Footers/Feedback.jsx
index ad2681d..0139c80 100644
--- a/client/src/component/Footers/Feedback.jsx
+++ b/client/src/component/Footers/Feedback.jsx
@@ -1,4 +1,3 @@
-import '../css/Feedback.css'; // Import CSS file for styling
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 
@@ -7,8 +6,8 @@ function Feedback(props) {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (isSubmitting) return; // If already submitting, do nothing
-    setIsSubmitting(true); // Set isSubmitting to true to disable the button
+    if (isSubmitting) return;
+    setIsSubmitting(true);
 
     const scriptURL = 'https://script.google.com/macros/s/AKfycbxJzYGZE0R6W2ZLGbJZlUoxNwWShpAYhcJY4zBM9LOycb7iiM4vncS1fbSpVnIXwKIU/exec';
     const form = document.forms['submit-to-google-sheet'];
@@ -16,39 +15,94 @@ function Feedback(props) {
     fetch(scriptURL, { method: 'POST', body: new FormData(form) })
       .then(response => {
         form.reset();
-        setIsSubmitting(false); // Re-enable the button
-        props.showAlert("Form Submitted Successfully", "success");
-        console.log('Success!', response);
+        setIsSubmitting(false);
+        props.showAlert("Feedback Submitted Successfully", "success");
       })
       .catch(error => {
-        setIsSubmitting(false); // Re-enable the button
-        props.showAlert("Form Submission Failed", "danger");
-        console.error('Error!', error.message);
+        setIsSubmitting(false);
+        props.showAlert("Feedback Submission Failed", "danger");
       });
   };
 
   return (
-    <div className='feedback-main-box'>
-      <h2 className="text-center Heading-Page">Feedback</h2>
-      <form className="feedback-container container mt-4" name="submit-to-google-sheet" onSubmit={handleSubmit}>
-        <div className="mb-3">
-          <label htmlFor="Name" className="form-label">Name:</label>
-          <input type="text" id="Name" name='Name' className="form-control" placeholder='Enter your name here *' required='true' />
-        </div>
-        <div className="mb-3">
-          <label htmlFor="Email" className="form-label">Email:</label>
-          <input type="email" id="Email" name='Email' className="form-control" placeholder='Enter your email here' required='true' />
-        </div>
-        <div className="mb-3">
-          <label htmlFor="Rating" className="form-label">Rating &nbsp;(1-10):</label>
-          <input type="number" id="Rating" name='Rating' className="form-control" placeholder='Enter your rating here' min={0} max={10}/>
-        </div>
-        <div className="mb-3">
-          <label htmlFor="Feedback" className="form-label">Feedback:</label>
-          <textarea
-            id="Feedback" className="form-control" name='Feedback' rows="5" placeholder='Enter your feedback here' required='true' ></textarea>
-        </div>
-        <button className="btn btn-primary" type="submit" disabled={isSubmitting} style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black', outline: props.mode=== 'dark' ? '2px solid white': '2px solid black'}}>Submit</button>
+    <div className="max-w-10xl mx-auto p-52 bg-white shadow-lg rounded-lg"
+      style={{ 
+        backgroundImage: `url('https://static.vecteezy.com/system/resources/previews/007/353/647/large_2x/blue-wrinkled-paper-background-with-abstract-seamless-pattern-crumpled-paper-texture-photo.jpg')`,
+        backdropFilter: 'blur(10px)',
+        backgroundColor: 'rgba(255, 255, 255, 0.7)', // Frosted glass effect
+        border: '1px solid rgba(255, 255, 255, 0.18)',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+      }}
+    >
+      <h2 className="text-center text-3xl font-bold text-gray-800 mb-8">We Value Your Feedback</h2>
+      <form name="submit-to-google-sheet" onSubmit={handleSubmit} className="space-y-6">
+        
+        {/* Name Field */}
+        <div>
+          <label htmlFor="Name" className="block text-sm font-medium text-gray-700">Name:</label>
+          <input type="text" id="Name" name="Name" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Enter your name *" required />
+        </div>
+
+        {/* Email Field */}
+        <div>
+          <label htmlFor="Email" className="block text-sm font-medium text-gray-700">Email:</label>
+          <input type="email" id="Email" name="Email" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Enter your email *" required />
+        </div>
+
+        {/* Subject or Topic */}
+        <div>
+          <label htmlFor="Subject" className="block text-sm font-medium text-gray-700">Subject or Topic:</label>
+          <input type="text" id="Subject" name="Subject" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Specify the subject (e.g., design, content)" required />
+        </div>
+
+        {/* Date of Visit */}
+        <div>
+          <label htmlFor="Date" className="block text-sm font-medium text-gray-700">Date of Visit:</label>
+          <input type="date" id="Date" name="Date" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required />
+        </div>
+
+        {/* Device Used */}
+        <div>
+          <label htmlFor="Device" className="block text-sm font-medium text-gray-700">Device Used:</label>
+          <select id="Device" name="Device" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required>
+            <option value="Desktop">Desktop</option>
+            <option value="Tablet">Tablet</option>
+            <option value="Mobile">Mobile</option>
+          </select>
+        </div>
+
+        {/* Rating System */}
+        <div>
+          <label htmlFor="Rating" className="block text-sm font-medium text-gray-700">Rating (1-10):</label>
+          <input type="range" id="Rating" name="Rating" min={1} max={10} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg focus:outline-none bg-white bg-opacity-70" />
+        </div>
+
+        {/* Suggestions for Improvement */}
+        <div>
+          <label htmlFor="Suggestions" className="block text-sm font-medium text-gray-700">Suggestions for Improvement:</label>
+          <textarea id="Suggestions" name="Suggestions" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" rows="4" placeholder="Provide suggestions for improvement" required></textarea>
+        </div>
+
+        {/* Priority Level */}
+        <div>
+          <label htmlFor="Priority" className="block text-sm font-medium text-gray-700">Priority Level:</label>
+          <select id="Priority" name="Priority" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required>
+            <option value="Low">Low</option>
+            <option value="Medium">Medium</option>
+            <option value="High">High</option>
+          </select>
+        </div>
+
+        {/* Feedback Text */}
+        <div>
+          <label htmlFor="Feedback" className="block text-sm font-medium text-gray-700">Feedback:</label>
+          <textarea id="Feedback" name="Feedback" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" rows="4" placeholder="Enter your feedback here" required></textarea>
+        </div>
+
+        {/* Submit Button */}
+        <button type="submit" disabled={isSubmitting} className="w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+          {isSubmitting ? 'Submitting...' : 'Submit'}
+        </button>
       </form>
     </div>
   );
diff --git a/client/src/component/css/Feedback.css b/client/src/component/css/Feedback.css
index 5185c5e..564cd14 100644
--- a/client/src/component/css/Feedback.css
+++ b/client/src/component/css/Feedback.css
@@ -1,40 +1,66 @@
-.rating-container {
+.feedback-main-box {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+
+.heading-page {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.feedback-container {
   display: flex;
-  justify-content: center;
-  /* Add space between rating buttons */
-  gap: 10px;
+  flex-direction: column;
 }
 
-.star {
-  background-color: transparent;
-  border: none;
-  font-size: 50px;
-  cursor: pointer;
-  /* Smooth transition for color change */
-  transition: color 0.3s ease;
+.form-group {
+  margin-bottom: 15px;
 }
 
-.star:hover,
-.star.active {
-  /* Change color to gold on hover and when active */
-  color: gold;
+.form-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: #555;
 }
 
-.feedback-main-box {
-  margin-top: 100px;
-  margin-bottom: 40px;
+.form-control {
+  width: 100%;
+  padding: 10px;
+  font-size: 1rem;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  transition: border-color 0.2s ease;
 }
 
-.feedback-container {
-  /* Add border to the container */
-  border: 2px solid #ccc;
-  /* Add padding to the container */
-  padding: 20px;
-  /* Add border radius for rounded corners */
-  border-radius: 8px;
+.form-control:focus {
+  border-color: #4a90e2;
+  outline: none;
 }
 
-.form-label {
-  /* Make form labels bold */
-  font-weight: bold;
-}
\ No newline at end of file
+.form-range {
+  width: 100%;
+}
+
+.btn-submit {
+  padding: 12px 20px;
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 5px;
+  background-color: #4a90e2;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.btn-submit:disabled {
+  background-color: #aaa;
+}
+
+.btn-submit:hover {
+  background-color: #357ABD;
+}

From 4d1e4779c550fe626119fd39273c389bb7b0551a Mon Sep 17 00:00:00 2001
From: say-het <iam.lover.of.nature99@gmail.com>
Date: Sat, 12 Oct 2024 16:07:23 +0530
Subject: [PATCH 3/3] Added share feature

---
 client/package-lock.json       | 36 +++++++++++----------
 client/package.json            |  3 +-
 client/src/component/Home.jsx  | 18 +++--------
 client/src/component/Share.jsx | 59 ++++++++++++++++++++++++++++++++++
 client/src/component/share.css |  5 +++
 5 files changed, 89 insertions(+), 32 deletions(-)
 create mode 100644 client/src/component/Share.jsx
 create mode 100644 client/src/component/share.css

diff --git a/client/package-lock.json b/client/package-lock.json
index b9d9209..c16bb88 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -44,11 +44,12 @@
         "react-phone-input-2": "^2.15.1",
         "react-phone-number-input": "^3.3.10",
         "react-router-dom": "^6.22.3",
+        "react-toastify": "^10.0.5",
         "react-toggle": "^4.1.3",
         "react-top-loading-bar": "^2.3.1",
         "socket.io": "^4.7.5",
         "socket.io-client": "^4.7.5",
-        "sort-by": "^1.2.0",
+        "sort-by": "^0.0.2",
         "yup": "^1.4.0"
       },
       "devDependencies": {
@@ -6362,15 +6363,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/object-path": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.6.0.tgz",
-      "integrity": "sha512-fxrwsCFi3/p+LeLOAwo/wyRMODZxdGBtUlWRzsEpsUVrisZbEfZ21arxLGfaWfcnqb8oHPNihIb4XPE8CQPN5A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/object.assign": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
@@ -7805,6 +7797,19 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-toggle": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
@@ -8290,13 +8295,10 @@
       }
     },
     "node_modules/sort-by": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/sort-by/-/sort-by-1.2.0.tgz",
-      "integrity": "sha512-aRyW65r3xMnf4nxJRluCg0H/woJpksU1dQxRtXYzau30sNBOmf5HACpDd9MZDhKh7ALQ5FgSOfMPwZEtUmMqcg==",
-      "license": "MIT",
-      "dependencies": {
-        "object-path": "0.6.0"
-      }
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/sort-by/-/sort-by-0.0.2.tgz",
+      "integrity": "sha512-iOX5oHA4a0eqTMFiWrHYqv924UeRKFBLhym7iwSVG37Egg2wApgZKAjyzM9WZjMwKv6+8Zi+nIaJ7FYsO9EkoA==",
+      "license": "MIT"
     },
     "node_modules/source-map": {
       "version": "0.5.7",
diff --git a/client/package.json b/client/package.json
index 336849e..ab8df2e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -46,11 +46,12 @@
     "react-phone-input-2": "^2.15.1",
     "react-phone-number-input": "^3.3.10",
     "react-router-dom": "^6.22.3",
+    "react-toastify": "^10.0.5",
     "react-toggle": "^4.1.3",
     "react-top-loading-bar": "^2.3.1",
     "socket.io": "^4.7.5",
     "socket.io-client": "^4.7.5",
-    "sort-by": "^1.2.0",
+    "sort-by": "^0.0.2",
     "yup": "^1.4.0"
   },
   "devDependencies": {
diff --git a/client/src/component/Home.jsx b/client/src/component/Home.jsx
index aae4fa7..6613b82 100644
--- a/client/src/component/Home.jsx
+++ b/client/src/component/Home.jsx
@@ -2,7 +2,7 @@ import './css/Home.css'
 import PropTypes from 'prop-types';
 import HeroImg from '../assets/images/Vector Gif/Hero.gif'
 import Learn from '../assets/images/Learn.png'
-import Share from '../assets/images/Share.png'
+import ShareComponent from './Share';
 import Grow from '../assets/images/Grow.png'
 import glichBitboxGif from '../assets/images/Other Gifs/Bitbox Glitch.gif'
 import CardsPage from './HomePage/Card';
@@ -71,19 +71,9 @@ const Home = (props) => {
                             </div>
                         </div>
                     </div>
-                    <div className="container my-5">
-                        <div className="row">
-                            <div className="col-lg-6">
-                                <img className="w-100 rounded-5" src={Share} />
-                            </div>
-                            <div className="col-lg-6">
-                                <div className="p-5 mt-4">
-                                    <h1 className="display-4" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>Share</h1>
-                                    <p className="lead" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>🌐 Join the vibrant Bitbox Opensource Community today! Whether you&apos;re a seasoned developer or just starting out, there&apos;s a place for you to collaborate, innovate, and make a difference. Let&apos;s shape the future of digital exchange together! #BitboxCommunity #OpenSource 🚀💻 </p>
-                                    <a href="#" className="btn btn-outline-dark" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>Read More</a>
-                                </div>
-                            </div>
-                        </div>
+                    <div style={{color:'black'}}>
+
+                   <ShareComponent/>
                     </div>
                 </div>
             </section>
diff --git a/client/src/component/Share.jsx b/client/src/component/Share.jsx
new file mode 100644
index 0000000..ec1f8a2
--- /dev/null
+++ b/client/src/component/Share.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import Share from '../assets/images/Share.png';
+
+const ShareComponent = (props) => {
+  const handleShareClick = () => {
+    const shareLink = window.location.href;
+    navigator.clipboard.writeText(shareLink).then(() => {
+      toast.success('Link copied to clipboard!', {
+        position: 'top-right',
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        style: {
+          backgroundColor: '#fff',   // White background
+          color: '#000',             // Force black text color
+          fontWeight: 'bold',        // Optional: Make the text bold for better visibility
+        },
+        progressStyle: {
+          backgroundColor: '#000',   // Black progress bar
+        },
+      });
+    });
+  };
+
+  return (
+    <div className="container my-5">
+      <div className="row">
+        <div className="col-lg-6">
+          <img className="w-100 rounded-5" src={Share} alt="Share" />
+        </div>
+        <div className="col-lg-6">
+          <div className="p-5 mt-4">
+            <h1 className="display-4" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
+              Share
+            </h1>
+            <p className="lead" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
+              🌐 Join the vibrant Bitbox Opensource Community today! Whether you're a seasoned developer or just starting out, there's a place for you to collaborate,
+              innovate, and make a difference. Let's shape the future of digital exchange together! #BitboxCommunity #OpenSource 🚀💻
+            </p>
+            <button
+              onClick={handleShareClick}
+              className="btn btn-outline-dark"
+              style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}
+            >
+              Share Now
+            </button>
+          </div>
+        </div>
+      </div>
+      <ToastContainer />
+    </div>
+  );
+};
+
+export default ShareComponent;
diff --git a/client/src/component/share.css b/client/src/component/share.css
new file mode 100644
index 0000000..c448bfe
--- /dev/null
+++ b/client/src/component/share.css
@@ -0,0 +1,5 @@
+.toast-body-black-text {
+    color: #000 !important;    /* Force the toast body text color to black */
+    background-color: #fff !important;  /* Ensure white background */
+  }
+  
\ No newline at end of file