From 2dd83fe71bb96029070ac5f03a7f71689a4a6372 Mon Sep 17 00:00:00 2001
From: jia-deriv <jiawei@regentmarkets.com>
Date: Fri, 1 Dec 2023 11:49:22 +0800
Subject: [PATCH 1/3] fix: carousel full width and auto scroll speed

---
 .../src/lib/fast-payment/base/index.tsx       | 56 +++++------
 .../src/lib/cards-container/index.tsx         | 13 ++-
 libs/templates/src/lib/home/index.tsx         | 95 +++++++++++++++++++
 tailwind.config.js                            |  2 +-
 4 files changed, 127 insertions(+), 39 deletions(-)

diff --git a/libs/blocks/src/lib/fast-payment/base/index.tsx b/libs/blocks/src/lib/fast-payment/base/index.tsx
index 3517b3579..4df3462d2 100644
--- a/libs/blocks/src/lib/fast-payment/base/index.tsx
+++ b/libs/blocks/src/lib/fast-payment/base/index.tsx
@@ -1,4 +1,4 @@
-import { FluidContainer, Heading, Text } from '@deriv/quill-design';
+import { FluidContainer, Heading, Text, qtJoin } from '@deriv/quill-design';
 import { CardsContainer, CustomLink } from '@deriv-com/components';
 
 import { FastPaymentProps } from '../types';
