Pricing
Single tier
import { chakra, Stack, HStack, Text, Container, Icon, useColorModeValue } from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { BsFillCheckCircleFill } from 'react-icons/bs';
const list = [
'5 new flashcards per day',
'Full access to reviews',
'Public profile',
'Discord community'
];
const SingleTierPricing = () => {
return (
<Container maxW="5xl" p="6">
<chakra.h1 fontSize="5xl" fontWeight="bold" textAlign="center" mb={5}>
Pricing
</chakra.h1>
<PricingCard />
</Container>
);
};
const PricingCard = () => {
return (
<Stack
w="max-content"
spacing={5}
p={10}
border="1px solid"
borderColor={useColorModeValue('gray.400', 'gray.600')}
rounded="md"
margin="0 auto"
textAlign="center"
>
<chakra.h1 fontSize="7xl" fontWeight="400">
$15{' '}
<Text as="sub" fontSize="md" left="-10px">
/mon
</Text>
</chakra.h1>
{list.map((text, index) => (
<HStack key={index} spacing={3}>
<Icon as={BsFillCheckCircleFill} h={6} w={6} color="green.400" />
<Text fontSize="lg" color="gray.500">
{text}
</Text>
</HStack>
))}
</Stack>
);
};
export default SingleTierPricing;
Two tiers
import {
chakra,
Stack,
VStack,
HStack,
Text,
Container,
Box,
Icon,
Button,
Divider,
SimpleGrid,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { BiCheck } from 'react-icons/bi';
const plansList = [
{
title: 'Android Single Site',
subLabel: 'Build one application',
price: 150,
features: [
'Authentication',
'Tab Bar Navigation',
'Push Notifications',
'API Integration Built-in',
'Easy Upgrades'
]
},
{
title: 'Android Unlimited',
subLabel: 'Build unlimited apps',
price: 799,
features: [
'Authentication',
'Tab Bar Navigation',
'Push Notifications',
'API Integration Built-in',
'Easy Upgrades',
'Build Unlimited Android Apps'
]
}
];
const TwoTiersPricing = () => {
return (
<Container maxW="5xl" p="6">
<chakra.h2 fontSize="5xl" fontWeight="bold" textAlign="center" mb={5}>
Android Pricing
</chakra.h2>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={2} mt={4}>
{plansList.map((plan, index) => (
<PricingCard key={index} {...plan} />
))}
</SimpleGrid>
</Container>
);
};
interface PricingCardProps {
title: string;
subLabel: string;
price: number;
features: string[];
}
const PricingCard = ({ title, subLabel, price, features }: PricingCardProps) => {
return (
<Box
minW={{ base: 'xs', sm: 'sm' }}
border="1px solid"
borderColor={useColorModeValue('gray.400', 'gray.600')}
rounded="md"
marginInline="auto"
my={3}
_hover={{
boxShadow: useColorModeValue(
'0 4px 6px rgba(160, 174, 192, 0.6)',
'0 4px 6px rgba(9, 17, 28, 0.4)'
)
}}
>
<Box p={6}>
<chakra.h2 fontSize="2xl" fontWeight="400">
{title}
</chakra.h2>
<Text fontSize="sm">{subLabel}</Text>
<Text fontSize="4xl" fontWeight="bold" my={4}>
${price}
<Text as="sub" fontSize="md" fontWeight="normal">
/year
</Text>
</Text>
<Button colorScheme="blue" variant="solid" size="md" rounded="md" w="100%">
Get Started
</Button>
</Box>
<Divider />
<VStack p={6} spacing={4} alignItems="flex-start">
<Text fontSize="sm" fontWeight="semibold">
WHAT'S INCLUDED
</Text>
{features.map((feature, index) => (
<HStack key={index} spacing={3}>
<Icon as={BiCheck} h={4} w={4} color="green.500" />
<Text fontSize="sm" color="gray.500">
{feature}
</Text>
</HStack>
))}
</VStack>
</Box>
);
};
export default TwoTiersPricing;
Three tiers with icons
import {
chakra,
VStack,
HStack,
Text,
Container,
Box,
Icon,
Button,
SimpleGrid,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { BiCheck } from 'react-icons/bi';
import { BsFillCloudCheckFill } from 'react-icons/bs';
import { AiOutlineCloudServer } from 'react-icons/ai';
import { FaServer } from 'react-icons/fa';
import { IconType } from 'react-icons';
const plansList = [
{
title: 'Hobby',
price: 49,
icon: BsFillCloudCheckFill,
features: ['Deploy 5 apps', '2 Servers', 'Push to deploy', 'Collaborate with your team']
},
{
title: 'Growth',
price: 79,
icon: AiOutlineCloudServer,
features: [
'Deploy 10 apps',
'4 Servers',
'Push to deploy',
'Collaborate with your team',
'Setup load balanced clusters'
]
},
{
title: 'Business',
price: 99,
icon: FaServer,
features: [
'Deploy unlimited apps',
'unlimited Servers',
'Push to deploy',
'Collaborate with your team',
'Setup load balanced clusters'
]
}
];
const ThreeTiersPricing = () => {
return (
<Container maxW="7xl" py="8" px="0">
<chakra.h2 fontSize="5xl" fontWeight="bold" textAlign="center" mb={5}>
Simple and affordable pricing
</chakra.h2>
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={1} mt={4}>
{plansList.map((plan, index) => (
<PricingCard key={index} {...plan} />
))}
</SimpleGrid>
</Container>
);
};
interface PricingCardProps {
title: string;
price: number;
features: string[];
icon: IconType;
}
const PricingCard = ({ title, price, icon, features }: PricingCardProps) => {
return (
<Box
minW={{ base: 'xs', sm: 'xs', lg: 'sm' }}
rounded="md"
bg={useColorModeValue('white', 'gray.800')}
boxShadow="md"
marginInline="auto"
my={3}
p={6}
>
<Box textAlign="center">
<Icon as={icon} h={10} w={10} color="teal.500" />
<chakra.h2 fontSize="2xl" fontWeight="bold">
{title}
</chakra.h2>
<Box fontSize="7xl" fontWeight="bold">
<Text as="sup" fontSize="3xl" fontWeight="normal" top="-1em">
$
</Text>
{price}
</Box>
<Text fontSize="md" color="gray.500">
per month
</Text>
</Box>
<VStack spacing={2} alignItems="flex-start" my={6}>
{features.map((feature, index) => (
<HStack key={index} spacing={3}>
<Icon as={BiCheck} h={4} w={4} color="green.500" />
<Text fontSize="sm" color="gray.500">
{feature}
</Text>
</HStack>
))}
</VStack>
<Button colorScheme="teal" variant="solid" size="md" rounded="md" w="100%">
Get Started
</Button>
</Box>
);
};
export default ThreeTiersPricing;
