Feat/my account

package.json

@@ -18,9 +18,11 @@
     "custom-react-inner-image-zoom": "^3.0.6",
     "firebase": "^10.8.0",
     "leaflet": "^1.9.4",
+    "nanoid": "^5.0.7",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.4",
     "react-image-zoom": "^1.3.1",
     "react-inner-image-zoom": "^3.0.2",
     "react-lazy-load-image-component": "^1.6.0",
@@ -33,6 +35,7 @@
     "reactjs-image-zoom": "^1.0.8",
     "rn-range-slider": "^2.2.2",
     "styled-components": "^5.3.11",
+    "uuidv4": "^6.2.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -31,6 +31,7 @@ import MapComponent from "./components/map/ITEMmap";
 import SellerForm from "./pages/SellerRegistration";
 import { db } from "./firebase";
 import { collection, doc, getDocs } from "firebase/firestore";
+import {Account} from "./components/AccountDetails/Account";
 
 const MyContext = createContext();
 
@@ -248,6 +249,9 @@ function App() {
           />
           <Route exact={true} path="/cart" element={<Cart />} />
 
+
+          <Route exact={true} path="/account" element={<Account/>}/>
+
           {/* sign in , signup Protection */}
           {isLogin === null && (
             <Route exact={true} path="signIn" element={<SignIn />} />

src/components/AccountDetails/Account.css

@@ -0,0 +1,31 @@
+.cardwidth{
+    width: 50%;
+    height: auto;
+}
+
+.negmargin{
+    margin-top: -30%;
+}
+
+.profileImageP{
+    height: 200px;
+    width: 200px;
+    border-radius: 50%;
+}
+
+.imgbackground{
+    height: 400px;
+    width: 100vw;
+    opacity: 0.2;
+    filter: blur(3px);
+}
+
+@media only screen and (max-width: 600px) {
+    negmargin{
+        margin-top: -60%;
+        position: relative;
+    }
+}
+
+
+