@@ -14,41 +14,29 @@ const Base: React.FC<FastPaymentProps> = ({
 }) => {
   return (
     <FluidContainer className="bg-background-primary-container py-general-4xl">
-      <div className="flex flex-col items-center">
-        <div className="flex w-full flex-col gap-gap-3xl">
-          <div className="flex flex-col gap-gap-2xl">
-            <div className="flex flex-col items-center justify-center gap-general-lg text-center max-sm:gap-general-md">
-              <Heading.H2>{title}</Heading.H2>
-              {description && <Text size="xl">{description}</Text>}
-            </div>
+      <div className="flex flex-col items-center text-center">
+        <Heading.H2>{title}</Heading.H2>
+        {description && <Text className="pt-general-lg">{description}</Text>}
 
-            {link && (
-              <div className="flex justify-center">
-                <CustomLink
-                  size="lg"
-                  href={link.href}
-                  className="w-fit"
-                  hasIcon
-                >
-                  {link.content}
-                </CustomLink>
-              </div>
-            )}
+        {link && (
+          <div className="flex justify-center pt-general-xl">
+            <CustomLink href={link.href} className="w-fit" hasIcon>
+              {link.content}
+            </CustomLink>
           </div>
-          <div className="flex flex-col items-center justify-center gap-general-lg">
-            <div className="flex w-full justify-center">
-              <CardsContainer
-                cards={cards}
-                variant="ContentBottom"
-                cols={cols}
-                dense={dense}
-              />
-            </div>
-            {disclaimer && (
-              <p className="text-100 text-typography-subtle">{disclaimer}</p>
-            )}
-          </div>
-        </div>
+        )}
+        <CardsContainer
+          cards={cards}
+          variant="ContentBottom"
+          cols={cols}
+          dense={dense}
+          className="pt-general-2xl"
+        />
+        {disclaimer && (
+          <Text size="sm" className="pt-general-2xl text-typography-subtle">
+            {disclaimer}
+          </Text>
+        )}
       </div>
     </FluidContainer>
   );
diff --git a/libs/components/src/lib/cards-container/index.tsx b/libs/components/src/lib/cards-container/index.tsx
index 7b2b766e0..36f3adfdc 100644
--- a/libs/components/src/lib/cards-container/index.tsx
+++ b/libs/components/src/lib/cards-container/index.tsx
@@ -1,4 +1,4 @@
-import { qtMerge } from '@deriv/quill-design';
+import { qtJoin, qtMerge } from '@deriv/quill-design';
 import Card, { CardVariants } from '../card';
 
 export type CardVariantType = keyof CardVariants;
@@ -34,7 +34,14 @@ export const CardsContainer = <T extends CardVariantType>({
   const CardComponent = Card[variant];
 
   return (
-    <div className="flex w-full overflow-hidden" id="cards-container">
+    <div
+      className={qtJoin(
+        'flex overflow-hidden',
+        cols === 'infinite' ? 'w-screen' : 'w-full',
+        className,
+      )}
+      id="cards-container"
+    >
       {cols === 'infinite' ? (
         <>
           {Array.from(Array(3).keys()).map((index) => (
@@ -44,7 +51,6 @@ export const CardsContainer = <T extends CardVariantType>({
                 'gap-gap-lg', // TODO: Add sm/md/lg/xl variants if needed
                 cardColsVariant[cols],
                 'pr-general-md',
-                className,
               )}
               id="infinite-carousel"
             >
@@ -62,7 +68,6 @@ export const CardsContainer = <T extends CardVariantType>({
             'gap-gap-lg', // TODO: we might need to add sm/md/lg/xl variants
             dense ? 'w-full lg:max-w-max' : 'w-full',
             cardColsVariant[cols],
-            className,
           )}
         >
           {cards.map((card) => (
diff --git a/libs/templates/src/lib/home/index.tsx b/libs/templates/src/lib/home/index.tsx
index 4bb8fa8e9..b747a13c2 100644
--- a/libs/templates/src/lib/home/index.tsx
+++ b/libs/templates/src/lib/home/index.tsx
@@ -12,6 +12,11 @@ import FastPaymentSection from './sections/fast-payments';
 import ReviewSection from './sections/review';
 import AccountSection from './sections/account-section';
 import CTASection from './sections/cta';
+import { FastPayment } from '@deriv-com/blocks';
+import {
+  PaymentMethodBitcoinBrandIcon,
+  PaymentMethodSkrillBrandIcon,
+} from '@deriv/quill-icons';
 
 export function HomeTemplate() {
   return (
@@ -27,6 +32,96 @@ export function HomeTemplate() {
       <ProvenExcellenceSection />
       <StaticNumberBlock />
       <CTASection />
+      <FastPayment
+        description="Make instant deposits from 10,000 HKD. Withdraw in minutes."
+        title="Hassle-free deposits and withdrawals"
+        disclaimer="*testing"
+        content={{
+          cols: 'infinite',
+          cards: [
+            {
+              icon: (
+                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+            {
+              icon: (
+                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
+              ),
+              color: 'gray',
+              size: 'xs',
+              align: 'center',
+            },
+          ],
+        }}
+      />
     </PageLayout>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 581a8c9fc..2b0c0ed6c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
         },
       },
       animation: {
-        slide: '10s slide infinite linear',
+        slide: '20s slide infinite linear',
       },
     },
   },

From b5fe684cb9bfbaedfd00658b382cb33b78752c10 Mon Sep 17 00:00:00 2001
From: jia-deriv <jiawei@regentmarkets.com>
Date: Fri, 1 Dec 2023 11:51:19 +0800
Subject: [PATCH 2/3] chore: remove unwanted code

---
 .../src/lib/fast-payment/base/index.tsx       |  2 +-
 libs/templates/src/lib/home/index.tsx         | 90 -------------------
 2 files changed, 1 insertion(+), 91 deletions(-)

diff --git a/libs/blocks/src/lib/fast-payment/base/index.tsx b/libs/blocks/src/lib/fast-payment/base/index.tsx
index 4df3462d2..dcd6b3817 100644
--- a/libs/blocks/src/lib/fast-payment/base/index.tsx
+++ b/libs/blocks/src/lib/fast-payment/base/index.tsx
@@ -1,4 +1,4 @@
-import { FluidContainer, Heading, Text, qtJoin } from '@deriv/quill-design';
+import { FluidContainer, Heading, Text } from '@deriv/quill-design';
 import { CardsContainer, CustomLink } from '@deriv-com/components';
 
 import { FastPaymentProps } from '../types';
diff --git a/libs/templates/src/lib/home/index.tsx b/libs/templates/src/lib/home/index.tsx
index b747a13c2..17a927cc5 100644
--- a/libs/templates/src/lib/home/index.tsx
+++ b/libs/templates/src/lib/home/index.tsx
@@ -32,96 +32,6 @@ export function HomeTemplate() {
       <ProvenExcellenceSection />
       <StaticNumberBlock />
       <CTASection />
-      <FastPayment
-        description="Make instant deposits from 10,000 HKD. Withdraw in minutes."
-        title="Hassle-free deposits and withdrawals"
-        disclaimer="*testing"
-        content={{
-          cols: 'infinite',
-          cards: [
-            {
-              icon: (
-                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodSkrillBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-            {
-              icon: (
-                <PaymentMethodBitcoinBrandIcon height="80px" width="128px" />
-              ),
-              color: 'gray',
-              size: 'xs',
-              align: 'center',
-            },
-          ],
-        }}
-      />
     </PageLayout>
   );
 }

From a9edd05153354d763893134c30d4cb4d87eea483 Mon Sep 17 00:00:00 2001
From: jia-deriv <jiawei@regentmarkets.com>
Date: Fri, 1 Dec 2023 14:07:34 +0800
Subject: [PATCH 3/3] chore: remove cta in storybook from footer to block
 folder

---
 .../src/lib/footer/footer-cta-block/footer-cta.stories.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/blocks/src/lib/footer/footer-cta-block/footer-cta.stories.tsx b/libs/blocks/src/lib/footer/footer-cta-block/footer-cta.stories.tsx
index 990bb04e0..cc03bf208 100644
--- a/libs/blocks/src/lib/footer/footer-cta-block/footer-cta.stories.tsx
+++ b/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/Footer/FooterCTA',
+  title: 'Blocks/CTA',
   component: FooterCTABlock,
   tags: ['autodocs'],
   argTypes: {