Hasan/platform block tab

libs/blocks/src/index.ts

@@ -14,3 +14,4 @@ export * from './lib/fast-payment';
 export * from './lib/footer';
 export * from './lib/search';
 export * from './lib/social-proof';
+export * from './lib/platform';

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import PlatformBlockTab from './tab';
+
+export type PlatformBlockType = {
+  Tab: typeof PlatformBlockTab;
+};
+
+export const PlatformBlock = ({ children }: { children: ReactNode }) => {
+  return children;
+};
+
+PlatformBlock.Tab = PlatformBlockTab;
+
+export default PlatformBlock;

libs/blocks/src/lib/platform/tab/index.tsx

@@ -0,0 +1,46 @@
+import { ComponentProps, ReactNode } from 'react';
+import {
+  FluidContainer,
+  Heading,
+  Section,
+  Text,
+  qtMerge,
+} from '@deriv/quill-design';
+import { Tab } from '@deriv-com/components';
+
+export type PlatformBlockTabProps = ComponentProps<typeof Tab.Base> & {
+  header?: string;
+  description?: ReactNode;
+  className?: string;
+  children: ReactNode;
+};
+
+const PlatformBlockTab = ({
+  header,
+  description,
+  className,
+  tabs,
+  children,
+}: PlatformBlockTabProps) => {
+  return (
+    <Section
+      className={qtMerge(
+        'py-general-4xl',
+        'bg-background-primary-container',
+        className,
+      )}
+    >
+      <FluidContainer className="flex flex-col items-center justify-center">
+        <div className="flex flex-col items-center justify-center gap-gap-3xl">
+          {header && <Heading.H2>{header}</Heading.H2>}
+          <Tab.Base tabs={tabs} className="flex flex-col gap-gap-2xl">
+            {children}
+          </Tab.Base>
+        </div>
+        {description && <Text className="my-general-xl">{description}</Text>}
+      </FluidContainer>
+    </Section>
+  );
+};
+
+export default PlatformBlockTab;

libs/blocks/src/lib/platform/tab/tab.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PlatformBlockTab from '.';
+import { CardsContainer } from '@deriv-com/components';
+import {
+  DerivProductDerivXBrandLightLogoIcon,
+  PartnersProductDerivCtraderBrandLightLogoHorizontalIcon,
+  PartnersProductDerivMt5BrandDarkLogoHorizontalIcon,
+} from '@deriv/quill-icons/Logo';
+
+const meta = {
+  title: 'Blocks/Platform/Tab',
+  component: PlatformBlockTab,
+} satisfies Meta<typeof PlatformBlockTab>;
+
+export default meta;
+type Story = StoryObj<typeof PlatformBlockTab>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <PlatformBlockTab
+        header="Header here"
+        description="desciption here description here"
+        className="bg-background-primary-base"
+        tabs={[
+          { children: 'All' },
+          { children: 'CFDs' },
+          { children: 'Options' },
+        ]}
+      >
+        <CardsContainer
+          cols="three"
+          variant="ContentBottom"
+          cards={[
+            {
+              header: 'Deriv MT5',
+              description:
+                'Your data is safe, and your funds are in segregated bank accounts per regulatory standards.',
+              icon: (
+                <PartnersProductDerivMt5BrandDarkLogoHorizontalIcon
+                  width={48}
+                  height={48}
+                />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+            {
+              header: '24/7 support',
+              description:
+                'Reach our professional, multilingual team anytime via live chat.',
+              icon: (
+                <PartnersProductDerivCtraderBrandLightLogoHorizontalIcon
+                  width={48}
+                  height={48}
+                />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+            {
+              header: 'Regulated',
+              description:
+                'We are licensed and overseen by leading global financial authorities.',
+              icon: (
+                <DerivProductDerivXBrandLightLogoIcon width={48} height={48} />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+          ]}
+        />
+        <CardsContainer
+          cols="three"
+          variant="ContentBottom"
+          cards={[
+            {
+              header: '24/7 support',
+              description:
+                'Reach our professional, multilingual team anytime via live chat.',
+              icon: (
+                <PartnersProductDerivCtraderBrandLightLogoHorizontalIcon
+                  width={48}
+                  height={48}
+                />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+            {
+              header: 'Deriv MT5',
+              description:
+                'Your data is safe, and your funds are in segregated bank accounts per regulatory standards.',
+              icon: (
+                <PartnersProductDerivMt5BrandDarkLogoHorizontalIcon
+                  width={48}
+                  height={48}
+                />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+            {
+              header: 'Regulated',
+              description:
+                'We are licensed and overseen by leading global financial authorities.',
+              icon: (
+                <DerivProductDerivXBrandLightLogoIcon width={48} height={48} />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+          ]}
+        />
+        <CardsContainer
+          cols="three"
+          variant="ContentBottom"
+          cards={[
+            {
+              header: 'Regulated',
+              description:
+                'We are licensed and overseen by leading global financial authorities.',
+              icon: (
+                <DerivProductDerivXBrandLightLogoIcon width={48} height={48} />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+            {
+              header: 'Deriv MT5',
+              description:
+                'Your data is safe, and your funds are in segregated bank accounts per regulatory standards.',
+              icon: (
+                <PartnersProductDerivMt5BrandDarkLogoHorizontalIcon
+                  width={48}
+                  height={48}
+                />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+            {
+              header: '24/7 support',
+              description:
+                'Reach our professional, multilingual team anytime via live chat.',
+              icon: (
+                <PartnersProductDerivCtraderBrandLightLogoHorizontalIcon
+                  width={48}
+                  height={48}
+                />
+              ),
+              link: {
+                href: '/',
+                content: 'Learn more',
+              },
+              color: 'light',
+              align: 'start',
+              size: 'md',
+            },
+          ]}
+        />
+      </PlatformBlockTab>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: 'disabled',
+      },
+    },
+  },
+};

libs/components/src/lib/card/base/index.tsx

@@ -34,7 +34,7 @@ const sizeVariantComponents = {
 const sizeVariantContainerGap = {
   xs: 'gap-gap-lg p-general-md',
   sm: 'gap-gap-lg p-general-lg',
-  md: 'gap-gap-xl p-general-xl',
+  md: 'gap-gap-xl p-general-2xl',
   lg: 'gap-gap-2xl p-general-2xl',
 };
 
@@ -56,7 +56,7 @@ export const BaseCard: React.FC<BaseCardProps> = ({
   contentPosition,
   align,
   color,
-  size,
+  size = 'md',
   contentClassName,
   nonContentClassName,
 }) => {