Initial commit

2025-10-11 11:55:25 +08:00
parent 467dad8449
commit 8107dee8d3
2879 changed files with 610575 additions and 0 deletions
--- a/src/views/Authentication/Verification/VerificationBasic.js
+++ b/src/views/Authentication/Verification/VerificationBasic.js
@@ -0,0 +1,116 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+// Chakra imports
+import {
+  Button,
+  Link,
+  Flex,
+  FormControl,
+  Text,
+  Icon,
+  useColorModeValue,
+} from "@chakra-ui/react";
+// Assets
+import BasicImage from "assets/img/BasicImage.png";
+import React from "react";
+import AuthBasic from "layouts/AuthBasic";
+import { PinInputLight } from "components/PinInput/PinInput";
+import { IoIosRocket } from "react-icons/io";
+
+function LockBasic() {
+  // Chakra color mode
+  const textColor = useColorModeValue("gray.700", "white");
+  const bgForm = useColorModeValue("white", "navy.800");
+  return (
+    <AuthBasic
+      title="Welcome!"
+      description="Use these awesome forms to login or create new account in your project for free."
+      image={BasicImage}
+    >
+      <Flex
+        w="100%"
+        h="100%"
+        alignItems="center"
+        justifyContent="center"
+        mb="60px"
+        mt={{ base: "60px", md: "0px" }}
+      >
+        <Flex
+          zIndex="2"
+          direction="column"
+          w="445px"
+          background="transparent"
+          borderRadius="15px"
+          p="40px"
+          mx={{ base: "20px", md: "100px" }}
+          mb={{ base: "20px", md: "auto" }}
+          bg={bgForm}
+          boxShadow={useColorModeValue(
+            "0px 5px 14px rgba(0, 0, 0, 0.05)",
+            "unset"
+          )}
+        >
+          <Flex
+            mx="auto"
+            borderRadius="50%"
+            bg="blue.500"
+            w={{ base: "100px" }}
+            h={{ base: "100px" }}
+            justify="center"
+            align="center"
+            mb="30px"
+          >
+            <Icon as={IoIosRocket} color="white" w="36px" h="36px" />
+          </Flex>
+          <Text
+            fontWeight="bold"
+            color={textColor}
+            textAlign="center"
+            mb="10px"
+            fontSize={{ base: "3xl", md: "4xl" }}
+          >
+            2-Step Verification
+          </Text>
+          <FormControl>
+            <Flex justify="center" align="center" mx="auto" mb="30px">
+              <PinInputLight />
+            </Flex>
+            <Button
+              fontSize="10px"
+              variant="dark"
+              fontWeight="bold"
+              w="100%"
+              h="45"
+              mb="24px"
+            >
+              UNLOCK
+            </Button>
+          </FormControl>
+          <Text color="gray.400" fontWeight="400" textAlign="center">
+            Haven't received it?{" "}
+            <Link color={textColor} as="span" fontWeight="700">
+              Resend a new code.
+            </Link>
+          </Text>
+        </Flex>
+      </Flex>
+    </AuthBasic>
+  );
+}
+
+export default LockBasic;
--- a/src/views/Authentication/Verification/VerificationCover.js
+++ b/src/views/Authentication/Verification/VerificationCover.js
@@ -0,0 +1,104 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+// Chakra imports
+import {
+  Button,
+  Flex,
+  Link,
+  Icon,
+  FormControl,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+// Assets
+import { PinInputLight } from "components/PinInput/PinInput";
+import { IoIosRocket } from "react-icons/io";
+import CoverImage from "assets/img/CoverImage.png";
+import React from "react";
+import AuthCover from "layouts/AuthCover";
+
+function LockCover() {
+  // Chakra color mode
+  const textColor = useColorModeValue("gray.700", "white");
+  const bgForm = useColorModeValue("white", "navy.800");
+  return (
+    <AuthCover image={CoverImage}>
+      <Flex
+        zIndex="2"
+        direction="column"
+        w="445px"
+        background="transparent"
+        borderRadius="15px"
+        p="40px"
+        mx={{ base: "20px", md: "auto" }}
+        mb={{ base: "20px", md: "auto" }}
+        bg={bgForm}
+        boxShadow={useColorModeValue(
+          "0px 5px 14px rgba(0, 0, 0, 0.05)",
+          "unset"
+        )}
+        mt="25vh"
+      >
+        <Flex
+          mx="auto"
+          borderRadius="50%"
+          bg="blue.500"
+          w={{ base: "100px" }}
+          h={{ base: "100px" }}
+          justify="center"
+          align="center"
+          mb="30px"
+        >
+          <Icon as={IoIosRocket} color="white" w="36px" h="36px" />
+        </Flex>
+        <Text
+          fontWeight="bold"
+          color={textColor}
+          textAlign="center"
+          mb="10px"
+          fontSize={{ base: "3xl", md: "4xl" }}
+        >
+          2-Step Verification
+        </Text>
+        <FormControl>
+          <Flex justify="center" align="center" mx="auto" mb="30px">
+            <PinInputLight />
+          </Flex>
+          <Button
+            fontSize="10px"
+            variant="dark"
+            fontWeight="bold"
+            w="100%"
+            h="45"
+            mb="24px"
+          >
+            UNLOCK
+          </Button>
+        </FormControl>
+        <Text color="gray.400" fontWeight="400" textAlign="center">
+          Haven't received it?{" "}
+          <Link color={textColor} as="span" fontWeight="700">
+            Resend a new code.
+          </Link>
+        </Text>
+      </Flex>
+    </AuthCover>
+  );
+}
+
+export default LockCover;
--- a/src/views/Authentication/Verification/VerificationIllustration.js
+++ b/src/views/Authentication/Verification/VerificationIllustration.js
@@ -0,0 +1,93 @@
+import React from "react";
+// Chakra imports
+import {
+  Button,
+  Flex,
+  FormControl,
+  Link,
+  Text,
+  Icon,
+  useColorModeValue,
+} from "@chakra-ui/react";
+// Assets
+import illustration from "assets/img/illustration-auth.png";
+import AuthIllustration from "layouts/AuthIllustration";
+import { PinInputDark } from "components/PinInput/PinInput";
+import { IoIosRocket } from "react-icons/io";
+
+function LockIllustration() {
+  // Chakra color mode
+  const textColor = useColorModeValue("blue.500", "blue.500");
+  const inputBg = useColorModeValue(
+    { background: "white !important" },
+    { background: "red !important" }
+  );
+  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: "30vh" }}>
+        <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" }}>
+          <Flex
+            mx={{ base: "auto", md: "0px" }}
+            borderRadius='50%'
+            bg='blue.500'
+            w={{ base: "100px" }}
+            h={{ base: "100px" }}
+            justify='center'
+            align='center'
+            mb='30px'>
+            <Icon as={IoIosRocket} color='white' w='36px' h='36px' />
+          </Flex>
+          <Text
+            fontWeight='bold'
+            color={textColor}
+            textAlign='start'
+            mb='10px'
+            fontSize={{ base: "3xl", md: "4xl" }}>
+            2-Step Verification
+          </Text>
+          <FormControl>
+            <Flex mx={{ base: "auto", md: "0px" }} mb='30px'>
+              <PinInputDark />
+            </Flex>
+            <Button
+              fontSize='10px'
+              variant='dark'
+              fontWeight='bold'
+              w='100%'
+              h='45'
+              mb='24px'>
+              UNLOCK
+            </Button>
+          </FormControl>
+          <Text
+            color='gray.400'
+            fontWeight='400'
+            textAlign={{ base: "center", md: "start" }}>
+            Haven't received it?{" "}
+            <Link color={textColor} as='span' fontWeight='700'>
+              Resend a new code.
+            </Link>
+          </Text>
+        </Flex>
+      </Flex>
+    </AuthIllustration>
+  );
+}
+
+export default LockIllustration;