Skip to content

feat: add CLI preview landing page with HubSpot form integration #10527

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
roomote wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat: add CLI preview landing page with HubSpot form integration #10527

roomote wants to merge 5 commits into from

Conversation

@roomote
Copy link
Contributor

@roomote roomote bot commented Jan 7, 2026 •
edited by ellipsis-dev bot
Loading

This PR implements a dedicated landing page at /cli-preview to capture early preview interest for the Roo Code CLI.

Changes

New Files

  • apps/web-roo-code/src/app/cli-preview/page.tsx - Route definition with SEO metadata (noindex)
  • apps/web-roo-code/src/app/cli-preview/cli-preview-content.tsx - Landing page content with form and analytics
  • apps/web-roo-code/src/components/forms/hubspot-form.tsx - Reusable HubSpot form component with placeholder state
  • apps/web-roo-code/src/lib/attribution.ts - UTM parameter parsing and hidden field mapping utilities

Features

Landing Page

  • Clean, conversion-focused design with hero, benefits, form, and success sections
  • Fully responsive with dark mode support
  • SEO: explicitly noindex/nofollow per requirements

HubSpot Form Integration

  • Supports two states: configured (with HubSpot IDs) and placeholder (without)
  • Graceful error handling for ad blockers and script failures
  • Environment variables:
    • NEXT_PUBLIC_HUBSPOT_PORTAL_ID
    • NEXT_PUBLIC_HUBSPOT_FORM_ID_CLI_PREVIEW

Attribution Tracking

  • Captures UTM parameters: source, medium, campaign, content, term
  • Captures referrer and landing URL/path
  • Forwards attribution to HubSpot as hidden fields
  • PostHog analytics events for funnel tracking:
    • cli_preview_viewed
    • cli_preview_form_rendered
    • cli_preview_form_placeholder_shown
    • cli_preview_form_submitted
    • cli_preview_nextstep_login_clicked
    • cli_preview_nextstep_signup_clicked

Post-Submit Experience

  • Success message with thank you
  • CTA links to Roo Code Cloud (login and signup)
  • Analytics tracking on CTA clicks

Testing

  • ✅ TypeScript compilation passes
  • ✅ ESLint passes with zero warnings
  • ✅ All apostrophes properly escaped per React linting rules

Next Steps

  • Configure HubSpot form in HubSpot dashboard
  • Set environment variables in deployment
  • Test form submission flow end-to-end

View task on Roo Code Cloud

Important

Adds a CLI preview landing page with HubSpot form integration, attribution tracking, and analytics.

  • Landing Page:
    • New page at /cli-preview with SEO metadata in page.tsx.
    • Responsive design with dark mode in cli-preview-content.tsx.
    • Sections: hero, benefits, form, and success.
  • HubSpot Form Integration:
    • Reusable HubSpotForm component in hubspot-form.tsx.
    • Handles configured and placeholder states.
    • Error handling for script failures.
  • Attribution Tracking:
    • UTM parameter parsing and hidden field mapping in attribution.ts.
    • Captures referrer and landing URL.
    • Sends attribution data to HubSpot.
  • Analytics:
    • PostHog events for page views, form interactions, and CTA clicks in cli-preview-content.tsx.
  • Environment Variables:
    • NEXT_PUBLIC_HUBSPOT_PORTAL_ID and NEXT_PUBLIC_HUBSPOT_FORM_ID_CLI_PREVIEW for form configuration.

This description was created by Ellipsis for aa67297. You can customize this summary. It will automatically update as commits are pushed.

@roomote
feat: add CLI preview landing page with HubSpot form integration
44f9b03 
- Create /cli-preview route with noindex robots meta
- Add HubSpotForm component with placeholder state for unconfigured forms
- Implement UTM attribution parsing and hidden field mapping
- Add PostHog analytics events for funnel tracking
- Include post-submit success state with Cloud CTA links
- Support environment variables:
  - NEXT_PUBLIC_HUBSPOT_PORTAL_ID
  - NEXT_PUBLIC_HUBSPOT_FORM_ID_CLI_PREVIEW
@roomote
Copy link
Contributor Author

roomote bot commented Jan 7, 2026 •
edited
Loading

Rooviewer Clock   See task on Roo Cloud

Reviewed commit aa67297. The changes add early access scarcity messaging throughout the CLI preview landing page - badge indicators, updated hero copy, section headers, and refined success messaging. No issues found.

  • All imports verified against existing dependencies
  • SEO metadata correctly configured with noindex/nofollow
  • HubSpot form component handles error states and placeholder gracefully
  • Attribution tracking properly captures UTM parameters
  • PostHog analytics events implemented for funnel tracking
  • Suspense boundary correctly wraps component using useSearchParams()
  • Copy updates synchronized between page.tsx and cli-preview-content.tsx
  • Benefits section copy updated with clearer messaging
  • Early access scarcity messaging added with proper accessibility (aria-hidden on decorative elements)
  • Dark mode styling consistent across all new UI elements
Previous reviews

Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.

@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Jan 7, 2026
@roomote
Copy link
Contributor Author

roomote bot commented Jan 7, 2026 •
edited
Loading

Fixaroo Clock   See task on Roo Cloud

The fix was already applied by a concurrent process. Both preview checks are now passing.

View commit | Revert commit

@roomote
fix: wrap cli-preview content in Suspense boundary
19b94cf 
Fixes Next.js build error: useSearchParams() requires Suspense boundary
for static generation.
@github-actions
Copy link
Contributor

github-actions bot commented Jan 7, 2026

🚀 Preview deployed!

Your changes have been deployed to Vercel:

Preview URL: https://roo-code-website-3p6lhzpbn-roo-code.vercel.app

This preview will be updated automatically when you push new commits to this PR.

roomote added 3 commits January 7, 2026 23:24
@roomote
chore: update CLI preview landing page copy
03ec6fc 
Replace generic copy with more specific value proposition:
- Emphasize iterative agent capabilities in terminal
- Highlight piping context and automation features
- Focus on running tasks without IDE overhead
@roomote
refactor: update CLI preview landing page bullet points
ba0ebd5 
- Update "Run Roo Code workflows from the terminal" to "Run the agent in your terminal"
- Update "Bring your own model keys and configs" to "Reuse your profiles"
- Update "Designed for automation and repeatability" to "Script the repetition"
- Update "Help us prioritize features that matter" to "Define the spec"

Each bullet point now includes more specific, action-oriented descriptions that better communicate the CLI preview value proposition.
@roomote
feat: add early access scarcity messaging to cli preview landing page
aa67297
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mrubens mrubens Awaiting requested review from mrubens mrubens will be requested when the pull request is marked ready for review mrubens is a code owner

@cte cte Awaiting requested review from cte cte will be requested when the pull request is marked ready for review cte is a code owner

@jr jr Awaiting requested review from jr jr will be requested when the pull request is marked ready for review jr is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels.

Projects

Roo Code Roadmap
Status: Triage

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@hannesrudolph @roomote