diff --git a/apps/web-roo-code/src/app/pricing/page.tsx b/apps/web-roo-code/src/app/pricing/page.tsx
new file mode 100644
index 000000000000..317086a851bd
--- /dev/null
+++ b/apps/web-roo-code/src/app/pricing/page.tsx
@@ -0,0 +1,328 @@
+import { Users, Building2, ArrowRight, Star, LucideIcon, Check, Cloud } from "lucide-react"
+import type { Metadata } from "next"
+import Link from "next/link"
+
+import { Button } from "@/components/ui"
+import { AnimatedBackground } from "@/components/homepage"
+import { ContactForm } from "@/components/enterprise/contact-form"
+import { SEO } from "@/lib/seo"
+import { EXTERNAL_LINKS } from "@/lib/constants"
+
+const TITLE = "Pricing - Roo Code Cloud"
+const DESCRIPTION =
+ "Simple, transparent pricing for Roo Code Cloud. The VS Code extension is free forever. Choose the cloud plan that fits your needs."
+const PATH = "/pricing"
+const OG_IMAGE = SEO.ogImage
+
+export const metadata: Metadata = {
+ title: TITLE,
+ description: DESCRIPTION,
+ alternates: {
+ canonical: `${SEO.url}${PATH}`,
+ },
+ openGraph: {
+ title: TITLE,
+ description: DESCRIPTION,
+ url: `${SEO.url}${PATH}`,
+ siteName: SEO.name,
+ images: [
+ {
+ url: OG_IMAGE.url,
+ width: OG_IMAGE.width,
+ height: OG_IMAGE.height,
+ alt: OG_IMAGE.alt,
+ },
+ ],
+ locale: SEO.locale,
+ type: "website",
+ },
+ twitter: {
+ card: SEO.twitterCard,
+ title: TITLE,
+ description: DESCRIPTION,
+ images: [OG_IMAGE.url],
+ },
+ keywords: [
+ ...SEO.keywords,
+ "pricing",
+ "plans",
+ "subscription",
+ "cloud pricing",
+ "AI development pricing",
+ "team pricing",
+ "enterprise pricing",
+ ],
+}
+
+interface PricingTier {
+ name: string
+ icon: LucideIcon
+ price: string
+ period?: string
+ trial?: string
+ cancellation?: string
+ description: string
+ featuresIntro?: string
+ features: string[]
+ cta: {
+ text: string
+ href?: string
+ isContactForm?: boolean
+ }
+}
+
+const pricingTiers: PricingTier[] = [
+ {
+ name: "Cloud Free",
+ icon: Cloud,
+ price: "$0",
+ cancellation: "Cancel anytime",
+ description: "For folks just getting started",
+ features: [
+ "Token usage analytics",
+ "Access your task history across devices",
+ "Follow your tasks from anywhere",
+ "Community support",
+ ],
+ cta: {
+ text: "Get started",
+ href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP,
+ },
+ },
+ {
+ name: "Pro",
+ icon: Star,
+ price: "$20",
+ period: "/mo",
+ trial: "Free 14-day trial · ",
+ cancellation: "Cancel anytime",
+ description: "For pro Roo coders",
+ featuresIntro: "Everything in Free, plus:",
+ features: [
+ "Roomote Control",
+ "Start, stop and control tasks from anywhere",
+ "Course-correct Roo from afar",
+ "Paid support",
+ ],
+ cta: {
+ text: "Get started",
+ href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/billing",
+ },
+ },
+ {
+ name: "Team",
+ icon: Users,
+ price: "$99",
+ period: "/mo",
+ trial: "Free 14-day trial · ",
+ cancellation: "Cancel anytime",
+ description: "For AI-forward teams",
+ featuresIntro: "Everything in Pro, plus:",
+ features: ["Unlimited users (no per-seat cost)", "Shared configuration & policies", "Centralized billing"],
+ cta: {
+ text: "Get started",
+ href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/billing",
+ },
+ },
+ {
+ name: "Enterprise",
+ icon: Building2,
+ price: "Custom",
+ description: "For complex orgs",
+ featuresIntro: "Everything in Team, plus:",
+ features: [
+ "SAML SSO provisioning",
+ "Custom integrations and terms",
+ "Security questionnaires and all that fun stuff",
+ "Dedicated support",
+ ],
+ cta: {
+ text: "Talk to Sales",
+ isContactForm: true,
+ },
+ },
+]
+
+export default function PricingPage() {
+ return (
+ <>
+
+
+ {/* Hero Section */}
+
+
+
+
Roo Code Cloud Pricing
+
+ Simple, transparent pricing that scales with your needs.
+
+
+
+
+ {/* Free Extension Notice */}
+
+
+
+ The Roo Code extension is free!
+ Roo Code Cloud is an optional service which takes it to the next level.
+
+
+
+
+ {/* Pricing Tiers */}
+
+
+
+ {pricingTiers.map((tier) => {
+ const Icon = tier.icon
+ return (
+
+
+
+
{tier.name}
+
+
{tier.description}
+
+
+
+
+ {tier.featuresIntro}
+
+
+ {tier.features.map((feature) => (
+
+ {feature}
+
+ ))}
+
+
+
+
+ {tier.price}
+ {tier.period}
+
+
+ {tier.trial}
+ {tier.cancellation}
+
+
+ {tier.cta.isContactForm ? (
+
+ ) : (
+
+
+ )}
+
+ )
+ })}
+
+
+
+ {/* Additional Information */}
+
+
+
+
Frequently Asked Questions
+
Got questions about our pricing?
+
+
+
+
Wait, is Roo Code free or not?
+
+ Yes! The Roo Code VS Code extension is open source and free forever. The extension acts
+ as a powerful AI coding assistant right in your editor. These are the prices for Roo
+ Code Cloud.
+
+
+
+
Is there a free trial?
+
+ Yes, all paid plans come with a 14-day free trial.
+
+
+
+
Do I need a credit card for the free trial?
+
+ Yes, but you won't be charged until your trial ends. You can cancel anytime with
+ one click .
+
+
+
+
What payment methods do you accept?
+
+ We accept all major credit cards, debit cards, and can arrange invoice billing for
+ Enterprise customers.
+
+
+
+
Can I change plans anytime?
+
+ Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in
+ your next billing cycle.
+
+
+
+
+
+
+ Still have questions?{" "}
+
+ Join our Discord
+ {" "}
+ or{" "}
+
+
+
+
+ {/* CTA Section */}
+
+
+
+
Try Roo Code Cloud now
+
Code from anywhere.
+
+
+
+
+ )
+}
diff --git a/apps/web-roo-code/src/components/chromes/footer.tsx b/apps/web-roo-code/src/components/chromes/footer.tsx
index de41a5b0ca4f..11b883d9ce28 100644
--- a/apps/web-roo-code/src/components/chromes/footer.tsx
+++ b/apps/web-roo-code/src/components/chromes/footer.tsx
@@ -64,52 +64,52 @@ export function Footer() {
@@ -119,20 +119,20 @@ export function Footer() {
- FAQ
+ Evals
- Docs
+ FAQ
@@ -194,24 +194,6 @@ export function Footer() {
Careers
-
-
- Blog
-
-
-
-
- Testimonials
-
-
+
{/* Desktop Navigation */}
-
- {/* note: features and testimonials links are hidden for screen sizes smaller than lg */}
+
- Features
+ targetId="product"
+ className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
+ Product
-
- Testimonials
-
-
+ className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
Docs
-
- Community
-
-
- Cloud
-
+
+
+ Resources
+
+ {/* Dropdown Menu */}
+
+
@@ -92,108 +102,128 @@ export function NavBar({ stars, downloads }: NavBarProps) {
+ className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex">
Install ·
{downloads !== null &&
{downloads} }
+
+
setIsMenuOpen(!isMenuOpen)}
- className="flex items-center justify-center rounded-full p-2 transition-colors hover:bg-accent md:hidden"
+ className="relative z-10 flex items-center justify-center rounded-full p-2 transition-colors hover:bg-accent md:hidden"
aria-label="Toggle mobile menu">
- {isMenuOpen ?
- {/* Mobile Menu Panel */}
+ {/* Mobile Menu Panel - Full Screen */}
-
- setIsMenuOpen(false)}>
- Features
-
- setIsMenuOpen(false)}>
- Testimonials
-
- setIsMenuOpen(false)}>
- Security
-
- setIsMenuOpen(false)}>
- Docs
-
- setIsMenuOpen(false)}>
- Community
-
- setIsMenuOpen(false)}>
- Cloud
-
-
-
-
+
+ {/* Main navigation items */}
+
+
setIsMenuOpen(false)}>
+ Product
+
+
setIsMenuOpen(false)}>
- {stars} }
+ Docs
+
+
setIsMenuOpen(false)}>
+ Pricing
-
-
+
+ {/* Resources Section */}
+
-
+
+ {/* Bottom section with Cloud Login and stats */}
+
diff --git a/apps/web-roo-code/src/components/homepage/features-mobile.tsx b/apps/web-roo-code/src/components/homepage/features-mobile.tsx
deleted file mode 100644
index e924afd4bf6d..000000000000
--- a/apps/web-roo-code/src/components/homepage/features-mobile.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client"
-
-import { useEffect, useState, useCallback } from "react"
-import useEmblaCarousel from "embla-carousel-react"
-import Autoplay from "embla-carousel-autoplay"
-import { Button } from "@/components/ui/button"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { features } from "@/components/homepage/features"
-
-export function FeaturesMobile() {
- // configure autoplay with Embla
- const autoplayPlugin = Autoplay({
- delay: 5000,
- stopOnInteraction: true,
- stopOnMouseEnter: true,
- rootNode: (emblaRoot) => emblaRoot,
- })
-
- const [emblaRef, emblaApi] = useEmblaCarousel(
- {
- loop: true,
- containScroll: "trimSnaps",
- },
- [autoplayPlugin],
- )
-
- const [selectedIndex, setSelectedIndex] = useState(0)
- const [scrollSnaps, setScrollSnaps] = useState
([])
-
- const scrollTo = useCallback((index: number) => emblaApi && emblaApi.scrollTo(index), [emblaApi])
-
- /* eslint-disable @typescript-eslint/no-explicit-any */
- const onInit = useCallback((emblaApi: any) => {
- setScrollSnaps(emblaApi.scrollSnapList())
- }, [])
-
- /* eslint-disable @typescript-eslint/no-explicit-any */
- const onSelect = useCallback((emblaApi: any) => {
- setSelectedIndex(emblaApi.selectedScrollSnap())
- }, [])
-
- useEffect(() => {
- if (!emblaApi) return
-
- onInit(emblaApi)
- onSelect(emblaApi)
- emblaApi.on("reInit", onInit)
- emblaApi.on("select", onSelect)
-
- return () => {
- emblaApi.off("reInit", onInit)
- emblaApi.off("select", onSelect)
- }
- }, [emblaApi, onInit, onSelect])
-
- return (
-
-
-
-
- {features.map((feature, index) => (
-
-
-
-
{feature.title}
-
{feature.description}
-
-
- ))}
-
-
-
- {/* Navigation Controls */}
-
-
- emblaApi?.scrollPrev()}>
- Previous slide
-
- emblaApi?.scrollNext()}>
- Next slide
-
-
-
-
- {scrollSnaps.map((_, index) => (
- scrollTo(index)}
- aria-label={`Go to slide ${index + 1}`}
- />
- ))}
-
-
-
-
-
+
- Powerful features for modern developers.
+ Power and flexibility to get stuff done.
- Everything you need to build faster and write better code.
+ The features you need to build, debug and ship faster – without compromising quality.
- {/* Mobile Carousel */}
-
-
- {/* Desktop Grid */}
-
- {features.map((feature, index) => (
-
-
-
-
-
{feature.title}
-
{feature.description}
-
- ))}
-
diff --git a/apps/web-roo-code/src/components/homepage/index.ts b/apps/web-roo-code/src/components/homepage/index.ts
index 192c155473b6..9d4427448e6e 100644
--- a/apps/web-roo-code/src/components/homepage/index.ts
+++ b/apps/web-roo-code/src/components/homepage/index.ts
@@ -2,9 +2,7 @@ export * from "./animated-background"
export * from "./code-example"
export * from "./company-logos"
export * from "./faq-section"
-export * from "./features-mobile"
export * from "./features"
export * from "./install-section"
-export * from "./testimonials-mobile"
export * from "./testimonials"
export * from "./whats-new-button"
diff --git a/apps/web-roo-code/src/components/homepage/install-section.tsx b/apps/web-roo-code/src/components/homepage/install-section.tsx
index 5da3a7d4ae88..96404b47969d 100644
--- a/apps/web-roo-code/src/components/homepage/install-section.tsx
+++ b/apps/web-roo-code/src/components/homepage/install-section.tsx
@@ -46,12 +46,13 @@ export function InstallSection({ downloads }: InstallSectionProps) {
{/* Updated h2 to match other sections */}
-
- Install Roo Code — Open & Flexible
+
+ Install Roo Code now
- Roo Code is open-source, model-agnostic, and developer-focused. Install from the VS Code
- Marketplace or the CLI in minutes, then bring your own AI model.
+ Install from the VSCode Marketplace or the CLI in minutes, then bring your own AI model.
+
@@ -64,7 +65,7 @@ export function InstallSection({ downloads }: InstallSectionProps) {
- VSCode Marketplace
+ From VSCode Marketplace
{downloads !== null && (
<>
·
@@ -80,7 +81,7 @@ export function InstallSection({ downloads }: InstallSectionProps) {
-
Install via CLI
+
or via CLI
diff --git a/apps/web-roo-code/src/components/homepage/testimonials-mobile.tsx b/apps/web-roo-code/src/components/homepage/testimonials-mobile.tsx
deleted file mode 100644
index 8b90d27b5a98..000000000000
--- a/apps/web-roo-code/src/components/homepage/testimonials-mobile.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import useEmblaCarousel from "embla-carousel-react"
-import AutoScroll from "embla-carousel-auto-scroll"
-import { testimonials } from "@/components/homepage/testimonials"
-
-export function TestimonialsMobile() {
- const [emblaRef] = useEmblaCarousel({ loop: true }, [
- AutoScroll({
- playOnInit: true,
- speed: 1, // pixels per second - slower for smoother scrolling
- stopOnInteraction: true,
- stopOnMouseEnter: true,
- }),
- ])
-
- return (
-
-
-
- {testimonials.map((testimonial) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
- "{testimonial.quote}"
-
-
-
-
-
-
- ))}
-
-
-
(null)
+ const [emblaRef, emblaApi] = useEmblaCarousel(
+ {
+ loop: true,
+ align: "center",
+ skipSnaps: false,
+ containScroll: false,
+ },
+ [
+ AutoPlay({
+ playOnInit: true,
+ delay: 4000,
+ stopOnInteraction: true,
+ stopOnMouseEnter: true,
+ stopOnFocusIn: true,
+ }),
+ ],
+ )
+
+ const scrollPrev = useCallback(() => {
+ if (emblaApi) emblaApi.scrollPrev()
+ }, [emblaApi])
+
+ const scrollNext = useCallback(() => {
+ if (emblaApi) emblaApi.scrollNext()
+ }, [emblaApi])
+
+ // Re-init auto-play on user interaction
+ useEffect(() => {
+ if (!emblaApi) return
+
+ const autoPlay = emblaApi?.plugins()?.autoPlay as
+ | {
+ isPlaying?: () => boolean
+ play?: () => void
+ }
+ | undefined
+ if (!autoPlay) return
+
+ const handleInteraction = () => {
+ const isPlaying = autoPlay.isPlaying && autoPlay.isPlaying()
+ if (!isPlaying) {
+ setTimeout(() => {
+ if (autoPlay.play) {
+ autoPlay.play()
+ }
+ }, 2000)
+ }
+ }
+
+ emblaApi.on("pointerUp", handleInteraction)
+
+ return () => {
+ emblaApi.off("pointerUp", handleInteraction)
+ }
+ }, [emblaApi])
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
- transition: {
- staggerChildren: 0.15,
- delayChildren: 0.3,
- },
- },
- }
-
- const itemVariants = {
- hidden: {
- opacity: 0,
- y: 20,
- },
- visible: {
- opacity: 1,
- y: 0,
transition: {
duration: 0.6,
ease: [0.21, 0.45, 0.27, 0.9],
@@ -74,123 +115,78 @@ export function Testimonials() {
},
}
- const backgroundVariants = {
- hidden: {
- opacity: 0,
- },
- visible: {
- opacity: 1,
- transition: {
- duration: 1.2,
- ease: "easeOut",
- },
- },
- }
-
return (
-
-
-
+
+
-
-
-
- Empowering developers worldwide.
-
-
- Join thousands of developers who are revolutionizing their workflow with AI-powered
- assistance.
-
-
+
+
+ AI-forward developers are using Roo Code
+
+
+ Join more than 800k people revolutionizing their workflow worldwide
+
- {/* Mobile Carousel */}
-
-
- {/* Desktop Grid */}
-
- {testimonials.map((testimonial, index) => (
-
-
-
- {testimonial.image && (
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {/* Previous Button */}
+
+
-
- {testimonial.quote}
-
-
+ {/* Next Button */}
+
+
+
+ {/* Gradient Overlays */}
+
+
-
-
-
- {testimonial.name}
-
-
- {testimonial.role} at {testimonial.company}
-
+ {/* Embla Carousel Container */}
+
+
+ {testimonials.map((testimonial) => (
+
+
+
+
+
+
+ {testimonial.quote}
+
+
+
+
+
+ {testimonial.name}
+
+
+ {testimonial.role} at {testimonial.company}
+
+
+
-
- ))}
+ ))}
+
diff --git a/apps/web-roo-code/src/lib/constants.ts b/apps/web-roo-code/src/lib/constants.ts
index 3b9798926cfb..c474481805c9 100644
--- a/apps/web-roo-code/src/lib/constants.ts
+++ b/apps/web-roo-code/src/lib/constants.ts
@@ -24,7 +24,8 @@ export const EXTERNAL_LINKS = {
OFFICE_HOURS_PODCAST: "https://www.youtube.com/@RooCodeYT/podcasts",
FAQ: "https://roocode.com/#faq",
TESTIMONIALS: "https://roocode.com/#testimonials",
- CLOUD_APP: "https://app.roocode.com",
+ CLOUD_APP_LOGIN: "https://app.roocode.com/sign-in",
+ CLOUD_APP_SIGNUP: "https://app.roocode.com/sign-up",
}
export const INTERNAL_LINKS = {