Initial commit

src/views/Authentication/Reset/ResetIllustration.js

@@ -0,0 +1,81 @@
+import React from "react";
+// Chakra imports
+import {
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+  Text,
+  useColorModeValue,
+  LightMode,
+} from "@chakra-ui/react";
+// Assets
+import illustration from "assets/img/illustration-auth.png";
+import AuthIllustration from "layouts/AuthIllustration";
+
+function ResetIllustration() {
+  // Chakra color mode
+  const textColor = useColorModeValue("blue.500", "blue.500");
+  return (
+    <AuthIllustration
+      illustrationBackground='linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
+      image={illustration}>
+      <Flex
+        w='100%'
+        h='100%'
+        alignItems='start'
+        justifyContent='start'
+        mb={{ base: "0px", md: "60px" }}
+        mt={{ base: "60px", md: "34vh" }}>
+        <Flex
+          zIndex='2'
+          direction='column'
+          w='445px'
+          background='transparent'
+          borderRadius='15px'
+          pe={{ base: "0px", md: "80px" }}
+          mx={{ base: "20px", md: "0px" }}
+          mb={{ base: "20px", md: "auto" }}>
+          <Text
+            fontWeight='bold'
+            color={textColor}
+            mb='10px'
+            fontSize={{ base: "3xl", md: "4xl" }}>
+            Reset password
+          </Text>
+          <Text fontWeight='regular' color='gray.400' mb='35px'>
+            You will receive an e-mail in maximum 60 seconds.
+          </Text>
+          <FormControl>
+            <FormLabel ms='4px' fontSize='sm' fontWeight='normal'>
+              Email
+            </FormLabel>
+            <Input
+              variant='main'
+              fontSize='sm'
+              ms='4px'
+              type='text'
+              placeholder='Your email address'
+              mb='24px'
+              size='lg'
+            />
+            <LightMode>
+              <Button
+                fontSize='10px'
+                colorScheme='blue'
+                fontWeight='bold'
+                w='100%'
+                h='45'
+                mb='24px'>
+                SEND
+              </Button>
+            </LightMode>
+          </FormControl>
+        </Flex>
+      </Flex>
+    </AuthIllustration>
+  );
+}
+
+export default ResetIllustration;