Siddhesh.More/optifii-employee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

welcome page navigation complete

Browse Source
This commit is contained in:
priyanshuvish
2024-09-12 20:17:05 +05:30
parent f4dca08d0f
commit 0a3927ac97
11 changed files with 214 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@@ -17,7 +17,7 @@ import NoInternetScreen from "./Pages/NoInternetScreen";
import WelcomeToOptifii from "./Pages/Onboarding/WelcomeToOptifii";
import LoginPhoneNumber from "./Pages/Onboarding/LoginPhoneNumber";
import LoginEmailAddress from "./Pages/Onboarding/LoginEmailAddress";
import LoginEmailOtp from "./Pages/Onboarding/LoginEmailOtp";
import LoginEmailOtp from "./Pages/Onboarding/LoginOtp";
const App = () => {
// const { isAuthenticate } = useSelector((state) => state?.auth);

2
src/Pages/Onboarding/Footer.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react'
import { Box, Text, HStack, VStack, Link, Image, Divider, Stack, Container } from '@chakra-ui/react';
import o_logo from '../../assets/o_logo.png';
import o_logo from '../../assets/o_logo.svg';
import { FaDribbble, FaLinkedinIn } from "react-icons/fa";
import { GrInstagram } from "react-icons/gr";

2
src/Pages/Onboarding/Header.jsx
View File

@@ -2,7 +2,7 @@ import { Box, Container, HStack, Image, Text } from '@chakra-ui/react'
import React from 'react'
import SecondaryButton from '../../Components/Buttons/SecondaryButton'
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import optifii_logo from '../../assets/optifii_logo.png'
import optifii_logo from '../../assets/optifii_logo.svg'
const Header = () => {
return (

13
src/Pages/Onboarding/LoginEmailAddress.jsx
View File

@@ -4,15 +4,20 @@ import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import { HiOutlineMail } from "react-icons/hi";
import SecondaryButton from '../../Components/Buttons/SecondaryButton';
import LoginEmailAddressFrame from './LoginEmailAddressFrame';
import { useNavigate } from 'react-router-dom';
const LoginEmailAddress = () => {
const navigate = useNavigate();
return (
<LoginEmailAddressFrame>
<Container maxW={'container.xl'}>
<Box
w={"100%"}
my={5}
boxShadow={"md"}
>
<Container maxW={'container.xl'}>
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
<Box maxW={650} >
<Text
@@ -53,7 +58,9 @@ const LoginEmailAddress = () => {
<Box mt={6}>
<HStack justifyContent={"center"} mt={6} >
<PrimaryButton w={"300px"} title={"Send OTP"} />
<PrimaryButton
onClick={() => navigate("/login-otp")}
w={"300px"} title={"Send OTP"} />
</HStack>
<HStack justifyContent={"center"} mt={4} >
<Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
@@ -82,8 +89,8 @@ const LoginEmailAddress = () => {
</Box>
</Container>
</Box>
</Container>
</LoginEmailAddressFrame>
)
}

15
src/Pages/Onboarding/LoginEmailOtp.jsx → src/Pages/Onboarding/LoginOtp.jsx
View File

@@ -1,16 +1,17 @@
import React from 'react'
import { Box, Input, PinInput, PinInputField, Button, Text, Checkbox, HStack, Link, Container, InputGroup, InputLeftElement, Divider } from '@chakra-ui/react';
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import LoginEmailOtpFrame from './LoginEmailOtpFrame';
import LoginOtpFrame from './LoginOtpFrame';
const LoginEmailOtp = () => {
const LoginOtp = () => {
return (
<LoginEmailOtpFrame>
<LoginOtpFrame>
<Container maxW={'container.xl'}>
<Box
w={"100%"}
my={5}
boxShadow={"md"}
>
<Container maxW={'container.xl'}>
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
<Box maxW={650} >
<Text
@@ -62,10 +63,10 @@ const LoginEmailOtp = () => {
</Box>
</Container>
</Box>
</LoginEmailOtpFrame>
</Container>
</LoginOtpFrame>
)
}
export default LoginEmailOtp
export default LoginOtp

4
src/Pages/Onboarding/LoginEmailOtpFrame.jsx → src/Pages/Onboarding/LoginOtpFrame.jsx
View File

@@ -4,7 +4,7 @@ import { Box } from '@chakra-ui/react'
import Header from './Header'
import Footer from './Footer'
const LoginEmailOtpFrame = ({children}) => {
const LoginOtpFrame = ({children}) => {
return (
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
@@ -27,4 +27,4 @@ const LoginEmailOtpFrame = ({children}) => {
)
}
export default LoginEmailOtpFrame
export default LoginOtpFrame

13
src/Pages/Onboarding/LoginPhoneNumber.jsx
View File

@@ -4,15 +4,20 @@ import { Box, Input, Button, Text, Checkbox, HStack, Link, Container, InputGroup
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import { MdOutlineLocalPhone } from "react-icons/md";
import SecondaryButton from '../../Components/Buttons/SecondaryButton';
import { useNavigate } from 'react-router-dom';
const LoginPhoneNumber = () => {
const navigate = useNavigate();
return (
<LoginPhoneNumberFrame>
<Container maxW={'container.xl'}>
<Box
w={"100%"}
my={5}
boxShadow={"md"}
>
<Container maxW={'container.xl'}>
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
<Box maxW={650} >
<Text
@@ -53,7 +58,9 @@ const LoginPhoneNumber = () => {
<Box mt={6}>
<HStack justifyContent={"center"} mt={6} >
<PrimaryButton w={"300px"} title={"Send OTP"} />
<PrimaryButton
onClick={() => navigate("/login-otp")}
w={"300px"} title={"Send OTP"} />
</HStack>
<HStack justifyContent={"center"} mt={4} >
<Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
@@ -82,8 +89,8 @@ const LoginPhoneNumber = () => {
</Box>
</Container>
</Box>
</Container>
</LoginPhoneNumberFrame>
)
}

148
src/Pages/Onboarding/WelcomeToOptifii.jsx
View File

@@ -1,21 +1,31 @@
import React, { useState } from 'react'
import WelcomeFrame from './WelcomeFrame'
import { Box, Grid, GridItem, Input, FormControl, FormLabel, InputGroup, InputRightElement, Button, Text, Checkbox, HStack, Link, UnorderedList, ListItem, Container } from '@chakra-ui/react';
import { Box, Grid, GridItem, Input, FormControl, FormLabel, InputGroup, InputRightElement, Button, Text, Checkbox, HStack, Link, UnorderedList, ListItem, Container, useDisclosure, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent, VStack, Image } from '@chakra-ui/react';
import { FaEye, FaEyeSlash } from 'react-icons/fa';
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import { CiMobile3 } from "react-icons/ci";
import { FcGoogle } from "react-icons/fc";
import bell from "../../assets/bell.svg"
import { Navigate, useNavigate } from 'react-router-dom';
const WelcomeToOptifii = () => {
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const handlePasswordVisibility = () => setShowPassword(!showPassword);
const { isOpen, onOpen, onClose } = useDisclosure()
const navigate = useNavigate();
return (
<WelcomeFrame>
<Container maxW={'container.xl'}>
<Box
w={"100%"}
my={5}
boxShadow={"md"}
>
<Container maxW={'container.xl'}>
<Box bg={'#fff'} p={4} borderRadius={"md"}>
<Text
color={'#100F14'}
@@ -207,7 +217,7 @@ const WelcomeToOptifii = () => {
bg={"transparent"}
_hover={{ opacity: 0.7 }}
onClick={()=>setShowConfirmPassword(!showConfirmPassword)}>
onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
{showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
</Button>
</InputRightElement>
@@ -226,7 +236,9 @@ const WelcomeToOptifii = () => {
</Checkbox>
</HStack>
<HStack justifyContent={"center"} mt={6} >
<PrimaryButton w={"300px"} title={"Register with us"} />
<PrimaryButton
onClick={onOpen}
w={"300px"} title={"Register with us"} />
</HStack>
<HStack justifyContent={"center"} mt={4} >
<Text fontSize={"xs"} fontWeight={500} mb={0}>Already have an account?</Text>
@@ -234,12 +246,132 @@ const WelcomeToOptifii = () => {
</HStack>
</Box>
</Box>
</Box>
</Box>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader></ModalHeader>
<ModalCloseButton />
<ModalBody>
<HStack justifyContent={"center"} mb={2}>
<Image
src={bell}
alt="bell"
w={10}
h={12}
></Image>
</HStack>
<Text
color={"#100F14"}
fontSize={"xl"}
fontWeight={"600"}
textAlign={"center"}
mb={2}
>
Register to get free access
to all our recourses
</Text>
<Text
color={"#100F14"}
fontSize={"sm"}
fontWeight={"500"}
textAlign={"center"}
>
Sign up to see more
</Text>
<VStack>
<Button
onClick={() => navigate("/login-email-address")}
_hover={{ opacity: 0.8 }}
borderRadius={"full"}
bg={"#100F14"}
color={"#fff"}
border={"1px solid #9794AA"}
fontSize={"sm"}
fontWeight={"500"}
w={"100%"}
px={4}
py={6}
>Continue with email</Button>
<Button
onClick={() => navigate("/login-phone-number")}
_hover={{ opacity: 0.8 }}
borderRadius={"full"}
color={"#100F14"}
bg={"transparent"}
border={"1px solid #9794AA"}
fontSize={"sm"}
fontWeight={"500"}
w={"100%"}
px={4}
py={6}
>
<CiMobile3 style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
Mobile number
</Button>
<Button
_hover={{ opacity: 0.8 }}
borderRadius={"full"}
color={"#100F14"}
bg={"transparent"}
border={"1px solid #9794AA"}
fontSize={"sm"}
fontWeight={"500"}
w={"100%"}
px={4}
py={6}
>
<FcGoogle style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
Continue with Google
</Button>
</VStack>
<Text
color={"#686677"}
fontSize={"xs"}
fontWeight={500}
textAlign={"center"}
mt={4}
mb={0}
>
By continuing, you agree to the <Link
color={"#100F14"}
textDecoration={"underline"}
fontWeight={600}
>Terms of Service </Link>
</Text>
<Text
color={"#686677"}
fontSize={"xs"}
fontWeight={500}
textAlign={"center"}
>
and acknowledge you’ve read our <Link
color={"#100F14"}
textDecoration={"underline"}
fontWeight={600}
>Privacy Policy.</Link>
</Text>
<Text
color={"#686677"}
fontSize={"sm"}
fontWeight={500}
textAlign={"center"}
mt={4}
>
Already a member? <Link
color={"#100F14"}
textDecoration={"underline"}
fontWeight={600}
>Log in</Link>
</Text>
</ModalBody>
</ModalContent>
</Modal>
</Container>
</Box>
</WelcomeFrame>
)
}

6
src/assets/bell.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="38" height="49" viewBox="0 0 38 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M37.5 37L37.5 18.5C37.5 8.28274 29.2173 1.41726e-05 19 1.28328e-05C8.78274 1.1493e-05 0.500011 8.28274 0.50001 18.5L0.500008 37L37.5 37Z" fill="#6938EF"/>
<path d="M8.28921 36.9999C8.28921 30.9054 13.2298 25.9648 19.3243 25.9648C25.4188 25.9648 30.3594 30.9054 30.3594 36.9999L8.28921 36.9999Z" fill="#F0276C"/>
<path d="M8.28921 37.0001C8.28921 43.0946 13.2298 48.0352 19.3243 48.0352C25.4188 48.0352 30.3594 43.0946 30.3594 37.0001L8.28921 37.0001Z" fill="#EDB500"/>
<path d="M19 22.0703C22.0473 22.0703 24.5176 19.6 24.5176 16.5528C24.5176 13.5055 22.0473 11.0352 19 11.0352C15.9528 11.0352 13.4825 13.5055 13.4825 16.5528C13.4825 19.6 15.9528 22.0703 19 22.0703Z" fill="#FAFAFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 797 B

BIN
src/assets/o_logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 808 B

3
src/assets/o_logo.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="46" height="50" viewBox="0 0 46 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.6228 49.1689C32.779 49.1689 41.4968 43.0104 45.2455 34.224C41.7403 32.4345 39.3402 28.7894 39.3402 24.5838C39.3402 20.3783 41.7401 16.7334 45.245 14.9438C41.496 6.15802 32.7786 0 22.6228 0C12.4669 0 3.7494 6.1581 0.000493148 14.944C3.50523 16.7337 5.90492 20.3785 5.90492 24.5838C5.90492 28.7893 3.505 32.4342 0 34.2238C3.74864 43.0103 12.4665 49.1689 22.6228 49.1689ZM22.6228 41.3018C31.8556 41.3018 39.3402 33.8172 39.3402 24.5844C39.3402 15.3516 31.8556 7.86696 22.6228 7.86696C13.39 7.86696 5.90535 15.3516 5.90535 24.5844C5.90535 33.8172 13.39 41.3018 22.6228 41.3018Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 746 B