docs: Homepage hero section - add 1M challenge promotion banner (#2099)

closes #2095 
This PR adds the 1M challenge promotion banner that leads to the 1M challenge landing page to the homepage hero section.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a promotional banner to the homepage hero and tightens Text
variants/types, with supporting styles and minor content tweaks.
> 
> - **Hero**:
> - Add `HeroPromotion` component (badge/label/arrow link) with new
styles in `src/components/Hero/styles.module.css`.
> - Extend `Hero` with optional `promotion` prop and render it above
heading.
> - CSS: introduce promotion styles; adjust responsive constraints on
`.heroBannerContent`.
> - **Homepage**:
> - Use `Hero` `promotion` to link to the Apify $1M Challenge; minor
text formatting updates in `src/pages/index.tsx`.
> - **Text**:
> - Add `medium` weight variants for `body`/`code`; narrow prop types
for `type`, `size`, `weight` in `src/components/Text.tsx`.
> - **SDK Section**:
> - Update `Text` usage to rely on defaults and muted color in
`src/components/SdkSection/SdkSection.tsx`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
8da5cec. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: webrdaniel

src/components/Hero/Hero.tsx

@@ -1,19 +1,56 @@
 import clsx from 'clsx';
 import type React from 'react';
 
+import { ArrowRightIcon } from '@apify/ui-icons';
+
 import { Heading } from '../Heading';
+import { Text } from '../Text';
 import styles from './styles.module.css';
 
+interface HeroPromotionProps {
+    badge: string;
+    label: string;
+    labelMobile?: string;
+    href: string;
+}
+
+function HeroPromotion({ badge, label, labelMobile, href }: HeroPromotionProps) {
+    return (
+        <a href={href} className={styles.heroPromotionLink}>
+            <Text className={styles.heroPromotionBadge} as="span">
+                {badge}
+            </Text>
+            <div className={styles.heroPromotionContent}>
+                <Text className={styles.heroPromotionLabel} weight="medium">
+                    <span className={styles.heroPromotionLabelDesktop}>
+                        {label}
+                    </span>
+                    <span className={styles.heroPromotionLabelMobile}>
+                        {labelMobile || label}
+                    </span>
+                </Text>
+                <ArrowRightIcon
+                    className={styles.heroPromotionArrow}
+                    size="16"
+                />
+            </div>
+        </a>
+    );
+}
+
 interface HeroProps {
     heading: string;
     description: React.ReactNode | string;
+    align?: 'left' | 'center';
+    promotion?: HeroPromotionProps;
     className?: string;
 }
 
-export default function Hero({ heading, description, className }: HeroProps) {
+export default function Hero({ heading, description, promotion, align = 'left', className }: HeroProps) {
     return (
         <header className={clsx(styles.heroBanner, className)}>
-            <div className={clsx(styles.heroBannerContent)}>
+            <div className={clsx(styles.heroBannerContent, { [styles.heroAlignLeft]: align === 'left' })}>
+                {promotion && <HeroPromotion {...promotion} />}
                 <div>
                     <Heading type='title3Xl' className={styles.tagline}>{heading}</Heading>
                 </div>

src/components/Hero/styles.module.css

@@ -16,20 +16,26 @@
 @media (min-width: 768px) {
     .heroBannerContent {
         max-width: 738px;
-        align-items: flex-start;
-        text-align: left;
+        &.heroAlignLeft {
+            align-items: flex-start;
+            text-align: left;
+        }
     }
     .heroBanner {
         margin-bottom: 0;
     }
 }
 
 @media (min-width: 1024px) {
-    .heroBannerContent { max-width: 896px; }
+    .heroBannerContent {
+        max-width: 896px;
+    }
 }
 
 @media (min-width: 1440px) {
-    .heroBannerContent { max-width: 1200px; }
+    .heroBannerContent {
+        max-width: 1200px;
+    }
 }
 
 .heroBanner {
@@ -39,7 +45,7 @@
 }
 
 .heroBanner .heroDescription {
-   color: var(--color-neutral-text-muted);
+    color: var(--color-neutral-text-muted);
 }
 
 html .heroBanner p {
@@ -92,3 +98,70 @@ html[data-theme='dark'] .heroBanner p {
         font-size: 0.7em;
     }
 }
+
+.heroBanner .heroPromotionLink {
+    border-radius: 1000px;
+    border: 1px solid var(--color-Neutral_SeparatorSubtle);
+    background: var(--color-Neutral_Background);
+    display: flex;
+    padding: 0.8rem 1.2rem;
+    align-items: center;
+    gap: 0.8rem;
+    margin-bottom: 0.8rem;
+
+    @media (max-width: 767px) {
+        padding: 0.8rem 1.6rem;
+        flex-direction: column;
+    }
+
+    &:hover {
+        background: var(--color-Neutral_Hover);
+
+        .heroPromotionArrow {
+            transform: translateX(4px);
+        }
+    }
+}
+
+.heroBanner .heroPromotionContent {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.heroBanner .heroPromotionBadge {
+    border-radius: 1.2rem;
+    background: var(--color-primary-chip-background);
+    color: var(--color-primary-chip-text);
+    display: flex;
+    padding: 0.2rem 0.8rem;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+.heroBanner .heroPromotionLabel {
+    color: var(--color-neutral-text);
+}
+
+.heroBanner .heroPromotionLabelDesktop {
+    display: inline;
+}
+
+.heroBanner .heroPromotionLabelMobile {
+    display: none;
+}
+
+@media (max-width: 767px) {
+    .heroBanner .heroPromotionLabelDesktop {
+        display: none;
+    }
+    .heroBanner .heroPromotionLabelMobile {
+        display: inline;
+    }
+}
+
+.heroBanner .heroPromotionArrow {
+    color: var(--color-neutral-icon);
+    transition: transform 0.2s;
+}

src/components/SdkSection/SdkSection.tsx

@@ -93,7 +93,7 @@ export default function SdkSection({
                         />
                         <Heading type="titleXl" style={{ verticalAlign: 'center' }}>{title}</Heading>
                     </div>
-                    <Text size='medium' color={theme.color.neutral.textMuted}>
+                    <Text size="large" color={theme.color.neutral.textMuted}>
                         {description}
                     </Text>
                 </div>

src/components/Text.tsx

@@ -27,45 +27,51 @@ const TEXT_VARIANTS_CSS = {
     body: {
         large: {
             normal: css`${theme.typography.shared.mobile.bodyL}`,
+            medium: css`${theme.typography.shared.mobile.bodyLMedium}`,
             bold: css`${theme.typography.shared.mobile.bodyLStrong}`,
         },
         regular: {
             normal: css`${theme.typography.shared.mobile.bodyM}`,
+            medium: css`${theme.typography.shared.mobile.bodyMMedium}`,
             bold: css`${theme.typography.shared.mobile.bodyMStrong}`,
         },
         small: {
             normal: css`${theme.typography.shared.mobile.bodyS}`,
+            medium: css`${theme.typography.shared.mobile.bodySMedium}`,
             bold: css`${theme.typography.shared.mobile.bodySStrong}`,
         },
     },
     code: {
         large: {
             normal: css`${theme.typography.shared.mobile.codeL}`,
+            medium: css`${theme.typography.shared.mobile.codeLMedium}`,
             bold: css`${theme.typography.shared.mobile.codeLStrong}`,
         },
         regular: {
             normal: css`${theme.typography.shared.mobile.codeM}`,
+            medium: css`${theme.typography.shared.mobile.codeMMedium}`,
             bold: css`${theme.typography.shared.mobile.codeMStrong}`,
         },
         small: {
             normal: css`${theme.typography.shared.mobile.codeS}`,
+            medium: css`${theme.typography.shared.mobile.codeSMedium}`,
             bold: css`${theme.typography.shared.mobile.codeSStrong}`,
         },
     },
 };
 
-interface TextComponentProps extends TextBaseProps {
-    type?: string;
-    size?: string;
-    weight?: string;
+type TextComponentProps = TextBaseProps & {
+    type?: 'body' | 'code';
+    size?: 'large' | 'regular' | 'small';
+    weight?: 'normal' | 'medium' | 'bold';
     as?: React.ElementType;
-}
+};
 
-interface TextCssProps {
-    $type?: string;
-    $size?: string;
-    $weight?: string;
-}
+type TextCssProps = {
+    $type?: 'body' | 'code';
+    $size?: 'large' | 'regular' | 'small';
+    $weight?: 'normal' | 'medium' | 'bold';
+};
 
 const getTextCss = ({ $type = 'body', $size = 'regular', $weight = 'normal' }: TextCssProps) => {
     return TEXT_VARIANTS_CSS[$type]?.[$size]?.[$weight];

src/pages/index.tsx

@@ -63,9 +63,17 @@ export default function Home() {
         <Layout>
             <Hero
                 heading="Apify Documentation"
+                align="center"
+                promotion={{
+                    badge: 'New',
+                    label: 'Join the Apify $1M Challenge. Build to win!',
+                    labelMobile: 'Join the Apify $1M Challenge!',
+                    href: 'https://apify.com/challenge',
+                }}
                 description={
-                    <Text color={theme.color.neutral.textMuted} size='large'>
-                        Learn how to extract value from the web with the Apify platform.
+                    <Text color={theme.color.neutral.textMuted} size="large">
+                        Learn how to extract value from the web with the Apify
+                        platform.
                     </Text>
                 }
             />
@@ -74,7 +82,7 @@ export default function Home() {
                     <div className={styles.bannerContent}>
                         <div className={styles.bannerContentDescription}>
                             <Heading type="titleXl">Getting started</Heading>
-                            <Text size='medium' color={theme.color.neutral.textMuted}>
+                            <Text size="large" color={theme.color.neutral.textMuted}>
                                 Apify is all about Actors—a new way to package your code to make it easy to share, integrate, and build upon.
                             </Text>
                             <ThemedImage