Skip to content
This repository was archived by the owner on May 15, 2026. It is now read-only.

Commit 4d611dd

Browse files
brunobergherbrunobergher
committed
Refine homepage hero and CTA sections
1 parent e212704 commit 4d611dd

2 files changed

Lines changed: 54 additions & 59 deletions

File tree

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

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Button } from "@/components/ui"
22
import {
3+
AnimatedBackground,
4+
CodeExample,
35
CompanyLogos,
46
FAQSection,
7+
Features,
58
Testimonials,
69
CTASection,
7-
OptionOverviewSection,
810
PillarsSection,
9-
UseExamplesSection,
1011
} from "@/components/homepage"
1112
import { EXTERNAL_LINKS } from "@/lib/constants"
1213
import { ArrowRight } from "lucide-react"
@@ -19,61 +20,62 @@ export default async function Home() {
1920
return (
2021
<>
2122
<StructuredData />
22-
<section className="relative flex flex-col items-center overflow-hidden pt-20 pb-12 md:pt-32 md:pb-16">
23-
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
24-
<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]" />
25-
</div>
26-
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
27-
<h1 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground max-w-4xl mb-6">
28-
Your AI Software Engineering Team is here.
29-
<br />
30-
<span className="text-muted-foreground">Interactive in the IDE, autonomous in the cloud.</span>
31-
</h1>
32-
<div className="mt-2 max-w-3xl text-lg text-muted-foreground mb-10 space-y-3">
33-
<p>
34-
Use the <strong className="text-nowrap">Roo Code Extension</strong> on your computer for
35-
full control, or delegate work to your{" "}
36-
<strong className="text-nowrap">Roo Code Cloud Agents</strong> from the web, Slack, GitHub
37-
or wherever your team is.
38-
</p>
39-
</div>
40-
<div className="flex flex-col sm:flex-row gap-4 mb-16">
41-
<div className="flex flex-col items-center gap-2">
42-
<Button size="xl" className="w-full">
43-
<a
44-
href={EXTERNAL_LINKS.MARKETPLACE}
45-
target="_blank"
46-
rel="noreferrer"
47-
className="flex items-center justify-center">
48-
Install VS Code Extension
49-
<ArrowRight className="ml-2 size-5" />
50-
</a>
51-
</Button>
52-
<span className="text-xs text-muted-foreground">Free and Open Source</span>
23+
<section className="relative flex h-[calc(125vh-theme(spacing.12))] items-center overflow-hidden md:h-[calc(80svh-theme(spacing.12))]">
24+
<AnimatedBackground />
25+
<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
26+
<div className="grid h-full relative gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
27+
<div className="flex flex-col justify-center space-y-4 sm:space-y-8">
28+
<div>
29+
<h1 className="text-4xl font-bold tracking-tight mt-8 text-center md:text-left md:text-4xl lg:text-5xl lg:mt-0">
30+
The Open Source AI Coding Assistant for serious work.
31+
</h1>
32+
<p className="mt-4 max-w-lg text-lg text-muted-foreground text-center md:text-left sm:mt-6">
33+
Specialized modes stay on task and ship great code.
34+
<br />
35+
Fully model-agnostic so you can use the best (or most cost-effective) model for each
36+
task.
37+
</p>
38+
<p className="max-w-lg text-lg text-muted-foreground text-center md:text-left sm:mt-6">
39+
Stop chasing this week&apos;s hot new model or CLI tool and go deep with Roo Code.
40+
</p>
41+
</div>
42+
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
43+
<Button
44+
size="lg"
45+
className="w-full hover:bg-gray-200 dark:bg-white dark:text-black sm:w-auto">
46+
<a
47+
href={EXTERNAL_LINKS.MARKETPLACE}
48+
target="_blank"
49+
rel="noreferrer"
50+
className="flex w-full items-center justify-center">
51+
Install VS Code Extension
52+
<ArrowRight className="ml-2" />
53+
</a>
54+
</Button>
55+
</div>
56+
<div className="md:max-h-[70px] md:overflow-clip text-center md:text-left pt-6 md:pt-0">
57+
<CompanyLogos />
58+
</div>
5359
</div>
54-
55-
<div className="flex flex-col items-center gap-2">
56-
<Button size="xl" className="w-full">
57-
<a href="/extension" className="flex items-center justify-center">
58-
Explore Extension Features
59-
<ArrowRight className="ml-2 size-5" />
60-
</a>
61-
</Button>
62-
<span className="text-xs text-muted-foreground">See what Roo can do in your editor</span>
60+
<div className="relative flex items-center mx-auto h-full mt-8 lg:mt-0">
61+
<div className="flex items-center justify-center">
62+
<CodeExample />
63+
</div>
6364
</div>
6465
</div>
65-
66-
<div className="mb-12 px-4">
67-
<CompanyLogos />
68-
</div>
6966
</div>
7067
</section>
7168

7269
<PillarsSection />
73-
<OptionOverviewSection />
74-
<UseExamplesSection />
75-
<Testimonials />
76-
<FAQSection />
70+
<div id="product">
71+
<Features />
72+
</div>
73+
<div id="testimonials">
74+
<Testimonials />
75+
</div>
76+
<div id="faq">
77+
<FAQSection />
78+
</div>
7779
<CTASection />
7880
</>
7981
)

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Button } from "@/components/ui"
2-
import { ArrowRight, Download } from "lucide-react"
2+
import { Download } from "lucide-react"
33
import { EXTERNAL_LINKS } from "@/lib/constants"
44

55
export function CTASection() {
66
return (
77
<section className="py-24 bg-muted/30 border-t border-border">
88
<div className="container px-4 mx-auto sm:px-6 lg:px-8 text-center">
9-
<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-8">Build faster. Solo or Together.</h2>
9+
<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-8">Build better and faster</h2>
1010

1111
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
1212
<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
@@ -19,13 +19,6 @@ export function CTASection() {
1919
Install on VS Code
2020
</a>
2121
</Button>
22-
23-
<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
24-
<a href="/extension" className="flex items-center gap-2">
25-
Explore Extension
26-
<ArrowRight className="h-4 w-4" />
27-
</a>
28-
</Button>
2922
</div>
3023
</div>
3124
</section>

0 commit comments

Comments
 (0)