Merge pull request #383 from deriv-com/meenu-cta-block-improvements

deriv-com · Feb 21, 2024 · 39c8b07 · 39c8b07
2 parents da7de76 + fd78cce
commit 39c8b07
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 30 deletions.
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 { Button, Text } from '@deriv/quill-design';
+import { Text } from '@deriv/quill-design';
 
 const meta = {
   title: 'Blocks/CTABlock',
@@ -11,37 +11,21 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    title: 'Title goes here',
-    description:
-      'Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here',
-    children: <Text>This is the children</Text>,
-    content: (
-      <img
-        className="flex  rounded-xl"
-        src="https://placehold.co/608x480"
-        alt="Placeholder"
-      />
-    ),
-  },
-};
 export const CTAContentLeft: Story = {
   args: {
-    title: 'Title goes here',
-
+    title: 'Join over 2.5 million online traders worldwide',
     description:
       'Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here',
     children: <Text>This is the children</Text>,
     content: (
       <>
         <img
-          className="block  w-full flex-1  lg:hidden"
+          className="block h-full w-full object-cover lg:hidden"
           src="https://placehold.co/256x496"
           alt="Placeholder"
         />
         <img
-          className="hidden w-full rounded-xl lg:block"
+          className="relative hidden h-full w-full rounded-xl lg:block"
           src="https://placehold.co/608x480"
           alt="Placeholder"
         />
@@ -52,19 +36,19 @@ export const CTAContentLeft: Story = {
 export const CTAContentRight: Story = {
   args: {
     variant: 'content-right',
-    title: 'Title goes here',
+    title: 'Join over 2.5 million online traders worldwide',
     description:
       'Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here',
     children: <Text>This is the children</Text>,
     content: (
       <>
         <img
-          className="block  w-full lg:hidden"
+          className="block h-full w-full object-cover lg:hidden"
           src="https://placehold.co/420x230"
           alt="Placeholder"
         />
         <img
-          className="hidden w-full rounded-xl lg:block"
+          className="relative hidden h-full w-full rounded-xl lg:block"
           src="https://placehold.co/608x480"
           alt="Placeholder"
         />

diff --git a/libs/blocks/src/lib/cta/index.tsx b/libs/blocks/src/lib/cta/index.tsx
@@ -25,9 +25,12 @@ export const CTABlock = ({
         )}
       >
         {content && (
-          <div className="-z-10 h-full w-full overflow-hidden object-cover object-top max-lg:absolute lg:relative ">
-            {content}
-          </div>
+          <>
+            <div className="absolute inset-50 z-10 bg-cta-gradient lg:bg-none"></div>
+            <div className="-z-10 h-full w-full overflow-hidden  object-cover object-top max-lg:absolute lg:relative ">
+              {content}
+            </div>
+          </>
         )}
         <div
           className={qtMerge(
@@ -37,12 +40,16 @@ export const CTABlock = ({
             'flex w-full flex-col justify-center gap-gap-3xl px-general-lg pb-general-2xl md:justify-center lg:px-general-none lg:pb-general-none',
           )}
         >
-          <div className="flex w-full flex-col gap-gap-lg sm:w-[50%] lg:w-full">
+          <div className="flex w-full flex-col gap-gap-lg">
             {title && (
-              <Heading.H2 className="text-solid-slate-50 lg:text-typography-prominent">
-                {title}
-              </Heading.H2>
+              <>
+                <Heading.H2 className="hidden lg:block">{title}</Heading.H2>
+                <Heading.H2 className="z-20 block text-solid-slate-50 max-sm:w-full sm:w-[350px] lg:hidden lg:w-full">
+                  {title}
+                </Heading.H2>
+              </>
             )}
+
             {description && <Text>{description}</Text>}
           </div>
           {children && children}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -24,7 +24,9 @@ module.exports = {
       backgroundImage: (theme) => ({
         'gradient-hero': `linear-gradient(84deg, rgba(0, 0, 0, 0.80) 6.97%, rgba(0, 0, 0, 0.00) 107.22%)`,
         'gradient-hero-mobile': `linear-gradient(180deg, rgba(0, 0, 0, 0.00) 1.45%, rgba(0, 0, 0, 0.00) 34.13%, rgba(15, 10, 10, 0.80) 86.38%)`,
+        'cta-gradient': `linear-gradient(180deg, rgba(24, 28, 37, 0.00) 1.45%, rgba(24, 28, 37, 0.40) 46.38%)`,
       }),
+
     },
   },
   presets: [require('@deriv/quill-design/quill-tailwind/tailwind.config.cjs')],