blsmedia/bot
2
0
Fork 0
Code Activity

docs(lp): 💄 Small visual fixes

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-17 14:37:00 +01:00
parent 8ba231f393
commit 52b773379e
12 changed files with 159 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/landing-page/components/PricingPage/PricingCard/Card.tsx
View File

@ -13,8 +13,7 @@ export const Card = (props: CardProps) => {
bg={useColorModeValue('white', 'gray.700')}
position="relative"
px="6"
pb="6"
pt="16"
py="6"
overflow="hidden"
shadow="lg"
maxW="md"

77
apps/landing-page/components/PricingPage/PricingCard/index.tsx
View File

@ -31,43 +31,48 @@ export const PricingCard = (props: PricingCardProps) => {
return (
<Card rounded="xl" bgColor="gray.800" {...rest}>
<VStack spacing={6}>
{icon}
<Heading size="md" fontWeight="extrabold">
{name}
</Heading>
</VStack>
<Flex
align="flex-end"
justify="center"
fontWeight="extrabold"
color={accentColor}
my="8"
>
<Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
{price}
</Heading>
{(price.includes('$') || price.includes('€')) && (
<Text fontWeight="inherit" fontSize="xl">
/ mo
</Text>
)}
<Flex justifyContent="space-between" flexDir="column" h="full">
<Flex flexDir="column">
<VStack spacing={6}>
{icon}
<Heading size="md" fontWeight="extrabold">
{name}
</Heading>
</VStack>
<Flex
align="flex-end"
justify="center"
fontWeight="extrabold"
color={accentColor}
my="8"
>
<Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
{price}
</Heading>
{(price.includes('$') || price.includes('€')) && (
<Text fontWeight="inherit" fontSize="xl">
/ month
</Text>
)}
</Flex>
<List spacing="4" mb="8" maxW="30ch" mx="auto">
{features.map((feature, index) => (
<ListItem fontWeight="medium" key={index}>
<ListIcon
fontSize="xl"
as={CheckIcon}
marginEnd={2}
color={accentColor}
fill="blue.200"
/>
{feature}
</ListItem>
))}
</List>
</Flex>
{button}
</Flex>
<List spacing="4" mb="8" maxW="30ch" mx="auto">
{features.map((feature, index) => (
<ListItem fontWeight="medium" key={index}>
<ListIcon
fontSize="xl"
as={CheckIcon}
marginEnd={2}
color={accentColor}
fill="blue.200"
/>
{feature}
</ListItem>
))}
</List>
{button}
</Card>
)
}