chore: hero block variant for homepage

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>
+    ),
+  },
+};

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;

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;

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')],