docs: Homepage promotion on one line (#2137)

<img width="998" height="365" alt="Screenshot 2025-12-09 at 11 37 00"
src="https://github.com/user-attachments/assets/d72406a2-1794-4702-a457-6bd46f99d7d0"
/>

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Simplifies the hero promotion to a single-line layout with truncation
and updates the homepage promotion text.
> 
> - **UI**
> - **Hero** (`src/components/Hero/Hero.tsx`): Remove `labelMobile` prop
and mobile/desktop split; render a single `label` with arrow.
> - **Styles** (`src/components/Hero/styles.module.css`): Adjust
promotion layout for one-line display (`max-width`, reduced `gap`, badge
right margin, arrow non-shrinking) and add ellipsis overflow handling.
> - **Homepage** (`src/pages/index.tsx`): Update promotion content to
`badge: "Build"`, `label: "Win big in $1M Challenge"`; drop
`labelMobile`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5878bc1. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: webrdaniel

src/components/Hero/Hero.tsx

@@ -10,30 +10,22 @@ import styles from './styles.module.css';
 interface HeroPromotionProps {
     badge: string;
     label: string;
-    labelMobile?: string;
     href: string;
 }
 
-function HeroPromotion({ badge, label, labelMobile, href }: HeroPromotionProps) {
+function HeroPromotion({ badge, label, 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>
+            <Text className={styles.heroPromotionLabel} weight="medium">
+                {label}
+            </Text>
+            <ArrowRightIcon
+                className={styles.heroPromotionArrow}
+                size="16"
+            />
         </a>
     );
 }

src/components/Hero/styles.module.css

@@ -100,20 +100,16 @@ html[data-theme='dark'] .heroBanner p {
 }
 
 .heroBanner .heroPromotionLink {
+    max-width: calc(100% - 3.2rem);
     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;
+    gap: 0.6rem;
     margin-bottom: 0.8rem;
 
-    @media (max-width: 767px) {
-        padding: 0.8rem 1.6rem;
-        flex-direction: column;
-    }
-
     &:hover {
         background: var(--color-Neutral_Hover);
 
@@ -123,12 +119,6 @@ html[data-theme='dark'] .heroBanner p {
     }
 }
 
-.heroBanner .heroPromotionContent {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-}
-
 .heroBanner .heroPromotionBadge {
     border-radius: 1.2rem;
     background: var(--color-primary-chip-background);
@@ -138,30 +128,18 @@ html[data-theme='dark'] .heroBanner p {
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    margin-right: 0.2rem;
 }
 
 .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;
-    }
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .heroBanner .heroPromotionArrow {
+    flex-shrink: 0;
     color: var(--color-neutral-icon);
     transition: transform 0.2s;
 }

src/pages/index.tsx

@@ -65,9 +65,8 @@ export default function Home() {
                 heading="Apify Documentation"
                 align="center"
                 promotion={{
-                    badge: 'New',
-                    label: 'Join the Apify $1M Challenge. Build to win!',
-                    labelMobile: 'Join the Apify $1M Challenge!',
+                    badge: 'Build',
+                    label: 'Win big in $1M Challenge',
                     href: 'https://apify.com/challenge',
                 }}
                 description={