mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-08-28 05:27:24 +00:00
Phase 1 website updates (#6085)
Co-authored-by: Daniel Riccio <ricciodaniel98@gmail.com>
This commit is contained in:
thill2323
GitHub
parent
6e835de82f
commit
c6e7ac41fc
14 changed files with 6774 additions and 325 deletions
1
apps/web-roo-code/public/RooCode-Badge-blk.svg
Normal file
1
apps/web-roo-code/public/RooCode-Badge-blk.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.5 KiB |
6180
apps/web-roo-code/public/RooCode-Badge-white.svg
Normal file
6180
apps/web-roo-code/public/RooCode-Badge-white.svg
Normal file
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 470 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
import { Code, CheckCircle, Shield, Users, Zap, Workflow, Lock } from "lucide-react"
|
||||
import { Code, CheckCircle, Shield, Zap, Workflow, Lock, ArrowRight, DollarSign, Search, Network } from "lucide-react"
|
||||
|
||||
import { Button } from "@/components/ui"
|
||||
import { AnimatedText } from "@/components/animated-text"
|
||||
|
|
@ -10,7 +10,7 @@ export default async function Enterprise() {
|
|||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="relative flex h-[calc(100vh-theme(spacing.16))] items-center overflow-hidden">
|
||||
<section className="relative flex h-[calc(100vh-theme(spacing.12))] items-center overflow-hidden">
|
||||
<AnimatedBackground />
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
|
||||
|
|
@ -34,26 +34,19 @@ export default async function Enterprise() {
|
|||
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full hover:bg-gray-200 dark:bg-white dark:text-black sm:w-auto"
|
||||
className="w-full bg-black text-white hover:bg-gray-800 hover:shadow-lg hover:shadow-black/20 dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:hover:shadow-white/20 transition-all duration-300 sm:w-auto"
|
||||
asChild>
|
||||
<a href="#contact" className="flex w-full items-center justify-center">
|
||||
Request a Demo
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2 h-4 w-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" className="w-full sm:w-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="w-full sm:w-auto bg-white/20 dark:bg-white/10 backdrop-blur-sm border border-black/40 dark:border-white/30 hover:border-blue-400 hover:bg-white/30 dark:hover:bg-white/20 hover:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-300">
|
||||
<a href="#benefits" className="flex w-full items-center justify-center">
|
||||
Learn More
|
||||
Why Roo Code
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -110,9 +103,11 @@ export default async function Enterprise() {
|
|||
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Card 1 */}
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
|
||||
<Zap className="h-6 w-6 text-blue-500" />
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10 dark:hover:border-blue-400/50 dark:hover:shadow-blue-400/10">
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<Network className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">Centralized AI Management Hub</h3>
|
||||
<p className="text-muted-foreground">
|
||||
|
|
@ -136,9 +131,11 @@ export default async function Enterprise() {
|
|||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
|
||||
<Users className="h-6 w-6 text-blue-500" />
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10 dark:hover:border-blue-400/50 dark:hover:shadow-blue-400/10">
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<Search className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">Real-Time Usage Visibility</h3>
|
||||
<p className="text-muted-foreground">
|
||||
|
|
@ -161,9 +158,11 @@ export default async function Enterprise() {
|
|||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
|
||||
<Shield className="h-6 w-6 text-blue-500" />
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10 dark:hover:border-blue-400/50 dark:hover:shadow-blue-400/10">
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<Shield className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">Enterprise-Grade Governance</h3>
|
||||
<p className="text-muted-foreground">
|
||||
|
|
@ -187,9 +186,11 @@ export default async function Enterprise() {
|
|||
</div>
|
||||
|
||||
{/* Card 4 */}
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
|
||||
<Workflow className="h-6 w-6 text-blue-500" />
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10 dark:hover:border-blue-400/50 dark:hover:shadow-blue-400/10">
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<Workflow className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">5-Minute Control-Plane Setup</h3>
|
||||
<p className="text-muted-foreground">
|
||||
|
|
@ -213,9 +214,11 @@ export default async function Enterprise() {
|
|||
</div>
|
||||
|
||||
{/* Card 5 */}
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
|
||||
<Users className="h-6 w-6 text-blue-500" />
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10 dark:hover:border-blue-400/50 dark:hover:shadow-blue-400/10">
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<DollarSign className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">Manage AI Development Costs</h3>
|
||||
<p className="text-muted-foreground">
|
||||
|
|
@ -238,9 +241,11 @@ export default async function Enterprise() {
|
|||
</div>
|
||||
|
||||
{/* Card 6 */}
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
|
||||
<Zap className="h-6 w-6 text-blue-500" />
|
||||
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10 dark:hover:border-blue-400/50 dark:hover:shadow-blue-400/10">
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<Zap className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">Zero Friction for Developers</h3>
|
||||
<p className="text-muted-foreground">
|
||||
|
|
@ -392,8 +397,10 @@ export default async function Enterprise() {
|
|||
<div className="rounded-lg border border-border bg-card p-8 shadow-sm">
|
||||
<div className="grid gap-8 md:grid-cols-2 md:items-center">
|
||||
<div>
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
|
||||
<Shield className="h-6 w-6 text-blue-500" />
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<Shield className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-4 text-2xl font-bold">Enterprise-Grade Security</h3>
|
||||
<p className="mb-6 text-muted-foreground">
|
||||
|
|
@ -423,20 +430,31 @@ export default async function Enterprise() {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center space-y-4">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="rounded-lg border border-border bg-secondary/50 p-6 text-center">
|
||||
<Lock className="mx-auto mb-3 h-12 w-12 text-blue-500" />
|
||||
<div className="mb-4 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<Lock className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="mb-2 text-lg font-semibold">Security-First Design</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="mb-4 text-sm text-muted-foreground">
|
||||
Every feature built with enterprise security requirements in mind
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
asChild
|
||||
className="bg-black text-white hover:bg-gray-800 hover:shadow-lg hover:shadow-black/20 dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:hover:shadow-white/20 transition-all duration-300">
|
||||
<a
|
||||
href={EXTERNAL_LINKS.SECURITY}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center">
|
||||
View Security Details
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
<Button size="lg" asChild className="w-full">
|
||||
<a href={EXTERNAL_LINKS.SECURITY} target="_blank" rel="noopener noreferrer">
|
||||
View Security Details
|
||||
<Shield className="ml-2 h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -444,30 +462,44 @@ export default async function Enterprise() {
|
|||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section id="contact" className="bg-secondary/50 py-16">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
|
||||
Ready to Transform Your Development Process?
|
||||
</h2>
|
||||
<p className="mb-8 text-lg text-muted-foreground">
|
||||
Join our early access program and be among the first to experience the power of Roo Code
|
||||
Cloud for Enterprise.
|
||||
</p>
|
||||
<div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
|
||||
<div className="rounded-lg border border-border bg-card p-6 text-center shadow-sm">
|
||||
<h3 className="mb-2 text-xl font-bold">Become an Early Access Partner</h3>
|
||||
<p className="mb-4 text-muted-foreground">
|
||||
Collaborate in shaping Roo Code's enterprise solution.
|
||||
<section id="contact" className="relative overflow-hidden py-20 sm:py-24">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-blue-500/5 via-cyan-500/5 to-purple-500/5 dark:from-blue-500/10 dark:via-cyan-500/10 dark:to-purple-500/10" />
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="relative rounded-3xl border border-border/50 bg-gradient-to-br from-blue-500/5 via-cyan-500/5 to-purple-500/5 p-8 shadow-2xl backdrop-blur-xl dark:border-white/20 dark:bg-gradient-to-br dark:from-gray-800 dark:via-gray-900 dark:to-black dark:shadow-[0_30px_90px_rgba(255,255,255,0.15)] sm:p-12">
|
||||
<div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 dark:bg-gradient-to-br dark:from-white/[0.05] dark:via-transparent dark:to-white/[0.03]" />
|
||||
<div className="relative text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
|
||||
Ready to Transform Your Development Process?
|
||||
</h2>
|
||||
<p className="mb-8 text-lg text-muted-foreground">
|
||||
Join our early access program and be among the first to experience the power of Roo
|
||||
Code Cloud for Enterprise.
|
||||
</p>
|
||||
<ContactForm formType="early-access" buttonText="Apply Now" buttonClassName="w-full" />
|
||||
</div>
|
||||
<div className="rounded-lg border border-border bg-card p-6 text-center shadow-sm">
|
||||
<h3 className="mb-2 text-xl font-bold">Request a Demo</h3>
|
||||
<p className="mb-4 text-muted-foreground">
|
||||
See Roo Code's enterprise capabilities in action.
|
||||
</p>
|
||||
<ContactForm formType="demo" buttonText="Contact Us" buttonClassName="w-full" />
|
||||
<div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
|
||||
<div className="rounded-lg border border-border bg-card/80 backdrop-blur-sm p-6 text-center shadow-lg hover:shadow-xl transition-all duration-300 dark:border-white/20 dark:bg-gray-800/80 dark:hover:border-white/40 dark:hover:bg-gray-700/90 dark:hover:shadow-[0_20px_50px_rgba(255,255,255,0.2)] dark:hover:scale-[1.02]">
|
||||
<h3 className="mb-2 text-xl font-bold">Become an Early Access Partner</h3>
|
||||
<p className="mb-4 text-muted-foreground">
|
||||
Collaborate in shaping Roo Code's enterprise solution.
|
||||
</p>
|
||||
<ContactForm
|
||||
formType="early-access"
|
||||
buttonText="Apply Now"
|
||||
buttonClassName="bg-black text-white hover:bg-gray-800 hover:shadow-lg hover:shadow-black/20 dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:hover:shadow-white/20 transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-lg border border-border bg-card/80 backdrop-blur-sm p-6 text-center shadow-lg hover:shadow-xl transition-all duration-300 dark:border-white/20 dark:bg-gray-800/80 dark:hover:border-white/40 dark:hover:bg-gray-700/90 dark:hover:shadow-[0_20px_50px_rgba(255,255,255,0.2)] dark:hover:scale-[1.02]">
|
||||
<h3 className="mb-2 text-xl font-bold">Request a Demo</h3>
|
||||
<p className="mb-4 text-muted-foreground">
|
||||
See Roo Code's enterprise capabilities in action.
|
||||
</p>
|
||||
<ContactForm
|
||||
formType="demo"
|
||||
buttonText="Contact Us"
|
||||
buttonClassName="bg-black text-white hover:bg-gray-800 hover:shadow-lg hover:shadow-black/20 dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:hover:shadow-white/20 transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default async function Home() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<section className="relative flex h-[calc(125vh-theme(spacing.16))] items-center overflow-hidden md:h-[calc(100svh-theme(spacing.16))] lg:h-[calc(100vh-theme(spacing.16))]">
|
||||
<section className="relative flex h-[calc(125vh-theme(spacing.12))] items-center overflow-hidden md:h-[calc(100svh-theme(spacing.12))] lg:h-[calc(100vh-theme(spacing.12))]">
|
||||
<AnimatedBackground />
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
|
||||
|
|
@ -64,12 +64,15 @@ export default async function Home() {
|
|||
</svg>
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" className="w-full sm:w-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="w-full sm:w-auto bg-white/20 dark:bg-white/10 backdrop-blur-sm border border-black/40 dark:border-white/30 hover:border-blue-400 hover:bg-white/30 dark:hover:bg-white/20 hover:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-300">
|
||||
<a
|
||||
href="https://docs.roocode.com"
|
||||
href="https://roocode.com/enterprise"
|
||||
target="_blank"
|
||||
className="flex w-full items-center justify-center">
|
||||
View Documentation
|
||||
For Enterprise
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from "react"
|
|||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
import { FaBluesky, FaDiscord, FaGithub, FaLinkedin, FaReddit, FaTiktok, FaXTwitter, FaYoutube } from "react-icons/fa6"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
import { EXTERNAL_LINKS, INTERNAL_LINKS } from "@/lib/constants"
|
||||
import { useLogoSrc } from "@/lib/hooks/use-logo-src"
|
||||
|
|
@ -14,6 +14,7 @@ export function Footer() {
|
|||
const [privacyDropdownOpen, setPrivacyDropdownOpen] = useState(false)
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
const logoSrc = useLogoSrc()
|
||||
const { resolvedTheme } = useTheme()
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
|
|
@ -39,72 +40,21 @@ export function Footer() {
|
|||
<p className="max-w-md text-sm leading-6 text-muted-foreground md:pr-16 lg:pr-32">
|
||||
Empowering developers to build better software faster with AI-powered tools and insights.
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<a
|
||||
href={EXTERNAL_LINKS.GITHUB}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground">
|
||||
<FaGithub className="h-6 w-6" />
|
||||
<span className="sr-only">GitHub</span>
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.DISCORD}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground">
|
||||
<FaDiscord className="h-6 w-6" />
|
||||
<span className="sr-only">Discord</span>
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.REDDIT}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground">
|
||||
<FaReddit className="h-6 w-6" />
|
||||
<span className="sr-only">Reddit</span>
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.X}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground">
|
||||
<FaXTwitter className="h-6 w-6" />
|
||||
<span className="sr-only">X</span>
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.LINKEDIN}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground">
|
||||
<FaLinkedin className="h-6 w-6" />
|
||||
<span className="sr-only">LinkedIn</span>
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.BLUESKY}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground">
|
||||
<FaBluesky className="h-6 w-6" />
|
||||
<span className="sr-only">Bluesky</span>
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.TIKTOK}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground">
|
||||
<FaTiktok className="h-6 w-6" />
|
||||
<span className="sr-only">TikTok</span>
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.YOUTUBE}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground">
|
||||
<FaYoutube className="h-6 w-6" />
|
||||
<span className="sr-only">YouTube</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Made with Roo Code */}
|
||||
<a
|
||||
href="https://roocode.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center space-x-2 group">
|
||||
<Image
|
||||
src={resolvedTheme === "light" ? "/RooCode-Badge-blk.svg" : "/RooCode-Badge-white.svg"}
|
||||
alt="Made with Roo Code"
|
||||
width={120}
|
||||
height={40}
|
||||
className="h-8 w-auto opacity-70 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
|
||||
|
|
@ -126,6 +76,15 @@ export function Footer() {
|
|||
Enterprise
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.EVALS}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Evals
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.SECURITY}
|
||||
|
|
@ -135,13 +94,6 @@ export function Footer() {
|
|||
Security
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<ScrollButton
|
||||
targetId="testimonials"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Testimonials
|
||||
</ScrollButton>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.INTEGRATIONS}
|
||||
|
|
@ -165,13 +117,22 @@ export function Footer() {
|
|||
<div className="mt-10 md:mt-0">
|
||||
<h3 className="text-sm font-semibold uppercase leading-6 text-foreground">Resources</h3>
|
||||
<ul className="mt-6 space-y-4">
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.FAQ}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.DOCUMENTATION}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Documentation
|
||||
Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -183,40 +144,6 @@ export function Footer() {
|
|||
Tutorials
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.COMMUNITY}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Community
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.DISCORD}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.REDDIT}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Reddit
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase leading-6 text-foreground">Support</h3>
|
||||
<ul className="mt-6 space-y-4">
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.ISSUES}
|
||||
|
|
@ -236,15 +163,19 @@ export function Footer() {
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<ScrollButton
|
||||
targetId="faq"
|
||||
<a
|
||||
href={EXTERNAL_LINKS.OFFICE_HOURS_PODCAST}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
FAQ
|
||||
</ScrollButton>
|
||||
Office Hours Podcast
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="mt-10 md:mt-0">
|
||||
</div>
|
||||
<div className="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase leading-6 text-foreground">Company</h3>
|
||||
<ul className="mt-6 space-y-4">
|
||||
<li>
|
||||
|
|
@ -263,6 +194,24 @@ export function Footer() {
|
|||
Careers
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.BLOG}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.TESTIMONIALS}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Testimonials
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/terms"
|
||||
|
|
@ -309,6 +258,83 @@ export function Footer() {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="mt-10 md:mt-0">
|
||||
<h3 className="text-sm font-semibold uppercase leading-6 text-foreground">Connect</h3>
|
||||
<ul className="mt-6 space-y-4">
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.GITHUB}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.DISCORD}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.REDDIT}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Reddit
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.X}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
X / Twitter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.LINKEDIN}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.BLUESKY}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.TIKTOK}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
TikTok
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.YOUTUBE}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
|
||||
YouTube
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,11 +46,6 @@ export function NavBar({ stars, downloads }: NavBarProps) {
|
|||
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
|
||||
Testimonials
|
||||
</ScrollButton>
|
||||
<ScrollButton
|
||||
targetId="faq"
|
||||
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
|
||||
FAQ
|
||||
</ScrollButton>
|
||||
<Link
|
||||
href="/evals"
|
||||
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
|
||||
|
|
@ -68,10 +63,11 @@ export function NavBar({ stars, downloads }: NavBarProps) {
|
|||
Docs
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CAREERS}
|
||||
href={EXTERNAL_LINKS.DISCORD}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
|
||||
Careers
|
||||
Community
|
||||
</a>
|
||||
<div className="flex items-center rounded-full bg-gradient-to-r from-blue-400 to-cyan-400 p-0.5 text-xs">
|
||||
<div className="rounded-full bg-background px-2 py-1.5">
|
||||
|
|
@ -102,7 +98,7 @@ export function NavBar({ stars, downloads }: NavBarProps) {
|
|||
<Link
|
||||
href={EXTERNAL_LINKS.MARKETPLACE}
|
||||
target="_blank"
|
||||
className="hidden items-center gap-1.5 rounded-full bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 md:flex">
|
||||
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:bg-primary/80 hover:shadow-lg hover:scale-105 md:flex">
|
||||
<VscVscode className="-mr-[2px] mt-[1px] h-4 w-4" />
|
||||
<span>
|
||||
Install <span className="font-black max-lg:text-xs">·</span>
|
||||
|
|
@ -150,12 +146,6 @@ export function NavBar({ stars, downloads }: NavBarProps) {
|
|||
onClick={() => setIsMenuOpen(false)}>
|
||||
Testimonials
|
||||
</ScrollButton>
|
||||
<ScrollButton
|
||||
targetId="faq"
|
||||
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
|
||||
onClick={() => setIsMenuOpen(false)}>
|
||||
FAQ
|
||||
</ScrollButton>
|
||||
<Link
|
||||
href="/evals"
|
||||
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
|
||||
|
|
@ -184,11 +174,12 @@ export function NavBar({ stars, downloads }: NavBarProps) {
|
|||
Docs
|
||||
</a>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CAREERS}
|
||||
href={EXTERNAL_LINKS.DISCORD}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
|
||||
onClick={() => setIsMenuOpen(false)}>
|
||||
Careers
|
||||
Community
|
||||
</a>
|
||||
|
||||
<hr className="mx-8 my-2 border-t border-border/50" />
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ export function ContactForm({ formType, buttonText, buttonClassName }: ContactFo
|
|||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className={buttonClassName}>{buttonText}</Button>
|
||||
<Button className={buttonClassName || ""}>{buttonText}</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
|
|
|
|||
|
|
@ -4,64 +4,233 @@ import { useState } from "react"
|
|||
import { motion } from "framer-motion"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import Link from "next/link"
|
||||
|
||||
interface FAQItem {
|
||||
question: string
|
||||
answer: string
|
||||
answer: React.ReactNode
|
||||
}
|
||||
|
||||
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.",
|
||||
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.",
|
||||
answer: (
|
||||
<>
|
||||
Roo Code is <strong>open-source and fully customizable</strong>, letting you integrate any AI model you
|
||||
choose (e.g, OpenAI, Anthropic, local LLMs, etc.). It's built for <strong>multi-file edits</strong>
|
||||
, so it can read, refactor, and update multiple files at once for holistic code changes. Its{" "}
|
||||
<strong>agentic abilities</strong> go beyond a typical AI autocomplete, enabling it to run tests, open a
|
||||
browser, and handle deeper tasks. And you're always in control: Roo Code is{" "}
|
||||
<strong>permission-based</strong>, meaning you can 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.",
|
||||
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.",
|
||||
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).",
|
||||
answer: (
|
||||
<>
|
||||
Roo Code is fully model-agnostic, giving you the flexibility to work with whatever AI models you prefer.
|
||||
It supports OpenAI models (like GPT-4o, GPT-4, and o1), Anthropic's Claude (including Claude 3.5
|
||||
Sonnet), Google's Gemini models, and local LLMs via APIs or specialized plugins. You can even
|
||||
connect any other model 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.",
|
||||
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!",
|
||||
answer: (
|
||||
<>
|
||||
Install Roo Code from the{" "}
|
||||
<a
|
||||
href="https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
VS Code Marketplace
|
||||
</a>{" "}
|
||||
(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!{" "}
|
||||
<a
|
||||
href="https://docs.roocode.com/tutorial-videos"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
Watch our tutorial to help you get started.
|
||||
</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
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.",
|
||||
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.{" "}
|
||||
<Link href="/enterprise" className="text-primary underline-offset-4 hover:underline">
|
||||
Learn more about Roo Code for enterprise.
|
||||
</Link>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
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.",
|
||||
answer: (
|
||||
<>
|
||||
Yes. Roo Code was built for enterprise environments. You can self-host AI models or use your own trusted
|
||||
provider. All file changes and commands go through permission gating, so nothing runs without your
|
||||
approval. And because Roo Code is fully open-source, it's auditable—you can review exactly how it
|
||||
works before deploying it.{" "}
|
||||
<a
|
||||
href="https://roocode.com/enterprise"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
Learn more about Roo Code for enterprise.
|
||||
</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
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.",
|
||||
answer: (
|
||||
<>
|
||||
Yes! One of Roo Code's biggest strengths is its ability to execute commands—always optional and
|
||||
fully permission-based. It can run terminal commands like npm install, execute your test suites, and
|
||||
even open a web browser for integration testing when you approve it.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
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.',
|
||||
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.",
|
||||
answer: (
|
||||
<>
|
||||
Yes, please do! Roo Code is open-source on{" "}
|
||||
<a
|
||||
href="https://github.com/RooCodeInc/Roo-Code"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
GitHub
|
||||
</a>
|
||||
. Submit issues, suggest features, or open a pull request. There's also an active community on{" "}
|
||||
<a
|
||||
href="https://discord.gg/roocode"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
Discord
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a
|
||||
href="https://reddit.com/r/RooCode"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
Reddit
|
||||
</a>{" "}
|
||||
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.",
|
||||
answer: (
|
||||
<>
|
||||
Check out our{" "}
|
||||
<a
|
||||
href="https://docs.roocode.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
official documentation
|
||||
</a>{" "}
|
||||
for both a quick-start set up and advanced guides. You can also get community support on{" "}
|
||||
<a
|
||||
href="https://discord.gg/roocode"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
Discord
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a
|
||||
href="https://reddit.com/r/RooCode"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
Reddit
|
||||
</a>
|
||||
. You can also check out our{" "}
|
||||
<a
|
||||
href="https://www.youtube.com/@RooCodeYT"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
YouTube
|
||||
</a>{" "}
|
||||
tutorials and{" "}
|
||||
<a
|
||||
href="https://blog.roocode.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
blog posts
|
||||
</a>{" "}
|
||||
from fellow developers showcasing real-world usage.
|
||||
</>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -84,10 +253,8 @@ export function FAQSection() {
|
|||
duration: 0.6,
|
||||
ease: [0.21, 0.45, 0.27, 0.9],
|
||||
}}>
|
||||
<h2 className="bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">Frequently Asked Questions</h2>
|
||||
<p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Everything you need to know about Roo Code and how it can transform your development
|
||||
workflow.
|
||||
</p>
|
||||
|
|
@ -125,9 +292,7 @@ export function FAQSection() {
|
|||
"overflow-hidden transition-all duration-300 ease-in-out",
|
||||
openIndex === index ? "max-h-96 pb-6" : "max-h-0",
|
||||
)}>
|
||||
<div className="px-6 text-muted-foreground">
|
||||
<p>{faq.answer}</p>
|
||||
</div>
|
||||
<div className="px-6 text-muted-foreground">{faq.answer}</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
|
|
|||
|
|
@ -60,10 +60,10 @@ export function FeaturesMobile() {
|
|||
<div className="flex">
|
||||
{features.map((feature, index) => (
|
||||
<div className="flex min-w-0 flex-[0_0_100%] px-4" key={index}>
|
||||
<div className="relative h-full min-h-[280px] rounded-2xl border border-border/50 bg-background/30 p-6 backdrop-blur-xl transition-colors duration-300 hover:border-border hover:bg-gray-900/20">
|
||||
<div className="mb-2 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/5 to-cyan-500/5 p-2.5">
|
||||
<div className="relative h-full min-h-[280px] rounded-2xl border border-border/50 bg-background/30 p-6 backdrop-blur-xl transition-all duration-300 hover:border-border hover:bg-background/50 dark:hover:border-border/80 dark:hover:bg-background/40">
|
||||
<div className="mb-2 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<div className="text-foreground/90">{feature.icon}</div>
|
||||
<div className="text-white">{feature.icon}</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-medium text-foreground/90">{feature.title}</h3>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client"
|
||||
|
||||
import { motion } from "framer-motion"
|
||||
import { FaRobot, FaCode, FaBrain, FaTools, FaTerminal, FaPuzzlePiece, FaGlobe } from "react-icons/fa"
|
||||
import { Bot, Code, Brain, Wrench, Terminal, Puzzle, Globe, Shield, Zap } from "lucide-react"
|
||||
import { FeaturesMobile } from "./features-mobile"
|
||||
|
||||
import { ReactNode } from "react"
|
||||
|
|
@ -10,58 +10,62 @@ export interface Feature {
|
|||
icon: ReactNode
|
||||
title: string
|
||||
description: string
|
||||
size: "small" | "large"
|
||||
}
|
||||
|
||||
export const features: Feature[] = [
|
||||
{
|
||||
icon: <FaRobot className="h-6 w-6" />,
|
||||
icon: <Bot className="h-6 w-6 text-white" />,
|
||||
title: "Your AI Dev Team in VS Code",
|
||||
description:
|
||||
"Roo Code puts a team of agentic AI assistants directly in your editor, with the power to plan, write, and fix code across multiple files.",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
icon: <FaCode className="h-6 w-6" />,
|
||||
icon: <Code className="h-6 w-6 text-white" />,
|
||||
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.",
|
||||
size: "small",
|
||||
},
|
||||
{
|
||||
icon: <FaBrain className="h-6 w-6" />,
|
||||
icon: <Brain className="h-6 w-6 text-white" />,
|
||||
title: "Deep Project-wide Context",
|
||||
description:
|
||||
"Roo Code reads your entire codebase, preserving valid code through diff-based edits for seamless multi-file refactors.",
|
||||
size: "small",
|
||||
},
|
||||
{
|
||||
icon: <FaTools className="h-6 w-6" />,
|
||||
icon: <Wrench className="h-6 w-6 text-white" />,
|
||||
title: "Open-Source and Model-Agnostic",
|
||||
description:
|
||||
"Bring your own model or use local AI—no vendor lock-in. Roo Code is free, open, and adaptable to your needs.",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
icon: <FaTerminal className="h-6 w-6" />,
|
||||
icon: <Terminal className="h-6 w-6 text-white" />,
|
||||
title: "Guarded Command Execution",
|
||||
description:
|
||||
"Approve or deny commands as needed. Roo Code automates your dev workflow while keeping oversight firmly in your hands.",
|
||||
size: "small",
|
||||
},
|
||||
{
|
||||
icon: <FaPuzzlePiece className="h-6 w-6" />,
|
||||
icon: <Puzzle className="h-6 w-6 text-white" />,
|
||||
title: "Fully Customizable",
|
||||
description:
|
||||
"Create or tweak modes, define usage rules, and shape Roo Code’s behavior precisely—your code, your way.",
|
||||
size: "small",
|
||||
"Create or tweak modes, define usage rules, and shape Roo Code's behavior precisely—your code, your way.",
|
||||
},
|
||||
{
|
||||
icon: <FaGlobe className="h-6 w-6" />,
|
||||
icon: <Globe className="h-6 w-6 text-white" />,
|
||||
title: "Automated Browser Actions",
|
||||
description:
|
||||
"Seamlessly test and verify your web app directly from VS Code—Roo Code can open a browser, run checks, and more.",
|
||||
size: "small",
|
||||
},
|
||||
{
|
||||
icon: <Shield className="h-6 w-6 text-white" />,
|
||||
title: "Secure by Design",
|
||||
description:
|
||||
"Security-first from the ground up, Roo Code meets rigorous standards without slowing you down. Monitoring and strict policies keep your code safe at scale.",
|
||||
},
|
||||
{
|
||||
icon: <Zap className="h-6 w-6 text-white" />,
|
||||
title: "Seamless Setup and Workflows",
|
||||
description:
|
||||
"Get started in minutes—no heavy configs. Roo Code fits alongside your existing tools and dev flow, while supercharging your productivity.",
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -127,7 +131,7 @@ export function Features() {
|
|||
duration: 0.6,
|
||||
ease: [0.21, 0.45, 0.27, 0.9],
|
||||
}}>
|
||||
<h2 className="bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl">
|
||||
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Powerful features for modern developers.
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
|
|
@ -148,15 +152,12 @@ export function Features() {
|
|||
viewport={{ once: true }}>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
variants={itemVariants}
|
||||
className={`group relative ${feature.size === "large" ? "lg:col-span-2" : ""} ${index % 2 === 0 ? "lg:translate-y-12" : ""}`}>
|
||||
<div className="absolute -inset-px rounded-2xl bg-gradient-to-r from-blue-500/30 via-cyan-500/30 to-purple-500/30 opacity-0 blur-sm transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="relative h-full rounded-2xl border border-border/50 bg-background/30 p-8 backdrop-blur-xl transition-colors duration-300 hover:border-border">
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/5 to-cyan-500/5 p-2.5">
|
||||
<motion.div key={index} variants={itemVariants} className="group relative">
|
||||
<div className="absolute -inset-px rounded-2xl bg-gradient-to-r from-blue-500/30 via-cyan-500/30 to-purple-500/30 opacity-0 blur-sm transition-all duration-500 group-hover:opacity-100 dark:from-blue-500/50 dark:via-cyan-500/50 dark:to-purple-500/50" />
|
||||
<div className="relative h-full rounded-2xl border border-border/50 bg-background/30 p-8 backdrop-blur-xl transition-all duration-300 hover:border-border hover:bg-background/50 dark:hover:border-border/80 dark:hover:bg-background/40">
|
||||
<div className="mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/10 to-cyan-500/10 p-2.5 dark:from-blue-500/20 dark:to-cyan-500/20">
|
||||
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
|
||||
<div className="text-foreground/90">{feature.icon}</div>
|
||||
{feature.icon}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-medium text-foreground/90">{feature.title}</h3>
|
||||
|
|
|
|||
|
|
@ -23,59 +23,73 @@ export function InstallSection({ downloads }: InstallSectionProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden border-t border-border py-16 sm:py-24 lg:py-32">
|
||||
<section className="relative overflow-hidden border-t-2 border-border bg-gradient-to-b from-background via-background/95 to-background dark:from-background dark:via-background/98 dark:to-background py-20 sm:py-28 lg:py-36">
|
||||
{/* Enhanced background with better contrast */}
|
||||
<motion.div
|
||||
className="absolute inset-x-0 top-1/2 -translate-y-1/2"
|
||||
className="absolute inset-0"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={backgroundVariants}>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-blue-500/5 via-cyan-500/5 to-purple-500/5 dark:from-blue-500/10 dark:via-cyan-500/10 dark:to-purple-500/10" />
|
||||
<div className="relative mx-auto max-w-[1200px]">
|
||||
<div className="absolute left-1/2 top-1/2 h-[500px] w-[700px] -translate-x-1/2 -translate-y-1/2 rounded-[100%] bg-blue-500/10 blur-[120px]" />
|
||||
<div className="absolute left-1/2 top-1/2 h-[600px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-[100%] bg-gradient-to-r from-blue-500/20 via-cyan-500/20 to-purple-500/20 blur-[100px] dark:from-blue-500/30 dark:via-cyan-500/30 dark:to-purple-500/30" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="text-center text-xl font-semibold uppercase tracking-wider text-muted-foreground sm:text-2xl">
|
||||
Install Roo Code — Open & Flexible
|
||||
</h2>
|
||||
<p className="mt-4 text-center text-base text-muted-foreground sm:mt-6 sm:text-lg">
|
||||
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.
|
||||
</p>
|
||||
<div className="mt-10 flex flex-col items-center justify-center gap-6">
|
||||
<Link
|
||||
href="https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline"
|
||||
target="_blank"
|
||||
className="group relative inline-flex w-full items-center justify-center gap-2 rounded-xl border border-border/50 bg-background/30 px-4 py-3 text-base backdrop-blur-xl transition-all duration-300 hover:border-border hover:bg-background/40 sm:w-auto sm:gap-3 sm:px-6 sm:py-4 sm:text-lg md:text-2xl">
|
||||
<div className="absolute -inset-px rounded-xl bg-gradient-to-r from-blue-500/30 via-cyan-500/30 to-purple-500/30 opacity-0 blur-sm transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="relative flex items-center gap-2 sm:gap-3">
|
||||
<VscVscode className="h-5 w-5 text-blue-400 sm:h-6 sm:w-6 md:h-8 md:w-8" />
|
||||
<span className="flex flex-wrap items-center gap-1 sm:gap-2 md:gap-3">
|
||||
<span className="text-foreground/90">VSCode Marketplace</span>
|
||||
{downloads !== null && (
|
||||
<>
|
||||
<span className="hidden font-black text-muted-foreground sm:inline">
|
||||
·
|
||||
</span>
|
||||
<span className="text-muted-foreground">{downloads} Downloads</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="group relative w-full max-w-xl">
|
||||
<div className="absolute -inset-px rounded-xl bg-gradient-to-r from-blue-500/30 via-cyan-500/30 to-purple-500/30 opacity-0 blur-sm transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="relative overflow-hidden rounded-xl border border-border/50 bg-background/30 backdrop-blur-xl transition-all duration-500 ease-out group-hover:border-border group-hover:bg-background/40">
|
||||
<div className="border-b border-border/50 px-3 py-2 sm:px-4">
|
||||
<div className="text-sm text-muted-foreground">Install via CLI</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<pre className="p-3 sm:p-4">
|
||||
<code className="whitespace-pre-wrap break-all text-sm text-foreground/90 sm:break-normal">
|
||||
code --install-extension RooVeterinaryInc.roo-cline
|
||||
</code>
|
||||
</pre>
|
||||
<div className="mx-auto max-w-4xl">
|
||||
{/* Enhanced container with better visual separation */}
|
||||
<div className="relative rounded-3xl border border-border/50 bg-background/60 p-8 shadow-2xl backdrop-blur-xl dark:border-border/30 dark:bg-background/40 dark:shadow-[0_20px_50px_rgba(0,0,0,0.5)] sm:p-12 lg:p-16">
|
||||
{/* Subtle gradient overlay */}
|
||||
<div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 dark:from-blue-500/10 dark:to-purple-500/10" />
|
||||
|
||||
<div className="relative text-center">
|
||||
{/* Updated h2 to match other sections */}
|
||||
<h2 className="bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl">
|
||||
Install Roo Code — Open & Flexible
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<div className="mt-12 flex flex-col items-center justify-center gap-6">
|
||||
{/* Enhanced VSCode Marketplace button */}
|
||||
<Link
|
||||
href="https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline"
|
||||
target="_blank"
|
||||
className="group relative inline-flex w-full items-center justify-center gap-3 rounded-xl bg-gradient-to-r from-blue-600 to-cyan-600 px-6 py-4 text-lg font-medium text-white shadow-lg transition-all duration-300 hover:from-blue-700 hover:to-cyan-700 hover:shadow-xl hover:shadow-blue-500/25 dark:from-blue-500 dark:to-cyan-500 dark:hover:from-blue-600 dark:hover:to-cyan-600 sm:w-auto sm:px-8 sm:text-xl">
|
||||
<div className="absolute -inset-px rounded-xl bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-400 opacity-0 blur transition-opacity duration-500 group-hover:opacity-70" />
|
||||
<div className="relative flex items-center gap-3">
|
||||
<VscVscode className="h-6 w-6 sm:h-7 sm:w-7" />
|
||||
<span className="flex flex-wrap items-center gap-2">
|
||||
<span>VSCode Marketplace</span>
|
||||
{downloads !== null && (
|
||||
<>
|
||||
<span className="font-black opacity-60">·</span>
|
||||
<span className="opacity-90">{downloads} Downloads</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Enhanced CLI install section */}
|
||||
<div className="group relative w-full max-w-xl">
|
||||
<div className="absolute -inset-px rounded-xl bg-gradient-to-r from-blue-500/50 via-cyan-500/50 to-purple-500/50 opacity-30 blur-sm transition-all duration-500 group-hover:opacity-60 dark:opacity-40 dark:group-hover:opacity-70" />
|
||||
<div className="relative overflow-hidden rounded-xl border border-border bg-background/80 shadow-lg backdrop-blur-xl transition-all duration-500 ease-out group-hover:border-blue-500/50 group-hover:shadow-xl group-hover:shadow-blue-500/10 dark:border-border/50 dark:bg-background/60 dark:group-hover:border-blue-400/50">
|
||||
<div className="border-b border-border/50 bg-muted/30 px-4 py-3 dark:bg-muted/20">
|
||||
<div className="text-sm font-medium text-foreground">Install via CLI</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto bg-background/50 dark:bg-background/30">
|
||||
<pre className="p-4">
|
||||
<code className="whitespace-pre-wrap break-all text-sm font-mono text-foreground sm:break-normal sm:text-base">
|
||||
code --install-extension RooVeterinaryInc.roo-cline
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,23 +18,37 @@ export function TestimonialsMobile() {
|
|||
<div className="flex">
|
||||
{testimonials.map((testimonial) => (
|
||||
<div className="min-w-0 flex-[0_0_100%] px-4" key={testimonial.id}>
|
||||
<div className="relative py-8">
|
||||
<div className="relative rounded-2xl border border-border/50 bg-background/30 p-8 backdrop-blur-xl dark:border-border/70 dark:bg-background/40">
|
||||
<svg
|
||||
className="absolute left-0 top-0 h-8 w-8 text-blue-500/30"
|
||||
className="absolute left-8 top-8 h-8 w-8 text-blue-500/30 dark:text-blue-400/50"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 32 32">
|
||||
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
|
||||
<defs>
|
||||
<filter id="glow-mobile">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z"
|
||||
className="dark:filter dark:drop-shadow-[0_0_8px_rgba(96,165,250,0.4)]"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<blockquote className="mt-8">
|
||||
<p className="text-lg font-light italic leading-relaxed text-muted-foreground">
|
||||
<blockquote className="mt-12">
|
||||
<p className="text-lg font-light italic leading-relaxed text-muted-foreground dark:text-foreground/70">
|
||||
"{testimonial.quote}"
|
||||
</p>
|
||||
|
||||
<footer className="mt-6">
|
||||
<div className="h-px w-12 bg-gradient-to-r from-blue-500/30 to-transparent" />
|
||||
<p className="mt-4 font-medium text-foreground/90">{testimonial.name}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<div className="h-px w-12 bg-gradient-to-r from-blue-500/50 to-transparent dark:from-blue-400/70" />
|
||||
<p className="mt-4 font-medium text-foreground/90 dark:text-foreground">
|
||||
{testimonial.name}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground dark:text-muted-foreground/80">
|
||||
{testimonial.role} at {testimonial.company}
|
||||
</p>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export function Testimonials() {
|
|||
duration: 0.6,
|
||||
ease: [0.21, 0.45, 0.27, 0.9],
|
||||
}}>
|
||||
<h2 className="bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl">
|
||||
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Empowering developers worldwide.
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
|
|
@ -135,10 +135,10 @@ export function Testimonials() {
|
|||
key={testimonial.id}
|
||||
variants={itemVariants}
|
||||
className={`group relative ${index % 2 === 0 ? "md:translate-y-4" : "md:translate-y-12"}`}>
|
||||
<div className="absolute -inset-px rounded-2xl bg-gradient-to-r from-blue-500/30 via-cyan-500/30 to-purple-500/30 opacity-0 blur-sm transition-all duration-500 ease-out group-hover:opacity-100" />
|
||||
<div className="relative h-full rounded-2xl border border-border/50 bg-background/30 backdrop-blur-xl transition-all duration-500 ease-out group-hover:border-border group-hover:bg-background/40">
|
||||
<div className="absolute -inset-px rounded-2xl bg-gradient-to-r from-blue-500/30 via-cyan-500/30 to-purple-500/30 opacity-0 blur-sm transition-all duration-500 ease-out group-hover:opacity-100 dark:from-blue-400/40 dark:via-cyan-400/40 dark:to-purple-400/40" />
|
||||
<div className="relative flex h-full flex-col rounded-2xl border border-border/50 bg-background/30 backdrop-blur-xl transition-all duration-500 ease-out group-hover:scale-[1.02] group-hover:border-border group-hover:bg-background/40 group-hover:shadow-2xl dark:border-border/70 dark:bg-background/40 dark:group-hover:border-border dark:group-hover:bg-background/60 dark:group-hover:shadow-[0_20px_50px_rgba(59,130,246,0.15)]">
|
||||
{testimonial.image && (
|
||||
<div className="absolute -right-3 -top-3 h-16 w-16 overflow-hidden rounded-xl border border-border/50 bg-background/50 p-1.5 backdrop-blur-xl transition-all duration-500 ease-out group-hover:scale-105">
|
||||
<div className="absolute -right-3 -top-3 h-16 w-16 overflow-hidden rounded-xl border border-border/50 bg-background/50 p-1.5 backdrop-blur-xl transition-all duration-500 ease-out group-hover:scale-110 dark:border-border/70 dark:bg-background/60">
|
||||
<div className="relative h-full w-full overflow-hidden rounded-lg">
|
||||
<Image
|
||||
src={testimonial.image || "/placeholder_pfp.png"}
|
||||
|
|
@ -150,24 +150,40 @@ export function Testimonials() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-8">
|
||||
<div className="mb-6">
|
||||
<svg
|
||||
className="h-8 w-8 text-blue-500/20"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 32 32">
|
||||
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
|
||||
</svg>
|
||||
<div className="flex flex-1 flex-col p-8">
|
||||
<div className="flex-1">
|
||||
<div className="mb-6">
|
||||
<svg
|
||||
className="h-8 w-8 text-blue-500/20 transition-all duration-500 group-hover:text-blue-500/30 dark:text-blue-400/40 dark:group-hover:text-blue-400/60"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z"
|
||||
className="dark:filter dark:drop-shadow-[0_0_8px_rgba(96,165,250,0.4)]"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p className="relative text-lg leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80 dark:text-foreground/70 dark:group-hover:text-foreground/90">
|
||||
{testimonial.quote}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="relative mb-6 text-lg leading-relaxed text-muted-foreground">
|
||||
{testimonial.quote}
|
||||
</p>
|
||||
|
||||
<div className="relative">
|
||||
<div className="mb-4 h-px w-12 bg-gradient-to-r from-blue-500/50 to-transparent" />
|
||||
<h3 className="font-medium text-foreground/90">{testimonial.name}</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<div className="relative mt-6">
|
||||
<div className="mb-4 h-px w-12 bg-gradient-to-r from-blue-500/50 to-transparent transition-all duration-500 group-hover:w-16 group-hover:from-blue-500/70 dark:from-blue-400/70 dark:group-hover:from-blue-400/90" />
|
||||
<h3 className="font-medium text-foreground/90 transition-colors duration-300 dark:text-foreground">
|
||||
{testimonial.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground transition-colors duration-300 dark:text-muted-foreground/80">
|
||||
{testimonial.role} at {testimonial.company}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export const EXTERNAL_LINKS = {
|
||||
GITHUB: "https://github.com/RooCodeInc/Roo-Code",
|
||||
GITHUB_DISCUSSIONS: "https://github.com/RooCodeInc/Roo-Code/discussions",
|
||||
DISCORD: "https://discord.gg/roocode",
|
||||
REDDIT: "https://reddit.com/r/RooCode",
|
||||
X: "https://x.com/roo_code",
|
||||
|
|
@ -18,6 +19,11 @@ export const EXTERNAL_LINKS = {
|
|||
TUTORIALS: "https://docs.roocode.com/tutorial-videos",
|
||||
MARKETPLACE: "https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline",
|
||||
SECURITY: "https://trust.roocode.com",
|
||||
EVALS: "https://roocode.com/evals",
|
||||
BLOG: "https://blog.roocode.com",
|
||||
OFFICE_HOURS_PODCAST: "https://www.youtube.com/@RooCodeYT/podcasts",
|
||||
FAQ: "https://roocode.com/#faq",
|
||||
TESTIMONIALS: "https://roocode.com/#testimonials",
|
||||
}
|
||||
|
||||
export const INTERNAL_LINKS = {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue