Merge pull request #391 from deriv-com/pr-3003-fix-hero-and-update-bo…

…ttom-banner

Fasih/DPROD-3003/Added heading option and removed content

libs/blocks/src/index.ts

@@ -16,4 +16,4 @@ export * from './lib/search';
 export * from './lib/social-proof';
 export * from './lib/platform';
 export * from './lib/block-wrapper';
-export * from './lib/cta';
+export * from './lib/cta/cta-left';

libs/blocks/src/lib/cta/cta-left/cta-left.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CTALeft from '.';
+import { Text } from '@deriv/quill-design';
+
+const meta = {
+  title: 'Blocks/CTA/CTABlockLeft',
+  component: CTALeft,
+  tags: ['autodocs'],
+} satisfies Meta<typeof CTALeft>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CTAContentLeft: Story = {
+  args: {
+    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 h-full w-full object-cover lg:hidden"
+          src="https://placehold.co/256x496"
+          alt="Placeholder"
+        />
+        <img
+          className="relative hidden h-full w-full rounded-xl lg:block"
+          src="https://placehold.co/608x480"
+          alt="Placeholder"
+        />
+      </>
+    ),
+  },
+};

libs/blocks/src/lib/cta/cta-left/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Heading, Section, Text, qtMerge } from '@deriv/quill-design';
+
+export type CTABlockProps = {
+  content?: React.ReactNode;
+  children?: React.ReactNode;
+  title: React.ReactNode | string;
+  description?: React.ReactNode | string;
+  className?: string;
+  variant?: 'content-left' | 'content-right';
+};
+export const CTALeft = ({
+  content,
+  children,
+  title,
+  description,
+  variant = 'content-left',
+}: CTABlockProps) => {
+  return (
+    <Section className=" py-general-4xl">
+      <div
+        className={qtMerge(
+          variant === 'content-left' ? 'lg:flex-row' : 'lg:flex-row-reverse ',
+          ' relative isolate flex h-full min-h-[496px] justify-end gap-gap-lg  max-lg:flex-col md:justify-center lg:mx-auto  lg:max-w-[1232px] ',
+        )}
+      >
+        {content && (
+          <>
+            <div className="absolute inset-50 z-10 bg-cta-gradient lg:bg-none"></div>
+            <div className="absolute -z-10 h-full w-full  overflow-hidden object-cover object-top lg:relative ">
+              {content}
+            </div>
+          </>
+        )}
+        <div
+          className={qtMerge(
+            variant === 'content-left'
+              ? 'lg:ps-general-2xl '
+              : 'lg:pe-general-2xl ',
+            '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">
+            {title && (
+              <>
+                <Heading.H2 className="hidden lg:block">{title}</Heading.H2>
+                <Heading.H2 className="z-20 block w-full text-solid-slate-50 sm:w-[350px] lg:hidden">
+                  {title}
+                </Heading.H2>
+              </>
+            )}
+
+            {description && <Text>{description}</Text>}
+          </div>
+          {children && children}
+        </div>
+      </div>
+    </Section>
+  );
+};
+
+export default CTALeft;

libs/blocks/src/lib/cta/cta.stories.tsx → libs/blocks/src/lib/cta/cta-right/cta-right.stories.tsx

@@ -3,36 +3,14 @@ import CTABlock from '.';
 import { Text } from '@deriv/quill-design';
 
 const meta = {
-  title: 'Blocks/CTABlock',
+  title: 'Blocks/CTA/CTABlockRight',
   component: CTABlock,
   tags: ['autodocs'],
 } satisfies Meta<typeof CTABlock>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const CTAContentLeft: Story = {
-  args: {
-    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 h-full w-full object-cover lg:hidden"
-          src="https://placehold.co/256x496"
-          alt="Placeholder"
-        />
-        <img
-          className="relative hidden h-full w-full rounded-xl lg:block"
-          src="https://placehold.co/608x480"
-          alt="Placeholder"
-        />
-      </>
-    ),
-  },
-};
 export const CTAContentRight: Story = {
   args: {
     variant: 'content-right',

libs/blocks/src/lib/cta/cta-right/index.tsx

@@ -0,0 +1,10 @@
+import CTALeft, { CTABlockProps } from '../cta-left';
+
+export const CTARight = ({
+  variant = 'content-right',
+  ...rest
+}: CTABlockProps) => {
+  return <CTALeft variant={variant} {...rest} />;
+};
+
+export default CTARight;

libs/blocks/src/lib/cta/cta-v5/cta-v5.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BlockWrapper, { CTAV5 } from '.';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
+import { Button } from '@deriv/quill-design';
+
+const meta = {
+  title: 'Blocks/CTA/CTAV5',
+  component: CTAV5,
+  tags: ['autodocs'],
+} satisfies Meta<typeof BlockWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof BlockWrapper>;
+
+export const Default: Story = {
+  args: {
+    title: 'Title goes here',
+    description: 'Description goes here',
+  },
+};
+
+export const CTAV5CenterContent: Story = {
+  args: {
+    title: 'Title goes here',
+    description: 'Description goes here',
+    background: 'gray',
+    children: <Button size="lg">Open demo account</Button>,
+  },
+};

libs/blocks/src/lib/cta/cta-v5/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import BlockWrapper, { BlockWrapperProps } from '../../block-wrapper';
+import { qtMerge } from '@deriv/quill-design';
+
+export const CTAV5 = ({
+  heading = 'H2',
+  className,
+  ...rest
+}: BlockWrapperProps) => {
+  return (
+    <BlockWrapper
+      className={qtMerge('items-center justify-center gap-gap-3xl', className)}
+      heading={heading}
+      {...rest}
+    />
+  );
+};
+
+export default CTAV5;

libs/blocks/src/lib/cta/index.tsx

@@ -1,62 +1,19 @@
-import React from 'react';
-import { Heading, Section, Text, qtMerge } from '@deriv/quill-design';
+import { ReactNode } from 'react';
+import { CTALeft } from './cta-left';
+import { CTARight } from './cta-right';
+import { CTAV5 } from './cta-v5';
 
-export type CTABlockProps = {
-  content?: React.ReactNode;
-  children?: React.ReactNode;
-  title: React.ReactNode | string;
-  description?: React.ReactNode | string;
-  className?: string;
-  variant?: 'content-left' | 'content-right';
+type CTAVariants = {
+  Left: typeof CTALeft;
+  Right: typeof CTARight;
+  V5: typeof CTAV5;
 };
-export const CTABlock = ({
-  content,
-  children,
-  title,
-  description,
-  variant = 'content-left',
-}: CTABlockProps) => {
-  return (
-    <Section className=" py-general-4xl">
-      <div
-        className={qtMerge(
-          variant === 'content-left' ? 'lg:flex-row' : 'lg:flex-row-reverse ',
-          ' relative isolate flex h-full min-h-[496px] justify-end gap-gap-lg  max-lg:flex-col md:justify-center lg:mx-auto  lg:max-w-[1232px] ',
-        )}
-      >
-        {content && (
-          <>
-            <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(
-            variant === 'content-left'
-              ? 'lg:ps-general-2xl '
-              : 'lg:pe-general-2xl ',
-            '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">
-            {title && (
-              <>
-                <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}
-        </div>
-      </div>
-    </Section>
-  );
+export const CTA: CTAVariants = ({ children }: { children: ReactNode }) => {
+  return children;
 };
+CTA.Left = CTALeft;
+CTA.Right = CTARight;
+CTA.V5 = CTAV5;
 
-export default CTABlock;
+export default CTA;

libs/blocks/src/lib/footer/footer-cta-block/footer-cta.stories.tsx

@@ -3,7 +3,7 @@ import FooterCTABlock from '.';
 import { Heading, Button } from '@deriv/quill-design';
 
 const meta = {
-  title: 'Blocks/CTA',
+  title: 'Blocks/CTA/FooterCTABlock',
   component: FooterCTABlock,
   tags: ['autodocs'],
   argTypes: {

libs/blocks/src/lib/hero/content-less/index.tsx

@@ -1,4 +1,3 @@
-import Content from '../content';
 import BlockWrapper from '../../block-wrapper';
 import { HeroBlockProps } from '..';
 
@@ -7,12 +6,17 @@ const ContentLess = ({
   title,
   description,
   children,
+  background,
 }: HeroBlockProps) => {
   return (
-    <BlockWrapper className={className} background="light">
-      <Content title={title} description={description} center={true}>
-        {children}
-      </Content>
+    <BlockWrapper
+      title={title}
+      description={description}
+      heading="H1"
+      className={className}
+      background={background}
+    >
+      {children}
     </BlockWrapper>
   );
 };

libs/blocks/src/lib/hero/index.tsx

@@ -13,6 +13,7 @@ export type HeroBlockProps = {
   content?: ReactNode;
   children?: ReactNode;
   className?: string;
+  background?: 'gray' | 'light';
 };
 
 export interface HomeHeroProps {