Register page added

public/manifest.json

@@ -10,12 +10,12 @@
     {
       "src": "logo192.png",
       "type": "image/png",
-      "sizes": "192x192"
+      "sizes": "142x140"
     },
     {
       "src": "logo512.png",
       "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "142x140"
     }
   ],
   "start_url": ".",

src/App.js

@@ -11,6 +11,7 @@ import Payment from "./Payment";
 import Orders from "./Orders";
 import Header from "./Header";
 import Login from "./Login";
+import Register from "./Register"; 
 import Checkout from "./Checkout";
 import Product from "./Product";
 import "./App.css";
@@ -64,6 +65,7 @@ function App() {
           <Routes>
             <Route exact path="/" element={<Home />} />
             <Route exact path="/login" element={<Login />} />
+            <Route exact path="/register" element={<Register />} />
             <Route exact path="/checkout" element={<Checkout   
  />} />
             <Route exact path="/product" element={<Product   

src/Header.js

@@ -32,7 +32,7 @@ function Header() {
 
         <Link to="/checkout">
           <div className="header__optionBasket">
-            <ShoppingBasketIcon sx={{ fontSize: 45 }} /> 
+            <ShoppingBasketIcon sx={{ fontSize: 40 }} /> 
             <span className="header__optionLineTwo header__basketCount">{basket?.length}</span>
           </div>
         </Link>

src/Login.js

@@ -95,7 +95,10 @@ function Login() {
                     see our Privacy Notice, our Cookies Notice and our Interest-Based Ads Notice.
                 </p>
 
-                <button onClick={register} className='login__registerButton'>Create your Gruham Account</button>
+                <button onClick={() => navigate('/register')} className='login__registerButton'>
+                    Create your Gruham Account
+                </button>
+
             </div>
         </div>
     );

src/Register.css

@@ -0,0 +1,57 @@
+.register {
+    background-color: white;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.register__logo {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    object-fit: contain;
+    width: 200px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.register__container {
+    width: 300px;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+    border: 1px solid lightgray;
+    padding: 20px;
+}
+
+.register__container > h1 {
+    font-weight: 500;
+    margin-bottom: 20px;
+}
+
+.register__container > form > h5 {
+    margin-bottom: 5px;
+}
+
+.register__container > form > input {
+    height: 30px;
+    margin-bottom: 10px;
+    background-color: white;
+    width: 98%;
+}
+
+.register__registerButton {
+    background-color: #f0c14b;
+    border-radius: 2px;
+    width: 100%;
+    height: 30px;
+    border: 1px solid;
+    margin-top: 10px;
+    border-color: #a88734 #9c7e31 #846a29;
+}
+
+.register__container > p {
+    margin-top: 15px;
+    font-size: 12px;
+}

src/Register.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from "react-router-dom";
+import { auth } from "./firebase";
+import './Register.css';
+import { useStateValue } from './StateProvider';
+
+function Register() {
+    const navigate = useNavigate();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [{}, dispatch] = useStateValue(); 
+
+    const register = e => {
+        e.preventDefault();
+
+        // Firebase registration logic
+        auth
+            .createUserWithEmailAndPassword(email, password)
+            .then((auth) => {
+                if (auth) {
+                    dispatch({
+                        type: 'SET_USER',
+                        user: auth.user, // Send the registered user's info
+                    });
+                    navigate('/');
+                }
+            })
+            .catch(error => alert(error.message));
+    }
+
+    return (
+        <div className='register'>
+            <Link to='/'>
+                <img
+                    className="register__logo"
+                    src='https://i.ibb.co/9q1pG9C/logo-removebg-preview.png' 
+                    alt="Gruham Logo"
+                />
+            </Link>
+
+            <div className='register__container'>
+                <h1>Create an Account</h1>
+
+                <form>
+                    <h5>E-mail</h5>
+                    <input type='text' value={email} onChange={e => setEmail(e.target.value)} />
+
+                    <h5>Password</h5>
+                    <input type='password' value={password} onChange={e => setPassword(e.target.value)} />
+
+                    <button type='submit' onClick={register} className='register__registerButton'>
+                        Create Account
+                    </button>
+                </form>
+
+                <p>
+                    By creating an account, you agree to the Gruham Conditions of Use & Sale.
+                </p>
+            </div>
+        </div>
+    );
+}
+
+export default Register;