Merge pull request #370 from deriv-com/meenu-export-cta-block

deriv-com · Feb 16, 2024 · b9bd843 · b9bd843
2 parents 8597ab4 + 16595ae
commit b9bd843
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/libs/blocks/src/index.ts b/libs/blocks/src/index.ts
@@ -16,3 +16,4 @@ export * from './lib/search';
 export * from './lib/social-proof';
 export * from './lib/platform';
 export * from './lib/block-wrapper';
+export * from './lib/cta';
diff --git a/libs/blocks/src/lib/cta/cta.stories.tsx b/libs/blocks/src/lib/cta/cta.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import CTABlock from '.';
-import { Text } from '@deriv/quill-design';
+import { Button, Text } from '@deriv/quill-design';
 
 const meta = {
   title: 'Blocks/CTABlock',
@@ -36,8 +36,8 @@ export const CTAContentLeft: Story = {
     content: (
       <>
         <img
-          className="block  w-full lg:hidden"
-          src="https://placehold.co/420x230"
+          className="block  w-full flex-1  lg:hidden"
+          src="https://placehold.co/256x496"
           alt="Placeholder"
         />
         <img

diff --git a/libs/blocks/src/lib/cta/index.tsx b/libs/blocks/src/lib/cta/index.tsx
@@ -18,16 +18,16 @@ const CTABlock = ({
   variant = 'content-left',
 }: CTABlockProps) => {
   return (
-    <Section className="py-general-4xl">
+    <Section className=" py-general-4xl">
       <div
         className={clsx(
-          ' relative isolate flex flex-col justify-center gap-gap-lg  lg:mx-auto lg:max-w-[1232px]',
+          ' relative isolate flex  h-full min-h-[496px] flex-col justify-end gap-gap-lg  md:justify-center  lg:mx-auto  lg:max-w-[1232px] ',
           variant === 'content-left' ? 'lg:flex-row-reverse' : 'lg:flex-row  ',
         )}
       >
         <div
           className={clsx(
-            'flex flex-col justify-center gap-gap-3xl px-general-lg lg:px-general-none ',
+            'flex w-full flex-col justify-center gap-gap-3xl px-general-lg pb-general-2xl lg:px-general-none lg:pb-general-none',
             variant === 'content-left'
               ? 'lg:ps-general-2xl '
               : 'lg:pe-general-2xl ',
@@ -41,15 +41,19 @@ const CTABlock = ({
               'lg:w-full',
             )}
           >
-            {title && <Heading.H2>{title}</Heading.H2>}
+            {title && (
+              <Heading.H2 className="text-solid-slate-50 lg:text-typography-prominent">
+                {title}
+              </Heading.H2>
+            )}
             {description && <Text>{description}</Text>}
           </div>
           {children && children}
         </div>
         {content && (
           <div
             className={clsx([
-              'absolute -z-10  overflow-hidden object-cover object-top',
+              'absolute -z-10  h-full overflow-hidden object-cover object-top ',
               'h-full w-full lg:relative',
             ])}
           >