Subscription Page

src/components/Home/Clients.tsx

@@ -37,6 +37,7 @@ export const ClientsGrid = (props: GridProps) => (
     }}
     gridTemplateColumns={{ base: 'repeat(5, 1fr)', md: 'repeat(10, 1fr)' }}
     justifyContent={'end'}
+    w='full'
     {...props}
   >
     <Card variant='client'>

src/components/Pricing/Card.tsx

@@ -45,12 +45,17 @@ const PricingCard = ({
         <Text>{subtitle}</Text>
       </CardHeader>
       <CardBody>
-        <Button isDisabled={isDisabled || false} onClick={() => setValue('planId', plan.id)} type='submit'>
+        <Button
+          isDisabled={isDisabled || false}
+          onClick={() => setValue('planId', plan.id)}
+          type='submit'
+          variant={'solid'}
+        >
           <Trans i18nKey='subscribe'>Subscribe</Trans>
         </Button>
-        <Text>
+        <Text mt={4}>
           <Trans i18nKey='pricing_card.from' values={{ price }}>
-            From ${{ price }}/year
+            From {{ price }}/year
           </Trans>
         </Text>
         <Box>
@@ -62,7 +67,7 @@ const PricingCard = ({
             ))}
           </UnorderedList>
         </Box>
-        <Button onClick={handleViewFeatures}>
+        <Button onClick={handleViewFeatures} variant={'transparent'}>
           <Trans i18nKey='pricing_card.view_features'>View All features</Trans>
         </Button>
       </CardBody>

src/components/Pricing/ComparisonTable.tsx

@@ -1,4 +1,4 @@
-import { Box, Progress, Table, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
+import { Box, Flex, Progress, Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
 import { dotobject } from '@vocdoni/sdk'
 import { forwardRef } from 'react'
 import { Trans } from 'react-i18next'
@@ -13,56 +13,73 @@ type ComparisonSectionTableProps = {
   plans: Plan[]
   features: string[]
   category: string
+  idx: number
 }
 
-const ComparisonSectionTable = ({ titleKey, plans, features, category }: ComparisonSectionTableProps) => {
+const ComparisonSectionTable = ({ titleKey, plans, features, category, idx }: ComparisonSectionTableProps) => {
   const translations = usePlanTranslations()
+
   return (
     <Box mb={8}>
-      <Text fontSize='xl' mb={4}>
-        <Trans i18nKey={titleKey} />
-      </Text>
-      <Table variant='striped' borderWidth={1}>
-        <Thead>
-          <Tr>
-            <Th>
-              <Trans i18nKey='pricing.features'>Features</Trans>
-            </Th>
-            {plans.map((plan) => (
-              <Th key={plan.id} textAlign='center'>
-                {translations[plan.id].title || plan.name}
+      <TableContainer>
+        <Table variant='striped' borderWidth={1}>
+          <Thead>
+            <Tr>
+              <Th>
+                <Text as={'span'} color='comparsions_table_title'>
+                  <Trans i18nKey={titleKey} />
+                </Text>
               </Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {features.map((key) => {
-            const featurePath = `${category}.${key}`
-            const translationKey = PlanTableFeaturesTranslationKeys[featurePath]
-            return (
-              <Tr key={key}>
-                <Td fontWeight='medium'>
-                  <Trans i18nKey={translationKey} />
-                </Td>
-                {plans.map((plan) => {
-                  const value = dotobject(plan, featurePath)
-                  return (
-                    <Td key={plan.id} textAlign='center' w={40}>
-                      {typeof value === 'boolean' ? (
-                        <BooleanIcon value={value} />
-                      ) : typeof value === 'number' ? (
-                        value
-                      ) : (
-                        '-'
-                      )}
-                    </Td>
-                  )
-                })}
-              </Tr>
-            )
-          })}
-        </Tbody>
-      </Table>
+
+              <>
+                {plans.map((plan) => (
+                  <Th key={plan.id} textAlign='center'>
+                    {!idx && (
+                      <Flex flexDirection={'column'} justifyContent={'center'}>
+                        <Text as={'span'} textAlign={'center'}>
+                          {translations[plan.id].title}
+                        </Text>
+                        <Text as={'span'} textAlign={'center'} fontWeight={'normal'}>
+                          <Trans i18nKey='pricing_card.from' values={{ price: plan.startingPrice / 100 }}>
+                            From {{ price: plan.startingPrice }}/year
+                          </Trans>
+                        </Text>
+                      </Flex>
+                    )}
+                  </Th>
+                ))}
+              </>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {features.map((key) => {
+              const featurePath = `${category}.${key}`
+              const translationKey = PlanTableFeaturesTranslationKeys[featurePath]
+              return (
+                <Tr key={key}>
+                  <Td fontWeight='medium'>
+                    <Trans i18nKey={translationKey} />
+                  </Td>
+                  {plans.map((plan) => {
+                    const value = dotobject(plan, featurePath)
+                    return (
+                      <Td key={plan.id} textAlign='center' w={40}>
+                        {typeof value === 'boolean' ? (
+                          <BooleanIcon value={value} />
+                        ) : typeof value === 'number' ? (
+                          value
+                        ) : (
+                          '-'
+                        )}
+                      </Td>
+                    )
+                  })}
+                </Tr>
+              )
+            })}
+          </Tbody>
+        </Table>
+      </TableContainer>
     </Box>
   )
 }
@@ -75,20 +92,25 @@ export const ComparisonTable = forwardRef<HTMLDivElement, ComparisonTableProps>(
   }
 
   return (
-    <Box ref={ref} overflowX='auto' mt={8}>
-      <Text fontSize='2xl' mb={4} textAlign='center'>
-        <Trans i18nKey='pricing.compare_features'>Compare all features</Trans>
-      </Text>
+    <Flex ref={ref} justifyContent={'center'}>
+      <Box maxW='950px' overflowX={'scroll'}>
+        <Box width={'full'} overflowX='auto'>
+          <Text fontSize='2xl' mb={4} textAlign='center'>
+            <Trans i18nKey='pricing.compare_features'>Compare all features</Trans>
+          </Text>
 
-      {Object.entries(CategorizedFeatureKeys).map(([category, features]) => (
-        <ComparisonSectionTable
-          key={category}
-          titleKey={CategoryTitleKeys[category]}
-          plans={plans}
-          features={features}
-          category={category}
-        />
-      ))}
-    </Box>
+          {Object.entries(CategorizedFeatureKeys).map(([category, features], idx) => (
+            <ComparisonSectionTable
+              key={category}
+              titleKey={CategoryTitleKeys[category]}
+              plans={plans}
+              features={features}
+              category={category}
+              idx={idx}
+            />
+          ))}
+        </Box>
+      </Box>
+    </Flex>
   )
 })

src/components/Pricing/Plans.tsx

@@ -249,7 +249,13 @@ export const SubscriptionPlans = ({ featuresRef }: { featuresRef?: MutableRefObj
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Flex flexDir='column' gap={4}>
-          <Flex flexDir='column'>
+          <Flex
+            flexDir={{ base: 'column', lg: 'row' }}
+            justifyContent={'center'}
+            alignItems={'center'}
+            gap={{ base: 2, lg: 4 }}
+            mb={{ base: 4, lg: 6 }}
+          >
             <Text>
               <Trans i18nKey='pricing.membership_size'>Select your membership size:</Trans>
             </Text>
@@ -327,7 +333,7 @@ export const SubscriptionModal = ({
             <Text>
               <Trans i18nKey='pricing.help'>Need some help?</Trans>
             </Text>
-            <Button as={ReactRouterLink} to={Routes.contact} target='_blank'>
+            <Button as={ReactRouterLink} to={Routes.contact} target='_blank' colorScheme='whiteAlpha' color={'white'}>
               <Trans i18nKey='contact_us'>Contact us</Trans>
             </Button>
           </Box>

src/elements/PublicContents.tsx

@@ -42,7 +42,8 @@ export const PublicContentsLayout = () => (
 export const PlansLayout = () => (
   <Flex
     flexDirection='column'
-    gap={5}
+    gap={{ base: '60px', lg: '100px' }}
+    mt={{ base: 10, lg: 14 }}
     width='full'
     mx='auto'
     maxW='1400px'

src/elements/plans.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
+import Clients from '~components/Home/Clients'
+import Faqs from '~components/Home/Faqs'
 import { ComparisonTable } from '~components/Pricing/ComparisonTable'
 import { SubscriptionPlans, usePlans } from '~components/Pricing/Plans'
 import { PricingModalProvider } from '~components/Pricing/PricingModalProvider'
@@ -21,6 +23,8 @@ const PlansPublicPage = () => {
       <PricingModalProvider>
         <SubscriptionPlans featuresRef={featuresRef} />
         <ComparisonTable ref={featuresRef} />
+        <Clients />
+        <Faqs />
       </PricingModalProvider>
     </>
   )

src/i18n/locales/ca.json

@@ -1283,6 +1283,9 @@
     "read_more": "Llegeix més"
   },
   "user_management": "Gestió d'usuaris",
+  "validation": {
+    "required": ""
+  },
   "verification_code": "Verification Code",
   "verification_code_placeholder": "Enter the verification code",
   "verification_code_resent": "Verification code resent!",

src/i18n/locales/en.json

@@ -919,7 +919,7 @@
     "your_plan": "You're currently subscribed to the <plan>{{ plan }}</plan> plan. Upgrade now, and you'll only pay the difference for the remaining time in your billing period. Starting from your next billing cycle on <plan>{{ billing, format }}</plan>, you'll be charged the full price for your new plan."
   },
   "pricing_card": {
-    "from": "From ${{ price }}/year",
+    "from": "From {{ price }}/year",
     "most_popular_plan": "Most popular plan",
     "view_features": "View all features"
   },
@@ -1271,6 +1271,9 @@
     "read_more": "Read more"
   },
   "user_management": "User Managment",
+  "validation": {
+    "required": ""
+  },
   "verification_code": "Verification Code",
   "verification_code_placeholder": "Enter the verification code",
   "verification_code_resent": "Verification code resent!",

src/theme/colors.ts

@@ -131,6 +131,7 @@ export const colors = {
       dark: 'gray.600',
     },
   },
+  comparsions_table_title: colorsBase.primary,
   contents: {
     bg: {
       light: colorsBase.white.pure,

src/theme/components/card.ts

@@ -50,8 +50,6 @@ export const Card = defineMultiStyleConfig({
         w: { base: '80%', sm: 72 },
         _dark: {
           bgColor: 'pricing_card.bg.dark',
-          border: '0.1px solid',
-          borderColor: 'pricing_card.border_dark',
         },
       },
       header: {
@@ -86,6 +84,10 @@ export const Card = defineMultiStyleConfig({
           mt: 3,
           mb: 2,
           w: 'full',
+          borderRadius: 'full',
+          height: 0,
+          minH: '30px',
+          py: 2,
         },
         '& > p:first-of-type': {
           fontWeight: 'extrabold',
@@ -175,7 +177,7 @@ export const Card = defineMultiStyleConfig({
       body: {
         p: 0,
         fontSize: '10px',
-        minH: '50px',
+        minH: '60px',
         display: 'flex',
         justifyContent: 'center',