Feature update

Added 2 additional features to the homepage (dev setup/experience to highlight speed, productivity, and ease of set-up, and security) to create a clean 3x3x3 grid. Fixed the widths of the containers, cleaned up icons, cleaned up hoverstates.

Author: thill2323

apps/web-roo-code/src/components/homepage/features-mobile.tsx

@@ -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>

apps/web-roo-code/src/components/homepage/features.tsx

@@ -1,7 +1,17 @@
 "use client"
 
 import { motion } from "framer-motion"
-import { FaRobot, FaCode, FaBrain, FaTools, FaTerminal, FaPuzzlePiece, FaGlobe } from "react-icons/fa"
+import {
+	FaRobot,
+	FaCode,
+	FaBrain,
+	FaTools,
+	FaTerminal,
+	FaPuzzlePiece,
+	FaGlobe,
+	FaShieldAlt,
+	FaBolt,
+} from "react-icons/fa"
 import { FeaturesMobile } from "./features-mobile"
 
 import { ReactNode } from "react"
@@ -10,7 +20,6 @@ export interface Feature {
 	icon: ReactNode
 	title: string
 	description: string
-	size: "small" | "large"
 }
 
 export const features: Feature[] = [
@@ -19,49 +28,54 @@ export const features: Feature[] = [
 		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" />,
 		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" />,
 		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" />,
 		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" />,
 		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" />,
 		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" />,
 		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: <FaShieldAlt className="h-6 w-6" />,
+		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" />,
+		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.",
 	},
 ]
 
@@ -148,15 +162,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>
+											<div className="text-white">{feature.icon}</div>
 										</div>
 									</div>
 									<h3 className="mb-3 text-xl font-medium text-foreground/90">{feature.title}</h3>