From b636c290ac6b0631e848b6ff5b1c4ac692d1c6a6 Mon Sep 17 00:00:00 2001 From: Roo Code Date: Wed, 4 Feb 2026 22:37:53 +0000 Subject: [PATCH] feat: add OpenClaw homepage promo concept for marketing site --- docs/index.mdx | 5 + src/components/OpenClawPromo/index.tsx | 110 ++++++ .../OpenClawPromo/styles.module.css | 373 ++++++++++++++++++ 3 files changed, 488 insertions(+) create mode 100644 src/components/OpenClawPromo/index.tsx create mode 100644 src/components/OpenClawPromo/styles.module.css diff --git a/docs/index.mdx b/docs/index.mdx index 9dcffc27..85d793dc 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -9,8 +9,13 @@ keywords: - AI pair programmer - code generation - documentation + - OpenClaw --- +import { OpenClawPromo } from '@site/src/components/OpenClawPromo'; + + + # Roo Code Docs Roo Code is an AI-coding suite of products designed to take full advantage of the most advanced large-language models and change how you create software at a fundamental level. It's unapologetically powerful and customizable, and it costs more to run than the alternatives because it uses frontier models with actual file system access, terminal control, and multi-step workflows. diff --git a/src/components/OpenClawPromo/index.tsx b/src/components/OpenClawPromo/index.tsx new file mode 100644 index 00000000..aaa5d029 --- /dev/null +++ b/src/components/OpenClawPromo/index.tsx @@ -0,0 +1,110 @@ +import React, { useState, useEffect } from 'react'; +import styles from './styles.module.css'; + +// Change this key when updating the promo to show it again to users who dismissed it +const OPENCLAW_PROMO_DISMISSED_KEY = 'openclaw-promo-dismissed-v1'; + +export function OpenClawPromo(): React.ReactElement | null { + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + // Check localStorage to see if promo was dismissed + const isDismissed = localStorage.getItem(OPENCLAW_PROMO_DISMISSED_KEY); + if (!isDismissed) { + setIsVisible(true); + } + }, []); + + const handleDismiss = () => { + setIsVisible(false); + localStorage.setItem(OPENCLAW_PROMO_DISMISSED_KEY, 'true'); + }; + + if (!isVisible) { + return null; + } + + return ( +
+ {/* Animated background elements */} +