feat(docs): add Star icon and enhance HeroBannerSection with badge support on product features page

Author: lukasz-hycom

apps/docs/src/assets/icons/Star.svg

@@ -10,6 +10,10 @@ import { H1 } from '../Typography';
 interface HeroBannerSectionProps {
     heading?: ReactNode;
     description: ReactNode | ReactNode[];
+    badge?: {
+        text: string;
+        icon?: ReactNode;
+    };
     cliCommand?: string;
     mainLink?: {
         text: string;
@@ -42,6 +46,7 @@ interface HeroBannerSectionProps {
 export function HeroBannerSection({
     heading,
     description,
+    badge,
     cliCommand,
     mainLink,
     secondaryLink,
@@ -61,6 +66,16 @@ export function HeroBannerSection({
         <div className="relative min-h-[calc(100vh-64px)] flex items-center">
             <div className={clsx('container grid items-center', heroImage ? 'md:grid-cols-2' : 'text-center')}>
                 <div className={clsx(heroImage ? 'lg:w-[515px]' : 'lg:w-[842px] m-auto')}>
+                    {badge && (
+                        <div className="flex justify-center mb-12">
+                            <div className="bg-white/10 border border-white rounded-full px-4 py-2 h-10 flex items-center justify-center gap-2">
+                                {badge.icon && (
+                                    <span className="w-6 h-6 flex items-center justify-center">{badge.icon}</span>
+                                )}
+                                <span className="text-white text-sm font-medium leading-[1.3]">{badge.text}</span>
+                            </div>
+                        </div>
+                    )}
                     {heading && <H1 className="mt-12 md:mt-0">{heading}</H1>}
 
                     {Array.isArray(description) ? (

apps/docs/src/components/HeroBannerSection/index.tsx

@@ -74,7 +74,7 @@ export function HomepageFeaturesSection() {
             </H2>
 
             <div className="w-full flex flex-col md:flex-row rounded-[20px] overflow-hidden">
-                <div className="flex-1 bg-[rgba(255,255,255,0.1)] p-10 rounded-t-[20px] md:rounded-tl-[20px] md:rounded-bl-[20px] md:rounded-tr-none md:rounded-br-none">
+                <div className="flex-1 bg-white/10 p-10 rounded-t-[20px] md:rounded-tl-[20px] md:rounded-bl-[20px] md:rounded-tr-none md:rounded-br-none">
                     <div className="flex flex-col gap-6">
                         <H3 className="mb-0!">For Developers</H3>
                         <ul className="flex flex-col gap-2 list-none p-0! m-0!">

apps/docs/src/components/HomepageFeaturesSection/index.tsx

@@ -1,9 +1,47 @@
 import React from 'react';
 
+import StarIcon from '@site/src/assets/icons/Star.svg';
+import { HeroBannerSection } from '@site/src/components/HeroBannerSection';
+import { Body } from '@site/src/components/Typography';
+
 import Layout from '@theme/Layout';
 
 import styles from './product.module.scss';
 
 export default function ProductFeatures() {
-    return <Layout title="Features">features page here</Layout>;
+    return (
+        <Layout title="Features">
+            <div className={styles.linearGradient}>
+                <div style={{ overflow: 'hidden' }}>
+                    <div className={styles.gradientWrapper}>
+                        <div className={styles.gradientCircleGreen} />
+                        <div className={styles.gradientCircleBlue} />
+                        <main className={styles.mainContentWrapper}>
+                            <HeroBannerSection
+                                badge={{
+                                    text: 'Product Features',
+                                    icon: <StarIcon className="*:stroke-white" />,
+                                }}
+                                heading={
+                                    <>
+                                        Explore what <span className="text-highlighted">Open Self Service</span> offers
+                                    </>
+                                }
+                                description={
+                                    <Body>
+                                        Here's a breakdown of what the framework enables — both for business outcomes
+                                        and developer experience.
+                                    </Body>
+                                }
+                            />
+                            <div>KEY BENEFITS here</div>
+                            <div>TECHNICAL CAPABILITIES BY COMPONENT here</div>
+                            <div>FUNCTIONAL BLOCKS here</div>
+                            <div>Footer section here</div>
+                        </main>
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    );
 }