again trying to setup a routing for a seller-login but entire landing-page shutdown

src/App.jsx

 import React from "react";
 import Landing_page from "./component/landing_page";
-import { BrowserRouter } from "react-router-dom";
-import Router from "./component/route";
+import Seller_login from "./pages/seller_login";
+import { Router, Route, Routes } from "react-router-dom";
 
 function App() {
   return (
     <>
+      <Router>
+        <Routes>
+            <Route path="/seller-login" element={<Seller_login />} />
+        </Routes>
+      </Router> 
       <Landing_page />
-      <BrowserRouter>
-        <Router />
-      </BrowserRouter>
     </>
     
   );

src/component/bentobox.jsx

@@ -2,9 +2,15 @@ import React from "react";
 import first from "../assets/bento/image1.svg";
 import second from "../assets/bento/image3.svg";
 import third from "../assets/bento/image2.svg";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+
 
 function Bento() {
+    const navigate = useNavigate();
+    const goTo = () => {
+        navigate("/seller-login");
+};
+
     return (
         <>
    
@@ -18,9 +24,9 @@ function Bento() {
                         <div className="absolute inset-x-0 bottom-0 h-full flex flex-col items-center justify-center bg-black/40 bg-opacity-0 transform translate-y-full group-hover:translate-y-0 transition-transform duration-1000 ease-[cubic-bezier(0.4,0,0.2,1)]"  style={{
                                 background: "linear-gradient(to top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 70%)"
                             }}>
-                            <p className="text-white text-center font-extrabold text-6xl">
-                              <Link to={'/seller-login'} ><span className="block">Seller</span>
-                              <span className="block">Registration</span></Link>                              
+                            <p className="text-white text-center font-extrabold text-6xl cursor-pointer" onClick={goTo}>
+                                    <span className="block">Seller</span>
+                                    <span className="block">Registration</span>                              
                             </p>
                         </div>
                     </div>

src/component/route.jsx

-import { Routes, Route } from "react-router-dom";
-// Import components from the same folder
-import Seller_login from "./seller_login.jsx";
-
-function Router() {
-  return (
-    <Routes>
-      <Route path="/seller-login" element={<Seller_login />} />
-    </Routes>
-  );
-}
-
-export default Router;

src/main.jsx

@@ -2,9 +2,14 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import { BrowserRouter } from 'react-router-dom'
  
 createRoot(document.getElementById('root')).render(
-<StrictMode>
+//<StrictMode>
+  //<App />
+//</StrictMode>,
+
+<BrowserRouter>
   <App />
-</StrictMode>  
+</BrowserRouter>
 );