653 lines
23 KiB
JavaScript
Executable File
653 lines
23 KiB
JavaScript
Executable File
/*!
|
||
|
||
=========================================================
|
||
* 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.
|
||
|
||
*/
|
||
|
||
import React, { useState } from "react";
|
||
// Chakra imports
|
||
import {
|
||
Accordion,
|
||
AccordionButton,
|
||
AccordionIcon,
|
||
AccordionItem,
|
||
AccordionPanel,
|
||
Box,
|
||
Button,
|
||
Flex,
|
||
Icon,
|
||
Image,
|
||
SimpleGrid,
|
||
Stack,
|
||
Tag,
|
||
Text,
|
||
useColorModeValue,
|
||
} from "@chakra-ui/react";
|
||
// Assets
|
||
import basic from "assets/img/basic-auth.png";
|
||
import deloitteLogo from "assets/svg/deloitte-logo.svg";
|
||
import georgiaLogo from "assets/svg/georgia-logo.svg";
|
||
import googleLogo from "assets/svg/google-logo.svg";
|
||
import microsoftLogo from "assets/svg/microsoft-logo.svg";
|
||
import msnLogo from "assets/svg/msn-logo.svg";
|
||
import zohoLogo from "assets/svg/zoho-logo.svg";
|
||
import Card from "components/Card/Card";
|
||
import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";
|
||
|
||
function Pricing() {
|
||
const [activeButton, setActiveButton] = useState({
|
||
monthly: true,
|
||
yearly: false,
|
||
});
|
||
|
||
const textColor = useColorModeValue("gray.700", "white");
|
||
const secondaryColor = useColorModeValue("gray.500", "white");
|
||
const borderColor = useColorModeValue("border.200", "border.600");
|
||
const bgActiveButton = useColorModeValue("#fff", "blue.500");
|
||
const bgButtonGroup = useColorModeValue("gray.50", "navy.800");
|
||
const bgTimesIcon = useColorModeValue("gray.700", "white");
|
||
|
||
return (
|
||
<Flex
|
||
direction="column"
|
||
alignSelf="center"
|
||
justifySelf="center"
|
||
overflow="hidden"
|
||
>
|
||
<Box
|
||
position="absolute"
|
||
minH={{ base: "70vh", xl: "50vh" }}
|
||
w={{ sm: "calc(100vw - 25px)", md: "calc(100vw - 25px)" }}
|
||
borderRadius={{ sm: "15px" }}
|
||
left="0"
|
||
right="0"
|
||
bgRepeat="no-repeat"
|
||
overflow="hidden"
|
||
zIndex="-1"
|
||
top="0"
|
||
bgImage={basic}
|
||
bgSize="cover"
|
||
mx={{ sm: "auto" }}
|
||
mt={{ sm: "14px" }}
|
||
></Box>
|
||
<Flex
|
||
direction="column"
|
||
textAlign="center"
|
||
justifyContent="center"
|
||
align="center"
|
||
mt="6.5rem"
|
||
mb="38px"
|
||
>
|
||
<Text fontSize="3xl" color="white" fontWeight="bold">
|
||
See our pricing
|
||
</Text>
|
||
<Text
|
||
fontSize="md"
|
||
color="white"
|
||
fontWeight="normal"
|
||
mt="10px"
|
||
mb="26px"
|
||
maxW="300px"
|
||
>
|
||
You have Free Unlimited Updates and Premium Support on each package.
|
||
</Text>
|
||
<Flex bg={bgButtonGroup} p="6px" borderRadius="12px">
|
||
<Button
|
||
variant="no-effects"
|
||
w="135px"
|
||
h="40px"
|
||
fontSize="xs"
|
||
boxShadow={
|
||
activeButton.monthly
|
||
? "0px 2px 5.5px rgba(0, 0, 0, 0.06)"
|
||
: "none"
|
||
}
|
||
bg={activeButton.monthly ? bgActiveButton : "transparent"}
|
||
onClick={() => setActiveButton({ monthly: true, yearly: false })}
|
||
>
|
||
MONTHLY
|
||
</Button>
|
||
<Button
|
||
variant="no-effects"
|
||
w="135px"
|
||
h="40px"
|
||
fontSize="xs"
|
||
boxShadow={
|
||
activeButton.yearly ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : "none"
|
||
}
|
||
bg={activeButton.yearly ? bgActiveButton : "transparent"}
|
||
onClick={() => setActiveButton({ monthly: false, yearly: true })}
|
||
>
|
||
YEARLY
|
||
</Button>
|
||
</Flex>
|
||
<Stack
|
||
direction={{ sm: "column", lg: "row" }}
|
||
spacing="20px"
|
||
mt="50px"
|
||
mb="80px"
|
||
>
|
||
<Card
|
||
boxShadow={"0px 2px 5.5px rgba(0, 0, 0, 0.1)"}
|
||
w={{ sm: "300px", md: "650px", lg: "300px" }}
|
||
>
|
||
<Flex direction="column" mb="30px" w="100%" align="center">
|
||
<Tag size="sm">STARTER</Tag>
|
||
<Text color={textColor} fontSize="5xl" fontWeight="bold">
|
||
{activeButton.monthly ? "$59" : "$119"}
|
||
</Text>
|
||
</Flex>
|
||
|
||
<Flex direction="column" w="100%">
|
||
<Stack direction="column" spacing="16px" w="100%" mb="35px">
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
2 Team Members
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
20GB Cloud Storage
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaTimesCircle}
|
||
mr="8px"
|
||
color={bgTimesIcon}
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Integration Help
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaTimesCircle}
|
||
mr="8px"
|
||
color={bgTimesIcon}
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Sketch Files
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaTimesCircle}
|
||
mr="8px"
|
||
color={bgTimesIcon}
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
API Access
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaTimesCircle}
|
||
mr="8px"
|
||
color={bgTimesIcon}
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Complete Documentation
|
||
</Text>
|
||
</Flex>
|
||
</Stack>
|
||
<Button variant="dark">JOIN NOW</Button>
|
||
</Flex>
|
||
</Card>
|
||
<Card
|
||
boxShadow={"0px 2px 5.5px rgba(0, 0, 0, 0.1)"}
|
||
w={{ sm: "300px", md: "650px", lg: "300px" }}
|
||
>
|
||
<Flex direction="column" w="100%" mb="30px" align="center">
|
||
<Tag size="sm">PREMIUM</Tag>
|
||
<Text color={textColor} fontSize="5xl" fontWeight="bold">
|
||
{activeButton.monthly ? "$89" : "$159"}
|
||
</Text>
|
||
</Flex>
|
||
|
||
<Flex direction="column" w="100%">
|
||
<Stack direction="column" spacing="16px" w="100%" mb="35px">
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
10 Team Members
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
40GB Cloud Storage
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Integration Help
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Sketch Files
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaTimesCircle}
|
||
mr="8px"
|
||
color={bgTimesIcon}
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
API Access
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaTimesCircle}
|
||
mr="8px"
|
||
color={bgTimesIcon}
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Complete Documentation
|
||
</Text>
|
||
</Flex>
|
||
</Stack>
|
||
<Button variant="primary">TRY PREMIUM</Button>
|
||
</Flex>
|
||
</Card>
|
||
<Card
|
||
boxShadow={"0px 2px 5.5px rgba(0, 0, 0, 0.1)"}
|
||
w={{ sm: "300px", md: "650px", lg: "300px" }}
|
||
>
|
||
<Flex direction="column" mb="30px" w="100%" align="center">
|
||
<Tag size="sm">ENTERPRISE</Tag>
|
||
<Text color={textColor} fontSize="5xl" fontWeight="bold">
|
||
{activeButton.monthly ? "$99" : "$399"}
|
||
</Text>
|
||
</Flex>
|
||
|
||
<Flex direction="column" w="100%">
|
||
<Stack direction="column" spacing="16px" w="100%" mb="35px">
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Unlimited Team Members
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
100GB Cloud Storage
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Integration Help
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Sketch Files
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
API Access
|
||
</Text>
|
||
</Flex>
|
||
<Flex align="center">
|
||
<Icon
|
||
w="20px"
|
||
h="20px"
|
||
as={FaCheckCircle}
|
||
mr="8px"
|
||
color="blue.500"
|
||
/>
|
||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||
Complete Documentation
|
||
</Text>
|
||
</Flex>
|
||
</Stack>
|
||
<Button variant="dark">JOIN NOW</Button>
|
||
</Flex>
|
||
</Card>
|
||
</Stack>
|
||
<Flex direction="column" mb="110px" justify="center" align="center">
|
||
<Text
|
||
color="gray.300"
|
||
fontWeight="bold"
|
||
fontSize="md"
|
||
mb={{ sm: "32px", xl: "16px" }}
|
||
maxW={{ sm: "250px", md: "100%" }}
|
||
textAlign="center"
|
||
>
|
||
More than 50+ brands trust Chakra Soft UI
|
||
</Text>
|
||
<SimpleGrid
|
||
columns={{ sm: 2, md: 3, lg: 6 }}
|
||
rows={{ sm: 3, md: 2, lg: 1 }}
|
||
spacingX={{ sm: "65px", lg: "40px", xl: "65px" }}
|
||
spacingY={{ sm: "30px" }}
|
||
>
|
||
<Image src={googleLogo} alignSelf="center" justifySelf="center" />
|
||
<Image src={msnLogo} alignSelf="center" justifySelf="center" />
|
||
<Image
|
||
src={microsoftLogo}
|
||
alignSelf="center"
|
||
justifySelf="center"
|
||
/>
|
||
<Image src={zohoLogo} alignSelf="center" justifySelf="center" />
|
||
<Image src={georgiaLogo} alignSelf="center" justifySelf="center" />
|
||
<Image src={deloitteLogo} alignSelf="center" justifySelf="center" />
|
||
</SimpleGrid>
|
||
</Flex>
|
||
<Flex direction="column" mb={{ sm: "20px", lg: "60px" }}>
|
||
<Flex direction="column" align="center" justify="center">
|
||
<Text
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
fontSize={{ sm: "3xl", md: "4xl" }}
|
||
mb="12px"
|
||
>
|
||
Frequently Asked Questions
|
||
</Text>
|
||
<Text
|
||
color="gray.400"
|
||
fontSize="md"
|
||
fontWeight="normal"
|
||
maxW={{ sm: "300px", lg: "500px" }}
|
||
>
|
||
A lot of people don't appreciate the moment until it’s passed. I'm
|
||
not trying my hardest, and I'm not trying to do
|
||
</Text>
|
||
</Flex>
|
||
</Flex>
|
||
<Accordion
|
||
allowToggle
|
||
w={{ sm: "300px", md: "650px", xl: "930px" }}
|
||
mb="16px"
|
||
>
|
||
<AccordionItem border="none">
|
||
<AccordionButton
|
||
_focus={{}}
|
||
_hover={{}}
|
||
p="40px 0px 20px 0px"
|
||
borderBottom="1px solid"
|
||
borderColor={borderColor}
|
||
>
|
||
<Box flex="1" textAlign="left">
|
||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||
How do I order?
|
||
</Text>
|
||
</Box>
|
||
<AccordionIcon color={secondaryColor} />
|
||
</AccordionButton>
|
||
<AccordionPanel p="18px 0px 40px 0px">
|
||
<Text
|
||
color="gray.400"
|
||
fontWeight="normal"
|
||
fontSize="sm"
|
||
textAlign="left"
|
||
alignSelf="flex-start"
|
||
justifySelf="flex-start"
|
||
>
|
||
We’re not always in the position that we want to be at. We’re
|
||
constantly growing. We’re constantly making mistakes. We’re
|
||
constantly trying to express ourselves and actualize our dreams.
|
||
If you have the opportunity to play this game of life you need
|
||
to appreciate every moment. A lot of people don’t appreciate the
|
||
moment until it’s passed.
|
||
</Text>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
<AccordionItem border="none">
|
||
<AccordionButton
|
||
_focus={{}}
|
||
_hover={{}}
|
||
p="40px 0px 20px 0px"
|
||
borderBottom="1px solid"
|
||
borderColor={borderColor}
|
||
>
|
||
<Box flex="1" textAlign="left">
|
||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||
How can i make the payment?
|
||
</Text>
|
||
</Box>
|
||
<AccordionIcon color={secondaryColor} />
|
||
</AccordionButton>
|
||
<AccordionPanel p="18px 0px 40px 0px">
|
||
<Text
|
||
color="gray.400"
|
||
fontWeight="normal"
|
||
fontSize="sm"
|
||
textAlign="left"
|
||
alignSelf="flex-start"
|
||
justifySelf="flex-start"
|
||
>
|
||
It really matters and then like it really doesn’t matter. What
|
||
matters is the people who are sparked by it. And the people who
|
||
are like offended by it, it doesn’t matter. Because it's about
|
||
motivating the doers. Because I’m here to follow my dreams and
|
||
inspire other people to follow their dreams, too. We’re not
|
||
always in the position that we want to be at. We’re constantly
|
||
growing. We’re constantly making mistakes. We’re constantly
|
||
trying to express ourselves and actualize our dreams. If you
|
||
have the opportunity to play this game of life you need to
|
||
appreciate every moment. A lot of people don’t appreciate the
|
||
moment until it’s passed.
|
||
</Text>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
<AccordionItem border="none">
|
||
<AccordionButton
|
||
_focus={{}}
|
||
_hover={{}}
|
||
p="40px 0px 20px 0px"
|
||
borderBottom="1px solid"
|
||
borderColor={borderColor}
|
||
>
|
||
<Box flex="1" textAlign="left">
|
||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||
How much time does it take to receive the order?
|
||
</Text>
|
||
</Box>
|
||
<AccordionIcon color={secondaryColor} />
|
||
</AccordionButton>
|
||
<AccordionPanel p="18px 0px 40px 0px">
|
||
<Text
|
||
color="gray.400"
|
||
fontWeight="normal"
|
||
fontSize="sm"
|
||
textAlign="left"
|
||
alignSelf="flex-start"
|
||
justifySelf="flex-start"
|
||
>
|
||
The time is now for it to be okay to be great. People in this
|
||
world shun people for being great. For being a bright color. For
|
||
standing out. But the time is now to be okay to be the greatest
|
||
you. Would you believe in what you believe in, if you were the
|
||
only one who believed it? If everything I did failed - which it
|
||
doesn't, it actually succeeds - just the fact that I'm willing
|
||
to fail is an inspiration. People are so scared to lose that
|
||
they don't even try. Like, one thing people can't say is that
|
||
I'm not trying, and I'm not trying my hardest, and I'm not
|
||
trying to do the best way I know how.
|
||
</Text>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
<AccordionItem border="none">
|
||
<AccordionButton
|
||
_focus={{}}
|
||
_hover={{}}
|
||
p="40px 0px 20px 0px"
|
||
borderBottom="1px solid"
|
||
borderColor={borderColor}
|
||
>
|
||
<Box flex="1" textAlign="left">
|
||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||
Can I resell the products?
|
||
</Text>
|
||
</Box>
|
||
<AccordionIcon color={secondaryColor} />
|
||
</AccordionButton>
|
||
<AccordionPanel p="18px 0px 40px 0px">
|
||
<Text
|
||
color="gray.400"
|
||
fontWeight="normal"
|
||
fontSize="sm"
|
||
textAlign="left"
|
||
alignSelf="flex-start"
|
||
justifySelf="flex-start"
|
||
>
|
||
I always felt like I could do anything. That’s the main thing
|
||
people are controlled by! Thoughts- their perception of
|
||
themselves! They're slowed down by their perception of
|
||
themselves. If you're taught you can’t do anything, you won’t do
|
||
anything. I was taught I could do everything. If everything I
|
||
did failed - which it doesn't, it actually succeeds - just the
|
||
fact that I'm willing to fail is an inspiration. People are so
|
||
scared to lose that they don't even try. Like, one thing people
|
||
can't say is that I'm not trying, and I'm not trying my hardest,
|
||
and I'm not trying to do the best way I know how.
|
||
</Text>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
<AccordionItem border="none">
|
||
<AccordionButton
|
||
_focus={{}}
|
||
_hover={{}}
|
||
p="40px 0px 20px 0px"
|
||
borderBottom="1px solid"
|
||
borderColor={borderColor}
|
||
>
|
||
<Box flex="1" textAlign="left">
|
||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||
Where do I find the shipping details?
|
||
</Text>
|
||
</Box>
|
||
<AccordionIcon color={secondaryColor} />
|
||
</AccordionButton>
|
||
<AccordionPanel p="18px 0px 40px 0px">
|
||
<Text
|
||
color="gray.400"
|
||
fontWeight="normal"
|
||
fontSize="sm"
|
||
textAlign="left"
|
||
alignSelf="flex-start"
|
||
justifySelf="flex-start"
|
||
>
|
||
There’s nothing I really wanted to do in life that I wasn’t able
|
||
to get good at. That’s my skill. I’m not really specifically
|
||
talented at anything except for the ability to learn. That’s
|
||
what I do. That’s what I’m here for. Don’t be afraid to be wrong
|
||
because you can’t learn anything from a compliment. I always
|
||
felt like I could do anything. That’s the main thing people are
|
||
controlled by! Thoughts- their perception of themselves! They're
|
||
slowed down by their perception of themselves. If you're taught
|
||
you can’t do anything, you won’t do anything. I was taught I
|
||
could do everything.
|
||
</Text>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
</Flex>
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
export default Pricing;
|