ReactPerso

import React from "react";
import { BrowserRouter as Router, Routes, Route, useNavigate, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Image from './Logo.png'
const Login = () => {
const navigate = useNavigate();
const handleLogin = (e) => {
e.preventDefault();
navigate("/home");
};

return (
<div className="login-container d-flex align-items-center justify-content-center">
<div className="login-box d-flex">
<div className="image-container">
<img src={Image} alt="BSNL" className="bsnl-logo" />
</div>
<div className="form-container p-4">
<h2 className="text-center mb-4">Login</h2>
<form onSubmit={handleLogin}>
<div className="mb-3">
<label className="form-label">Username</label>
<input type="text" className="form-control" required />
</div>
<div className="mb-3">
<label className="form-label">Password</label>
<input type="password" className="form-control" required />
</div>
<button type="submit" className="btn btn-primary w-100">Login</button>
</form>
</div>
</div>
</div>
);
};

const Navbar = () => (

<nav className="navbar navbar-expand-lg navbar-dark bg-primary"> <div className="container"> <Link className="navbar-brand" to="/">BSNL</Link> <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="navbarNav"> <ul className="navbar-nav"> <li className="nav-item"><Link className="nav-link" to="/home">Home</Link></li> <li className="nav-item"><Link className="nav-link" to="/about">About Us</Link></li> <li className="nav-item"><Link className="nav-link" to="/customer-care">Customer Care</Link></li> <li className="nav-item"><Link className="nav-link" to="/services">Services</Link></li> </ul> </div> </div> </nav> );

const Home = () => <div className="container mt-5"><h1>Welcome to BSNL</h1></div>;
const About = () => <div className="container mt-5"><h1>About Us</h1></div>;
const CustomerCare = () => <div className="container mt-5"><h1>Customer Care</h1></div>;
const Services = () => <div className="container mt-5"><h1>Services</h1></div>;

const App = () => {
return (
<Router>
{/* <Navbar /> */}
<Routes>
<Route path="/" element={<Login />} />
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/customer-care" element={<CustomerCare />} />
<Route path="/services" element={<Services />} />
</Routes>
</Router>
);
};

export default App;