Skip to content

feat: add vibrant colors to marketing homepage #11677

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
roomote wants to merge 1 commit into from
Closed

feat: add vibrant colors to marketing homepage #11677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions apps/web-roo-code/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@

:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--popover-foreground: 240 10% 3.9%;
--primary: 262 83% 58%;
--primary-foreground: 0 0% 100%;
--secondary: 260 10% 96%;
--secondary-foreground: 262 83% 58%;
--muted: 260 10% 96%;
--muted-foreground: 240 5% 45%;
--accent: 262 60% 95%;
--accent-foreground: 262 83% 45%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--border: 260 10% 90%;
--input: 260 10% 90%;
--ring: 262 83% 58%;
--radius: 0.5rem;

--chart-1: 0 100% 50%;
Expand All @@ -41,25 +41,25 @@
}

.dark {
--background: 0 0% 0%;
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card: 240 10% 5%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover: 240 10% 5%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--primary: 262 83% 65%;
--primary-foreground: 0 0% 100%;
--secondary: 260 10% 14%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--muted: 260 10% 14%;
--muted-foreground: 240 5% 64%;
--accent: 262 40% 18%;
--accent-foreground: 262 83% 80%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--border: 260 10% 16%;
--input: 260 10% 16%;
--ring: 262 83% 65%;
}

