diff --git a/src/components/Forget.js b/src/components/Forget.js index a2106cc..0119f05 100644 --- a/src/components/Forget.js +++ b/src/components/Forget.js @@ -2,94 +2,105 @@ import React from 'react'; import "./Login.css"; import Navbar from "./Navbar"; import { - Button, - Heading, - HStack, - Input, - InputGroup, - InputLeftElement, - Link, - VStack, + Button, + Heading, + HStack, + Input, + InputGroup, + InputLeftElement, + Link, + VStack, } from "@chakra-ui/react"; import { RiAccountPinBoxFill } from "react-icons/ri"; import { RiLockPasswordFill } from "react-icons/ri"; export default function Forget() { - return ( - <> - -
-
-
-
-

Add a crisp to your bulky documents !!

-

Welcome to the website

-
-
- - - FORGET PASSWORD - - - - } - /> - - - - - } - /> - - - - - - Remember? - - - -
-
-
- + return ( < + > + < + Navbar / > + < + div className = "login" > + < + div className = "login__container" > + < + div className = "login__containerTop" > + < + div className = "login__img" > < /div> < + p > Add a crisp to your bulky documents!! < /p> < + h4 > Welcome to the website < /h4> < / + div > < + div className = "login__containerBottom" > + < + VStack className = "input__container" + w = "65%" + m = "auto" > + < + Heading fontSize = "1.2rem" + color = "blue.500" + fontWeight = "semibold" + py = { 3 } > + FORGET PASSWORD < + /Heading> < + InputGroup w = "95%" + borderRadius = "full" + bgColor = "gray.200" > + < + InputLeftElement margin = "0 20px" + pointerEvents = "none" + children = { < + RiAccountPinBoxFill color = "#C6C6E8" + fontSize = "2.1rem" / > + } + /> < + Input required borderRadius = "full" + type = "tel" + placeholder = "Email Address" + paddingLeft = "60px" / + > + < + /InputGroup> < + InputGroup className = "login__input" + w = "95%" + borderRadius = "full" + bgColor = "gray.200" > + < + InputLeftElement margin = "0 20px" + pointerEvents = "none" + children = { < + RiLockPasswordFill color = "#C6C6E8" + fontSize = "2.1rem" / > + } + /> < + Input type = "tel" + required borderRadius = "full" + placeholder = "Password" + paddingLeft = "60px" / + > + < + /InputGroup> < + HStack className = "login__btn" + alignSelf = "flex-end" > + < + Button colorScheme = "pink" + px = "6" + size = "sm" + fontWeight = "bold" + className = "loginBtn" > + SUBMIT < + /Button> < + Link fontSize = "sm" + textDecoration = "underline" + color = "blue" > + < + a href = "/login" > Remember ? < /a> < / + Link > < + /HStack> < / + VStack > < + /div> < / + div > < + /div> < / + > ) -} - +} \ No newline at end of file diff --git a/src/components/Login.js b/src/components/Login.js index 787364d..a69c65f 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -2,98 +2,113 @@ import React from "react"; import "./Login.css"; import Navbar from "./Navbar"; import { - Button, - Heading, - HStack, - Input, - InputGroup, - InputLeftElement, - Link, - VStack, + Button, + Heading, + HStack, + Input, + InputGroup, + InputLeftElement, + Link, + VStack, } from "@chakra-ui/react"; import { RiAccountPinBoxFill } from "react-icons/ri"; import { RiLockPasswordFill } from "react-icons/ri"; function Login() { - return ( - <> - -
-
-
-
-

Add a crisp to your bulky documents !!

-

Welcome to the website

-
-
- - - USER LOGIN - - - - } - /> - - - - - } - /> - - - - Need Account ? - - - - - Forgot password? - - - -
-
-
- - ); + return ( < + > + < + Navbar / > + < + div className = "login" > + < + div className = "login__container" > + < + div className = "login__containerTop" > + < + div className = "login__img" > < /div> < + p > Add a crisp to your bulky documents!! < /p> < + h4 > Welcome to the website < /h4> < / + div > < + div className = "login__containerBottom" > + < + VStack className = "input__container" + w = "65%" + m = "auto" > + < + Heading fontSize = "1.2rem" + color = "blue.500" + fontWeight = "semibold" + py = { 3 } > + USER LOGIN < + /Heading> < + InputGroup w = "95%" + borderRadius = "full" + bgColor = "gray.200" > + < + InputLeftElement margin = "0 20px" + pointerEvents = "none" + children = { < + RiAccountPinBoxFill color = "#C6C6E8" + fontSize = "2.1rem" / > + } + /> < + Input borderRadius = "full" + type = "tel" + placeholder = "Username" + paddingLeft = "60px" / + > + < + /InputGroup> < + InputGroup className = "login__input" + w = "95%" + borderRadius = "full" + bgColor = "gray.200" > + < + InputLeftElement margin = "0 20px" + pointerEvents = "none" + children = { < + RiLockPasswordFill color = "#C6C6E8" + fontSize = "2.1rem" / > + } + /> < + Input type = "password" + borderRadius = "full" + placeholder = "Password" + paddingLeft = "60px" / + > + < + /InputGroup> < + Link fontSize = "sm" + textDecoration = "underline" + color = "blue" > + < + a href = "/register" > Need Account ? < /a> < / + Link > < + HStack className = "login__btn" + alignSelf = "flex-end" > + < + Button colorScheme = "pink" + px = "6" + size = "sm" + fontWeight = "bold" + className = "loginBtn" > + LOGIN < + /Button> < + Link fontSize = "sm" + textDecoration = "underline" + color = "blue" > + < + a href = "/forget" > Forgot password ? < /a> < / + Link > < + /HStack> < / + VStack > < + /div> < / + div > < + /div> < / + > + ); } -export default Login; +export default Login; \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 4b63159..c6cae0e 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,28 +1,60 @@ import React from "react"; import "./nav-head.css"; import "./Navbar.css"; -import { GrHome } from "react-icons/gr"; +import { GrContact, GrHome, GrLogin } from "react-icons/gr"; import { Button, Spacer, Flex, Stack, Box } from "@chakra-ui/react"; import { Link } from "react-router-dom"; import logo from "../assets/GitMarkonics_white.png"; function NavHeader() { - return ( - - - heading - - - - - - - - - ); + return ( < + Box className = "nav_header" + p = { 1 } > + < + Flex direction = "row " > + < + img src = { logo } + alt = "heading" + width = "100px" + className = "logo" / > + < + Spacer / > + < + Stack direction = "row" + spacing = { 2 } > + < + Link to = "/" > + < + Button leftIcon = { < GrHome / > } + colorScheme = "yellow" + variant = "solid" + className = "home" > + Home < + /Button> < / + Link > < + Link to = "/register" > + < + Button leftIcon = { < GrLogin / > } + colorScheme = "red" + variant = "solid" + className = "register" > + Register < + /Button> < / + Link > < + Link to = "/contactus" > + < + Button leftIcon = { < GrContact / > } + colorScheme = "green" + variant = "solid" + className = "contactus" > + ContactUs < + /Button> < / + Link > < + /Stack> < / + Flex > < + /Box> + ); } -export default NavHeader; +export default NavHeader; \ No newline at end of file diff --git a/src/components/NavbarContact.js b/src/components/NavbarContact.js new file mode 100644 index 0000000..ed64bff --- /dev/null +++ b/src/components/NavbarContact.js @@ -0,0 +1,60 @@ +import React from "react"; +import "./nav-head.css"; +import "./Navbar.css"; +import { GrHome, GrLogin } from "react-icons/gr"; +import { Button, Spacer, Flex, Stack, Box } from "@chakra-ui/react"; +import { Link } from "react-router-dom"; + +import logo from "../assets/GitMarkonics_white.png"; + +function NavHeader() { + return ( < + Box className = "nav_header" + p = { 1 } > + < + Flex direction = "row " > + < + img src = { logo } + alt = "heading" + width = "100px" + className = "logo" / > + < + Spacer / > + < + Stack direction = "row" + spacing = { 2 } > + < + Link to = "/" > + < + Button leftIcon = { < GrHome / > } + colorScheme = "purple" + variant = "solid" + className = "home" > + Home < + /Button> < + /Link> < + Link to = "/login" > + < + Button leftIcon = { < GrLogin / > } + colorScheme = "blue" + variant = "solid" + className = "login" > + Login < + /Button> < + /Link> < + Link to = "/register" > + < + Button leftIcon = { < GrLogin / > } + colorScheme = "orange" + variant = "solid" + className = "login" > + Register < + /Button> < + /Link> < + /Stack> < + /Flex> < + /Box> + ); +} + +export default NavHeader; \ No newline at end of file diff --git a/src/components/NavbarRegister.js b/src/components/NavbarRegister.js new file mode 100644 index 0000000..a9ebc09 --- /dev/null +++ b/src/components/NavbarRegister.js @@ -0,0 +1,60 @@ +import React from "react"; +import "./nav-head.css"; +import "./Navbar.css"; +import { GrContact, GrHome, GrLogin } from "react-icons/gr"; +import { Button, Spacer, Flex, Stack, Box } from "@chakra-ui/react"; +import { Link } from "react-router-dom"; + +import logo from "../assets/GitMarkonics_white.png"; + +function NavHeader() { + return ( < + Box className = "nav_header" + p = { 1 } > + < + Flex direction = "row " > + < + img src = { logo } + alt = "heading" + width = "100px" + className = "logo" / > + < + Spacer / > + < + Stack direction = "row" + spacing = { 2 } > + < + Link to = "/" > + < + Button leftIcon = { < GrHome / > } + colorScheme = "blue" + variant = "solid" + className = "home" > + Home < + /Button> < / + Link > < + Link to = "/login" > + < + Button leftIcon = { < GrLogin / > } + colorScheme = "yellow" + variant = "solid" + className = "login" > + Login < + /Button> < / + Link > < + Link to = "/contactus" > + < + Button leftIcon = { < GrContact / > } + colorScheme = "green" + variant = "solid" + className = "contactus" > + ContactUs < + /Button> < / + Link > < + /Stack> < / + Flex > < + /Box> + ); +} + +export default NavHeader; \ No newline at end of file diff --git a/src/components/Register.js b/src/components/Register.js index eaffcce..ff8ead7 100644 --- a/src/components/Register.js +++ b/src/components/Register.js @@ -1,130 +1,143 @@ import React from "react"; import "./register.css"; -import Navbar from "./Navbar"; +import Navbar from "./NavbarRegister"; import { - Button, - Heading, - HStack, - Input, - InputGroup, - InputLeftElement, - Link, - VStack, + Button, + Heading, + HStack, + Input, + InputGroup, + InputLeftElement, + Link, + VStack, } from "@chakra-ui/react"; import { BsFillPersonFill } from "react-icons/bs"; -import { BsFillLockFill} from "react-icons/bs"; +import { BsFillLockFill } from "react-icons/bs"; function Register() { - return ( - <> - -
-
-
-
-

Add a crisp to your bulky documents !!

-

Welcome to the website

-
-
- - - Register HERE - - - - - - - - } - /> - - - - - } - /> - - - - - } - /> - - - - Have Account? - - - - - -
-
-
- - ); + return ( < + > + < + Navbar / > + < + div className = "Register" > + < + div className = "Register__container" > + < + div className = "Register__containerTop" > + < + div className = "Register__img" > < /div> < + p > Add a crisp to your bulky documents!! < /p> < + h4 > Welcome to the website < /h4> < + /div> < + div className = "Register__containerBottom" > + < + VStack className = "input__container" + w = "65%" + m = "auto" > + < + Heading fontSize = "1.2rem" + color = "blue.500" + fontWeight = "semibold" + py = { 3 } > + Register HERE < + /Heading> < + InputGroup w = "95%" + borderRadius = "full" > + < + Input borderRadius = "full" + type = "tel" + placeholder = "First Name" + bgColor = "gray.200" / + > + < + Input borderRadius = "full" + type = "tel" + placeholder = "Last Name" + bgColor = "gray.200" + marginLeft = "4px" / + > + < + /InputGroup> < + InputGroup w = "95%" + borderRadius = "full" + bgColor = "gray.200" > + < + InputLeftElement margin = "0 20px" + pointerEvents = "none" + children = { < + BsFillPersonFill color = "#C6C6E8" + fontSize = "1.6rem" / > + } + /> < + Input borderRadius = "full" + type = "tel" + placeholder = "Username" + paddingLeft = "60px" / + > + < + /InputGroup> < + InputGroup className = "Register__input" + w = "95%" + borderRadius = "full" + bgColor = "gray.200" > + < + InputLeftElement margin = "0 20px" + pointerEvents = "none" + children = { < + BsFillLockFill color = "#C6C6E8" + fontSize = "1.4rem" / > + } + /> < + Input type = "password" + borderRadius = "full" + placeholder = "Password" + paddingLeft = "60px" / + > + < + /InputGroup> < + InputGroup className = "Register__input" + w = "95%" + borderRadius = "full" + bgColor = "gray.200" > + < + InputLeftElement margin = "0 20px" + pointerEvents = "none" + children = { < + BsFillLockFill color = "#C6C6E8" + fontSize = "1.4rem" / > + } + /> < + Input type = "password" + borderRadius = "full" + placeholder = " Confirm Password" + paddingLeft = "60px" / + > + < + /InputGroup> < + Link fontSize = "sm" + textDecoration = "underline" + color = "blue" > + < + a href = "/login" > Have Account ? < /a> < + /Link> < + HStack className = "Register__btn" + alignSelf = "flex-end" > + < + Button colorScheme = "pink" + px = "6" + size = "sm" + fontWeight = "bold" + className = "RegisterBtn" > + Register < + /Button> < + /HStack> < + /VStack> < + /div> < + /div> < + /div> < + /> + ); } -export default Register; +export default Register; \ No newline at end of file diff --git a/src/components/contactus.js b/src/components/contactus.js index 6e3c366..ba114ba 100644 --- a/src/components/contactus.js +++ b/src/components/contactus.js @@ -2,10 +2,13 @@ import React from "react"; import "./contactus.css"; import GitMarkonics from "../assets/GItMarkonIcsreadme.png" import { SocialIcon } from "react-social-icons"; +import Navbar from "./NavbarContact"; function ContactUs() { return ( < div className = "contact" > + < + Navbar / > < div className = "contact__Packet" > diff --git a/src/components/nav-head.js b/src/components/nav-head.js index b00d1b4..e4370a2 100644 --- a/src/components/nav-head.js +++ b/src/components/nav-head.js @@ -1,6 +1,6 @@ import React from "react"; import "./nav-head.css"; -import { GrLogin } from "react-icons/gr"; +import { GrContact, GrLogin } from "react-icons/gr"; import { Button, Spacer, Flex, Stack, Box } from "@chakra-ui/react"; import { Link } from "react-router-dom"; @@ -25,7 +25,7 @@ function NavHeader() { Link to = "/login" > < Button leftIcon = { < GrLogin / > } - colorScheme = "pink" + colorScheme = "blue" variant = "solid" > Login < /Button> < / @@ -39,8 +39,8 @@ function NavHeader() { Link > < Link to = "/contactus" > < - Button leftIcon = { < GrLogin / > } - colorScheme = "blue" + Button leftIcon = { < GrContact / > } + colorScheme = "red" variant = "solid" > ContactUs < /Button> < /