- Supercharge your software development with AI that{" "}
-
+ Simple, transparent pricing that scales with your needs.
+
+ Free 14-day trials to kick the tires.
+
+ The Roo Code extension is free! + Roo Code Cloud is an optional service which takes it to the next level. +
+{tier.description}
++ {tier.featuresIntro} +
++ {tier.price} + {tier.period} +
++ {tier.trial} + {tier.cancellation} +
+ + {tier.cta.isContactForm ? ( +Got questions about our pricing?
++ 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. +
++ Yes, all paid plans come with a 14-day free trial. +
++ Yes, but you won't be charged until your trial ends. You can cancel anytime with + one click . +
++ We accept all major credit cards, debit cards, and can arrange invoice billing for + Enterprise customers. +
++ 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{" "} + + contact our sales team + +
+Code from anywhere.
+{feature.description}
-,
- title: "Multiple Specialized Modes",
- description:
- "From coding to debugging to architecture, Roo Code has a mode for every dev scenario—just switch on the fly.",
+ icon: ReplaceAll,
+ title: "Model-Agnostic",
+ description: "Bring your own model key or use local inference — no markup, lock-in, no restrictions.",
},
{
- icon: - Everything you need to build faster and write better code. + The features you need to build, debug and ship faster – without compromising quality.
{feature.description}
-+ {feature.description} +
+
- 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.
+
+ Roo Code is also compatible with all VSCode forks.
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 8b90d27b5a..0000000000
--- 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}"
-
-
-
-
-
-
- ))}
-
-
-
- )
-}
diff --git a/apps/web-roo-code/src/components/homepage/testimonials.tsx b/apps/web-roo-code/src/components/homepage/testimonials.tsx
index 4df5849d46..01236dfe7e 100644
--- a/apps/web-roo-code/src/components/homepage/testimonials.tsx
+++ b/apps/web-roo-code/src/components/homepage/testimonials.tsx
@@ -1,9 +1,10 @@
"use client"
-import { useRef } from "react"
+import { useRef, useCallback, useEffect } from "react"
import { motion } from "framer-motion"
-import Image from "next/image"
-import { TestimonialsMobile } from "./testimonials-mobile"
+import useEmblaCarousel from "embla-carousel-react"
+import AutoPlay from "embla-carousel-autoplay"
+import { ChevronLeft, ChevronRight } from "lucide-react"
export interface Testimonial {
id: number
@@ -47,26 +48,66 @@ export const testimonials: Testimonial[] = [
export function Testimonials() {
const containerRef = useRef(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 */}
+
+
+ {/* Next Button */}
+
+
+ {/* Gradient Overlays */}
+
+
+
+ {/* Embla Carousel Container */}
+
+
+ {testimonials.map((testimonial) => (
+
+
+
+
+
+
+ {testimonial.quote}
+
+
+
+
+
+ {testimonial.name}
+
+
+ {testimonial.role} at {testimonial.company}
+
+
- )}
-
-
-
-
-
-
-
-
- {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 3b9798926c..c474481805 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 = {