import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Home from './components/pages/Home';
import About from './components/pages/About';
import Contact from './components/pages/Contact';

function App() {
  return (
    <div className="App">
      
       <BrowserRouter>
       <Navbar/>
       <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/contact" element={<Contact/>}/>
       </Routes>
       </BrowserRouter>
       
    </div>
  );
}

export default App;

import React from 'react'
import {Link,NavLink} from 'react-router-dom';

// import Navbar from './Navbar';

const Navbar = () => {
  return (
    <div className='navbar_start'>
        
     <nav className="navbar navbar-expand-lg  p-4">
  <div className="container-fluid">
    <NavLink className="navbar-brand" to="/">

       

</NavLink>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarNav">

      <ul className="navbar-nav">

        <li className="nav-item">
          <NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
        </li>

        <li className="nav-item">
          <NavLink className="nav-link" exact to="/about">About</NavLink>
        </li>

        <li className="nav-item">
          <NavLink className="nav-link" exact to="/contact">Contact</NavLink>
        </li>
       
      </ul>
    </div>
    <Link className='btn btn-outline-primary' to='/user/add'>
        Add User
    </Link>

  </div>
     </nav>
     
    </div>
  )
}

export default Navbar

import React from 'react'

const Home = () => {
  return (
    <>
    <div class="px-4 py-5 my-5 text-center">
    

    <h1 class="display-5 fw-bold">Hellow People</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Getting Started</button>
        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Contact-Us</button>
      </div>
      
    </div>
  </div>
  </>
  )
}

export default Home

import React from 'react'

const About = () => {
  return (
    <>
    <div>
    <div className="container">
    <h1 className="mt-5">About Us</h1>
    <p className="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
  </div>
   
      </div>
    </>
  )
}

export default About

import React from 'react'

const Contact = () => {
  return (
    <>
    <div className='container form-signin w-100 m-auto text-center px-4 py-5 my-5 text-center'>
     <div className='row'>
    <main className=" ">
  <form>
  
    <h1 className="h3 mb-3 fw-normal">Please sign in</h1>

    <div className="form-floating">
      <input type="email" className="form-control" id="floatingInput" placeholder="name@example.com"/>
      <label for="floatingInput">Email address</label>
    </div>
    <div className="form-floating py-5">
      <input type="password" className="form-control" id="floatingPassword" placeholder="Password"/>
      <label for="floatingPassword">Password</label>
    </div>

    <div className="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me"/> Remember me
      </label>
    </div>
    <button className="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
    <p className="mt-5 mb-3 text-muted">© 2017–2022</p>
  </form>
</main>
</div>
</div>
</>
  )
}

export default Contact