update pay function
This commit is contained in:
978
boilerplate-chakra-pro-main/components/pricing/index.tsx
Normal file
978
boilerplate-chakra-pro-main/components/pricing/index.tsx
Normal file
@@ -0,0 +1,978 @@
|
||||
'use client';
|
||||
|
||||
// @ts-nocheck
|
||||
import { FooterWebsite } from '../footer/FooterWebsite';
|
||||
import Card from '@/components/card/Card';
|
||||
import Faq from '@/components/landing/faq';
|
||||
import InnerContent from '@/components/layout/innerContent';
|
||||
import NavbarFixed from '@/components/navbar/NavbarFixed';
|
||||
import { Database } from '@/types_db';
|
||||
import { getStripe } from '@/utils/stripe/client';
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
Link,
|
||||
SimpleGrid,
|
||||
Text,
|
||||
useColorModeValue
|
||||
} from '@chakra-ui/react';
|
||||
import { User } from '@supabase/supabase-js';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
FaCcVisa,
|
||||
FaCcMastercard,
|
||||
FaCcPaypal,
|
||||
FaCcAmex,
|
||||
FaCcApplePay
|
||||
} from 'react-icons/fa';
|
||||
import {
|
||||
MdChevronRight,
|
||||
MdCheckCircle,
|
||||
MdAttachMoney,
|
||||
MdLock,
|
||||
MdOutlineDoDisturbOn
|
||||
} from 'react-icons/md';
|
||||
import { checkoutWithStripe } from '@/utils/stripe/server';
|
||||
import { getErrorRedirect } from '@/utils/helpers';
|
||||
|
||||
type Subscription = Database['public']['Tables']['subscriptions']['Row'];
|
||||
type Product = Database['public']['Tables']['products']['Row'];
|
||||
type Price = Database['public']['Tables']['prices']['Row'];
|
||||
interface ProductWithPrices extends Product {
|
||||
prices: Price[];
|
||||
}
|
||||
interface PriceWithProduct extends Price {
|
||||
products: Product | null;
|
||||
}
|
||||
interface SubscriptionWithProduct extends Subscription {
|
||||
prices: PriceWithProduct | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
user: User | null | undefined;
|
||||
products: ProductWithPrices[];
|
||||
subscription: SubscriptionWithProduct | null;
|
||||
}
|
||||
|
||||
export default function Pricing({ user, products, subscription }: Props) {
|
||||
const router = useRouter();
|
||||
const currentPath = usePathname();
|
||||
const [priceIdLoading, setPriceIdLoading] = useState<string>();
|
||||
const handleCheckout = async (price: Price) => {
|
||||
setPriceIdLoading(price.id);
|
||||
|
||||
if (!user) {
|
||||
setPriceIdLoading(undefined);
|
||||
return router.push('/signin/signup');
|
||||
}
|
||||
|
||||
const { errorRedirect, sessionId } = await checkoutWithStripe(
|
||||
price,
|
||||
currentPath
|
||||
);
|
||||
|
||||
if (errorRedirect) {
|
||||
setPriceIdLoading(undefined);
|
||||
return router.push(errorRedirect);
|
||||
}
|
||||
|
||||
if (!sessionId) {
|
||||
setPriceIdLoading(undefined);
|
||||
return router.push(
|
||||
getErrorRedirect(
|
||||
currentPath,
|
||||
'An unknown error occurred.',
|
||||
'Please try again later or contact a system administrator.'
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const stripe = await getStripe();
|
||||
stripe?.redirectToCheckout({ sessionId });
|
||||
|
||||
setPriceIdLoading(undefined);
|
||||
};
|
||||
const [version, setVersion] = useState('monthly');
|
||||
const textColor = useColorModeValue('#120F43', 'white');
|
||||
const brandColor = useColorModeValue('brand.500', 'white');
|
||||
const brandColorPrice = useColorModeValue('brand.500', 'white');
|
||||
const card = useColorModeValue('#fff', 'rgba(255, 255, 255, 0.05)');
|
||||
|
||||
return (
|
||||
<Flex
|
||||
id="pricing"
|
||||
bgSize="cover"
|
||||
w="100%"
|
||||
direction={{ base: 'column' }}
|
||||
pt={{ base: '120px', md: '180px' }}
|
||||
overflow="hidden"
|
||||
position="relative"
|
||||
>
|
||||
<NavbarFixed />
|
||||
<InnerContent
|
||||
zIndex="1"
|
||||
maxW={{ base: '100%', md: '100%', xl: '1170px' }}
|
||||
pb={{ base: '60px', md: '100px' }}
|
||||
>
|
||||
{/* Title */}
|
||||
<Flex
|
||||
px={{ base: '20px', md: '0px' }}
|
||||
w="100%"
|
||||
mb="40px"
|
||||
direction={{ base: 'column' }}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
textAlign="start"
|
||||
px={{ base: '20px', md: '40px', xl: '0px' }}
|
||||
mb={{ base: '0px', lg: '30px' }}
|
||||
justify="center"
|
||||
align="center"
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
textAlign={{ base: 'center', lg: 'center' }}
|
||||
fontWeight="700"
|
||||
letterSpacing="2px"
|
||||
color={brandColorPrice}
|
||||
fontSize={{ base: 'xs', md: 'md' }}
|
||||
w="100%"
|
||||
mb="10px"
|
||||
>
|
||||
PRICING PLANS
|
||||
</Text>
|
||||
<Text
|
||||
as="h2"
|
||||
textAlign={{ base: 'center', lg: 'center' }}
|
||||
color={textColor}
|
||||
fontWeight="800"
|
||||
fontSize={{ base: '28px', md: '40px', lg: '40px', xl: '48px' }}
|
||||
lineHeight={{ base: '38px', md: '50px', lg: '50px', xl: '60px' }}
|
||||
w={{ base: '100%', md: '90%', lg: '80%', xl: '74%' }}
|
||||
>
|
||||
Create outstanding Essays for less than a Netflix subscription per
|
||||
month
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<SimpleGrid
|
||||
px={{ base: '20px', md: '0px' }}
|
||||
w="100%"
|
||||
columns={{ base: 1, lg: 3 }}
|
||||
gap="20px"
|
||||
mb="20px"
|
||||
>
|
||||
<Card
|
||||
borderRadius="16px"
|
||||
bg={card}
|
||||
maxW="377px"
|
||||
mx="auto"
|
||||
alignItems={{ base: 'start', lg: 'center' }}
|
||||
p={{ base: '16px', md: '26px' }}
|
||||
pt={{ base: '26px', md: '36px' }}
|
||||
flexDirection="column"
|
||||
>
|
||||
<Flex mb="20px" mx="auto">
|
||||
<Text
|
||||
fontSize="22px"
|
||||
letterSpacing="0px"
|
||||
textAlign="center"
|
||||
fontWeight="700"
|
||||
color={textColor}
|
||||
>
|
||||
Demo Plan
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
zIndex="1"
|
||||
px={{ base: '18px', md: '34px' }}
|
||||
pt="40px"
|
||||
pb="40px"
|
||||
borderRadius="16px"
|
||||
bg="#F3F5FA"
|
||||
mb="40px"
|
||||
direction="column"
|
||||
w="100%"
|
||||
>
|
||||
<Flex mb="30px" direction="row" justify="center">
|
||||
<Text
|
||||
color="#120F43"
|
||||
fontSize={{ base: '48px', md: '54px' }}
|
||||
lineHeight="100%"
|
||||
letterSpacing="0px"
|
||||
fontWeight="extrabold"
|
||||
>
|
||||
Free
|
||||
</Text>
|
||||
</Flex>
|
||||
<Link href="/dashboard/signin">
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="checkout"
|
||||
mx="auto"
|
||||
borderRadius="45px"
|
||||
w="100%"
|
||||
h="54px"
|
||||
>
|
||||
{subscription ? 'Manage' : 'Get started now'}
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
|
||||
<Flex w={{ base: '100%', xl: '100%' }} direction="column">
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Standard Essays
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Up to 4 Essay types
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Up to 300 words per Essay
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="gray.400"
|
||||
as={MdOutlineDoDisturbOn}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="gray.400"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Essay Tones (Academic, etc.)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="gray.400"
|
||||
as={MdOutlineDoDisturbOn}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="gray.400"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Academic Citation formats (APA, etc)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="gray.400"
|
||||
as={MdOutlineDoDisturbOn}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="gray.400"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Academic Levels (Master, etc.)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="gray.400"
|
||||
as={MdOutlineDoDisturbOn}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="gray.400"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Premium features
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="gray.400"
|
||||
as={MdOutlineDoDisturbOn}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="gray.400"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Priority Support
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
{products.map((product) => {
|
||||
const price = product?.prices?.find(
|
||||
(price) => price.id === 'price_1P3gGXGx8VbJPRgzdEZODy8K'
|
||||
);
|
||||
if (product.id === 'prod_PtTCPDFZbburMa') {
|
||||
if (!price) return null;
|
||||
return (
|
||||
<Card
|
||||
key={product.id}
|
||||
borderRadius="16px"
|
||||
bg="#120F43"
|
||||
maxW="377px"
|
||||
mx="auto"
|
||||
alignItems={{ base: 'start', lg: 'center' }}
|
||||
p={{ base: '16px', md: '26px' }}
|
||||
pt={{ base: '26px', md: '36px' }}
|
||||
flexDirection="column"
|
||||
>
|
||||
{/* @ts-ignore-nextline */}
|
||||
<Flex mb="20px" mx="auto">
|
||||
<Text
|
||||
fontSize="22px"
|
||||
letterSpacing="0px"
|
||||
textAlign="center"
|
||||
fontWeight="700"
|
||||
color="white"
|
||||
>
|
||||
{product.name?.toString()}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
zIndex="1"
|
||||
px={{ base: '18px', md: '34px' }}
|
||||
pt="40px"
|
||||
pb="40px"
|
||||
borderRadius="16px"
|
||||
bg="#120F43"
|
||||
boxShadow="0px 8px 25px -4px rgba(255, 255, 255, 0.30) inset"
|
||||
mb="40px"
|
||||
direction="column"
|
||||
w="100%"
|
||||
>
|
||||
<Flex mb="30px" direction="row" justify="center">
|
||||
<Text
|
||||
color="white"
|
||||
fontSize={{ base: '48px', md: '54px' }}
|
||||
lineHeight="100%"
|
||||
letterSpacing="0px"
|
||||
fontWeight="extrabold"
|
||||
>
|
||||
$
|
||||
{price.unit_amount !== null
|
||||
? price.unit_amount / 100
|
||||
: price.unit_amount}
|
||||
</Text>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
fontWeight="700"
|
||||
fontSize="sm"
|
||||
mt="auto"
|
||||
>
|
||||
{version !== 'yearly' ? '/month' : '/month'}
|
||||
</Text>
|
||||
{/* <Text
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
textDecoration="line-through"
|
||||
>
|
||||
{version !== 'yearly' ? 'reg. $24' : 'reg. $24'}
|
||||
</Text> */}
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="checkoutDark"
|
||||
mx="auto"
|
||||
borderRadius="45px"
|
||||
w="100%"
|
||||
h="54px"
|
||||
onClick={() => handleCheckout(price)}
|
||||
>
|
||||
{subscription ? 'Manage' : 'Get started now'}
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{/* Features */}
|
||||
<Flex w={{ base: '100%', xl: '100%' }} direction="column">
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Unlimited Premium Essays / month
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Access to 12+ Essay types
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Up to 1500 words per Essay
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Academic Citation formats (APA, etc)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Essay Tones (Academic, etc.)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Academic Levels (Master, etc.)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Exceptional Essays in seconds
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Easy-to-use Essay Generator
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color="white"
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color="white"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Priority Support
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
})}
|
||||
{products.map((product) => {
|
||||
const price = product?.prices?.find(
|
||||
(price) => price.id === 'price_1P3gMyGx8VbJPRgzkoB6Fp8F'
|
||||
);
|
||||
if (product.id === 'prod_PtTJ6R3RnzmIPX') {
|
||||
if (!price) return null;
|
||||
return (
|
||||
<Card
|
||||
key={product.id}
|
||||
borderRadius="16px"
|
||||
bg={card}
|
||||
maxW="377px"
|
||||
mx="auto"
|
||||
alignItems={{ base: 'start', lg: 'center' }}
|
||||
p={{ base: '16px', md: '26px' }}
|
||||
pt={{ base: '26px', md: '36px' }}
|
||||
flexDirection="column"
|
||||
>
|
||||
<Flex mb="20px" mx="auto">
|
||||
<Text
|
||||
fontSize="22px"
|
||||
letterSpacing="0px"
|
||||
textAlign="center"
|
||||
fontWeight="700"
|
||||
color={textColor}
|
||||
>
|
||||
{product.name?.toString()}
|
||||
</Text>
|
||||
<Badge
|
||||
display="flex"
|
||||
bg="#F2EFFF"
|
||||
alignItems="center"
|
||||
borderRadius="99px"
|
||||
px="6px"
|
||||
pb="8px"
|
||||
ms="10px"
|
||||
textColor={brandColor}
|
||||
>
|
||||
Save 35%
|
||||
</Badge>
|
||||
</Flex>
|
||||
<Flex
|
||||
zIndex="1"
|
||||
px={{ base: '18px', md: '34px' }}
|
||||
pt="40px"
|
||||
pb="40px"
|
||||
borderRadius="16px"
|
||||
bg="#F3F5FA"
|
||||
mb="40px"
|
||||
direction="column"
|
||||
w="100%"
|
||||
>
|
||||
<Flex mb="30px" direction="row" justify="center">
|
||||
<Text
|
||||
color={'transparent'}
|
||||
fontSize={{ base: '48px', md: '54px' }}
|
||||
lineHeight="100%"
|
||||
letterSpacing="0px"
|
||||
fontWeight="extrabold"
|
||||
bgGradient="linear-gradient(91deg, #3D1DFF 0%, #6147FF 22.40%, #D451FF 46.35%, #EC458D 75.00%, #FFCA8B 100%)"
|
||||
bgClip="text"
|
||||
>
|
||||
$
|
||||
{price.unit_amount !== null
|
||||
? price.unit_amount / 100
|
||||
: price.unit_amount}
|
||||
</Text>
|
||||
<Flex direction="column" ms="8px">
|
||||
<Text
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
fontWeight="700"
|
||||
fontSize="sm"
|
||||
mt="auto"
|
||||
>
|
||||
{version !== 'yearly' ? '/year' : '/year'}
|
||||
</Text>
|
||||
<Text
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
fontWeight="500"
|
||||
textDecoration="line-through"
|
||||
fontSize="sm"
|
||||
mt="2px"
|
||||
>
|
||||
{version !== 'yearly' ? 'reg.$108' : 'reg.$108'}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="checkout"
|
||||
mx="auto"
|
||||
borderRadius="45px"
|
||||
w="100%"
|
||||
h="54px"
|
||||
onClick={() => handleCheckout(price)}
|
||||
>
|
||||
{subscription ? 'Manage' : 'Get started now'}
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{/* Features */}
|
||||
<Flex w={{ base: '100%', xl: '100%' }} direction="column">
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Unlimited Premium Essays / year
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Access to 12+ Essay types
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Up to 1500 words per Essay
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Academic Citation formats (APA, etc)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Essay Tones (Academic, etc.)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Academic Levels (Master, etc.)
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Exceptional Essays in seconds
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Easy-to-use Essay Generator
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="30px">
|
||||
<Icon
|
||||
me="10px"
|
||||
w="20px"
|
||||
h="20px"
|
||||
color={brandColor}
|
||||
as={MdCheckCircle}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={{ base: 'sm', lg: 'sm', xl: 'md' }}
|
||||
fontWeight="600"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Priority Support
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Flex
|
||||
px={{ base: '20px', md: '0px' }}
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
mt="30px"
|
||||
>
|
||||
<Flex alignItems="center" mb="20px">
|
||||
<Icon
|
||||
me="4px"
|
||||
w="24px"
|
||||
h="24px"
|
||||
color={textColor}
|
||||
as={MdAttachMoney}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize="sm"
|
||||
fontWeight="500"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
7-Days money back
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="20px">
|
||||
<Icon me="4px" w="24px" h="24px" color={textColor} as={MdLock} />
|
||||
<Text
|
||||
as="span"
|
||||
fontSize="sm"
|
||||
fontWeight="500"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Secured AES-256 Encrypted payments powered by Stripe:
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" mb="20px">
|
||||
<Icon me="10px" w="30px" h="30px" color={textColor} as={FaCcVisa} />
|
||||
<Icon
|
||||
me="10px"
|
||||
w="30px"
|
||||
h="30px"
|
||||
color={textColor}
|
||||
as={FaCcMastercard}
|
||||
/>
|
||||
<Icon
|
||||
me="10px"
|
||||
w="30px"
|
||||
h="30px"
|
||||
color={textColor}
|
||||
as={FaCcPaypal}
|
||||
/>
|
||||
<Icon
|
||||
me="10px"
|
||||
w="30px"
|
||||
h="30px"
|
||||
color={textColor}
|
||||
as={FaCcApplePay}
|
||||
/>
|
||||
<Icon w="30px" h="30px" color={textColor} as={FaCcAmex} />
|
||||
</Flex>
|
||||
</Flex>
|
||||
</InnerContent>
|
||||
<Faq />
|
||||
<FooterWebsite />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user