Subscription Page

src/components/Home/Clients.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody, CardHeader, Grid, GridProps, Image, Text } from '@chakra-ui/react'
+import { Box, Card, CardBody, CardHeader, Grid, GridProps, Image, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import barca from '/assets/barca.png'
 import bellpuig from '/assets/bellpuig.svg.png'
@@ -11,23 +11,16 @@ import erc from '/assets/erc.svg'
 import omnium from '/assets/omnium.png'
 import ticanoia from '/assets/ticanoia.png'
 
-const Clients = () => {
+const Clients = ({ ...props }) => {
   const { t } = useTranslation()
 
   return (
-    <>
-      <Text
-        variant='home-description-color'
-        textAlign='center'
-        mb='52px'
-        mt='100px'
-        fontFamily='basier'
-        fontSize='23px'
-      >
+    <Box {...props}>
+      <Text variant='home-description-color' textAlign='center' mb='52px' fontFamily='basier' fontSize='23px'>
         {t('home.clients_title')}
       </Text>
       <ClientsGrid />
-    </>
+    </Box>
   )
 }
 
@@ -36,15 +29,9 @@ export const ClientsGrid = (props: GridProps) => (
     as='section'
     width='full'
     m='0 auto'
-    px={{
-      base: '10px',
-      sm: '20px',
-      md: '80px',
-    }}
     maxW={{ base: '100%', sm: '80%', lg: '900px' }}
     flexDirection={{ base: 'column', sm: 'row' }}
     justifyContent='center'
-    mb={{ lg: '60px' }}
     gridTemplateColumns='repeat(5, 1fr)'
     gridRowGap={{ base: '0px', sm: '30px', lg: '50px' }}
     {...props}

src/components/Home/Faqs.tsx

@@ -13,7 +13,6 @@ const Faqs = () => {
         sm: '20px',
         md: '80px',
       }}
-      py={{ base: '60px', lg: '100px' }}
     >
       <Image
         src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398d7c1bcc2b72f92aa4f58_diagonal-violet-to-pink.svg'

src/components/Pricing/Card.tsx

@@ -45,10 +45,15 @@ 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
           </Trans>
@@ -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,67 @@ 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}>
+      <Text fontSize='xl' mb={4} color='comparsions_table_title'>
         <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>
+                <Trans i18nKey='pricing.features'>Features</Trans>
               </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'>
+                  <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 }}></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 +86,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

@@ -223,7 +223,6 @@
   "control": "Control:",
   "copy": {
     "address": "Copia l'adreça",
-    "copied": "Copied",
     "copied_title": "Copiat!"
   },
   "country_selector": {
@@ -766,6 +765,7 @@
   "invite_people": "Convida Gent",
   "keep_me_logged": "Mantén-me connectat",
   "languages": "Languages",
+  "Light mode": "Light mode",
   "link": {
     "discord": "Enllaç al Discord de Vocdoni",
     "github": "Enllaç al Github de Vocdoni",
@@ -1278,6 +1278,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

@@ -220,7 +220,6 @@
   "control": "Control:",
   "copy": {
     "address": "Copy address",
-    "copied": "Copied",
     "copied_title": "Copied!"
   },
   "country_selector": {
@@ -759,6 +758,7 @@
   "invite_people": "Invite People",
   "keep_me_logged": "Keep me logged in",
   "languages": "Languages",
+  "Light mode": "Light mode",
   "link": {
     "discord": "Link to Vocdoni's discord",
     "github": "Link to Vocdoni's github",
@@ -1266,6 +1266,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/i18n/locales/es.json

@@ -223,7 +223,6 @@
   "control": "Control:",
   "copy": {
     "address": "Copiar dirección",
-    "copied": "Copied",
     "copied_title": "¡Copiado!"
   },
   "country_selector": {
@@ -766,6 +765,7 @@
   "invite_people": "Invitar Gente",
   "keep_me_logged": "Mantenerme conectado",
   "languages": "Languages",
+  "Light mode": "Light mode",
   "link": {
     "discord": "Enlace al Discord de Vocdoni",
     "github": "Enlace al Github de Vocdoni",
@@ -1278,6 +1278,9 @@
     "read_more": "Leer más"
   },
   "user_management": "Gestión de usuarios",
+  "validation": {
+    "required": ""
+  },
   "verification_code": "Verification Code",
   "verification_code_placeholder": "Enter the verification code",
   "verification_code_resent": "Verification code resent!",

src/theme/colors.ts

@@ -123,6 +123,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',