Skip to content

Commit 00ef2db

Browse files
thill2323daniel-lxs
thill2323
authored and
daniel-lxs
committed
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
1 parent dcde02e commit 00ef2db

File tree

5 files changed

+170
-134
lines changed

5 files changed

+170
-134
lines changed

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

Lines changed: 99 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Code, CheckCircle, Shield, Users, Zap, Workflow, Lock } from "lucide-react"
1+
import { Code, CheckCircle, Shield, Zap, Workflow, Lock, ArrowRight, DollarSign, Search, Network } from "lucide-react"
22

33
import { Button } from "@/components/ui"
44
import { AnimatedText } from "@/components/animated-text"
@@ -10,7 +10,7 @@ export default async function Enterprise() {
1010
return (
1111
<>
1212
{/* Hero Section */}
13-
<section className="relative flex h-[calc(100vh-theme(spacing.16))] items-center overflow-hidden">
13+
<section className="relative flex h-[calc(100vh-theme(spacing.12))] items-center overflow-hidden">
1414
<AnimatedBackground />
1515
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
1616
<div className="grid gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
@@ -34,24 +34,17 @@ export default async function Enterprise() {
3434
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
3535
<Button
3636
size="lg"
37-
className="w-full hover:bg-gray-200 dark:bg-white dark:text-black sm:w-auto"
37+
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"
3838
asChild>
3939
<a href="#contact" className="flex w-full items-center justify-center">
4040
Request a Demo
41-
<svg
42-
xmlns="http://www.w3.org/2000/svg"
43-
className="ml-2 h-4 w-4"
44-
viewBox="0 0 20 20"
45-
fill="currentColor">
46-
<path
47-
fillRule="evenodd"
48-
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"
49-
clipRule="evenodd"
50-
/>
51-
</svg>
41+
<ArrowRight className="ml-2 h-4 w-4" />
5242
</a>
5343
</Button>
54-
<Button variant="outline" size="lg" className="w-full sm:w-auto">
44+
<Button
45+
variant="outline"
46+
size="lg"
47+
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">
5548
<a href="#benefits" className="flex w-full items-center justify-center">
5649
Learn More
5750
</a>
@@ -110,9 +103,11 @@ export default async function Enterprise() {
110103

111104
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
112105
{/* Card 1 */}
113-
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
114-
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
115-
<Zap className="h-6 w-6 text-blue-500" />
106+
<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">
107+
<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">
108+
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
109+
<Network className="h-6 w-6 text-white" />
110+
</div>
116111
</div>
117112
<h3 className="mb-2 text-xl font-bold">Centralized AI Management Hub</h3>
118113
<p className="text-muted-foreground">
@@ -136,9 +131,11 @@ export default async function Enterprise() {
136131
</div>
137132

138133
{/* Card 2 */}
139-
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
140-
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
141-
<Users className="h-6 w-6 text-blue-500" />
134+
<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">
135+
<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">
136+
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
137+
<Search className="h-6 w-6 text-white" />
138+
</div>
142139
</div>
143140
<h3 className="mb-2 text-xl font-bold">Real-Time Usage Visibility</h3>
144141
<p className="text-muted-foreground">
@@ -161,9 +158,11 @@ export default async function Enterprise() {
161158
</div>
162159

163160
{/* Card 3 */}
164-
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
165-
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
166-
<Shield className="h-6 w-6 text-blue-500" />
161+
<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">
162+
<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">
163+
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
164+
<Shield className="h-6 w-6 text-white" />
165+
</div>
167166
</div>
168167
<h3 className="mb-2 text-xl font-bold">Enterprise-Grade Governance</h3>
169168
<p className="text-muted-foreground">
@@ -187,9 +186,11 @@ export default async function Enterprise() {
187186
</div>
188187

189188
{/* Card 4 */}
190-
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
191-
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
192-
<Workflow className="h-6 w-6 text-blue-500" />
189+
<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">
190+
<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">
191+
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
192+
<Workflow className="h-6 w-6 text-white" />
193+
</div>
193194
</div>
194195
<h3 className="mb-2 text-xl font-bold">5-Minute Control-Plane Setup</h3>
195196
<p className="text-muted-foreground">
@@ -213,9 +214,11 @@ export default async function Enterprise() {
213214
</div>
214215

215216
{/* Card 5 */}
216-
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
217-
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
218-
<Users className="h-6 w-6 text-blue-500" />
217+
<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">
218+
<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">
219+
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
220+
<DollarSign className="h-6 w-6 text-white" />
221+
</div>
219222
</div>
220223
<h3 className="mb-2 text-xl font-bold">Manage AI Development Costs</h3>
221224
<p className="text-muted-foreground">
@@ -238,9 +241,11 @@ export default async function Enterprise() {
238241
</div>
239242

240243
{/* Card 6 */}
241-
<div className="rounded-lg border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
242-
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
243-
<Zap className="h-6 w-6 text-blue-500" />
244+
<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">
245+
<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">
246+
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
247+
<Zap className="h-6 w-6 text-white" />
248+
</div>
244249
</div>
245250
<h3 className="mb-2 text-xl font-bold">Zero Friction for Developers</h3>
246251
<p className="text-muted-foreground">
@@ -392,8 +397,10 @@ export default async function Enterprise() {
392397
<div className="rounded-lg border border-border bg-card p-8 shadow-sm">
393398
<div className="grid gap-8 md:grid-cols-2 md:items-center">
394399
<div>
395-
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
396-
<Shield className="h-6 w-6 text-blue-500" />
400+
<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">
401+
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
402+
<Shield className="h-6 w-6 text-white" />
403+
</div>
397404
</div>
398405
<h3 className="mb-4 text-2xl font-bold">Enterprise-Grade Security</h3>
399406
<p className="mb-6 text-muted-foreground">
@@ -423,51 +430,76 @@ export default async function Enterprise() {
423430
</li>
424431
</ul>
425432
</div>
426-
<div className="flex flex-col items-center justify-center space-y-4">
433+
<div className="flex flex-col items-center justify-center">
427434
<div className="rounded-lg border border-border bg-secondary/50 p-6 text-center">
428-
<Lock className="mx-auto mb-3 h-12 w-12 text-blue-500" />
435+
<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">
436+
<div className="rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5">
437+
<Lock className="h-8 w-8 text-white" />
438+
</div>
439+
</div>
429440
<h4 className="mb-2 text-lg font-semibold">Security-First Design</h4>
430-
<p className="text-sm text-muted-foreground">
441+
<p className="mb-4 text-sm text-muted-foreground">
431442
Every feature built with enterprise security requirements in mind
432443
</p>
444+
<Button
445+
size="lg"
446+
asChild
447+
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">
448+
<a
449+
href={EXTERNAL_LINKS.SECURITY}
450+
target="_blank"
451+
rel="noopener noreferrer"
452+
className="flex items-center">
453+
View Security Details
454+
<ArrowRight className="ml-2 h-4 w-4" />
455+
</a>
456+
</Button>
433457
</div>
434-
<Button size="lg" asChild className="w-full">
435-
<a href={EXTERNAL_LINKS.SECURITY} target="_blank" rel="noopener noreferrer">
436-
View Security Details
437-
<Shield className="ml-2 h-4 w-4" />
438-
</a>
439-
</Button>
440458
</div>
441459
</div>
442460
</div>
443461
</div>
444462
</section>
445463

446464
{/* CTA Section */}
447-
<section id="contact" className="bg-secondary/50 py-16">
448-
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
449-
<div className="mx-auto max-w-3xl text-center">
450-
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
451-
Ready to Transform Your Development Process?
452-
</h2>
453-
<p className="mb-8 text-lg text-muted-foreground">
454-
Join our early access program and be among the first to experience the power of Roo Code
455-
Cloud for Enterprise.
456-
</p>
457-
<div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
458-
<div className="rounded-lg border border-border bg-card p-6 text-center shadow-sm">
459-
<h3 className="mb-2 text-xl font-bold">Become an Early Access Partner</h3>
460-
<p className="mb-4 text-muted-foreground">
461-
Collaborate in shaping Roo Code&apos;s enterprise solution.
462-
</p>
463-
<ContactForm formType="early-access" buttonText="Apply Now" buttonClassName="w-full" />
464-
</div>
465-
<div className="rounded-lg border border-border bg-card p-6 text-center shadow-sm">
466-
<h3 className="mb-2 text-xl font-bold">Request a Demo</h3>
467-
<p className="mb-4 text-muted-foreground">
468-
See Roo Code&apos;s enterprise capabilities in action.
465+
<section id="contact" className="relative overflow-hidden py-20 sm:py-24">
466+
<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" />
467+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
468+
<div className="mx-auto max-w-4xl">
469+
<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">
470+
<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" />
471+
<div className="relative text-center">
472+
<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">
473+
Ready to Transform Your Development Process?
474+
</h2>
475+
<p className="mb-8 text-lg text-muted-foreground">
476+
Join our early access program and be among the first to experience the power of Roo
477+
Code Cloud for Enterprise.
469478
</p>
470-
<ContactForm formType="demo" buttonText="Contact Us" buttonClassName="w-full" />
479+
<div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
480+
<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">
481+
<h3 className="mb-2 text-xl font-bold">Become an Early Access Partner</h3>
482+
<p className="mb-4 text-muted-foreground">
483+
Collaborate in shaping Roo Code&apos;s enterprise solution.
484+
</p>
485+
<ContactForm
486+
formType="early-access"
487+
buttonText="Apply Now"
488+
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"
489+
/>
490+
</div>
491+
<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">
492+
<h3 className="mb-2 text-xl font-bold">Request a Demo</h3>
493+
<p className="mb-4 text-muted-foreground">
494+
See Roo Code&apos;s enterprise capabilities in action.
495+
</p>
496+
<ContactForm
497+
formType="demo"
498+
buttonText="Contact Us"
499+
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"
500+
/>
501+
</div>
502+
</div>
471503
</div>
472504
</div>
473505
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default async function Home() {
2121

2222
return (
2323
<>
24-
<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))]">
24+
<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))]">
2525
<AnimatedBackground />
2626
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
2727
<div className="grid gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">

‎apps/web-roo-code/src/components/enterprise/contact-form.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export function ContactForm({ formType, buttonText, buttonClassName }: ContactFo
149149
return (
150150
<Dialog open={isOpen} onOpenChange={setIsOpen}>
151151
<DialogTrigger asChild>
152-
<Button className={buttonClassName}>{buttonText}</Button>
152+
<Button className={buttonClassName || ""}>{buttonText}</Button>
153153
</DialogTrigger>
154154
<DialogContent className="sm:max-w-[425px]">
155155
<DialogHeader>

0 commit comments

Comments
 (0)