Skip to content

Commit 2f33e77

Browse files
brunobergherbrunobergher
committed
Simpler and punchier features section
1 parent f2d9a3f commit 2f33e77

File tree

4 files changed

+42
-199
lines changed

4 files changed

+42
-199
lines changed

‎apps/web-roo-code/src/components/chromes/nav-bar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function NavBar({ stars, downloads }: NavBarProps) {
3737
<nav className="grow ml-6 hidden text-sm font-medium md:flex md:items-center">
3838
<ScrollButton
3939
targetId="product"
40-
className="text-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
40+
className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
4141
Product
4242
</ScrollButton>
4343
<Link

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

Lines changed: 0 additions & 113 deletions
This file was deleted.

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

Lines changed: 41 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,47 @@
11
"use client"
22

33
import { motion } from "framer-motion"
4-
import { Bot, Code, Brain, Wrench, Terminal, Puzzle, Globe, Shield, Zap } from "lucide-react"
5-
import { FeaturesMobile } from "./features-mobile"
6-
7-
import { ReactNode } from "react"
4+
import { Brain, Shield, Users2, ReplaceAll, Keyboard, LucideIcon, CheckCheck } from "lucide-react"
85

96
export interface Feature {
10-
icon: ReactNode
7+
icon: LucideIcon
118
title: string
129
description: string
1310
}
1411

1512
export const features: Feature[] = [
1613
{
17-
icon: <Bot className="h-6 w-6 text-white" />,
18-
title: "Your AI Dev Team in VS Code",
19-
description:
20-
"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.",
21-
},
22-
{
23-
icon: <Code className="h-6 w-6 text-white" />,
24-
title: "Multiple Specialized Modes",
25-
description:
26-
"From coding to debugging to architecture, Roo Code has a mode for every dev scenario—just switch on the fly.",
27-
},
28-
{
29-
icon: <Brain className="h-6 w-6 text-white" />,
30-
title: "Deep Project-wide Context",
14+
icon: Users2,
15+
title: "Specialized Modes",
3116
description:
32-
"Roo Code reads your entire codebase, preserving valid code through diff-based edits for seamless multi-file refactors.",
17+
"Planning, Architecture, Debugging and beyond: Roo's modes stay on-task and deliver. Create your own modes or download from the marketplace.",
3318
},
3419
{
35-
icon: <Wrench className="h-6 w-6 text-white" />,
36-
title: "Open-Source and Model-Agnostic",
37-
description:
38-
"Bring your own model or use local AI—no vendor lock-in. Roo Code is free, open, and adaptable to your needs.",
20+
icon: ReplaceAll,
21+
title: "Model-Agnostic",
22+
description: "Bring your own model key or use local inference — no markup, lock-in, no restrictions.",
3923
},
4024
{
41-
icon: <Terminal className="h-6 w-6 text-white" />,
42-
title: "Guarded Command Execution",
43-
description:
44-
"Approve or deny commands as needed. Roo Code automates your dev workflow while keeping oversight firmly in your hands.",
45-
},
46-
{
47-
icon: <Puzzle className="h-6 w-6 text-white" />,
48-
title: "Fully Customizable",
49-
description:
50-
"Create or tweak modes, define usage rules, and shape Roo Code's behavior precisely—your code, your way.",
25+
icon: CheckCheck,
26+
title: "Granular auto-approval",
27+
description: "Control each action and make Roo as autonomous as you want as you build confidence. Or go YOLO.",
5128
},
5229
{
53-
icon: <Globe className="h-6 w-6 text-white" />,
54-
title: "Automated Browser Actions",
30+
icon: Keyboard,
31+
title: "Highly Customizable",
5532
description:
56-
"Seamlessly test and verify your web app directly from VS Code—Roo Code can open a browser, run checks, and more.",
33+
"Fine-tune settings for Roo to work for you, like inference context, model properties, slash commands and more.",
5734
},
5835
{
59-
icon: <Shield className="h-6 w-6 text-white" />,
60-
title: "Secure by Design",
36+
icon: Brain,
37+
title: "Deep Project-wide Context",
6138
description:
62-
"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.",
39+
"Roo Code reads your entire codebase, preserving valid code through diff-based edits for seamless multi-file refactors.",
6340
},
6441
{
65-
icon: <Zap className="h-6 w-6 text-white" />,
66-
title: "Seamless Setup and Workflows",
67-
description:
68-
"Get started in minutes—no heavy configs. Roo Code fits alongside your existing tools and dev flow, while supercharging your productivity.",
42+
icon: Shield,
43+
title: "Secure and Private by Design",
44+
description: "Open source and local-first. No code leaves your machine unless you say so.",
6945
},
7046
]
7147

@@ -81,21 +57,6 @@ export function Features() {
8157
},
8258
}
8359

