Merge pull request #1631 from lumi-tip/development-lumi-7756

💄 redising of pricing
breatheco-de · Oct 8, 2024 · 52a4efb · 52a4efb
2 parents 6485918 + 37a023b
commit 52a4efb
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 34 deletions.
diff --git a/src/common/components/Faq.jsx b/src/common/components/Faq.jsx
@@ -14,8 +14,9 @@ import useStyle from '../hooks/useStyle';
 
 function Faq({ items, hideLastBorder, headingStyle, highlightColor, acordionContainerStyle, ...rest }) {
   const { hexColor } = useStyle();
+
   return (
-    <Box position="relative" background={hexColor.featuredColor} padding="15px" borderRadius="10px" {...rest}>
+    <Box position="relative" background={hexColor.blueLight} padding="15px" borderRadius="10px" {...rest}>
       <Heading textAlign="center" margin="20px 0" {...headingStyle}>
         FAQ
       </Heading>

diff --git a/src/common/hooks/useStyle.js b/src/common/hooks/useStyle.js
@@ -45,13 +45,15 @@ const useStyle = () => {
     backgroundColor: useColorModeValue('#ffffff', '#17202A'),
     featuredColor: useColorModeValue('#EEF9FE', '#283340'),
     featuredColor2: useColorModeValue('#F5F8FF', '#283340'),
+    featuredColor3: useColorModeValue('#F3FAFE', '#19202a'),
     lightColor: useColorModeValue('#F5F5F5', '#4A5568'),
     lightColor2: useColorModeValue('#F5F5F5', '#283340'),
     lightColor3: useColorModeValue('#F5F5F5', '#17202A'),
     lightColor4: useColorModeValue('#F0F2F5', '#4A5568'),
     white2: useColorModeValue('#ffffff', '#283340'),
     danger: useColorModeValue('#CD0000', '#e26161'),
     blueDefault: '#0097CD',
+    blueLight: useColorModeValue('#E1F5FF', '#2b3340'),
     yellowDefault: '#FFB718',
     green: '#38A56A',
     greenLight: '#25BF6C',

diff --git a/src/pages/pricing.jsx b/src/pages/pricing.jsx
@@ -45,7 +45,7 @@ function PricingView() {
   const [activeType, setActiveType] = useState('monthly');
   const { isAuthenticated } = useAuth();
   const [relatedSubscription, setRelatedSubscription] = useState({});
-  const { hexColor, featuredColor } = useStyle();
+  const { hexColor, modal } = useStyle();
   const [isFetching, setIsFetching] = useState({
     courses: true,
     selectedPlan: true,
@@ -264,43 +264,45 @@ function PricingView() {
   const existentOptions = switcherInfo.filter((l) => l.exists);
   const existsSubscriptionMehtod = paymentTypePlans.hasSubscriptionMethod;
 
+  console.log(publicMktCourses);
+
   return (
-    <>
+    <Container maxWidth="100%" background={hexColor.featuredColor3} paddingY="4rem">
       {isFetching.courses && (
         <LoaderScreen position="fixed" />
       )}
       <Container
         maxWidth="1280px"
         position="relative"
         margin="0 auto"
-        my="4rem"
         padding="0 10px"
       >
         <Box marginBottom="20px">
-          <Heading marginBottom="20px" size="xl" as="h2" textAlign="center">
-            {t('heading')}
-          </Heading>
-          <Text maxWidth="900px" margin="0 auto" textAlign="center" text marginBottom="60px" fontSize="26px">
-            {t('sub-heading')}
-          </Text>
 
           {!isAbleToShowPrices && (
             <Flex
               direction={['column', 'column', 'row', 'row']}
             >
-              <Text
-                size="38px"
-                flexShrink={[0, 0, 1, 1]}
-                fontWeight="700"
-                textAlign={['center', 'center', 'left', 'left']}
-                width={['100%', '100%', '305px', '305px']}
-              >
-                {t('choose-your-career-path')}
-              </Text>
+              <Box maxWidth="350px">
+                <Text size="xl" as="h2" textAlign="start" color={hexColor.blueDefault}>
+                  {t('heading')}
+                </Text>
+                <Text
+                  size="30px"
+                  flexShrink={[0, 0, 1, 1]}
+                  fontWeight="700"
+                  width={['100%', '100%', '100%', '100%']}
+                >
+                  {t('choose-your-career-path')}
+                </Text>
+                <Text marginBottom="26px" size="xl" as="h2" textAlign="start">
+                  {t('sub-heading')}
+                </Text>
+              </Box>
               <DraggableContainer>
                 <Flex gridGap="24px">
                   {publicMktCourses?.length > 0 && publicMktCourses.slice(0, 2).map((course) => (
-                    <Flex key={course.slug} borderRadius="8px" padding="24px 8px 8px" margin="43px 0 0 0" justifyContent="space-between" minHeight="200px" width={['23rem', '23rem', '27rem', '27rem']} minWidth={['23rem', '23rem', '27rem', '27rem']} flexDirection="column" gridGap="16px" position="relative" border="1px solid" borderColor={hexColor.borderColor}>
+                    <Flex key={course.slug} borderRadius="8px" background={modal.background3} padding="24px 8px 8px" margin="43px 0 0 0" justifyContent="space-between" minHeight="200px" width={['23rem', '23rem', '27rem', '27rem']} minWidth={['23rem', '23rem', '27rem', '27rem']} flexDirection="column" gridGap="16px" position="relative">
                       <Box position="absolute" borderRadius="full" top="-30px">
                         <Img src={course.icon_url} width="44px" height="44px" />
                       </Box>
@@ -310,6 +312,7 @@ function PricingView() {
                           as="h3"
                           lineHeight="normal"
                           fontWeight="700"
+                          color={course.color}
                         >
                           {course?.course_translation?.title}
                         </Heading>
@@ -320,8 +323,25 @@ function PricingView() {
                           {course?.course_translation?.description}
                         </Text>
                       </Flex>
+                      <Link
+                        variant="buttonDefault"
+                        borderRadius="3px"
+                        href={`/${lang}/pricing?course=${course?.slug}`}
+                        textAlign="center"
+                        width="100%"
+                        opacity="0.9"
+                        _hover={{ opacity: 1 }}
+                        _active={{ opacity: 1 }}
+                        display="flex"
+                        justifyContent="center"
+                        alignItems="center"
+                        gap="10px"
+                      >
+                        <Text fontSize="auto">{t('see-plans-and-prices')}</Text>
+                        <Icon icon="longArrowRight" width="18px" height="18px" color="white" />
+                      </Link>
                       {course?.course_translation?.landing_variables?.length > 0 && (
-                        <Flex flexDirection="column" gridGap="10px" borderRadius="4px" padding="12px" backgroundColor={featuredColor}>
+                        <Flex flexDirection="column" gridGap="10px" borderRadius="4px" padding="12px">
                           {course?.course_translation?.landing_variables.map((content) => {
                             const isUrlImage = content?.icon?.includes('http');
                             return (
@@ -343,18 +363,6 @@ function PricingView() {
                           })}
                         </Flex>
                       )}
-                      <Link
-                        variant="buttonDefault"
-                        borderRadius="3px"
-                        href={`/${lang}/pricing?course=${course?.slug}`}
-                        textAlign="center"
-                        width="100%"
-                        opacity="0.9"
-                        _hover={{ opacity: 1 }}
-                        _active={{ opacity: 1 }}
-                      >
-                        {t('see-plans-and-prices')}
-                      </Link>
                     </Flex>
                   ))}
                 </Flex>
@@ -493,7 +501,7 @@ function PricingView() {
           </Text>
         </Box>
       </Container>
-    </>
+    </Container>
   );
 }