Authentication
import {
Box,
Flex,
Stack,
Heading,
Text,
Container,
Input,
Button,
SimpleGrid,
Avatar,
AvatarGroup,
useBreakpointValue,
IconProps,
Icon,
} from '@chakra-ui/react';
const avatars = [
{
name: 'Ryan Florence',
url: 'https://bit.ly/ryan-florence',
},
{
name: 'Segun Adebayo',
url: 'https://bit.ly/sage-adebayo',
},
{
name: 'Kent Dodds',
url: 'https://bit.ly/kent-c-dodds',
},
{
name: 'Prosper Otemuyiwa',
url: 'https://bit.ly/prosper-baba',
},
{
name: 'Christian Nwamba',
url: 'https://bit.ly/code-beast',
},
];
export default function JoinOurTeam() {
return (
<Box position={'relative'}>
<Container
as={SimpleGrid}
maxW={'7xl'}
columns={{ base: 1, md: 2 }}
spacing={{ base: 10, lg: 32 }}
py={{ base: 10, sm: 20, lg: 32 }}>
<Stack spacing={{ base: 10, md: 20 }}>
<Heading
lineHeight={1.1}
fontSize={{ base: '3xl', sm: '4xl', md: '5xl', lg: '6xl' }}>
Senior web designers{' '}
<Text
as={'span'}
bgGradient="linear(to-r, red.400,pink.400)"
bgClip="text">
&
</Text>{' '}
Full-Stack Developers
</Heading>
<Stack direction={'row'} spacing={4} align={'center'}>
<AvatarGroup>
{avatars.map((avatar) => (
<Avatar
key={avatar.name}
name={avatar.name}
src={avatar.url}
size={useBreakpointValue({ base: 'md', md: 'lg' })}
position={'relative'}
zIndex={2}
_before={{
content: '""',
width: 'full',
height: 'full',
rounded: 'full',
transform: 'scale(1.125)',
bgGradient: 'linear(to-bl, red.400,pink.400)',
position: 'absolute',
zIndex: -1,
top: 0,
left: 0,
}}
/>
))}
</AvatarGroup>
<Text fontFamily={'heading'} fontSize={{ base: '4xl', md: '6xl' }}>
+
</Text>
<Flex
align={'center'}
justify={'center'}
fontFamily={'heading'}
fontSize={{ base: 'sm', md: 'lg' }}
bg={'gray.800'}
color={'white'}
rounded={'full'}
minWidth={useBreakpointValue({ base: '44px', md: '60px' })}
minHeight={useBreakpointValue({ base: '44px', md: '60px' })}
position={'relative'}
_before={{
content: '""',
width: 'full',
height: 'full',
rounded: 'full',
transform: 'scale(1.125)',
bgGradient: 'linear(to-bl, orange.400,yellow.400)',
position: 'absolute',
zIndex: -1,
top: 0,
left: 0,
}}>
YOU
</Flex>
</Stack>
</Stack>
<Stack
bg={'gray.50'}
rounded={'xl'}
p={{ base: 4, sm: 6, md: 8 }}
spacing={{ base: 8 }}
maxW={{ lg: 'lg' }}>
<Stack spacing={4}>
<Heading
color={'gray.800'}
lineHeight={1.1}
fontSize={{ base: '2xl', sm: '3xl', md: '4xl' }}>
Join our team
<Text
as={'span'}
bgGradient="linear(to-r, red.400,pink.400)"
bgClip="text">
!
</Text>
</Heading>
<Text color={'gray.500'} fontSize={{ base: 'sm', sm: 'md' }}>
We’re looking for amazing engineers just like you! Become a part
of our rockstar engineering team and skyrocket your career!
</Text>
</Stack>
<Box as={'form'} mt={10}>
<Stack spacing={4}>
<Input
placeholder="Firstname"
bg={'gray.100'}
border={0}
color={'gray.500'}
_placeholder={{
color: 'gray.500',
}}
/>
<Input
placeholder="[email protected]"
bg={'gray.100'}
border={0}
color={'gray.500'}
_placeholder={{
color: 'gray.500',
}}
/>
<Input
placeholder="+1 (___) __-___-___"
bg={'gray.100'}
border={0}
color={'gray.500'}
_placeholder={{
color: 'gray.500',
}}
/>
<Button fontFamily={'heading'} bg={'gray.200'} color={'gray.800'}>
Upload CV
</Button>
</Stack>
<Button
fontFamily={'heading'}
mt={8}
w={'full'}
bgGradient="linear(to-r, red.400,pink.400)"
color={'white'}
_hover={{
bgGradient: 'linear(to-r, red.400,pink.400)',
boxShadow: 'xl',
}}>
Submit
</Button>
</Box>
form
</Stack>
</Container>
<Blur
position={'absolute'}
top={-10}
left={-10}
style={{ filter: 'blur(70px)' }}
/>
</Box>
);
}
export const Blur = (props: IconProps) => {
return (
<Icon
width={useBreakpointValue({ base: '100%', md: '40vw', lg: '30vw' })}
zIndex={useBreakpointValue({ base: -1, md: -1, lg: 0 })}
height="560px"
viewBox="0 0 528 560"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<circle cx="71" cy="61" r="111" fill="#F56565" />
<circle cx="244" cy="106" r="139" fill="#ED64A6" />
<circle cy="291" r="139" fill="#ED64A6" />
<circle cx="80.5" cy="189.5" r="101.5" fill="#ED8936" />
<circle cx="196.5" cy="317.5" r="101.5" fill="#ECC94B" />
<circle cx="70.5" cy="458.5" r="101.5" fill="#48BB78" />
<circle cx="426.5" cy="-0.5" r="101.5" fill="#4299E1" />
</Icon>
);
};
import {
Flex,
Box,
FormControl,
FormLabel,
Input,
Checkbox,
Stack,
Link,
Button,
Heading,
Text,
useColorModeValue,
} from '@chakra-ui/react';
export default function SimpleCard() {
return (
<Flex
minH={'100vh'}
align={'center'}
justify={'center'}
bg={useColorModeValue('gray.50', 'gray.800')}>
<Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
<Stack align={'center'}>
<Heading fontSize={'4xl'}>Sign in to your account</Heading>
<Text fontSize={'lg'} color={'gray.600'}>
to enjoy all of our cool <Link color={'blue.400'}>features</Link> ✌️
</Text>
</Stack>
<Box
rounded={'lg'}
bg={useColorModeValue('white', 'gray.700')}
boxShadow={'lg'}
p={8}>
<Stack spacing={4}>
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input type="email" />
</FormControl>
<FormControl id="password">
<FormLabel>Password</FormLabel>
<Input type="password" />
</FormControl>
<Stack spacing={10}>
<Stack
direction={{ base: 'column', sm: 'row' }}
align={'start'}
justify={'space-between'}>
<Checkbox>Remember me</Checkbox>
<Link color={'blue.400'}>Forgot password?</Link>
</Stack>
<Button
bg={'blue.400'}
color={'white'}
_hover={{
bg: 'blue.500',
}}>
Sign in
</Button>
</Stack>
</Stack>
</Box>
</Stack>
</Flex>
);
}
import {
Flex,
Box,
FormControl,
FormLabel,
Input,
InputGroup,
HStack,
InputRightElement,
Stack,
Button,
Heading,
Text,
useColorModeValue,
Link,
} from '@chakra-ui/react';
import { useState } from 'react';
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
export default function SignupCard() {
const [showPassword, setShowPassword] = useState(false);
return (
<Flex
minH={'100vh'}
align={'center'}
justify={'center'}
bg={useColorModeValue('gray.50', 'gray.800')}>
<Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
<Stack align={'center'}>
<Heading fontSize={'4xl'} textAlign={'center'}>
Sign up
</Heading>
<Text fontSize={'lg'} color={'gray.600'}>
to enjoy all of our cool features ✌️
</Text>
</Stack>
<Box
rounded={'lg'}
bg={useColorModeValue('white', 'gray.700')}
boxShadow={'lg'}
p={8}>
<Stack spacing={4}>
<HStack>
<Box>
<FormControl id="firstName" isRequired>
<FormLabel>First Name</FormLabel>
<Input type="text" />
</FormControl>
</Box>
<Box>
<FormControl id="lastName">
<FormLabel>Last Name</FormLabel>
<Input type="text" />
</FormControl>
</Box>
</HStack>
<FormControl id="email" isRequired>
<FormLabel>Email address</FormLabel>
<Input type="email" />
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<InputGroup>
<Input type={showPassword ? 'text' : 'password'} />
<InputRightElement h={'full'}>
<Button
variant={'ghost'}
onClick={() =>
setShowPassword((showPassword) => !showPassword)
}>
{showPassword ? <ViewIcon /> : <ViewOffIcon />}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<Stack spacing={10} pt={2}>
<Button
loadingText="Submitting"
size="lg"
bg={'blue.400'}
color={'white'}
_hover={{
bg: 'blue.500',
}}>
Sign up
</Button>
</Stack>
<Stack pt={6}>
<Text align={'center'}>
Already a user? <Link color={'blue.400'}>Login</Link>
</Text>
</Stack>
</Stack>
</Box>
</Stack>
</Flex>
);
}
import {
Button,
Checkbox,
Flex,
FormControl,
FormLabel,
Heading,
Input,
Link,
Stack,
Image,
} from '@chakra-ui/react';
export default function SplitScreen() {
return (
<Stack minH={'100vh'} direction={{ base: 'column', md: 'row' }}>
<Flex p={8} flex={1} align={'center'} justify={'center'}>
<Stack spacing={4} w={'full'} maxW={'md'}>
<Heading fontSize={'2xl'}>Sign in to your account</Heading>
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input type="email" />
</FormControl>
<FormControl id="password">
<FormLabel>Password</FormLabel>
<Input type="password" />
</FormControl>
<Stack spacing={6}>
<Stack
direction={{ base: 'column', sm: 'row' }}
align={'start'}
justify={'space-between'}>
<Checkbox>Remember me</Checkbox>
<Link color={'blue.500'}>Forgot password?</Link>
</Stack>
<Button colorScheme={'blue'} variant={'solid'}>
Sign in
</Button>
</Stack>
</Stack>
</Flex>
<Flex flex={1}>
<Image
alt={'Login Image'}
objectFit={'cover'}
src={
'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80'
}
/>
</Flex>
</Stack>
);
}
import {
Button,
FormControl,
Flex,
Heading,
Input,
Stack,
Text,
useColorModeValue,
} from '@chakra-ui/react';
type ForgotPasswordFormInputs = {
email: string;
};
export default function ForgotPasswordForm(): JSX.Element {
return (
<Flex
minH={'100vh'}
align={'center'}
justify={'center'}
bg={useColorModeValue('gray.50', 'gray.800')}>
<Stack
spacing={4}
w={'full'}
maxW={'md'}
bg={useColorModeValue('white', 'gray.700')}
rounded={'xl'}
boxShadow={'lg'}
p={6}
my={12}>
<Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
Forgot your password?
</Heading>
<Text
fontSize={{ base: 'sm', sm: 'md' }}
color={useColorModeValue('gray.800', 'gray.400')}>
You'll get an email with a reset link
</Text>
<FormControl id="email">
<Input
placeholder="[email protected]"
_placeholder={{ color: 'gray.500' }}
type="email"
/>
</FormControl>
<Stack spacing={6}>
<Button
bg={'blue.400'}
color={'white'}
_hover={{
bg: 'blue.500',
}}>
Request Reset
</Button>
</Stack>
</Stack>
</Flex>
);
}
import {
Button,
Flex,
FormControl,
FormLabel,
Heading,
Input,
Stack,
useColorModeValue,
} from '@chakra-ui/react';
export default function ResetPasswordForm(): JSX.Element {
return (
<Flex
minH={'100vh'}
align={'center'}
justify={'center'}
bg={useColorModeValue('gray.50', 'gray.800')}>
<Stack
spacing={4}
w={'full'}
maxW={'md'}
bg={useColorModeValue('white', 'gray.700')}
rounded={'xl'}
boxShadow={'lg'}
p={6}
my={12}>
<Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
Enter new password
</Heading>
<FormControl id="email" isRequired>
<FormLabel>Email address</FormLabel>
<Input
placeholder="[email protected]"
_placeholder={{ color: 'gray.500' }}
type="email"
/>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<Input type="password" />
</FormControl>
<Stack spacing={6}>
<Button
bg={'blue.400'}
color={'white'}
_hover={{
bg: 'blue.500',
}}>
Submit
</Button>
</Stack>
</Stack>
</Flex>
);
}
import { Center, Heading } from '@chakra-ui/react';
import {
Button,
FormControl,
Flex,
Input,
Stack,
useColorModeValue,
HStack,
} from '@chakra-ui/react';
import { PinInput, PinInputField } from '@chakra-ui/react';
export default function VerifyEmailForm(): JSX.Element {
return (
<Flex
minH={'100vh'}
align={'center'}
justify={'center'}
bg={useColorModeValue('gray.50', 'gray.800')}>
<Stack
spacing={4}
w={'full'}
maxW={'sm'}
bg={useColorModeValue('white', 'gray.700')}
rounded={'xl'}
boxShadow={'lg'}
p={6}
my={10}>
<Center>
<Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
Verify your Email
</Heading>
</Center>
<Center
fontSize={{ base: 'sm', sm: 'md' }}
color={useColorModeValue('gray.800', 'gray.400')}>
We have sent code to your email
</Center>
<Center
fontSize={{ base: 'sm', sm: 'md' }}
fontWeight="bold"
color={useColorModeValue('gray.800', 'gray.400')}>
[email protected]
</Center>
<FormControl>
<Center>
<HStack>
<PinInput>
<PinInputField />
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
</HStack>
</Center>
</FormControl>
<Stack spacing={6}>
<Button
bg={'blue.400'}
color={'white'}
_hover={{
bg: 'blue.500',
}}>
Verify
</Button>
</Stack>
</Stack>
</Flex>
);
}
import {
Button,
Flex,
FormControl,
FormLabel,
Heading,
Input,
Stack,
useColorModeValue,
HStack,
Avatar,
AvatarBadge,
IconButton,
Center,
} from '@chakra-ui/react';
import { SmallCloseIcon } from '@chakra-ui/icons';
export default function UserProfileEdit(): JSX.Element {
return (
<Flex
minH={'100vh'}
align={'center'}
justify={'center'}
bg={useColorModeValue('gray.50', 'gray.800')}>
<Stack
spacing={4}
w={'full'}
maxW={'md'}
bg={useColorModeValue('white', 'gray.700')}
rounded={'xl'}
boxShadow={'lg'}
p={6}
my={12}>
<Heading lineHeight={1.1} fontSize={{ base: '2xl', sm: '3xl' }}>
User Profile Edit
</Heading>
<FormControl id="userName">
<FormLabel>User Icon</FormLabel>
<Stack direction={['column', 'row']} spacing={6}>
<Center>
<Avatar size="xl" src="https://bit.ly/sage-adebayo">
<AvatarBadge
as={IconButton}
size="sm"
rounded="full"
top="-10px"
colorScheme="red"
aria-label="remove Image"
icon={<SmallCloseIcon />}
/>
</Avatar>
</Center>
<Center w="full">
<Button w="full">Change Icon</Button>
</Center>
</Stack>
</FormControl>
<FormControl id="userName" isRequired>
<FormLabel>User name</FormLabel>
<Input
placeholder="UserName"
_placeholder={{ color: 'gray.500' }}
type="text"
/>
</FormControl>
<FormControl id="email" isRequired>
<FormLabel>Email address</FormLabel>
<Input
placeholder="[email protected]"
_placeholder={{ color: 'gray.500' }}
type="email"
/>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<Input
placeholder="password"
_placeholder={{ color: 'gray.500' }}
type="password"
/>
</FormControl>
<Stack spacing={6} direction={['column', 'row']}>
<Button
bg={'red.400'}
color={'white'}
w="full"
_hover={{
bg: 'red.500',
}}>
Cancel
</Button>
<Button
bg={'blue.400'}
color={'white'}
w="full"
_hover={{
bg: 'blue.500',
}}>
Submit
</Button>
</Stack>
</Stack>
</Flex>
);
}
Support us
Made on the Internet by Achim Rolle and Contributors