84-
const itemVariants = {
85-
hidden: {
86-
opacity: 0,
87-
y: 20,
88-
},
89-
visible: {
90-
opacity: 1,
91-
y: 0,
92-
transition: {
93-
duration: 0.6,
94-
ease: [0.21, 0.45, 0.27, 0.9],
95-
},
96-
},
97-
}
98-
9960
const backgroundVariants = {
10061
hidden: {
10162
opacity: 0,
@@ -118,11 +79,11 @@ export function Features() {
11879
viewport={{ once: true }}
11980
variants={backgroundVariants}>
12081
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2">
121-
<div className="absolute left-1/2 top-1/2 h-[800px] w-full -translate-x-1/2 -translate-y-1/2 rounded-[100%] bg-blue-500/10 blur-[120px]" />
82+
<div className="absolute left-1/2 top-1/2 h-[800px] w-full -translate-x-1/2 -translate-y-1/2 rounded-[100%] bg-blue-500/10 dark:bg-blue-700/30 blur-[120px]" />
12283
</div>
12384
</motion.div>
12485
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<div className="mx-auto mb-24 max-w-3xl text-center">
86+
<div className="mx-auto mb-12 md:mb-24 max-w-4xl text-center">
12687
<motion.div
12788
initial={{ opacity: 0, y: 20 }}
12889
whileInView={{ opacity: 1, y: 0 }}
@@ -132,40 +93,36 @@ export function Features() {
13293
ease: [0.21, 0.45, 0.27, 0.9],
13394
}}>
13495
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
135-
Powerful features for modern developers.
96+
Power and flexibility to get stuff done.
13697
</h2>
13798
<p className="mt-6 text-lg text-muted-foreground">
138-
Everything you need to build faster and write better code.
99+
The features you need to build, debug and ship faster – without compromising quality.
139100
</p>
140101
</motion.div>
141102
</div>
142103

143-
{/* Mobile Carousel */}
144-
<FeaturesMobile />
145-
146-
{/* Desktop Grid */}
147104
<motion.div
148-
className="relative mx-auto hidden max-w-[1200px] md:block"
105+
className="relative mx-auto md:max-w-[1200px]"
149106
variants={containerVariants}
150107
initial="hidden"
151108
whileInView="visible"
152109
viewport={{ once: true }}>
153-
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
154-
{features.map((feature, index) => (
155-
<motion.div key={index} variants={itemVariants} className="group relative">
156-
<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" />
157-
<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">
158-
<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">
159-
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
160-
{feature.icon}
161-
</div>
162-
</div>
163-
<h3 className="mb-3 text-xl font-medium text-foreground/90">{feature.title}</h3>
164-
<p className="leading-relaxed text-muted-foreground">{feature.description}</p>
165-
</div>
166-
</motion.div>
167-
))}
168-
</div>
110+
<ul className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
111+
{features.map((feature, index) => {
112+
const Icon = feature.icon
113+
return (
114+
<li
115+
key={index}
116+
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
117+
<Icon className="size-6 text-foreground/80" />
118+
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">{feature.title}</h3>
119+
<p className="leading-relaxed font-light text-muted-foreground">
120+
{feature.description}
121+
</p>
122+
</li>
123+
)
124+
})}
125+
</ul>
169126
</motion.div>
170127
</div>
171128
</section>

‎apps/web-roo-code/src/components/homepage/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ export * from "./animated-background"
22
export * from "./code-example"
33
export * from "./company-logos"
44
export * from "./faq-section"
5-
export * from "./features-mobile"
65
export * from "./features"
76
export * from "./install-section"
87
export * from "./testimonials-mobile"

0 commit comments

Comments
 (0)