+
+
+ {/* Mobile Menu Panel */}
+
+
+
+
+ {/* Desktop Navigation */}
+
+
+
+
+
+ {/* Mobile Menu Button */}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const codeExamples = {
+ code: {
+ code: `// Code Mode
+You: Generate a React component for a user profile card
+
+Roo: Here's a React component for a user profile card:
+
+import React from 'react';
+
+interface UserProfileProps {
+ name: string;
+ role: string;
+ avatar: string;
+ bio: string;
+ stats: {
+ projects: number;
+ followers: number;
+ following: number;
+ };
+}
+
+export const UserProfile: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {currentText}
+ {isTyping && (
+
+
+
+
+ );
+};`,
+ },
+ architect: {
+ code: `// Architect Mode
+// Project: E-commerce Platform
+// Request: Design the authentication system
+
+Roo is analyzing your project...
+
+📂 Recommended Architecture:
+
+auth/
+├─ services/
+│ ├─ authService.ts // Core authentication logic
+│ ├─ tokenService.ts // JWT handling and refresh
+│ └─ userService.ts // User data operations
+├─ hooks/
+│ ├─ useAuth.ts // React hook for auth state
+│ └─ useProtectedRoute.ts // Route protection
+├─ components/
+│ ├─ LoginForm.tsx // Login UI
+│ ├─ SignupForm.tsx // Registration UI
+│ ├─ PasswordReset.tsx // Password recovery
+│ └─ TwoFactorAuth.tsx // 2FA implementation
+└─ context/
+ └─ AuthContext.tsx // Global auth state
+
+🔐 Security Recommendations:
+- Implement PKCE flow for auth code exchange
+- Use HttpOnly cookies for refresh tokens
+- Rate limit authentication attempts
+- Add device fingerprinting for suspicious login detection
+
+⚡ Performance Considerations:
+- Prefetch user data on auth
+- Implement token refresh without UI disruption
+- Lazy load auth components
+
+Would you like me to generate any of these files?`,
+ },
+ debug: {
+ code: `// Debug Mode
+// Analyzing error: TypeError: Cannot read property 'map' of undefined
+
+Roo has analyzed your code and found 3 issues:
+
+🐛 Issue #1: Null data reference
+ Line 42: const items = data.items.map(item => item.name);
+
+ ✓ Root Cause: 'data' is undefined when component mounts
+ ✓ Context: API request in useEffect hasn't completed yet
+
+ Recommended Fix:
+ const items = data?.items?.map(item => item.name) || [];
+
+🐛 Issue #2: Missing dependency in useEffect
+ Line 37: useEffect(() => { fetchData() }, []);
+
+ ✓ Root Cause: fetchData depends on 'userId' but isn't in deps array
+ ✓ Context: This causes stale data when userId changes
+
+ Recommended Fix:
+ useEffect(() => { fetchData() }, [userId, fetchData]);
+
+🐛 Issue #3: Memory leak from unfinished API call
+ Line 38: const response = await api.getItems(userId);
+
+ ✓ Root Cause: No cleanup when component unmounts during API call
+ ✓ Context: This triggers React warning in development
+
+ Recommended Fix:
+ Add AbortController to cancel pending requests on unmount
+
+Apply these fixes automatically? [Yes/No]`,
+ },
+}
diff --git a/apps/website/src/components/homepage/company-logos.tsx b/apps/website/src/components/homepage/company-logos.tsx
new file mode 100644
index 0000000000..cedc681759
--- /dev/null
+++ b/apps/website/src/components/homepage/company-logos.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { motion } from "framer-motion"
+
+export function CompanyLogos() {
+ const logos = [
+ { name: "Company 1", logo: "/placeholder.svg?height=40&width=120" },
+ { name: "Company 2", logo: "/placeholder.svg?height=40&width=120" },
+ { name: "Company 3", logo: "/placeholder.svg?height=40&width=120" },
+ { name: "Company 4", logo: "/placeholder.svg?height=40&width=120" },
+ { name: "Company 5", logo: "/placeholder.svg?height=40&width=120" },
+ { name: "Company 6", logo: "/placeholder.svg?height=40&width=120" },
+ ]
+
+ return (
+
+ 
+
+
+
+ {name}
+{role}
+{bio}
+
+
+
+ {stats.projects}
+ Projects
+
+
+ {stats.followers}
+ Followers
+
+
+ {stats.following}
+ Following
+
+
+
+ )
+}
diff --git a/apps/website/src/components/homepage/faq-section.tsx b/apps/website/src/components/homepage/faq-section.tsx
new file mode 100644
index 0000000000..e870474661
--- /dev/null
+++ b/apps/website/src/components/homepage/faq-section.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import { useState } from "react"
+import { motion } from "framer-motion"
+import { ChevronDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface FAQItem {
+ question: string
+ answer: string
+}
+
+const faqs: FAQItem[] = [
+ {
+ question: "What exactly is Roo Code?",
+ answer: "Roo Code is an open-source, AI-powered coding assistant that runs in VS Code. It goes beyond simple autocompletion by reading and writing across multiple files, executing commands, and adapting to your workflow—like having a whole dev team right inside your editor.",
+ },
+ {
+ question: "How does Roo Code differ from Copilot, Cursor, or Windsurf?",
+ answer: "Open & Customizable: Roo Code is open-source and allows you to integrate any AI model (OpenAI, Anthropic, local LLMs, etc.). Multi-File Edits: It can read, refactor, and update multiple files at once for more holistic changes. Agentic Abilities: Roo Code can run tests, open a browser, or do deeper tasks than a typical AI autocomplete. Permission-Based: You control and approve any file changes or command executions.",
+ },
+ {
+ question: "Is Roo Code really free?",
+ answer: "Yes! Roo Code is completely free and open-source. You'll only pay for the AI model usage if you use a paid API (like OpenAI). If you choose free or self-hosted models, there's no cost at all.",
+ },
+ {
+ question: "Will my code stay private?",
+ answer: "Yes. Because Roo Code is an extension in your local VS Code, your code never leaves your machine unless you connect to an external AI API. Even then, you control exactly what is sent to the AI model. You can use tools like .rooignore to exclude sensitive files, and you can also run Roo Code with offline/local models for full privacy.",
+ },
+ {
+ question: "Which AI models does Roo Code support?",
+ answer: "Roo Code is model-agnostic. It works with: OpenAI models (GPT-3.5, GPT-4, etc.), Anthropic Claude, Local LLMs (through APIs or special plugins), Any other API that follows Roo Code's Model Context Protocol (MCP).",
+ },
+ {
+ question: "Does Roo Code support my programming language?",
+ answer: "Likely yes! Roo Code supports a wide range of languages—Python, Java, C#, JavaScript/TypeScript, Go, Rust, etc. Since it leverages the AI model's understanding, new or lesser-known languages may also work, depending on model support.",
+ },
+ {
+ question: "How do I install and get started?",
+ answer: "Install Roo Code from the VS Code Marketplace (or GitHub). Add your AI keys (OpenAI, Anthropic, or other) in the extension settings. Open the Roo panel (the rocket icon) in VS Code, and start typing commands in plain English!",
+ },
+ {
+ question: "Can it handle large, enterprise-scale projects?",
+ answer: "Absolutely. Roo Code uses efficient strategies (like partial-file analysis, summarization, or user-specified context) to handle large codebases. Enterprises especially appreciate the on-prem or self-hosted model option for compliance and security needs.",
+ },
+ {
+ question: "Is it safe for enterprise use?",
+ answer: "Yes. Roo Code was designed with enterprise in mind: Self-host AI models or choose your own provider. Permission gating on file writes and commands. Auditable: The entire code is open-source, so you know exactly how it operates.",
+ },
+ {
+ question: "Can Roo Code run commands and tests automatically?",
+ answer: "Yes! One of Roo Code's superpowers is command execution (optional and fully permission-based). It can: Run npm install or any terminal command you grant permission for. Execute your test suites. Open a web browser for integration tests.",
+ },
+ {
+ question: "What if I just want a casual coding 'vibe'?",
+ answer: 'Roo Code shines for both serious enterprise development and casual "vibe coding." You can ask it to quickly prototype ideas, refactor on the fly, or provide design suggestions—without a rigid, step-by-step process.',
+ },
+ {
+ question: "Can I contribute to Roo Code?",
+ answer: "Yes, please do! Roo Code is open-source on GitHub. Submit issues, suggest features, or open a pull request. There's also an active community on Discord and Reddit if you want to share feedback or help others.",
+ },
+ {
+ question: "Where can I learn more or get help?",
+ answer: "Check out: Official Documentation for setup and advanced guides. Discord & Reddit channels for community support. YouTube tutorials and blog posts from fellow developers showcasing real-world usage.",
+ },
+]
+
+export function FAQSection() {
+ const [openIndex, setOpenIndex] = useState
+ {logos.map((company, index) => (
+
+ {/* eslint-disable @next/next/no-img-element */}
+ 
+
+ ))}
+
+
+
+
+
+
+
+
+ + Frequently Asked Questions +
++ Everything you need to know about Roo Code and how it can transform your development + workflow. +
+
+
+
+ {faqs.map((faq, index) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {faq.answer}
+
+
+ )
+}
diff --git a/apps/website/src/components/homepage/features.tsx b/apps/website/src/components/homepage/features.tsx
new file mode 100644
index 0000000000..ce5534ab6e
--- /dev/null
+++ b/apps/website/src/components/homepage/features.tsx
@@ -0,0 +1,172 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { FaRobot, FaCode, FaBrain, FaTools, FaTerminal, FaPuzzlePiece, FaGlobe } from "react-icons/fa"
+import { FeaturesMobile } from "./features-mobile"
+
+import { ReactNode } from "react"
+
+export interface Feature {
+ icon: ReactNode
+ title: string
+ description: string
+ size: "small" | "large"
+}
+
+export const features: Feature[] = [
+ {
+ icon:
+
+
+
+
+ {/* Navigation Controls */}
+
+ {features.map((feature, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ {feature.icon}
+ {feature.title}
+{feature.description}
+
+
+
+
+
+
+
+
+ {scrollSnaps.map((_, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Mobile Carousel */}
+ + Powerful features for modern developers. +
++ Everything you need to build faster and write better code. +
+
+ {features.map((feature, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {feature.icon}
+ {feature.title}
+{feature.description}
+
+
+
+
+
+
+
+ + Install Roo Code — Open & Flexible +
++ 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 via CLI
+
+
+
+
+ code --install-extension RooVeterinaryInc.roo-cline
+
+
+
+
+ )
+}
diff --git a/apps/website/src/components/homepage/testimonials.tsx b/apps/website/src/components/homepage/testimonials.tsx
new file mode 100644
index 0000000000..8ffed444cc
--- /dev/null
+++ b/apps/website/src/components/homepage/testimonials.tsx
@@ -0,0 +1,183 @@
+"use client"
+
+import { useRef } from "react"
+import { motion } from "framer-motion"
+import Image from "next/image"
+import { TestimonialsMobile } from "./testimonials-mobile"
+
+export interface Testimonial {
+ id: number
+ name: string
+ role: string
+ company: string
+ image?: string
+ quote: string
+}
+
+export const testimonials: Testimonial[] = [
+ {
+ id: 1,
+ name: "Luca",
+ role: "Reviewer",
+ company: "VS Code Marketplace",
+ quote: "Roo Code is an absolute game-changer! 🚀 It makes coding faster, easier, and more intuitive with its smart AI-powered suggestions, real-time debugging, and automation features. The seamless integration with VS Code is a huge plus, and the constant updates ensure it keeps getting better",
+ },
+ {
+ id: 2,
+ name: "Taro Woollett-Chiba",
+ role: "AI Product Lead",
+ company: "Vendidit",
+ quote: "Easily the best AI code editor. Roo Code has the best features and capabilities, along with the best development team. I swear, they're the fastest to support new models and implement useful functionality whenever users mention it... simply amazing.",
+ },
+ {
+ id: 3,
+ name: "Can Nuri",
+ role: "Reviewer",
+ company: "VS Code Marketplace",
+ quote: "Roo Code is one of the most inspiring projects I have seen for a long time. It shapes the way I think and deal with software development.",
+ },
+ {
+ id: 4,
+ name: "Michael",
+ role: "Reviewer",
+ company: "VS Code Marketplace",
+ quote: "I switched from Windsurf to Roo Code in January and honestly, it's been a huge upgrade. Windsurf kept making mistakes and being dumb when I ask it for things. Roo just gets it. Projects that used to take a full day now wrap up before lunch. ",
+ },
+]
+
+export function Testimonials() {
+ const containerRef = useRef
+
+
+ {testimonials.map((testimonial) => (
+
+
+
+ ))}
+
+
+
+
+ +++ "{testimonial.quote}" +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ {/* Mobile Carousel */}
+ + Empowering developers worldwide. +
++ Join thousands of developers who are revolutionizing their workflow with AI-powered + assistance. +
+
+ {testimonials.map((testimonial, index) => (
+
+
+
+ ))}
+
+
+ {testimonial.image && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ + {testimonial.quote} +
+ +
+
+
+ {testimonial.name}
++ {testimonial.role} at {testimonial.company} +
+
+
+ )
+}
+
+const version = "v3.8.0"
+
+export function WhatsNewButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const buttonRef = useRef
+
+
+
+ {title}
+{description}
+
+
+ {
+ e.preventDefault()
+ setIsOpen(true)
+ }}
+ className="relative z-10 flex items-center space-x-2 rounded-full bg-black px-4 py-2 text-sm font-medium text-white transition-all hover:bg-gray-900">
+ See what's new in {version}
+
+
+ setIsOpen(false)}>
+
+
+ )}
+
+ {
+ // prevent clicks inside the panel from closing it
+ e.stopPropagation()
+ }}>
+
+
+
+
+
+ + What's New in Roo Code {version} +
+ +
+
+
+ {children}
+
+