swiper.slideNext()}
- data-testid='carousel-arrow-next'
- />
- );
-};
-
-export default NextButton;
diff --git a/src/features/Home/Carousel/PrevButton/PrevButton.module.scss b/src/features/Home/Carousel/PrevButton/PrevButton.module.scss
deleted file mode 100644
index 3277b94a4..000000000
--- a/src/features/Home/Carousel/PrevButton/PrevButton.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@use 'src/styles/utility' as *;
-
-.prev {
- width: rem(2);
- height: rem(2);
- cursor: pointer;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- z-index: 2;
- background: url(/img/arrow_left.svg) no-repeat;
- background-size: rem(2);
- background-position: center;
- left: 0;
-}
diff --git a/src/features/Home/Carousel/PrevButton/index.tsx b/src/features/Home/Carousel/PrevButton/index.tsx
deleted file mode 100644
index 13f1676af..000000000
--- a/src/features/Home/Carousel/PrevButton/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { useSwiper } from 'swiper/react';
-import styles from './PrevButton.module.scss';
-
-const PrevButton = () => {
- const swiper = useSwiper();
- return (
-
swiper.slidePrev()}
- data-testid='carousel-arrow-prev'
- />
- );
-};
-
-export default PrevButton;
diff --git a/src/features/Home/Carousel/SlideContent/SlideContent.module.scss b/src/features/Home/Carousel/SlideContent/SlideContent.module.scss
deleted file mode 100644
index e83ce0d18..000000000
--- a/src/features/Home/Carousel/SlideContent/SlideContent.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use 'src/styles/utility' as *;
-.sliderContent {
- text-align: left;
- border-left: none;
-
- &:after {
- box-sizing: border-box;
- content: '\201c';
- position: absolute;
- font-size: rem(17);
- font-weight: 700;
- z-index: -1;
- left: 0;
- top: rem(-8);
- color: var(--colors-blue100);
- opacity: 56%;
- }
-}
diff --git a/src/features/Home/Carousel/SlideContent/SlideContent.tsx b/src/features/Home/Carousel/SlideContent/SlideContent.tsx
deleted file mode 100644
index 8d28a3934..000000000
--- a/src/features/Home/Carousel/SlideContent/SlideContent.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Text } from '@deriv/ui';
-import styles from './SlideContent.module.scss';
-
-type TSlideContent = {
- name: React.ReactNode;
- name_info: React.ReactNode;
- content: React.ReactNode;
-};
-
-export const SlideContent = ({ name, name_info, content }: TSlideContent) => (
-
-
-
- {content}
-
-
-
-
- {name} , {name_info}
-
-
-
-);
diff --git a/src/features/Home/Carousel/__tests__/Carousel.test.tsx b/src/features/Home/Carousel/__tests__/Carousel.test.tsx
deleted file mode 100644
index c5a7f485a..000000000
--- a/src/features/Home/Carousel/__tests__/Carousel.test.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import { Carousel } from '../Carousel';
-import { cleanup, render, screen } from '@site/src/test-utils';
-import userEvent from '@testing-library/user-event';
-
-const mockSlidePrev = jest.fn();
-const mockSlideNext = jest.fn();
-
-jest.mock('swiper/react', () => ({
- ...jest.requireActual('swiper/react'),
- useSwiper: jest.fn().mockImplementation(() => {
- return {
- slidePrev: mockSlidePrev,
- slideNext: mockSlideNext,
- };
- }),
-}));
-
-describe('Homepage carousel', () => {
- beforeEach(() => {
- render(
);
- });
-
- afterEach(() => {
- cleanup();
- jest.clearAllMocks();
- });
-
- it('Should render the carousel', () => {
- const carousel = screen.getByTestId('carousel-component');
- expect(carousel).toBeInTheDocument();
- });
-
- it('Should render the title', () => {
- const title = screen.getByText(/See what our clients say/i);
- expect(title).toBeInTheDocument();
- });
-
- it('Should render previous arrow', () => {
- const prev_arrow = screen.getByTestId('carousel-arrow-prev');
- expect(prev_arrow).toBeInTheDocument();
- });
-
- it('Should render next arrow', () => {
- const prev_arrow = screen.getByTestId('carousel-arrow-next');
- expect(prev_arrow).toBeInTheDocument();
- });
-
- it('Should render Alessandro slide', () => {
- const alessandro_slide = screen.getAllByText(/is one of the best APIs in the trading market/i);
- expect(alessandro_slide[0]).toBeInTheDocument();
- });
-
- it('Should render Thiago slide', () => {
- const thiago_slide = screen.getAllByText(/Probably the best API for making your business/i);
- expect(thiago_slide[0]).toBeInTheDocument();
- });
-
- it('Should render Josh slide', () => {
- const josh_slide = screen.getAllByText(/I have been using the deriv API for 13 years/i);
- expect(josh_slide[0]).toBeInTheDocument();
- });
-
- it('Should show author Alessandro', () => {
- const alessandro = screen.getAllByText(/Alessandro, CEO | Italy/i);
- expect(alessandro[0]).toBeInTheDocument();
- });
-
- it('Should show author Thiago', () => {
- const thiago = screen.getAllByText(/Thiago, entrepreneur | brazil/i);
- expect(thiago[0]).toBeInTheDocument();
- });
-
- it('Should show author Josh', () => {
- const josh = screen.getAllByText(/josh, trader | australia/i);
- expect(josh[0]).toBeInTheDocument();
- });
-
- it('Should go to prev slide on arrow left click', async () => {
- const leftArrow = screen.getByTestId('carousel-arrow-prev');
-
- await userEvent.click(leftArrow);
-
- expect(mockSlidePrev).toHaveBeenCalledTimes(1);
- });
-
- it('Should go to next slide on arrow right click', async () => {
- const rightArrow = screen.getByTestId('carousel-arrow-next');
-
- await userEvent.click(rightArrow);
-
- expect(mockSlideNext).toHaveBeenCalledTimes(1);
- });
-});
diff --git a/src/features/Home/Carousel/swiper-custom.scss b/src/features/Home/Carousel/swiper-custom.scss
deleted file mode 100644
index bf282895c..000000000
--- a/src/features/Home/Carousel/swiper-custom.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use 'src/styles/utility' as *;
-@use 'swiper/scss';
-
-.swiper {
- min-width: rem(32);
- max-width: rem(58.6);
- text-align: center;
- cursor: pointer;
- .swiper-slide {
- height: auto;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- span {
- font-size: rem(1.4);
- }
- }
-}
diff --git a/src/features/Home/ClientLibraries/ClientLibraries.module.scss b/src/features/Home/ClientLibraries/ClientLibraries.module.scss
deleted file mode 100644
index 9286338d6..000000000
--- a/src/features/Home/ClientLibraries/ClientLibraries.module.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@use 'src/styles/utility' as *;
-
-.ClientLibrary {
- background-repeat: no-repeat;
- background-position: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 100%;
- background-size: auto;
-
- .Heading {
- margin: rem(1) 0;
- padding: 0 rem(2);
- }
- .SubText {
- font-family: var(--ibm-font-family-base);
- text-align: center;
- font-size: rem(2.4);
- font-weight: 400;
- margin: rem(2) 0;
- padding: 0 rem(2);
- @media (max-width: 992px) {
- text-align: center;
- font-size: rem(1.8);
- line-height: rem(2.6);
- }
- }
- .IconJS {
- display: flex;
- justify-content: center;
- background-repeat: no-repeat;
- background-position: center;
- }
-
- .LibraryLogo {
- display: flex;
- justify-content: space-between;
-
- @media (max-width: 992px) {
- justify-content: center;
- flex-wrap: wrap;
- }
-
- .LogoAndLink {
- padding: rem(1) rem(2);
-
- .LibraryGoTo {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- color: var(--ifm-color-danger);
- gap: rem(1);
-
- label {
- cursor: pointer;
- }
-
- .LibraryChevron {
- background-repeat: no-repeat;
- background-position: center;
- width: rem(1.2);
- height: rem(1.2);
- margin-left: rem(0.5);
- }
- }
- }
- }
-}
-
-@media screen and (max-width: 400px) {
- .Link {
- max-width: 260px;
- }
-}
diff --git a/src/features/Home/ClientLibraries/ClientLibraries.tsx b/src/features/Home/ClientLibraries/ClientLibraries.tsx
deleted file mode 100644
index 7f5f5d89f..000000000
--- a/src/features/Home/ClientLibraries/ClientLibraries.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import { Text } from '@deriv/ui';
-import styles from './ClientLibraries.module.scss';
-import Translate from '@docusaurus/Translate';
-
-export const ClientLibraries = () => {
- return (
-
-
-
-
-
- Comprehensive all-in-one
- client library
-
-
- Simplify your development processes and get your app up and running
- faster with the client library of your choice.
-
-
-
-
-
-
-
-
- );
-};
diff --git a/src/features/Home/ClientLibraries/__tests__/ClientLibraries.test.tsx b/src/features/Home/ClientLibraries/__tests__/ClientLibraries.test.tsx
index 41642df25..5d99923a4 100644
--- a/src/features/Home/ClientLibraries/__tests__/ClientLibraries.test.tsx
+++ b/src/features/Home/ClientLibraries/__tests__/ClientLibraries.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { cleanup, render, screen } from '@site/src/test-utils';
-import { ClientLibraries } from '../ClientLibraries';
+import ClientLibraries from '..';
describe('ClientLibraries', () => {
beforeEach(() => {
@@ -10,31 +10,7 @@ describe('ClientLibraries', () => {
afterEach(cleanup);
it('should render properly', () => {
- const client_header = screen.getByTestId('client-header');
+ const client_header = screen.getByTestId('client_section');
expect(client_header).toBeInTheDocument();
});
- it('should render title properly', () => {
- const client_text = screen.getByText('Comprehensive all-in-one client library');
- expect(client_text).toBeInTheDocument();
- });
- it('should render subtitle text properly', () => {
- const regex =
- /Simplify your development processes and get your app up and running\s*faster with the client library of your choice\./i;
-
- expect(screen.getByText(regex)).toBeInTheDocument();
- });
- it('should navigate to the correct links on click', () => {
- expect(screen.getByText('Go to the JavaScript library').closest('a')).toHaveAttribute(
- 'href',
- 'https://deriv-com.github.io/deriv-api/',
- );
- expect(screen.getByText('Go to the Python library').closest('a')).toHaveAttribute(
- 'href',
- 'https://deriv-com.github.io/python-deriv-api/',
- );
- expect(screen.getByText('Go to the Flutter library').closest('a')).toHaveAttribute(
- 'href',
- 'https://github.com/deriv-com/flutter-deriv-api',
- );
- });
});
diff --git a/src/features/Home/ClientLibraries/index.tsx b/src/features/Home/ClientLibraries/index.tsx
new file mode 100644
index 000000000..07cbd7ac5
--- /dev/null
+++ b/src/features/Home/ClientLibraries/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Heading, Text } from '@deriv-com/quill-ui';
+import styles from '../styles.module.scss';
+import Translate from '@docusaurus/Translate';
+
+const ClientLibraries = () => {
+ return (
+
+
+ All-in-one support for every developer
+
+
+ Supports JavaScript, Python, and Flutter for ultimate compatibility.
+
+
+
+ );
+};
+
+export default ClientLibraries;
diff --git a/src/features/Home/Features/__tests__/Features.test.tsx b/src/features/Home/Features/__tests__/Features.test.tsx
new file mode 100644
index 000000000..6eaf129b1
--- /dev/null
+++ b/src/features/Home/Features/__tests__/Features.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { cleanup, render, screen } from '@site/src/test-utils';
+import Features from '..';
+
+describe('ClientLibraries', () => {
+ beforeEach(() => {
+ render(
);
+ });
+
+ afterEach(cleanup);
+
+ it('should render properly', () => {
+ const client_header = screen.getByTestId('feature_section');
+ expect(client_header).toBeInTheDocument();
+ });
+});
diff --git a/src/features/Home/Features/constant.ts b/src/features/Home/Features/constant.ts
new file mode 100644
index 000000000..1c2f99e50
--- /dev/null
+++ b/src/features/Home/Features/constant.ts
@@ -0,0 +1,51 @@
+import { translate } from "@docusaurus/Translate";
+
+export const webSocketFeatures = [
+ {
+ title: translate({ message: 'Minimal setup' }),
+ description: translate({ message: 'Get started quickly with minimal configuration.' }),
+ },
+ {
+ title: translate({ message: 'Copy trading' }),
+ description: translate({ message: 'Mirror the strategies of seasoned traders for Digital Options, helping you reduce potential risks.' }),
+ },
+ {
+ title: translate({ message: 'Earn with markup' }),
+ description: translate({ message: 'Add percentage markups to contract prices and monetise your trading setup.' }),
+ },
+ {
+ title: translate({ message: 'P2P integration' }),
+ description: translate({ message: 'Enable peer-to-peer transactions via Deriv P2P APIs for a smooth trading experience.' }),
+ },
+ {
+ title: translate({ message: 'Customisable configurations' }),
+ description: translate({ message: 'Take charge of trading parameters to offer precise, user-focused trading solutions.' }),
+ },
+ {
+ title: translate({ message: 'Transparent pricing' }),
+ description: translate({ message: 'Experience fair pricing with no hidden fees or commissions.' }),
+ },
+ ];
+
+ export const derivFixFeatures = [
+ {
+ title: translate({ message: 'Direct market access' }),
+ description: translate({ message: 'Connect instantly to global markets for live pricing and trading.' }),
+ },
+ {
+ title: translate({ message: 'Optimised execution' }),
+ description: translate({ message: 'Enjoy ultra-low latency for rapid, precise high-frequency trading.' }),
+ },
+ {
+ title: translate({ message: 'Fast integration' }),
+ description: translate({ message: 'Set up quickly with your preferred trading platform.' }),
+ },
+ {
+ title: translate({ message: 'Institutional grade pricing' }),
+ description: translate({ message: 'Benefit from competitive spreads and high-volume structures.' }),
+ },
+ {
+ title: translate({ message: 'Dedicated support' }),
+ description: translate({ message: 'Get expert help and detailed guidance anytime.' }),
+ },
+ ];
\ No newline at end of file
diff --git a/src/features/Home/Features/index.tsx b/src/features/Home/Features/index.tsx
new file mode 100644
index 000000000..af7a035c9
--- /dev/null
+++ b/src/features/Home/Features/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Heading, Text } from '@deriv-com/quill-ui';
+import styles from '../styles.module.scss';
+
+type FeaturesProps = {
+ title: string;
+ description: string;
+ features?: {
+ title: string;
+ description: string;
+ }[];
+};
+
+const Features = (props: FeaturesProps) => {
+ const { title, description } = props;
+
+ return (
+
+
{title}
+
{description}
+
+
+ {props.features?.map((feature, idx) => (
+
+ {feature.title}
+ {feature.description}
+
+ ))}
+
+
+ );
+};
+
+export default Features;
diff --git a/src/features/Home/GetStarted/GetStarted.module.scss b/src/features/Home/GetStarted/GetStarted.module.scss
deleted file mode 100644
index ddc770b4e..000000000
--- a/src/features/Home/GetStarted/GetStarted.module.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-@use 'src/styles/utility' as *;
-
-.mainPageRow {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: fit-content;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
-
- .columnContainer {
- font-family: var(--ibm-font-family-base);
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- width: 100%;
- align-items: center;
- justify-content: center;
-
- .getStartedHeading {
- text-align: center;
- padding: 0 rem(2.5) rem(4) rem(2.5);
- }
-
- .termConditions {
- padding: 0 rem(2.5);
- @media screen and (max-width: 992px) {
- font-size: rem(1.2);
- }
- }
-
- .cardContainer {
- display: flex;
- flex-direction: row;
- margin-bottom: rem(4);
- gap: rem(2.4);
- @media screen and (max-width: 992px) {
- flex-direction: column;
- gap: rem(2);
- }
- }
- .mainPageCard {
- display: flex;
- flex-direction: column;
- gap: rem(2.7);
- width: 100%;
- max-width: rem(31.6);
- padding: rem(3.2) rem(2.4);
- border-radius: 4px;
- box-shadow: 0 rem(0.7) rem(1.3) 0 rgb(14, 14, 14, 0.1);
- background-color: var(--ifm-color-white);
- font-size: rem(1.6);
- line-height: 1.5;
- color: var(--ifm-color-black);
- margin-bottom: 0;
- position: relative;
- transition: box-shadow 0.2s;
-
- section {
- display: flex;
- flex-direction: column;
- gap: rem(0.8);
-
- > p {
- font-family: var(--ibm-font-family-base);
- @media screen and (max-width: 992px) {
- font-size: rem(1.4);
- }
- }
- }
-
- .cardIcon {
- width: rem(4.5);
- }
-
- .arrowIcon {
- display: flex;
- justify-content: end;
- > img {
- width: rem(0.8);
- }
- }
-
- &:hover {
- text-decoration: none;
- box-shadow: 0 rem(0.2) rem(0.2) 0 rgb(0, 0, 0, 0.3);
- }
-
- .header {
- display: flex;
- width: 100%;
- justify-content: space-between;
- .guideIcon,
- .signUpIcon,
- .registerYourAppIcon {
- width: rem(3.2);
- height: rem(3.2);
- background-repeat: no-repeat;
- background-position: center;
- }
- }
- .arrow {
- display: flex;
- position: absolute;
- justify-content: end;
- bottom: rem(2);
- right: rem(2);
- }
- .arrowMiddle {
- display: flex;
- position: relative;
- justify-content: end;
- top: rem(1.5);
- }
- }
- }
-}
-
-.guideIcon,
-.signUpIcon,
-.registerYourAppIcon {
- width: rem(3.2);
- height: rem(3.2);
- background-repeat: no-repeat;
- background-position: center;
-}
diff --git a/src/features/Home/GetStarted/GetStarted.tsx b/src/features/Home/GetStarted/GetStarted.tsx
deleted file mode 100644
index bd9358ef1..000000000
--- a/src/features/Home/GetStarted/GetStarted.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import styles from './GetStarted.module.scss';
-import { Text } from '@deriv/ui';
-import Link from '@docusaurus/Link';
-import Translate from '@docusaurus/Translate';
-
-export const GetStarted = () => {
- return (
-
-
-
- );
-};
diff --git a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx
deleted file mode 100644
index c8cbcb8b2..000000000
--- a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { cleanup, render, screen } from '@site/src/test-utils';
-import { GetStarted } from '../GetStarted';
-
-describe('GetStarted', () => {
- beforeEach(() => {
- render(
);
- });
-
- afterEach(cleanup);
-
- it('should render properly', () => {
- const get_started = screen.getByTestId('started-header');
- expect(get_started).toBeInTheDocument();
- });
- it('should render title properly', () => {
- const started_header = screen.getByRole('heading', { level: 2, name: /Get started with/ });
- expect(started_header).toHaveTextContent('Get started with our API in 3 simple steps:');
- });
- it('should navigate to the correct links on click', () => {
- expect(screen.getByTestId('signUp').closest('a')).toHaveAttribute(
- 'href',
- 'https://deriv.com/signup/',
- );
- expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard');
- expect(screen.getByTestId('guide').closest('a')).toHaveAttribute(
- 'href',
- 'https://developers.deriv.com',
- );
- });
-});
diff --git a/src/features/Home/GetStarted/index.tsx b/src/features/Home/GetStarted/index.tsx
new file mode 100644
index 000000000..ebb05b6ad
--- /dev/null
+++ b/src/features/Home/GetStarted/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Text, Heading } from '@deriv-com/quill-ui';
+import styles from '../styles.module.scss';
+import Translate, { translate } from '@docusaurus/Translate';
+
+const GetStarted = () => {
+ const getStartedSteps = {
+ websocket: [
+ {
+ title: `${translate({ message: 'Sign up' })}`,
+ description: `${translate({
+ message: 'Create your Deriv account and get instant access to our API suite.',
+ })}`,
+ },
+ {
+ title: `${translate({ message: 'Integrate your platform' })}`,
+ description: `${translate({
+ message: 'Connect your tech stack using our API documentation.',
+ })}`,
+ },
+ {
+ title: `${translate({ message: 'Deploy your solution' })}`,
+ description: `${translate({
+ message:
+ 'Launch your application and explore ways to monetise it by sharing it with the trading community.',
+ })}`,
+ },
+ ],
+ };
+
+ const renderSteps = () => {
+ return (
+
+ {getStartedSteps.websocket.map((step, idx) => (
+
+
+
+ {idx != 2 &&
}
+
+
+ {step.title}
+ {step.description}
+
+
+ );
+ };
+
+ return (
+
+
+
+
+ How to get started
+
+ {renderSteps()}
+
+
+ );
+};
+
+export default GetStarted;
diff --git a/src/features/Home/HeroHeader/HeroHeader.module.scss b/src/features/Home/HeroHeader/HeroHeader.module.scss
index 7099d13e3..dd6e38ea8 100644
--- a/src/features/Home/HeroHeader/HeroHeader.module.scss
+++ b/src/features/Home/HeroHeader/HeroHeader.module.scss
@@ -1,70 +1,63 @@
@use 'src/styles/utility' as *;
+@use 'src/styles/mixins' as *;
-.HeroImageStyle {
- background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
- url(/img/banner-homepage.jpg);
- background-position: center;
- object-fit: cover;
- background-repeat: no-repeat;
- background-size: cover;
- width: 100%;
- height: rem(60);
+.heroContainer {
display: flex;
- justify-content: center;
align-items: center;
- padding-top: rem(4);
+ height: 95svh;
+ min-height: rem(50);
+ background-image: linear-gradient(
+ to right,
+ rgba(0, 0, 0, 0.843),
+ rgb(0 0 0 / 20%),
+ rgba(0, 0, 0, 0)
+ ),
+ url(/img/banner-homepage.jpeg);
+ background-position: center;
+ background-size: cover;
+ background-attachment: fixed;
- @media screen and (max-width: 992px) {
- padding-top: unset;
+ .description {
+ width: 50%;
+ margin-bottom: rem(4);
}
- @media screen and (min-width: 320px) and (max-width: 500px) {
- height: rem(35);
- }
- .HeroContainerStyle {
+ .heroBtnContainer {
display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: rem(16) 0;
- width: 100%;
+ gap: rem(1);
- @media screen and (max-width: 992px) {
- width: 100%;
- padding: rem(8) rem(4);
- }
- .heading {
- color: var(--ifm-color-white);
- @media screen and (max-width: 992px) {
- font-size: rem(3.2);
- }
+ button {
+ font-weight: bold;
}
+ }
- .SubHeading {
- color: var(--ifm-color-white);
- font-weight: 400;
- font-family: var(--ibm-font-family-base);
- @media screen and (max-width: 992px) {
- text-align: center;
- font-size: rem(1.6);
- margin-top: rem(0.8);
- }
+ .heroTitle,
+ .description {
+ color: var(--solid-slate-50);
+ }
+
+ @include mobile-sm {
+ background-repeat: no-repeat;
+ background-position-x: 73%;
+ background-image: linear-gradient(to top, rgba(0, 0, 0), rgb(0 0 0 / 35%), rgba(0, 0, 0, 0)),
+ url(/img/banner-homepage.jpeg);
+ align-items: flex-end;
+ padding-bottom: 2rem;
+
+ .heroBtnContainer {
+ flex-direction: column;
+ margin-bottom: 3rem;
}
- .HeroButton {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- margin-top: rem(1.6);
- padding: rem(1) rem(1.6);
- width: rem(13.6);
- height: rem(2.6);
- background: #ff444f;
- border-radius: rem(1.5);
- font-size: rem(1.6);
- @media screen {
- font-size: rem(1.4);
- }
+
+ .heroTitle,
+ .description {
+ width: 100%;
+ text-align: center;
+ padding-inline: 14px;
}
}
+
+ @include mobile {
+ background-position: 70%;
+ }
}
diff --git a/src/features/Home/HeroHeader/HeroHeader.tsx b/src/features/Home/HeroHeader/HeroHeader.tsx
deleted file mode 100644
index c53ee8045..000000000
--- a/src/features/Home/HeroHeader/HeroHeader.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Button, Text } from '@deriv/ui';
-import styles from './HeroHeader.module.scss';
-import Translate from '@docusaurus/Translate';
-
-export const HeroHeader = () => {
- return (
-
-
-
- Deriv API
-
-
- Use our powerful, flexible, and free API to build a custom trading {' '}
- platform - for yourself or for your business.
-
-
-
- Quick Start
-
-
-
- );
-};
diff --git a/src/features/Home/HeroHeader/__tests__/HeroHeader.test.tsx b/src/features/Home/HeroHeader/__tests__/HeroHeader.test.tsx
index d35b738f6..e7b97612e 100644
--- a/src/features/Home/HeroHeader/__tests__/HeroHeader.test.tsx
+++ b/src/features/Home/HeroHeader/__tests__/HeroHeader.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { cleanup, render, screen } from '@site/src/test-utils';
-import { HeroHeader } from '../HeroHeader';
+import HeroHeader from '..';
beforeEach(() => {
render(
);
@@ -13,16 +13,4 @@ describe('HeroHeader', () => {
const hero_header = screen.getByTestId('hero-header');
expect(hero_header).toBeInTheDocument();
});
-
- it('should render hero title properly', () => {
- const hero_title = screen.getByRole('heading', { level: 2 });
- expect(hero_title).toHaveTextContent('Deriv API');
- });
-
- it('should render hero subtitle text properly', () => {
- const hero_subtitle = screen.getByTestId('hero-header-subtitle');
- expect(hero_subtitle).toHaveTextContent(
- 'Use our powerful, flexible, and free API to build a custom trading platform - for yourself or for your business.',
- );
- });
});
diff --git a/src/features/Home/HeroHeader/index.tsx b/src/features/Home/HeroHeader/index.tsx
new file mode 100644
index 000000000..342a3cb52
--- /dev/null
+++ b/src/features/Home/HeroHeader/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, Heading, Text } from '@deriv-com/quill-ui';
+import Translate from '@docusaurus/Translate';
+import styles from './HeroHeader.module.scss';
+import { useHistory } from '@docusaurus/router';
+
+const HeroHeader = () => {
+ const history = useHistory();
+
+ return (
+
+
+
+
+ Deriv API
+
+
+ {`Build smarter trading solutions with Deriv’s APIs. Use the WebSocket API for real-time Options trading and the DerivFIX API for ultra-low latency CFDs trading, ensuring precision, stability, and high performance.`}
+
+
+
+ history.push('/#WebsocketAPI')}>
+ WebSocket API
+
+ history.push('/#derivFix')}>
+ DerivFIX API
+
+
+
+
+ );
+};
+
+export default HeroHeader;
diff --git a/src/features/Home/ProductInfo/constant.ts b/src/features/Home/ProductInfo/constant.ts
new file mode 100644
index 000000000..a30615efe
--- /dev/null
+++ b/src/features/Home/ProductInfo/constant.ts
@@ -0,0 +1,45 @@
+import { translate } from '@docusaurus/Translate';
+
+export interface IProduct {
+ [key: string]: {
+ title: string;
+ description: string[];
+ id: string;
+ imgName: string;
+ redirectUrl: string;
+ };
+}
+
+export const products: IProduct = {
+ Websocket: {
+ title: translate({ message: 'Websocket API' }),
+ description: [
+ translate({
+ message: `Use Deriv’s WebSocket API to create and share custom trading applications tailored for Options, Multipliers, and Accumulators. Build dynamic, responsive solutions with seamless access to real-time market data and trade execution functionality—optimised for speed and reliability.`,
+ }),
+ translate({
+ message: `Share your applications with a global trading community and transform your technical expertise into new revenue opportunities.`,
+ }),
+ ],
+ id: 'WebsocketAPI',
+ imgName: 'websocket',
+ redirectUrl: 'https://developers.deriv.com/docs/getting-started'
+
+ },
+ DerivFIX: {
+ title: translate({ message: 'DerivFIX API' }),
+ description: [
+ translate({
+ message:
+ 'Experience consistent performance and ultra-low latency with DerivFIX, the API specifically engineered for professional and institutional CFDs trading.',
+ }),
+ translate({
+ message:
+ 'Powered by FIX Protocol 4.4, it offers direct market access and real-time data accuracy, enabling you to create applications that deliver unmatched precision, speed, and control for trading.',
+ }),
+ ],
+ id: 'derivFix',
+ imgName: 'derivFix',
+ redirectUrl: 'https://developers.deriv.com/docs/getting-started'
+ },
+};
diff --git a/src/features/Home/ProductInfo/index.tsx b/src/features/Home/ProductInfo/index.tsx
new file mode 100644
index 000000000..cb76407f2
--- /dev/null
+++ b/src/features/Home/ProductInfo/index.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Text, Heading, Button } from '@deriv-com/quill-ui';
+import styles from '../styles.module.scss';
+import Translate, { translate } from '@docusaurus/Translate';
+import clsx from 'clsx';
+import useDeviceType from '@site/src/hooks/useDeviceType';
+
+type ProductInfoProps = {
+ product: {
+ id: string;
+ title: string;
+ description: string[];
+ imgName: string;
+ redirectUrl?: string;
+ };
+ reverse?: boolean;
+};
+
+const ProductInfo = (props: ProductInfoProps) => {
+ const { product, reverse = false } = props;
+ const { id, title, description, imgName, redirectUrl } = product;
+
+ const { deviceType } = useDeviceType();
+ const isMobile = deviceType === 'mobile';
+
+ return (
+
+
+
+
{title}
+ {description.map((desc, idx) => (
+
{desc}
+ ))}
+
+ location.assign('https://deriv.com/signup/')}
+ >
+ Get started
+
+ location.assign(redirectUrl)}
+ >
+ Learn more
+
+
+
+
+ );
+};
+
+export default ProductInfo;
diff --git a/src/features/Home/WaysToEarn/WaysToEarn.module.scss b/src/features/Home/WaysToEarn/WaysToEarn.module.scss
deleted file mode 100644
index b94471d42..000000000
--- a/src/features/Home/WaysToEarn/WaysToEarn.module.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@use 'src/styles/utility' as *;
-.WaysContainer {
- margin-top: rem(2);
- @media screen and (max-width: 992px) {
- margin-top: 0;
- }
-
- .WaysWrapper {
- font-family: var(--ibm-font-family-base);
- width: 80%;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-around;
- margin: 0 auto;
-
- @media screen and (min-width: 1400px) {
- width: fit-content;
- gap: rem(20);
- }
-
- @media screen and (max-width: 992px) {
- width: 100%;
- }
- .WaysHeading {
- max-width: 384px;
- margin-bottom: rem(2.5);
- padding: 0 rem(2);
- }
-
- .Ways {
- span {
- display: flex;
- align-items: center;
- width: unset;
- max-width: rem(62.8);
- margin: rem(2) rem(1.2);
- padding: rem(1.6);
- background-color: var(--ifm-color-emphasis-0);
- box-shadow: 0 rem(0.4) rem(0.8) rgb(14 14 14 / 10%);
- }
- .Margin {
- margin: 0;
- }
- p {
- width: 92%;
- }
- .WaysImg {
- width: 32px;
- height: auto;
- margin-right: 8px;
- }
-
- @media screen and (max-width: 992px) {
- span {
- max-width: rem(32.8);
- margin: rem(1.6);
- align-items: flex-start;
- }
- }
- }
- }
-}
diff --git a/src/features/Home/WaysToEarn/WaysToEarn.tsx b/src/features/Home/WaysToEarn/WaysToEarn.tsx
deleted file mode 100644
index ed140d605..000000000
--- a/src/features/Home/WaysToEarn/WaysToEarn.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { Badge, Text } from '@deriv/ui';
-import styles from './WaysToEarn.module.scss';
-import Translate from '@docusaurus/Translate';
-
-const CheckIcon = () => {
- return
;
-};
-
-export const WaysToEarn = () => {
- return (
-
-
-
-
- Ways to earn with Deriv API
-
-
-
-
-
-
- Register your app with Deriv, and add a percentage markup to the contract prices
- to profit from every purchased contract.
-
-
-
-
-
-
-
- Sign up as an affiliate, build your app, and get commissions on trades completed
- via your app and the affiliate plan you select.
-
-
-
-
-
-
-
- Sign up as a payment agent, build your own custom payment website, and use our API
- to earn commission on every payment you process for Deriv's clients.
-
-
-
-
-
-
-
- );
-};
diff --git a/src/features/Home/WaysToEarn/__tests__/WaysToEarn.test.tsx b/src/features/Home/WaysToEarn/__tests__/WaysToEarn.test.tsx
deleted file mode 100644
index 66fd181bb..000000000
--- a/src/features/Home/WaysToEarn/__tests__/WaysToEarn.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { cleanup, render, screen } from '@site/src/test-utils';
-import { WaysToEarn } from '../WaysToEarn';
-
-beforeEach(() => {
- render(
);
-});
-
-afterEach(cleanup);
-
-describe('WaysToEarn', () => {
- it('renders properly', () => {
- const main_element = screen.getByTestId('ways-to-earn');
- expect(main_element).toBeInTheDocument();
- });
- it('renders the title', () => {
- const title = screen.getByText(/ways to earn with deriv api/i);
- expect(title).toBeInTheDocument();
- });
- it('renders the badges', () => {
- const badge_one = screen.getByText(/register your app with deriv/i);
- const badge_two = screen.getByText(/sign up as an affiliate/i);
- const badge_three = screen.getByText(/sign up as a payment agent/i);
- expect(badge_one).toBeVisible();
- expect(badge_two).toBeVisible();
- expect(badge_three).toBeVisible();
- });
-});
diff --git a/src/features/Home/__tests__/index.test.tsx b/src/features/Home/__tests__/index.test.tsx
index 67909c676..9a6f742d3 100644
--- a/src/features/Home/__tests__/index.test.tsx
+++ b/src/features/Home/__tests__/index.test.tsx
@@ -22,6 +22,6 @@ describe('Home Page', () => {
it('should render section with features class', () => {
const { container } = render_result;
const main_section = container.querySelector('main');
- expect(main_section).toHaveAttribute('class', 'features');
+ expect(main_section).toBeVisible();
});
});
diff --git a/src/features/Home/index.tsx b/src/features/Home/index.tsx
index 5da905ac0..123b9aefa 100644
--- a/src/features/Home/index.tsx
+++ b/src/features/Home/index.tsx
@@ -1,30 +1,49 @@
import React from 'react';
-import { ApiFeatures } from './ApiFeatures/ApiFeatures';
-import { Benefits } from './Benefits/Benefits';
-import { ClientLibraries } from './ClientLibraries/ClientLibraries';
-import { HeroHeader } from './HeroHeader/HeroHeader';
-import { WaysToEarn } from './WaysToEarn/WaysToEarn';
-// import { Carousel } from './Carousel/Carousel';
+import { translate } from '@docusaurus/Translate';
+import RenderOfficialContents from '@site/src/components/RenderOfficialContents';
import Footer from '@site/src/components/Footer';
+import ProductInfo from './ProductInfo';
+import Benefits from './Benefits';
+import ClientLibraries from './ClientLibraries';
+import HeroHeader from './HeroHeader';
+import Features from './Features';
+import { derivFixFeatures, webSocketFeatures } from './Features/constant';
+
import styles from './styles.module.scss';
-import { GetStarted } from './GetStarted/GetStarted';
-import RenderOfficialContents from '@site/src/components/RenderOfficialContents';
+import { products } from './ProductInfo/constant';
+import GetStarted from './GetStarted';
+import About from './About';
export default function HomepageFeatures() {
return (
-
+
-
diff --git a/src/features/Home/styles.module.scss b/src/features/Home/styles.module.scss
index cc24c0f9c..1bf8ba8cb 100644
--- a/src/features/Home/styles.module.scss
+++ b/src/features/Home/styles.module.scss
@@ -1,16 +1,401 @@
@use 'src/styles/utility' as *;
+@use 'src/styles/mixins' as *;
.features {
width: 100%;
display: flex;
flex-direction: column;
- gap: rem(16);
- @media (max-width: 992px) {
+ margin-top: rem(5);
+ gap: rem(10);
+
+ @include tablet {
gap: rem(5.2);
}
+
+ @include mobile-sm {
+ gap: rem(5);
+ }
+
+ h2 {
+ line-height: 55.15px;
+ margin-bottom: 1rem;
+
+ @include mobile-sm {
+ line-height: 32.17px;
+ padding-inline: 0.5rem;
+ }
+ }
+
+ p {
+ margin-top: rem(1);
+ }
+
+ > div {
+ button {
+ font-weight: bold;
+ }
+
+ button:first-child {
+ border: 1px solid var(--component-button-bg-coral-primary-default);
+ }
+ }
+}
+
+.contentFlex {
+ display: flex;
+}
+
+.centerContent {
+ @extend .contentFlex;
+ justify-content: center;
+ align-items: center;
+}
+
+.spaceAroundContent {
+ @extend .contentFlex;
+ justify-content: space-around;
+ align-items: center;
+
+ @include mobile-sm {
+ flex-direction: column;
+ }
+}
+
+.spaceEvenContent {
+ @extend .contentFlex;
+ justify-content: space-evenly;
+ align-items: center;
+ align-self: normal;
+ scroll-margin-top: 10rem;
+
+ @include mobile-sm {
+ scroll-margin-top: 5rem;
+ }
+}
+
+.flexColumn {
+ flex-direction: column;
+}
+
+.mh3 {
+ margin-block: rem(3);
+}
+
+.mv3 {
+ margin-inline: rem(3);
+}
+
+.mh5 {
+ margin-block: rem(5);
+}
+
+.mv5 {
+ margin-inline: rem(5);
+}
+
+.ph5 {
+ padding-block: rem(5);
+}
+
+.pv5 {
+ padding-inline: rem(5);
+}
+
+.justifyCenter {
+ justify-content: center;
+}
+
+.gap1 {
+ gap: rem(1);
+}
+
+.gap4 {
+ gap: rem(4);
+}
+
+.featuresContainer {
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+
+ > div {
+ padding: 3rem;
+ align-self: flex-start;
+ width: 32%;
+ }
+
+ @include mobile {
+ > div {
+ width: 50%;
+ }
+ }
+
+ @include mobile-sm {
+ flex-direction: column;
+ margin-inline: 1.5rem;
+ margin-block: 1rem;
+
+ > div {
+ width: 100%;
+ padding: rem(3);
+ padding-left: 0;
+ }
+ }
+}
+
+.flexReverse {
+ @extend .spaceEvenContent;
+ flex-direction: row-reverse;
+
+ @include mobile-sm {
+ flex-direction: column-reverse;
+ }
+}
+
+.getStartedImg {
+ width: 608px;
+ height: 480px;
+ object-fit: cover;
+ border-radius: 24px;
+
+ @include tablet-lg {
+ width: 500px;
+ height: 400px;
+ }
+
+ @include mobile {
+ width: 350px;
+ height: 500px;
+ }
+
+ @include mobile-sm {
+ height: 280px;
+ }
}
-.featureSvg {
- height: 20rem;
- width: 20rem;
+.aboutContainer {
+ background-image: url(/img/who_we_are.svg);
+ margin-block: 5rem;
+ padding-top: 5rem;
+ background-position: center;
+
+ .aboutContent {
+ background-color: #414652;
+ color: #ffffff;
+ justify-content: space-between;
+ padding: 48px;
+ border-radius: 24px;
+ margin-bottom: 8rem;
+ width: 1024px;
+
+ @include tablet-lg {
+ max-width: 90%;
+
+ button {
+ width: 30%;
+ }
+ }
+
+ @include mobile-sm {
+ button {
+ width: 92%;
+ }
+ }
+
+ h2,
+ p {
+ color: #ffffff;
+ }
+ }
+
+ @include mobile-sm {
+ margin-block: 1rem;
+
+ .aboutContent {
+ flex-direction: column;
+ width: 90%;
+ text-align: center;
+ padding: 24px;
+ margin-bottom: 0;
+
+ button {
+ font-weight: bold;
+ }
+ }
+ }
+}
+
+.getStartedBtnContainer {
+ button {
+ border-radius: 96px;
+ }
+}
+
+.getStartedStepContainer {
+ @extend .contentFlex;
+
+ .stepIconContainer {
+ @extend .contentFlex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: rem(2);
+
+ img {
+ height: 64px;
+ object-fit: cover;
+ }
+
+ .stepCenterOutline {
+ width: 2px;
+ height: 28px;
+ background-color: #9498a2;
+ margin-top: 8px;
+
+ @include mobile-sm {
+ height: 40px;
+ }
+ }
+
+ @include mobile-sm {
+ margin-right: 1rem;
+
+ img {
+ height: 48px;
+ }
+ }
+ }
+
+ h3 {
+ margin-top: rem(1);
+
+ @include mobile-sm {
+ margin-top: rem(0.6);
+ }
+ }
+
+ .description {
+ width: rem(48);
+ margin: 0;
+
+ @include mobile-sm {
+ width: rem(30);
+ }
+
+ @include tablet-lg {
+ width: rem(28);
+ }
+ }
+}
+
+.benefitContent {
+ margin-bottom: rem(10);
+
+ .benefitContext {
+ max-width: 28rem;
+ align-self: flex-start;
+ }
+}
+
+.benefitContainerMbl {
+ @extend .contentFlex;
+
+ width: 100%;
+ overflow: auto;
+ flex-direction: row;
+ scrollbar-width: none;
+ margin-bottom: 0;
+ gap: rem(3);
+ padding-inline: 1.5rem;
+
+ img {
+ margin-bottom: 10px;
+ }
+
+ > div {
+ background-color: #f6f7f8;
+ border-radius: 24px;
+ padding: 25px 30px;
+ gap: 0.5rem;
+
+ @include mobile {
+ min-width: 40%;
+ }
+
+ @include mobile-sm {
+ min-width: 90%;
+ }
+ }
+}
+
+.clientLibrariesContainer {
+ h2 {
+ width: 60%;
+ margin: 0 auto;
+ margin-bottom: 1rem;
+
+ @include mobile-sm {
+ width: 100%;
+ }
+ }
+
+ .client_libraries {
+ @include mobile-sm {
+ flex-direction: row;
+ justify-content: space-around;
+ }
+ }
+}
+
+.productInfo {
+ @include tablet-lg {
+ img {
+ width: 50%;
+ }
+
+ > div {
+ margin-inline: 1.5rem;
+ }
+ }
+
+ @include mobile-sm {
+ img {
+ width: 100%;
+ }
+
+ > div {
+ margin-inline: 0;
+ text-align: center;
+ }
+
+ .contentFlex {
+ flex-direction: column;
+ margin-block: 2rem;
+
+ button {
+ margin: 0;
+ }
+ }
+ }
+}
+
+.getStarted {
+ @include mobile-sm {
+ flex-direction: column;
+ gap: rem(3);
+
+ > div {
+ margin-inline: 0;
+ }
+
+ h2 {
+ text-align: center;
+ margin-block: 0 rem(1.6);
+ }
+ }
+
+ @include mobile {
+ > div {
+ margin-inline: 1.5rem;
+ }
+ }
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b85bfba7c..87b14a788 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -71,6 +71,7 @@
}
html {
+ scroll-behavior: smooth;
font: var(--ifm-font-size-base) / var(--ifm-line-height-base) var(--ifm-font-family-base) !important;
}
diff --git a/static/img/banner-homepage.jpeg b/static/img/banner-homepage.jpeg
new file mode 100644
index 000000000..1d1091b93
Binary files /dev/null and b/static/img/banner-homepage.jpeg differ
diff --git a/static/img/banner-homepage.jpg b/static/img/banner-homepage.jpg
deleted file mode 100644
index 224cfdf3a..000000000
Binary files a/static/img/banner-homepage.jpg and /dev/null differ
diff --git a/static/img/customization.svg b/static/img/customization.svg
new file mode 100644
index 000000000..7fb8da0d3
--- /dev/null
+++ b/static/img/customization.svg
@@ -0,0 +1,32 @@
+
+
diff --git a/static/img/derivFix.svg b/static/img/derivFix.svg
new file mode 100644
index 000000000..e537ac819
--- /dev/null
+++ b/static/img/derivFix.svg
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/img/easy-integration.svg b/static/img/easy-integration.svg
new file mode 100644
index 000000000..a19921635
--- /dev/null
+++ b/static/img/easy-integration.svg
@@ -0,0 +1,22 @@
+
+
diff --git a/static/img/fast-execution.svg b/static/img/fast-execution.svg
new file mode 100644
index 000000000..1e05fca3f
--- /dev/null
+++ b/static/img/fast-execution.svg
@@ -0,0 +1,36 @@
+
+
diff --git a/static/img/getStarted.png b/static/img/getStarted.png
new file mode 100644
index 000000000..17493bb43
Binary files /dev/null and b/static/img/getStarted.png differ
diff --git a/static/img/number_1.svg b/static/img/number_1.svg
new file mode 100644
index 000000000..c1863f790
--- /dev/null
+++ b/static/img/number_1.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/static/img/number_2.svg b/static/img/number_2.svg
new file mode 100644
index 000000000..fc53d0f4c
--- /dev/null
+++ b/static/img/number_2.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/static/img/number_3.svg b/static/img/number_3.svg
new file mode 100644
index 000000000..19d7a4caf
--- /dev/null
+++ b/static/img/number_3.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/static/img/websocket.svg b/static/img/websocket.svg
new file mode 100644
index 000000000..9aeabcf79
--- /dev/null
+++ b/static/img/websocket.svg
@@ -0,0 +1,159 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/img/who_we_are.svg b/static/img/who_we_are.svg
new file mode 100644
index 000000000..f3c56ae17
--- /dev/null
+++ b/static/img/who_we_are.svg
@@ -0,0 +1,254 @@
+
+
+
+
+
+
+
+
+
+
+
+
- --
- 
- 
- );
-};
-
-export const Benefits = () => {
- return (
- 
- 
+ 
+ 
+ 
+ {idx != 2 && }
+ 
+ 
+ 
;
-};
-
-export const WaysToEarn = () => {
- return (
-