Notes

// App.js
import {Routes, Route} from 'react-router-dom'
import HomePage from './pages/HomePage';
import About from './pages/About';
import Contact from './pages/Contact';
import Policy from './pages/Policy';
import Pagenotfound from './pages/Pagenotfound';
import Register from './pages/Auth/Register';
function App() {
return (
<>
<Routes>
<Route path = "/" element = {<HomePage />}/>
<Route path = "/Register" element = {<Register />}/>
<Route path = "/about" element = {<About />}/>
<Route path = "/Contact" element = {<Contact />}/>
<Route path = "/Policy" element = {<Policy />}/>
<Route path = "*" element = {<Pagenotfound />}/>
</Routes>
</>
);
}

export default App;

//index.js
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,300;0,400;1,700&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* .poppins-light {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
}

.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
} */

/* Nav bar css */

.navbar{
font-family: "Poppins", sans-serif ;
font-size: 17px;
line-height: 26px;
text-transform: uppercase;
box-shadow: 0 8px 6px gray;
-webkit-box-shadow:0 8px 6px gray;
border-bottom: 0.3px solid gray !important;
}

.nav-link{
font-weight: 300 !important;
}

.active{
border-radius: 2px solid black;
}

.navbar-brand{
font-weight: 700 !important;
font-family: 'roboto', sans-serif;
letter-spacing: 3px;
}

navbar-brand:hover{
color: #434343;
border-bottom: 1px solid;
}
/* footerclass */

.footer{
color: white;
padding: 25px;
background: -webkit-linear-gradient(
to right
#434343,
#000000
);
background: linear-gradient(to right, #434343 , #000000);
}

.footer a{
text-decoration: none;
color: aliceblue;
padding: 10px;
}

.footer a:hover{
color: #ffefba;
border-bottom: 1px solid;

}

/* page not found */

.pnf{
display: flex;
min-height: 65vh;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pnf-title{
font-size: 100px;
font-weight: 700;
}

.pnf-heading{
font-weight: normal;
}
.pnf-button{
color: #000000;
border: 3px solid black;
text-decoration: none;
padding: 10px;
margin-top: 10px;
}

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400&display=swap");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* font-family: 'Poppins', sans-serif; */
/* font-family: 'Playfair Display', serif; */

/* //navbar css */
.navbar {
font-family: "Poppins", sans-serif;
font-size: 17px;
line-height: 26px;
text-transform: uppercase;
box-shadow: 0 8px 6px -6px gray;
--webkit-box-shadow: 0 8px 6px -6px gray;
border-bottom: solid gray !important;
}

.nav-link {
font-weight: 300 !important;
}

.active {
border-bottom: 2px solid black;
}

.navbar-brand {
font-weight: 700;
font-family: "roboto", sans-serif;
letter-spacing: 3px;
}
/* =============================
==========footer============= */

.footer {
color: white;
padding: 25px;
background: #000000; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#434343,
#000000
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #434343, #000000);
}

.footer a {
text-decoration: none;
color: white;
padding: 10px;
}

.footer a:hover {
color: #ffefba;
border-bottom: 1px solid #ffefba;
}
/* =================================
======== page not found css ======= */
.pnf {
display: flex;
min-height: 65vh;
flex-direction: column;
align-items: center;
justify-content: center;
}

.pnf-title {
font-size: 100px;
font-weight: 700;
}

.pnf-heading {
font-weight: normal;
}

.pnf-btn {
color: black;
border: 1px solid black;
text-decoration: none;
padding: 10px;
margin-top: 10px;
}
.pnf-btn:hover {
background-color: black;
color: white;
}
/* ========================================= */
/* =========contact us ========= */
.contactus {
margin: 0;
padding: 0;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
}

/* Register */

.register{
display: flex;
align-items: center;
justify-content: center;
height: 70vh;
flex-direction: column;
}

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

//About.js

import React from 'react'
import Layout from '../components/layout/Layout'

const About = () => {
return (
<Layout>
<h1>About Us</h1>
</Layout>
)
}

export default About

//Contact.js

import React from 'react'
import Layout from '../components/layout/Layout'

const About = () => {
return (
<Layout>
<h1>About Us</h1>
</Layout>
)
}

export default About

//Homepage.js

import React from 'react'
import Layout from '../components/layout/Layout'

const HomePage = () => {
return (
<Layout>
<h1>HomePage</h1>
</Layout>

)
}

export default HomePage

//pagenotfound.js
import React from 'react'
import Layout from '../components/layout/Layout'
import {Link} from 'react-router-dom'
const Pagenotfound = () => {
return (
<Layout>
<div className='pnf'>
<h1 className='pnf-title'>404</h1>
<h2 className='pnf-heading' >Oops Page not found!</h2>
<Link to="/" className='pnf-button'>
Go Back
</Link>
</div>
</Layout>

)
}

export default Pagenotfound

//policy.js

import React from 'react'
import Layout from '../components/layout/Layout'
const Policy = () => {
return (
<Layout>
<h1>Policy</h1>
</Layout>
)
}

export default Policy

//Register.js

import React from 'react'
import Layout from '../../components/layout/Layout'
const Register = () => {
return (
<Layout title="Register Ecommerce">
<div className='register'>
<h1>Register Here</h1>
<form>
<div className="mb-3">
<input type="text" className="form-control" id="exampleInputName" placeholder='Enter your Name' />
</div>
<div className="mb-3">
<input type="text" className="form-control" id="exampleInputName" placeholder='Email' />
</div>
<div className="mb-3">
<input type="password" className="form-control" id="exampleInputPassword1" placeholder='Password' />
</div>
<div className="mb-3">
<input type="text" className="form-control" id="exampleInputName" placeholder='Phone' />
</div>
<div className="mb-3">

<input type="text" className="form-control" id="exampleInputName" placeholder='Address' />
</div>

<button type="submit" className="btn btn-primary">Submit</button>
</form>

</div>
</Layout>

)
}

export default Register
//footer.js

import React from 'react'
import { Link } from 'react-router-dom'
const Footer = () => {
return (
<div className='footer'>
<h1 className='text-center'>All Right Reserved &copy; Guvi</h1>
<p className="text-center mt-3">
<Link to="/about">About</Link>
|
<Link to="/contact">Contact</Link>
|
<Link to="/policy">Privacy Policy</Link>
</p>
</div>
)
}

export default Footer
//header.js

import React from 'react'
import {NavLink , Link} from 'react-router-dom'
import { MdOutlineShoppingCart } from "react-icons/md";
const Header = () => {
return (
<>
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarTogglerDemo01">
<Link to="/" className="navbar-brand"><MdOutlineShoppingCart/>Ecommerce App</Link>
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
<li className="nav-item">
<NavLink to="/" className="nav-link" aria-current="page">Home</NavLink>
</li>
<li className="nav-item">
<NavLink to="/category" className="nav-link">Category</NavLink>
</li>
<li className="nav-item">
<NavLink to="/register" className="nav-link" >Register</NavLink>
</li>
<li className="nav-item">
<NavLink to="/login" className="nav-link" >Login</NavLink>
</li>
<li className="nav-item">
<NavLink to="/cart" className="nav-link" >Cart (0)</NavLink>
</li>
</ul>
</div>
</div>
</nav>

</>
)
}

export default Header
//Layout.js
import React from 'react'
import Header from './Header'
import Footer from './Footer'
const Layout = ({children}) => {
return (
<div>
<Header/>
<main style={{minHeight: "70vh"}}>
{children}
</main>
<Footer/>
</div>
)
}

export default Layout