📄 Add Commercial License for ee folder (#1532)

ee/apps/landing-page/components/PricingPage/PricingCard/Card.tsx

@@ -0,0 +1,27 @@
+import { Box, BoxProps, useColorModeValue } from '@chakra-ui/react'
+import * as React from 'react'
+import { CardBadge } from './CardBadge'
+
+export interface CardProps extends BoxProps {
+  isPopular?: boolean
+}
+
+export const Card = (props: CardProps) => {
+  const { children, isPopular, ...rest } = props
+  return (
+    <Box
+      bg={useColorModeValue('white', 'gray.700')}
+      position="relative"
+      px="6"
+      py="6"
+      overflow="hidden"
+      shadow="lg"
+      maxW="md"
+      width="100%"
+      {...rest}
+    >
+      {isPopular && <CardBadge>Popular</CardBadge>}
+      {children}
+    </Box>
+  )
+}

ee/apps/landing-page/components/PricingPage/PricingCard/CardBadge.tsx

@@ -0,0 +1,30 @@
+import { Flex, FlexProps, Text, useColorModeValue } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const CardBadge = (props: FlexProps) => {
+  const { children, ...flexProps } = props
+  return (
+    <Flex
+      bg={useColorModeValue('green.500', 'green.200')}
+      position="absolute"
+      right={-20}
+      top={6}
+      width="240px"
+      transform="rotate(45deg)"
+      py={2}
+      justifyContent="center"
+      alignItems="center"
+      {...flexProps}
+    >
+      <Text
+        fontSize="xs"
+        textTransform="uppercase"
+        fontWeight="bold"
+        letterSpacing="wider"
+        color={useColorModeValue('white', 'gray.800')}
+      >
+        {children}
+      </Text>
+    </Flex>
+  )
+}

ee/apps/landing-page/components/PricingPage/PricingCard/index.tsx

@@ -0,0 +1,94 @@
+import {
+  Flex,
+  Heading,
+  List,
+  ListIcon,
+  ListItem,
+  Text,
+  useColorModeValue,
+  VStack,
+} from '@chakra-ui/react'
+import * as React from 'react'
+import { CheckCircleIcon } from '../../../assets/icons/CheckCircleIcon'
+import { Card, CardProps } from './Card'
+import { formatPrice } from '@typebot.io/billing/helpers/formatPrice'
+
+export interface PricingCardData {
+  features: React.ReactNode[]
+  name: string
+  price: number | string
+  featureLabel?: string
+}
+
+interface PricingCardProps extends CardProps {
+  data: PricingCardData
+  icon?: JSX.Element
+  button: React.ReactElement
+}
+
+export const PricingCard = ({
+  data,
+  icon,
+  button,
+  ...rest
+}: PricingCardProps) => {
+  const { features, price, name } = data
+  const accentColor = useColorModeValue('blue.500', 'white')
+  const formattedPrice = typeof price === 'number' ? formatPrice(price) : price
+
+  return (
+    <Card rounded="xl" bgColor="gray.800" {...rest}>
+      <Flex justifyContent="space-between" flexDir="column" h="full">
+        <Flex flexDir="column">
+          <VStack spacing={6}>
+            {icon}
+            <Heading size="md" fontWeight="extrabold" color={rest.borderColor}>
+              {name}
+            </Heading>
+          </VStack>
+          <Flex
+            align="flex-end"
+            justify="center"
+            fontWeight="extrabold"
+            color={accentColor}
+            my="8"
+          >
+            <Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
+              {formattedPrice}
+            </Heading>
+            {typeof price === 'number' && (
+              <Text fontWeight="inherit" fontSize="xl">
+                / month
+              </Text>
+            )}
+          </Flex>
+
+          <List spacing="4" mb="8" maxW="30ch" mx="auto">
+            {data.featureLabel && (
+              <Text fontWeight="bold">{data.featureLabel}</Text>
+            )}
+            {features.map((feature, index) => (
+              <ListItem
+                fontWeight="medium"
+                key={index}
+                display="flex"
+                alignItems="center"
+              >
+                <ListIcon
+                  fontSize="xl"
+                  as={CheckCircleIcon}
+                  marginEnd={2}
+                  color={accentColor}
+                  fill={rest.borderColor}
+                />
+                {feature}
+              </ListItem>
+            ))}
+          </List>
+        </Flex>
+
+        {button}
+      </Flex>
+    </Card>
+  )
+}