web: Product pages

apps/web-roo-code/next.config.ts

@@ -27,6 +27,11 @@ const nextConfig: NextConfig = {
 				destination: "https://roo-code.notion.site/238fd1401b0a8087b858e1ad431507cf?pvs=105",
 				permanent: false,
 			},
+			{
+				source: "/provider/pricing",
+				destination: "/provider",
+				permanent: true,
+			},
 		]
 	},
 }

apps/web-roo-code/src/app/extension/page.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable react/jsx-no-target-blank */
+
+import { getVSCodeDownloads } from "@/lib/stats"
+
+import { Button } from "@/components/ui"
+import {
+	AnimatedBackground,
+	CodeExample,
+	CompanyLogos,
+	FAQSection,
+	Features,
+	InstallSection,
+	Testimonials,
+} from "@/components/homepage"
+import { EXTERNAL_LINKS } from "@/lib/constants"
+import { ArrowRight } from "lucide-react"
+import { StructuredData } from "@/components/structured-data"
+
+// Invalidate cache when a request comes in, at most once every hour.
+export const revalidate = 3600
+
+export default async function ExtensionPage() {
+	const downloads = await getVSCodeDownloads()
+
+	return (
+		<>
+			<StructuredData />
+			<section className="relative flex h-[calc(125vh-theme(spacing.12))] items-center overflow-hidden md:h-[calc(80svh-theme(spacing.12))]">
+				<AnimatedBackground />
+				<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="grid h-full relative gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
+						<div className="flex flex-col justify-center space-y-4 sm:space-y-8">
+							<div>
+								<h1 className="text-4xl font-bold tracking-tight mt-8 text-center md:text-left md:text-4xl lg:text-5xl lg:mt-0">
+									The Open Source AI Coding Assistant for serious work.
+								</h1>
+								<p className="mt-4 max-w-lg text-lg text-muted-foreground text-center md:text-left sm:mt-6">
+									Specialized modes stay on task and ship great code.
+									<br />
+									Fully model-agnostic so you can use the best (or most cost-effective) model for
+									each task.
+								</p>
+								<p className="max-w-lg text-lg text-muted-foreground text-center md:text-left sm:mt-6">
+									Stop chasing this week&apos;s hot new model or CLI tool and go deep with Roo Code.
+								</p>
+							</div>
+							<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">
+									<a
+										href={EXTERNAL_LINKS.MARKETPLACE}
+										target="_blank"
+										className="flex w-full items-center justify-center">
+										Install VS Code Extension
+										<ArrowRight className="ml-2" />
+									</a>
+								</Button>
+							</div>
+							<div className="md:max-h-[70px] md:overflow-clip text-center md:text-left pt-6 md:pt-0">
+								<CompanyLogos />
+							</div>
+						</div>
+						<div className="relative flex items-center mx-auto h-full mt-8 lg:mt-0">
+							<div className="flex items-center justify-center">
+								<CodeExample />
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+			<div id="product">
+				<Features />
+			</div>
+			<div id="testimonials">
+				<Testimonials />
+			</div>
+			<div id="faq">
+				<FAQSection />
+			</div>
+			<InstallSection downloads={downloads} />
+		</>
+	)
+}

apps/web-roo-code/src/app/pricing/page.tsx

@@ -194,8 +194,8 @@ export default function PricingPage() {
 											</>
 										)}
 										Inference:{" "}
-										<Link href="/provider/pricing" className="underline hover:no-underline">
-											Roo Provider
+										<Link href="/provider" className="underline hover:no-underline">
+											Roo Provider pricing
 										</Link>{" "}
 										credits or{" "}
 										<abbr title="Bring Your Own Model" className="cursor-help">

apps/web-roo-code/src/app/provider/pricing/page.tsx → apps/web-roo-code/src/app/provider/page.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { useEffect, useMemo, useState } from "react"
-import { ModelCard } from "./components/model-card"
+import { ModelCard } from "./pricing/components/model-card"
 import { Model, ModelWithTotalPrice, ModelsResponse, SortOption } from "@/lib/types/models"
 import Link from "next/link"
-import { ChevronDown, CircleX, Loader, LoaderCircle, Search } from "lucide-react"
+import { ChevronDown, CircleX, Cloud, Loader, LoaderCircle, Puzzle, Search } from "lucide-react"
 
 const API_URL = "https://api.roocode.com/proxy/v1/models?include_paid=true"
 