@layer base {
Expand Down
14 changes: 10 additions & 4 deletions apps/web-roo-code/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@ export default async function Home() {
<StructuredData />
<section className="relative flex flex-col items-center overflow-hidden pt-20 pb-12 md:pt-32 md:pb-16">
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
<div className="absolute left-1/2 top-1/2 h-[400px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/10 dark:bg-violet-700/20 blur-[140px]" />
<div className="absolute left-1/2 top-1/2 h-[400px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-violet-500/15 via-blue-500/15 to-fuchsia-500/15 dark:from-violet-700/25 dark:via-blue-700/25 dark:to-fuchsia-700/25 blur-[140px]" />
</div>
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
<h1 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground max-w-4xl mb-6">
Your AI Software Engineering Team is here.
<span className="bg-gradient-to-r from-violet-600 via-blue-600 to-fuchsia-600 dark:from-violet-400 dark:via-blue-400 dark:to-fuchsia-400 bg-clip-text text-transparent">
Your AI Software Engineering Team is here.
</span>
<br />
<span className="text-muted-foreground">Interactive in the IDE, autonomous in the cloud.</span>
</h1>
Expand All @@ -39,7 +41,9 @@ export default async function Home() {
</div>
<div className="flex flex-col sm:flex-row gap-4 mb-16">
<div className="flex flex-col items-center gap-2">
<Button size="xl" className="w-full">
<Button
size="xl"
className="w-full bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white shadow-lg shadow-blue-500/25">
<a
href={EXTERNAL_LINKS.MARKETPLACE}
target="_blank"
Expand All @@ -53,7 +57,9 @@ export default async function Home() {
</div>

<div className="flex flex-col items-center gap-2">
<Button size="xl" className="w-full">
<Button
size="xl"
className="w-full bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white shadow-lg shadow-violet-500/25">
<a
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
className="flex items-center justify-center">
Expand Down
21 changes: 17 additions & 4 deletions apps/web-roo-code/src/components/homepage/cta-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,22 @@ import { EXTERNAL_LINKS } from "@/lib/constants"

export function CTASection() {
return (
<section className="py-24 bg-muted/30 border-t border-border">
<section className="py-24 bg-muted/30 border-t border-border relative overflow-hidden">
<div className="absolute inset-0 -z-10">
<div className="absolute left-1/2 top-1/2 h-[500px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-violet-500/10 via-blue-500/10 to-fuchsia-500/10 dark:from-violet-700/15 dark:via-blue-700/15 dark:to-fuchsia-700/15 blur-[120px]" />
</div>
<div className="container px-4 mx-auto sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-8">Build faster. Solo or Together.</h2>
<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-8">
Build faster.{" "}
<span className="bg-gradient-to-r from-blue-600 via-violet-600 to-fuchsia-600 dark:from-blue-400 dark:via-violet-400 dark:to-fuchsia-400 bg-clip-text text-transparent">
Solo or Together.
</span>
</h2>

<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
<Button
size="lg"
className="w-full sm:w-auto h-12 px-8 text-base bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white shadow-lg shadow-blue-500/25">
<a
href={EXTERNAL_LINKS.MARKETPLACE}
target="_blank"
Expand All @@ -20,7 +30,10 @@ export function CTASection() {
</a>
</Button>

<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
<Button
variant="outline"
size="lg"
className="w-full sm:w-auto h-12 px-8 text-base border-violet-500/50 hover:bg-violet-500/10 hover:border-violet-500">
<a
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
target="_blank"
Expand Down
8 changes: 6 additions & 2 deletions apps/web-roo-code/src/components/homepage/faq-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,11 @@ export function FAQSection() {
duration: 0.6,
ease: [0.21, 0.45, 0.27, 0.9],
}}>
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">Frequently Asked Questions</h2>
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
<span className="bg-gradient-to-r from-blue-600 via-violet-600 to-fuchsia-600 dark:from-blue-400 dark:via-violet-400 dark:to-fuchsia-400 bg-clip-text text-transparent">
Frequently Asked Questions
</span>
</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.
Expand All @@ -274,7 +278,7 @@ export function FAQSection() {
delay: index * 0.1,
ease: [0.21, 0.45, 0.27, 0.9],
}}>
<div className="group relative rounded-lg border border-border/50 bg-background/30 backdrop-blur-xl transition-all duration-300 hover:border-border">
<div className="group relative rounded-lg border border-border/50 bg-background/30 backdrop-blur-xl transition-all duration-300 hover:border-violet-500/30 hover:shadow-sm hover:shadow-violet-500/5">
<button
onClick={() => toggleFAQ(index)}
className="flex w-full items-center justify-between p-6 text-left"
Expand Down
7 changes: 5 additions & 2 deletions apps/web-roo-code/src/components/homepage/option-overview-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,18 @@ export function OptionOverviewSection() {
<div className="container px-4 mx-auto sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
Different form factors for different ways of working.
Different form factors for{" "}
<span className="bg-gradient-to-r from-blue-600 to-fuchsia-600 dark:from-blue-400 dark:to-fuchsia-400 bg-clip-text text-transparent">
different ways of working.
</span>
</h2>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
Roo&apos;s always there to help you get stuff done.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto relative z-1">
<div className="absolute left-1/2 top-[140px] -translate-x-1/2 z-1">
<div className="rounded-full size-[300px] border-[10px] border-dashed animate-[spin_10s_linear_infinite] blur-[5px]" />
<div className="rounded-full size-[300px] border-[10px] border-dashed border-violet-400/30 dark:border-violet-500/20 animate-[spin_10s_linear_infinite] blur-[5px]" />
</div>

<div className="rounded-3xl bg-card outline outline-border/50 hover:outline-8 shadow-xl p-8 h-full group transition-all hover:shadow-2xl hover:shadow-blue-800/30 relative">
Expand Down
31 changes: 17 additions & 14 deletions apps/web-roo-code/src/components/homepage/pillars-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,15 @@ export function PillarsSection() {
return (
<section className="py-24 bg-muted/30 relative">
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2">
<div className="absolute left-1/2 top-1/2 h-[800px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/10 dark:bg-blue-700/20 blur-[140px]" />
<div className="absolute left-1/2 top-1/2 h-[800px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-blue-500/10 via-violet-500/10 to-fuchsia-500/10 dark:from-blue-700/20 dark:via-violet-700/20 dark:to-fuchsia-700/20 blur-[140px]" />
</div>
<div className="container px-4 mx-auto sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
To trust an agent, you have to do it on your own terms.
To trust an agent, you have to do it on{" "}
<span className="bg-gradient-to-r from-blue-600 to-violet-600 dark:from-blue-400 dark:to-violet-400 bg-clip-text text-transparent">
your own terms.
</span>
</h2>
<p className="text-xl text-muted-foreground max-w-xl mx-auto">
Roo is designed from the ground up to give you the confidence to do ever more with AI.
Expand All @@ -61,9 +64,9 @@ export function PillarsSection() {

<div className="flex flex-col md:grid md:grid-cols-8 gap-8">
<div className="relative md:col-span-3 h-full">
<div className="rounded-2xl bg-card outline outline-border/50 hover:outline-8 shadow-lg p-8 h-full group transition-all hover:shadow-2xl">
<div className="absolute -right-3 -top-5 bg-card border shadow-md rounded-full p-3 transition-all group-hover:-top-4 group-hover:-right-2 group-hover:scale-110 group-hover:shadow-xl">
<Brain className="size-8 text-violet-600 shrink-0 mt-1" strokeWidth={1.5} />
<div className="rounded-2xl bg-card outline outline-border/50 hover:outline-8 shadow-lg p-8 h-full group transition-all hover:shadow-2xl hover:shadow-violet-500/10">
<div className="absolute -right-3 -top-5 bg-gradient-to-br from-violet-500 to-purple-600 border border-violet-400/30 shadow-md shadow-violet-500/20 rounded-full p-3 transition-all group-hover:-top-4 group-hover:-right-2 group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-violet-500/30">
<Brain className="size-8 text-white shrink-0 mt-1" strokeWidth={1.5} />
</div>
<div>
<h3 className="text-2xl font-bold mb-1">Model-agnostic by design</h3>
Expand Down Expand Up @@ -104,9 +107,9 @@ export function PillarsSection() {
</div>

<div className="relative col-span-5 h-full">
<div className="rounded-2xl bg-card outline outline-border/50 hover:outline-8 shadow-lg p-8 h-full group transition-all hover:shadow-2xl">
<div className="absolute -right-3 -top-5 bg-card border shadow-lg rounded-full p-3 transition-all group-hover:-top-4 group-hover:-right-2 group-hover:scale-110 group-hover:shadow-xl">
<Users2 className="size-8 text-violet-600 shrink-0 mt-1" strokeWidth={1.5} />
<div className="rounded-2xl bg-card outline outline-border/50 hover:outline-8 shadow-lg p-8 h-full group transition-all hover:shadow-2xl hover:shadow-blue-500/10">
<div className="absolute -right-3 -top-5 bg-gradient-to-br from-blue-500 to-cyan-600 border border-blue-400/30 shadow-md shadow-blue-500/20 rounded-full p-3 transition-all group-hover:-top-4 group-hover:-right-2 group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-blue-500/30">
<Users2 className="size-8 text-white shrink-0 mt-1" strokeWidth={1.5} />
</div>
<div>
<h3 className="text-2xl font-bold mb-1">Role-specific Modes</h3>
Expand Down Expand Up @@ -152,9 +155,9 @@ export function PillarsSection() {
</div>

<div className="relative col-span-4 h-full">
<div className="rounded-2xl bg-card outline outline-border/50 hover:outline-8 shadow-lg p-8 h-full group transition-all hover:shadow-2xl">
<div className="absolute -right-3 -top-5 bg-card border shadow-lg rounded-full p-3 transition-all group-hover:-top-4 group-hover:-right-2 group-hover:scale-110 group-hover:shadow-xl">
<Keyboard className="size-8 text-violet-600 shrink-0 mt-1" strokeWidth={1.5} />
<div className="rounded-2xl bg-card outline outline-border/50 hover:outline-8 shadow-lg p-8 h-full group transition-all hover:shadow-2xl hover:shadow-amber-500/10">
<div className="absolute -right-3 -top-5 bg-gradient-to-br from-amber-500 to-orange-600 border border-amber-400/30 shadow-md shadow-amber-500/20 rounded-full p-3 transition-all group-hover:-top-4 group-hover:-right-2 group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-amber-500/30">
<Keyboard className="size-8 text-white shrink-0 mt-1" strokeWidth={1.5} />
</div>
<div>
<h3 className="text-2xl font-bold mb-1">Highly configurable</h3>
Expand All @@ -171,9 +174,9 @@ export function PillarsSection() {
</div>

<div className="relative col-span-4 h-full">
<div className="rounded-2xl bg-card outline outline-border/50 hover:outline-8 shadow-lg p-8 h-full group transition-all hover:shadow-2xl">
<div className="absolute -right-3 -top-5 bg-card border shadow-lg rounded-full p-3 transition-all group-hover:-top-4 group-hover:-right-2 group-hover:scale-110 group-hover:shadow-xl">
<Shield className="size-8 text-violet-600 shrink-0 mt-1" strokeWidth={1.5} />
<div className="rounded-2xl bg-card outline outline-border/50 hover:outline-8 shadow-lg p-8 h-full group transition-all hover:shadow-2xl hover:shadow-emerald-500/10">
<div className="absolute -right-3 -top-5 bg-gradient-to-br from-emerald-500 to-teal-600 border border-emerald-400/30 shadow-md shadow-emerald-500/20 rounded-full p-3 transition-all group-hover:-top-4 group-hover:-right-2 group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-emerald-500/30">
<Shield className="size-8 text-white shrink-0 mt-1" strokeWidth={1.5} />
</div>
<div>
<h3 className="text-2xl font-bold mb-1">Secure and transparent</h3>
Expand Down
12 changes: 9 additions & 3 deletions apps/web-roo-code/src/components/homepage/testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,10 @@ export function Testimonials() {
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
<div className="mx-auto mb-8 md:max-w-2xl text-center">
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
More than 1 million people are shipping with Roo.
More than 1 million people are{" "}
<span className="bg-gradient-to-r from-violet-600 to-fuchsia-600 dark:from-violet-400 dark:to-fuchsia-400 bg-clip-text text-transparent">
shipping with Roo.
</span>
</h2>
<p className="mt-6 text-lg text-muted-foreground">And they have some great things to say.</p>
</div>
Expand Down Expand Up @@ -232,7 +235,7 @@ export function Testimonials() {
key={testimonial.name}
className="relative min-w-0 flex-[0_0_85%] px-2 md:flex-[0_0_70%] md:px-4 lg:flex-[0_0_30%]">
<div className="group relative py-10 h-full">
<div className="relative flex h-full flex-col rounded-2xl border border-border bg-background transition-all duration-500 ease-out group-hover:scale-[1.02] group-hover:border-border group-hover:bg-background/40 group-hover:shadow-xl 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)]">
<div className="relative flex h-full flex-col rounded-2xl border border-border bg-background transition-all duration-500 ease-out group-hover:scale-[1.02] group-hover:border-violet-500/30 group-hover:bg-background/40 group-hover:shadow-xl group-hover:shadow-violet-500/10 dark:border-border/70 dark:bg-background/40 dark:group-hover:border-violet-400/30 dark:group-hover:bg-background/60 dark:group-hover:shadow-[0_20px_50px_rgba(139,92,246,0.15)]">
<div className="flex flex-1 flex-col p-4 md:p-6">
<div className="flex-1">
<p className="relative text-sm leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80 dark:text-foreground/70 dark:group-hover:text-foreground/90">
Expand All @@ -254,7 +257,10 @@ export function Testimonials() {
<span className="flex items-center mt-1">
{" "}
{Array.from({ length: testimonial.stars }, (_, i) => (
<Star key={i} className="size-4 fill-violet-500" />
<Star
key={i}
className="size-4 fill-amber-400 text-amber-400"
/>
))}
</span>
)}
Expand Down
14 changes: 11 additions & 3 deletions apps/web-roo-code/src/components/homepage/use-examples-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,18 +381,26 @@ export function UseExamplesSection({ agentTitle = false }: { agentTitle?: boolea
return (
<section className="pt-24 bg-background overflow-hidden relative">
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2">
<div className="absolute left-1/2 top-1/2 h-[700px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/10 blur-[140px]" />
<div className="absolute left-1/2 top-1/2 h-[700px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-blue-500/10 via-violet-500/10 to-amber-500/5 dark:from-blue-600/15 dark:via-violet-600/15 dark:to-amber-500/5 blur-[140px]" />
</div>
<div className="container px-4 mx-auto sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold tracking-tight mb-4">
{agentTitle ? (
<>
Part of the AI team to help your <em>entire</em> human team
Part of the AI team to help your{" "}
<em className="bg-gradient-to-r from-violet-600 to-fuchsia-600 dark:from-violet-400 dark:to-fuchsia-400 bg-clip-text text-transparent not-italic">
entire
</em>{" "}
human team
</>
) : (
<>
The AI team to help your <em>entire</em> human team
The AI team to help your{" "}
<em className="bg-gradient-to-r from-violet-600 to-fuchsia-600 dark:from-violet-400 dark:to-fuchsia-400 bg-clip-text text-transparent not-italic">
entire
</em>{" "}
human team
</>
)}
</h2>
Expand Down
Loading