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 WelcomeToOptifii from "./Pages/Onboarding/WelcomeToOptifii";
import LoginPhoneNumber from "./Pages/Onboarding/LoginPhoneNumber"; import LoginPhoneNumber from "./Pages/Onboarding/LoginPhoneNumber";
import LoginEmailAddress from "./Pages/Onboarding/LoginEmailAddress"; import LoginEmailAddress from "./Pages/Onboarding/LoginEmailAddress";
import LoginEmailOtp from "./Pages/Onboarding/LoginEmailOtp"; import LoginEmailOtp from "./Pages/Onboarding/LoginOtp";
const App = () => { const App = () => {
// const { isAuthenticate } = useSelector((state) => state?.auth); // const { isAuthenticate } = useSelector((state) => state?.auth);

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

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { Box, Text, HStack, VStack, Link, Image, Divider, Stack, Container } from '@chakra-ui/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 { FaDribbble, FaLinkedinIn } from "react-icons/fa";
import { GrInstagram } from "react-icons/gr"; 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 React from 'react'
import SecondaryButton from '../../Components/Buttons/SecondaryButton' import SecondaryButton from '../../Components/Buttons/SecondaryButton'
import PrimaryButton from '../../Components/Buttons/PrimaryButton' import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import optifii_logo from '../../assets/optifii_logo.png' import optifii_logo from '../../assets/optifii_logo.svg'
const Header = () => { const Header = () => {
return ( return (

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

@@ -4,15 +4,20 @@ import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import { HiOutlineMail } from "react-icons/hi"; import { HiOutlineMail } from "react-icons/hi";
import SecondaryButton from '../../Components/Buttons/SecondaryButton'; import SecondaryButton from '../../Components/Buttons/SecondaryButton';
import LoginEmailAddressFrame from './LoginEmailAddressFrame'; import LoginEmailAddressFrame from './LoginEmailAddressFrame';
import { useNavigate } from 'react-router-dom';
const LoginEmailAddress = () => { const LoginEmailAddress = () => {
const navigate = useNavigate();
return ( return (
<LoginEmailAddressFrame> <LoginEmailAddressFrame>
<Box <Container maxW={'container.xl'}>
w={"100%"} <Box
my={5} w={"100%"}
> my={5}
<Container maxW={'container.xl'}> boxShadow={"md"}
>
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}> <Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
<Box maxW={650} > <Box maxW={650} >
<Text <Text
@@ -34,12 +39,12 @@ const LoginEmailAddress = () => {
</Text> </Text>
<Box mt={12}> <Box mt={12}>
<Text <Text
fontSize={"sm"} fontSize={"sm"}
fontWeight={500} fontWeight={500}
color={"#313039"} color={"#313039"}
mb={2} mb={2}
> >
Enter e-mail address Enter e-mail address
</Text> </Text>
<InputGroup> <InputGroup>
<InputLeftElement pointerEvents='none'> <InputLeftElement pointerEvents='none'>
@@ -53,7 +58,9 @@ const LoginEmailAddress = () => {
<Box mt={6}> <Box mt={6}>
<HStack justifyContent={"center"} 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>
<HStack justifyContent={"center"} mt={4} > <HStack justifyContent={"center"} mt={4} >
<Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text> <Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
@@ -82,8 +89,8 @@ const LoginEmailAddress = () => {
</Box> </Box>
</Container> </Box>
</Box> </Container>
</LoginEmailAddressFrame> </LoginEmailAddressFrame>
) )
} }

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

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

35
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 PrimaryButton from '../../Components/Buttons/PrimaryButton'
import { MdOutlineLocalPhone } from "react-icons/md"; import { MdOutlineLocalPhone } from "react-icons/md";
import SecondaryButton from '../../Components/Buttons/SecondaryButton'; import SecondaryButton from '../../Components/Buttons/SecondaryButton';
import { useNavigate } from 'react-router-dom';
const LoginPhoneNumber = () => { const LoginPhoneNumber = () => {
const navigate = useNavigate();
return ( return (
<LoginPhoneNumberFrame> <LoginPhoneNumberFrame>
<Box <Container maxW={'container.xl'}>
w={"100%"} <Box
my={5} w={"100%"}
> my={5}
<Container maxW={'container.xl'}> boxShadow={"md"}
>
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}> <Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
<Box maxW={650} > <Box maxW={650} >
<Text <Text
@@ -33,13 +38,13 @@ const LoginPhoneNumber = () => {
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
</Text> </Text>
<Box mt={12}> <Box mt={12}>
<Text <Text
fontSize={"sm"} fontSize={"sm"}
fontWeight={500} fontWeight={500}
color={"#313039"} color={"#313039"}
mb={2} mb={2}
> >
Enter phone number Enter phone number
</Text> </Text>
<InputGroup> <InputGroup>
<InputLeftElement pointerEvents='none'> <InputLeftElement pointerEvents='none'>
@@ -53,7 +58,9 @@ const LoginPhoneNumber = () => {
<Box mt={6}> <Box mt={6}>
<HStack justifyContent={"center"} 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>
<HStack justifyContent={"center"} mt={4} > <HStack justifyContent={"center"} mt={4} >
<Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text> <Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
@@ -82,8 +89,8 @@ const LoginPhoneNumber = () => {
</Box> </Box>
</Container> </Box>
</Box> </Container>
</LoginPhoneNumberFrame> </LoginPhoneNumberFrame>
) )
} }

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

@@ -1,21 +1,31 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import WelcomeFrame from './WelcomeFrame' 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 { FaEye, FaEyeSlash } from 'react-icons/fa';
import PrimaryButton from '../../Components/Buttons/PrimaryButton' 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 WelcomeToOptifii = () => {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const handlePasswordVisibility = () => setShowPassword(!showPassword); const handlePasswordVisibility = () => setShowPassword(!showPassword);
const { isOpen, onOpen, onClose } = useDisclosure()
const navigate = useNavigate();
return ( return (
<WelcomeFrame> <WelcomeFrame>
<Box
w={"100%"} <Container maxW={'container.xl'}>
my={5} <Box
> w={"100%"}
<Container maxW={'container.xl'}> my={5}
boxShadow={"md"}
>
<Box bg={'#fff'} p={4} borderRadius={"md"}> <Box bg={'#fff'} p={4} borderRadius={"md"}>
<Text <Text
color={'#100F14'} color={'#100F14'}
@@ -42,7 +52,7 @@ const WelcomeToOptifii = () => {
<GridItem colSpan={{ base: 4, md: 2 }}> <GridItem colSpan={{ base: 4, md: 2 }}>
<FormControl> <FormControl>
<FormLabel fontSize="sm">Company</FormLabel> <FormLabel fontSize="sm">Company</FormLabel>
<Input fontSize="xs" fontWeight={500} value="Website Developers India Pvt Ltd" /> <Input fontSize="xs" fontWeight={500} value="Website Developers India Pvt Ltd" />
</FormControl> </FormControl>
</GridItem> </GridItem>
@@ -207,7 +217,7 @@ const WelcomeToOptifii = () => {
bg={"transparent"} bg={"transparent"}
_hover={{ opacity: 0.7 }} _hover={{ opacity: 0.7 }}
onClick={()=>setShowConfirmPassword(!showConfirmPassword)}> onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
{showConfirmPassword ? <FaEyeSlash /> : <FaEye />} {showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
</Button> </Button>
</InputRightElement> </InputRightElement>
@@ -226,7 +236,9 @@ const WelcomeToOptifii = () => {
</Checkbox> </Checkbox>
</HStack> </HStack>
<HStack justifyContent={"center"} mt={6} > <HStack justifyContent={"center"} mt={6} >
<PrimaryButton w={"300px"} title={"Register with us"} /> <PrimaryButton
onClick={onOpen}
w={"300px"} title={"Register with us"} />
</HStack> </HStack>
<HStack justifyContent={"center"} mt={4} > <HStack justifyContent={"center"} mt={4} >
<Text fontSize={"xs"} fontWeight={500} mb={0}>Already have an account?</Text> <Text fontSize={"xs"} fontWeight={500} mb={0}>Already have an account?</Text>
@@ -234,12 +246,132 @@ const WelcomeToOptifii = () => {
</HStack> </HStack>
</Box> </Box>
</Box> </Box>
</Box> </Box>
</Container> </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>
</WelcomeFrame> </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