@@ -13,28 +13,29 @@ const faqs = [
 		question: "What are AI model providers?",
 		answer: "AI model providers offer various language models with different capabilities and pricing.",
 	},
-	{
-		question: "How is pricing calculated?",
-		answer: "Pricing is based on token usage for input and output, measured per million tokens, like pretty much any other provider out there.",
-	},
 	{
 		question: "What is the Roo Code Cloud Provider?",
 		answer: (
 			<>
 				<p>This is our very own model provider, optimized to work seamlessly with Roo Code Cloud.</p>
-				<p>
-					It offers a selection of state-of-the-art LLMs (both closed and open weight) we know work well with
-					Roo for you to choose, with no markup.
-				</p>
-				<p>
-					We also often feature 100% free models which labs share with us for the community to use and provide
-					feedback.
-				</p>
+				<p>You don&apos;t have to use it to use Roo Code, but it&apos;s the easiest way to do it.</p>
 			</>
 		),
 	},
 	{
-		question: "But how much does the Roo Code Cloud service cost?",
+		question: "Do I have to use the Roo Code Cloud Provider to use the Roo Code products?",
+		answer: "Not at all! You can bring your own provider key, no problem. This is just meant to make it easier.",
+	},
+	{
+		question: "How is pricing calculated?",
+		answer: "Pricing is based on token usage for input and output, measured per million tokens, like pretty much any other provider out there.",
+	},
+	{
+		question: "How is my data treated?",
+		answer: "The Roo Code Cloud provider doesn't keep any of your data, the service only aims to make it easier to use Roo Code. Each model vendor has their own privacy policy though, and usually free models use your data for training, so keep that in mind.",
+	},
+	{
+		question: "How much does the Roo Code Cloud service cost?",
 		answer: (
 			<>
 				Our{" "}
@@ -57,7 +58,7 @@ function enrichModelWithTotalPrice(model: Model): ModelWithTotalPrice {
 	}
 }
 
-export default function ProviderPricingPage() {
+export default function ProviderPage() {
 	const [models, setModels] = useState<ModelWithTotalPrice[]>([])
 	const [loading, setLoading] = useState(true)
 	const [error, setError] = useState<string | null>(null)
@@ -133,13 +134,22 @@ export default function ProviderPricingPage() {
 			<section className="relative overflow-hidden py-16">
 				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
 					<div className="text-center">
-						<h1 className="text-4xl md:text-5xl font-bold tracking-tight">
-							Roo Code Cloud Provider Pricing
-						</h1>
-						<p className="mx-auto mt-4 max-w-2xl md:text-lg text-muted-foreground">
-							See pricing and features for all models we offer in our selection.
-							<br />
-							You can always bring your own key (
+						<h1 className="text-4xl md:text-5xl font-bold tracking-tight">The Roo Code Cloud Provider</h1>
+						<p className="mx-auto mt-4 max-w-3xl md:text-lg text-muted-foreground">
+							The easiest way to use Roo Code (in the{" "}
+							<Link href="/cloud" className="underline hover:no-underline">
+								<Cloud className="inline size-5 mx-1 -mt-0.5" />
+								Cloud
+							</Link>{" "}
+							or the{" "}
+							<Link href="/extension" className="underline hover:no-underline">
+								<Puzzle className="inline size-5 mx-1 -mt-0.5" />
+								Extension
+							</Link>
+							) with the best free and paid models – no separate accounts, no messing with API keys.
+						</p>
+						<p className="mx-auto mt-2 max-w-2xl md:text-lg text-muted-foreground">
+							And you can always bring your own key (
 							<Link href="#faq" className="underline hover:no-underline">
 								FAQ
 							</Link>
@@ -240,7 +250,7 @@ export default function ProviderPricingPage() {
 					</div>
 					<div className="mx-auto mt-12 grid max-w-5xl gap-8 md:grid-cols-2">
 						{faqs.map((faq, index) => (
-							<div key={index} className="rounded-lg border border-border bg-card p-6">
+							<div key={index} className="rounded-2xl border border-border bg-card p-6">
 								<h3 className="font-semibold">{faq.question}</h3>
 								<p className="mt-2 text-sm text-muted-foreground">{faq.answer}</p>
 							</div>