✨ feat: banner carousel

:%s

src/components/modules/home/HomeBanner/HomeBanner.module.scss

@@ -5,6 +5,7 @@
   margin-bottom: 2.8rem;
   .left {
     @apply hidden;
+    margin-bottom: 3rem;
   }
   @screen xl {
     @apply grid;

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Banner } from 'src/components/common'
 import s from './HomeBanner.module.scss'
 import BannerImgRight from './assets/banner_full.png'
+import BannerImgRight2 from './assets/banner_product.png'
 
 interface Props {
     className?: string
@@ -13,14 +14,25 @@ const HomeBanner = ({ }: Props) => {
         <div className={s.homeBanner}>
             <section className={s.left}>
                 <div className={s.text}>
-                    Freshness<br/>guaranteed
+                    Freshness<br />guaranteed
                 </div>
             </section >
             <Banner
-                title="Save 15% on your first order"
-                subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-                imgLink={BannerImgRight.src}
-                size="small"
+                data={
+                    [{
+                        title: "Save 15% on your first order",
+                        subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
+                        imgLink: BannerImgRight.src,
+                        size: "small",
+                    },
+                    {
+                        title: "Save 15% on your first order 2",
+                        subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
+                        imgLink: BannerImgRight2.src,
+                        size: "small",
+                    }
+                ]
+                }
             />
         </div >
     )