🎨 styles: banner

:%s

src/components/common/Banner/Banner.module.scss

@@ -0,0 +1,38 @@
+@import "../../../styles/utilities";
+
+.banner {
+  @apply bg-primary-light custom-border-radius-lg overflow-hidden;
+  border: 1px solid var(--primary);
+
+  .inner {
+    @apply bg-no-repeat;
+    background-size: 90%;
+    background-position: right -500% bottom 0%;
+    @screen md {
+      @apply bg-right-bottom;
+      background-size: unset;
+    }
+    .content {
+      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0));
+      padding: 1.6rem;
+      max-width: 70%;
+      @screen md {
+        max-width: 50%;
+        padding: 4.8rem;
+      }
+      .top {
+        .heading {
+          @apply heading-1;
+          margin-bottom: 1.6rem;
+        }
+        .subHeading {
+          @apply sub-headline;
+        }
+      }
+
+      .bottom {
+        margin-top: 4rem;
+      }
+    }
+  }
+}

src/components/common/Banner/Banner.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import React, { memo } from 'react'
+import { IconArrowRight } from 'src/components/icons'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { LANGUAGE } from 'src/utils/language.utils'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import s from './Banner.module.scss'
+
+interface Props {
+    imgLink: string,
+    title: string,
+    subtitle: string,
+    buttonLabel?: string,
+    linkButton?: string,
+    onClick?: () => void,
+}
+
+const Banner = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME }: Props) => {
+    return (
+        <div className={s.banner}>
+            <div className={s.inner} style={{ backgroundImage: `url(${imgLink})` }}>
+                <div className={s.content}>
+                    <div className={s.top}>
+                        <h1 className={s.heading}>
+                            {title}
+                        </h1>
+                        <div className={s.subHeading}>
+                            {subtitle}
+                        </div>
+                    </div>
+                    <div className={s.bottom}>
+                        <Link href={linkButton}>
+                            <a>
+                                <ButtonCommon icon={<IconArrowRight />} isIconSuffix={true}>{buttonLabel}</ButtonCommon>
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+})
+
+export default Banner

src/components/common/index.ts

@@ -7,3 +7,4 @@ export { default as Logo} from './Logo/Logo'
 export { default as Inputcommon} from './InputCommon/InputCommon'
 export { default as InputSearch} from './InputSearch/InputSearch'
 export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
+export { default as Banner} from './Banner/Banner'