feat: enhance iconography, CTAs, and containers for homepage and enterprise pages

- Updated enterprise page layout and styling - Enhanced homepage components with improved visual hierarchy - Refined contact form styling - Improved features section presentation - Enhanced install section with better CTAs and container styling
2026-08-28 05:27:24 +00:00 · 2025-07-22 13:43:50 -04:00 · 2025-07-22 13:43:50 -04:00 · 00ef2db997
commit 00ef2db997
parent dcde02e0e8
5 changed files with 170 additions and 134 deletions
--- a/apps/web-roo-code/src/app/enterprise/page.tsx
+++ b/apps/web-roo-code/src/app/enterprise/page.tsx
@ -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,24 +34,17 @@ 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
 									</a>
@ -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&apos;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-border/30 dark:from-gray-800/20 dark:via-gray-700/20 dark:to-gray-800/20 dark:shadow-[0_20px_50px_rgba(0,0,0,0.5)] 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:from-gray-700/10 dark:to-gray-800/10" />
+							<div className="relative text-center">
+								<h2 className="mb-4 bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-3xl font-bold tracking-tight text-transparent 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&apos;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-shadow duration-300">
+										<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&apos;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-shadow duration-300">
+										<h3 className="mb-2 text-xl font-bold">Request a Demo</h3>
+										<p className="mb-4 text-muted-foreground">
+											See Roo Code&apos;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>
--- a/apps/web-roo-code/src/app/page.tsx
+++ b/apps/web-roo-code/src/app/page.tsx
@ -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">
--- a/apps/web-roo-code/src/components/enterprise/contact-form.tsx
+++ b/apps/web-roo-code/src/components/enterprise/contact-form.tsx
@ -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>
--- a/apps/web-roo-code/src/components/homepage/features.tsx
+++ b/apps/web-roo-code/src/components/homepage/features.tsx
@ -1,17 +1,7 @@
 "use client"

 import { motion } from "framer-motion"
-import {
-	FaRobot,
-	FaCode,
-	FaBrain,
-	FaTools,
-	FaTerminal,
-	FaPuzzlePiece,
-	FaGlobe,
-	FaShieldAlt,
-	FaBolt,
-} 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"
@ -24,55 +14,55 @@ export interface Feature {

 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.",
 	},
 	{
-		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.",
 	},
 	{
-		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.",
 	},
 	{
-		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.",
 	},
 	{
-		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.",
 	},
 	{
-		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.",
 	},
 	{
-		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.",
 	},
 	{
-		icon: <FaShieldAlt className="h-6 w-6" />,
+		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: <FaBolt className="h-6 w-6" />,
+		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.",
@ -167,7 +157,7 @@ export function Features() {
 								<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-white">{feature.icon}</div>
+											{feature.icon}
 										</div>
 									</div>
 									<h3 className="mb-3 text-xl font-medium text-foreground/90">{feature.title}</h3>
--- a/apps/web-roo-code/src/components/homepage/install-section.tsx
+++ b/apps/web-roo-code/src/components/homepage/install-section.tsx
@ -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">
-												&middot;
-											</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">&middot;</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>