feat: added hero banner to main page

Author: berezinant

blocks/main/hero/hero.module.css

@@ -108,6 +108,52 @@
         }
 
     }
+
+    .banner {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 40px;
+        width: 545px;
+        padding: 16px 16px 16px 24px;
+        box-sizing: border-box;
+        border-radius: 24px;
+        background-color: rgba(126, 66, 255, 0.40);
+        overflow: hidden;
+
+        @media (--ktl-ds) {
+            display: none;
+        }
+
+        .bannerContent {
+            text-align: left;
+        }
+
+        .bannerTitle {
+            margin: 0;
+            letter-spacing: 0.01em;
+        }
+
+        .bannerCaption {
+            margin: 0;
+            color: white;
+            letter-spacing: 0.01em;
+        }
+
+        .bannerButton {
+            align-self: flex-end;
+        }
+    }
+
+    .banner:before {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 198px;
+        height: 100px;
+        background-image: url("/images/main/hero-banner-gradient.svg");
+    }
 }
 
 .heroText {

blocks/main/hero/hero.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames';
 
 import { useTextStyles, createTextCn } from '@rescui/typography';
 import { ThemeProvider } from '@rescui/ui-contexts';
+import  heroBannerDataRaw from '../../../data/hero-banner.yml';
 
 import Image from 'next/image';
 
@@ -20,6 +21,16 @@ interface Props {
     children: ReactNode;
 }
 
+type HeroBannerData = {
+    isActive: boolean;
+    title: string;
+    caption: string;
+    buttonLabel: string;
+    buttonUrl: string;
+}
+
+const heroBannerData = heroBannerDataRaw as HeroBannerData;
+
 export const HeroSection: FC<Props> = ({ children, title }) => {
     const textCn = useTextStyles();
     const darkTextCn = createTextCn('dark');
@@ -51,6 +62,14 @@ export const HeroSection: FC<Props> = ({ children, title }) => {
                                         </a>
                                     </div>
                                 </div>
+                                {heroBannerData.isActive && <div className={styles.banner}>
+                                    <div className={styles.bannerContent}>
+                                        <h5 className={cn(darkTextCn('rs-h2'), styles.bannerTitle)}>{heroBannerData.title}</h5>
+                                        <p className={cn(darkTextCn('rs-text-2'), styles.bannerCaption)}>{heroBannerData.caption}</p>
+                                    </div>
+                                    <Button mode="outline" size="m" href={heroBannerData.buttonUrl}
+                                            className={styles.bannerButton}>{heroBannerData.buttonLabel}</Button>
+                                </div>}
                             </div>
                         </div>
 

data/hero-banner.yml

@@ -0,0 +1,5 @@
+isActive: true
+title: "Ktor 3.0 Is Out"
+caption: "Now it’s even easier to write in Kotlin"
+buttonLabel: "Try Now"
+buttonUrl: "https://kotl.in/6xp3v8"