From 2daa2b9f0ee95b72939a02d976c7da5c6959e67c Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 21 Feb 2024 13:28:14 +0800
Subject: [PATCH] chore: hero block variant for homepage
---
.../lib/hero/home-hero/home-hero.stories.tsx | 37 ++++++++++++++
libs/blocks/src/lib/hero/home-hero/index.tsx | 48 +++++++++++++++++++
libs/blocks/src/lib/hero/index.tsx | 13 +++++
tailwind.config.js | 4 ++
4 files changed, 102 insertions(+)
create mode 100644 libs/blocks/src/lib/hero/home-hero/home-hero.stories.tsx
create mode 100644 libs/blocks/src/lib/hero/home-hero/index.tsx
diff --git a/libs/blocks/src/lib/hero/home-hero/home-hero.stories.tsx b/libs/blocks/src/lib/hero/home-hero/home-hero.stories.tsx
new file mode 100644
index 000000000..66060ec3e
--- /dev/null
+++ b/libs/blocks/src/lib/hero/home-hero/home-hero.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import HomeHero from '.';
+import { Button } from '@deriv/quill-design';
+
+const meta = {
+ title: 'Blocks/Hero/Home-Hero',
+ component: HomeHero,
+} satisfies Meta<typeof HomeHero>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+ args: {
+ title: (
+ <>
+ <span className="text-solid-mustard-800">Gold </span>spreads from
+ <br></br>
+ 30 pips
+ </>
+ ),
+ backgroundImage: <></>,
+ description:
+ 'Trade gold and other precious metals on one of the world’s favourite leveraged trading platforms.',
+ ctaButton: <Button size="lg">Open demo account</Button>,
+ awards: <>Awards here</>,
+ heroImage: (
+ <div className="absolute inset-50 z-10 max-lg:right-[-15vh] max-sm:left-[6vw] max-sm:w-[54vh] sm:left-auto sm:z-auto">
+ <img
+ className="h-full w-[400px]"
+ src="https://placehold.co/600x400?text=Hello\nWorld"
+ alt="Placeholder"
+ />
+ </div>
+ ),
+ },
+};
diff --git a/libs/blocks/src/lib/hero/home-hero/index.tsx b/libs/blocks/src/lib/hero/home-hero/index.tsx
new file mode 100644
index 000000000..47db95e78
--- /dev/null
+++ b/libs/blocks/src/lib/hero/home-hero/index.tsx
@@ -0,0 +1,48 @@
+import { FluidContainer, Heading, Section, Text } from '@deriv/quill-design';
+import clsx from 'clsx';
+import { HomeHeroProps } from '..';
+
+const HomeHero = ({
+ backgroundImage: BackgroundImage,
+ title: Title,
+ description,
+ ctaButton: CTAButton,
+ awards: Awards,
+ heroImage: HeroImage,
+}: HomeHeroProps) => {
+ return (
+ <Section
+ className={clsx(
+ 'relative isolate h-[calc(100vh-136px)] min-h-[587px] overflow-hidden',
+ )}
+ >
+ {BackgroundImage}
+ <FluidContainer
+ className={
+ 'relative flex h-full flex-col justify-end sm:justify-center'
+ }
+ >
+ <div className="z-20 flex flex-col max-sm:pt-general-2xl max-sm:text-center sm:w-[444px] lg:w-1/2">
+ <Heading.H1 className="text-solid-slate-50">{Title}</Heading.H1>
+ {description && (
+ <Text className="pt-general-md text-solid-slate-50">
+ {description}
+ </Text>
+ )}
+ <div className="flex pt-general-2xl max-sm:justify-center">
+ {CTAButton}
+ </div>
+ </div>
+ {Awards && (
+ <div className="bottom-50 z-10 flex pb-general-xl max-sm:py-general-2xl sm:absolute">
+ {Awards}
+ </div>
+ )}
+ </FluidContainer>
+ {HeroImage && HeroImage}
+ <div className="absolute inset-50 z-10 bg-gradient-hero-mobile sm:-z-10 sm:bg-gradient-hero"></div>
+ </Section>
+ );
+};
+
+export default HomeHero;
diff --git a/libs/blocks/src/lib/hero/index.tsx b/libs/blocks/src/lib/hero/index.tsx
index f8d954390..617596256 100644
--- a/libs/blocks/src/lib/hero/index.tsx
+++ b/libs/blocks/src/lib/hero/index.tsx
@@ -4,6 +4,7 @@ import ContentBottom from './content-bottom';
import ContentTop from './content-top';
import ContentLess from './content-less';
import { ReactNode } from 'react';
+import HomeHero from './home-hero';
export type HeroBlockProps = {
title?: ReactNode | string;
@@ -13,12 +14,23 @@ export type HeroBlockProps = {
children?: ReactNode;
className?: string;
};
+
+export interface HomeHeroProps {
+ title: ReactNode;
+ description?: string;
+ ctaButton: ReactNode;
+ awards?: ReactNode;
+ backgroundImage: ReactNode;
+ heroImage?: ReactNode;
+}
+
export type HeroVariants = {
ContentLimitless: typeof ContentLimitless;
ContentLimit: typeof ContentLimit;
ContentBottom: typeof ContentBottom;
ContentTop: typeof ContentTop;
ContentLess: typeof ContentLess;
+ HomeHero: typeof HomeHero;
};
export const Hero: HeroVariants = ({ children }: { children: ReactNode }) => {
@@ -30,5 +42,6 @@ Hero.ContentLimit = ContentLimit;
Hero.ContentBottom = ContentBottom;
Hero.ContentTop = ContentTop;
Hero.ContentLess = ContentLess;
+Hero.HomeHero = HomeHero;
export default Hero;
diff --git a/tailwind.config.js b/tailwind.config.js
index 699a75ce4..e83d03b6e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,6 +21,10 @@ module.exports = {
slide: '50s slide infinite linear',
slideRtl: '50s slideRtl infinite linear',
},
+ 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%)`,
+ }),
},
},
presets: [require('@deriv/quill-design/quill-tailwind/tailwind.config.cjs')],