Many tweaks

Author: brunobergher

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

@@ -5,12 +5,12 @@ import { getVSCodeDownloads } from "@/lib/stats"
 import { Button } from "@/components/ui"
 import {
 	AnimatedBackground,
-	InstallSection,
+	CodeExample,
+	CompanyLogos,
+	FAQSection,
 	Features,
+	InstallSection,
 	Testimonials,
-	FAQSection,
-	CodeExample,
-	UserLogos,
 } from "@/components/homepage"
 import { EXTERNAL_LINKS } from "@/lib/constants"
 import { ArrowRight } from "lucide-react"
@@ -29,10 +29,10 @@ export default async function Home() {
 					<div className="grid h-full relative gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
 						<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
 							<div>
-								<h1 className="text-3xl font-bold tracking-tight mt-8 sm:text-4xl md:text-4xl lg:text-5xl lg:mt-0">
-									The AI dev team which gets things done.
+								<h1 className="text-4xl font-bold tracking-tight mt-8 text-center md:text-left md:text-4xl lg:text-5xl lg:mt-0">
+									The AI dev team that gets things done.
 								</h1>
-								<p className="mt-4 max-w-md text-base text-muted-foreground sm:mt-6 sm:text-lg">
+								<p className="mt-4 max-w-md text-lg text-muted-foreground text-center md:text-left sm:mt-6">
 									Roo&apos;s specialized modes stay on task and ship great code. Open source and works
 									with any model.
 								</p>
@@ -45,7 +45,7 @@ export default async function Home() {
 										href="https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline"
 										target="_blank"
 										className="flex w-full items-center justify-center">
-										Install VSCode Extension
+										Install VS Code Extension
 										<ArrowRight className="ml-2" />
 									</a>
 								</Button>
@@ -62,7 +62,7 @@ export default async function Home() {
 									</a>
 								</Button>
 							</div>
-							<UserLogos />
+							<CompanyLogos />
 						</div>
 						<div className="relative flex items-center mx-auto h-full mt-8 lg:mt-0">
 							<div className="flex items-center justify-center">

apps/web-roo-code/src/components/homepage/company-logos.tsx

@@ -1,36 +1,33 @@
 "use client"
 
 import { motion } from "framer-motion"
+import Image from "next/image"
 
-export function CompanyLogos() {
-	const logos = [
-		{ name: "Company 1", logo: "/placeholder.svg?height=40&width=120" },
-		{ name: "Company 2", logo: "/placeholder.svg?height=40&width=120" },
-		{ name: "Company 3", logo: "/placeholder.svg?height=40&width=120" },
-		{ name: "Company 4", logo: "/placeholder.svg?height=40&width=120" },
-		{ name: "Company 5", logo: "/placeholder.svg?height=40&width=120" },
-		{ name: "Company 6", logo: "/placeholder.svg?height=40&width=120" },
-	]
+const logos = ["Apple", "Netflix", "Microsoft", "Red Hat", "Carvana"]
 
+export function CompanyLogos() {
 	return (
-		<div className="mt-10">
-			<div className="mx-auto grid max-w-5xl grid-cols-2 gap-8 py-8 md:grid-cols-3 lg:grid-cols-6">
-				{logos.map((company, index) => (
+		<div className="mt-14">
+			<motion.p
+				initial={{ opacity: 0, y: 10 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.5, ease: "easeOut" }}
+				className="text-xs text-muted-foreground text-center mb-2 sm:text-left">
+				Making devs more productive at
+			</motion.p>
+			<div className="mt-4 flex flex-wrap items-center gap-6 justify-center sm:justify-start">
+				{logos.map((logo, index) => (
 					<motion.div
-						key={index}
-						initial={{ opacity: 0, y: 20 }}
+						key={logo}
+						initial={{ opacity: 0, y: 10 }}
 						animate={{ opacity: 1, y: 0 }}
-						transition={{
-							duration: 0.5,
-							delay: index * 0.1,
-							ease: "easeOut",
-						}}
-						className="flex items-center justify-center">
-						{/* eslint-disable @next/next/no-img-element */}
-						<img
-							src={company.logo || "/placeholder.svg"}
-							alt={company.name}
-							className="h-10 w-auto opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"
+						transition={{ duration: 0.5, delay: index * 0.1, ease: "easeOut" }}>
+						<Image
+							width={0}
+							height={0}
+							className="h-5 w-auto overflow-clip opacity-70 dark:invert"
+							src={`/logos/${logo.toLowerCase().replace(/\s+/g, "-")}.svg`}
+							alt={`${logo} Logo`}
 						/>
 					</motion.div>
 				))}

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

@@ -5,5 +5,4 @@ export * from "./faq-section"
 export * from "./features"
 export * from "./install-section"
 export * from "./testimonials"
-export * from "./user-logos"
 export * from "./whats-new-button"

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

@@ -50,7 +50,8 @@ export function InstallSection({ downloads }: InstallSectionProps) {
 								Install Roo Code now
 							</h2>
 							<p className="mt-6 text-lg text-muted-foreground">
-								Install from the VSCode Marketplace or the CLI in minutes, then bring your own AI model.
+								Install from the VS Code Marketplace or the CLI in minutes, then bring your own AI
+								model.
 								<br />
 								Roo Code is also compatible with all VSCode forks.
 							</p>
@@ -62,13 +63,15 @@ export function InstallSection({ downloads }: InstallSectionProps) {
 									target="_blank"
 									className="group relative inline-flex w-full items-center justify-center gap-3 rounded-xl bg-gradient-to-r from-blue-600 to-cyan-600 px-6 py-4 text-lg font-medium text-white shadow-lg transition-all duration-300 hover:from-blue-700 hover:to-cyan-700 hover:shadow-xl hover:shadow-blue-500/25 dark:from-blue-500 dark:to-cyan-500 dark:hover:from-blue-600 dark:hover:to-cyan-600 sm:w-auto sm:px-8 sm:text-xl">
 									<div className="absolute -inset-px rounded-xl bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-400 opacity-0 blur transition-opacity duration-500 group-hover:opacity-70" />
-									<div className="relative flex items-center gap-3">
-										<VscVscode className="h-6 w-6 sm:h-7 sm:w-7" />
-										<span className="flex flex-wrap items-center gap-2">
-											<span>From VSCode Marketplace</span>
+									<div className="relative flex flex-col md:flex-row items-center md:gap-3">
+										<VscVscode className="h-6 w-6 shrink-0" />
+										<span className="flex flex-col md:flex-row items-center md:gap-2">
+											<span>From VS Code Marketplace</span>
 											{downloads !== null && (
 												<>
-													<span className="font-black opacity-60">&middot;</span>
+													<span className="font-black opacity-60 hidden md:inline">
+														&middot;
+													</span>
 													<span className="opacity-90">{downloads} Downloads</span>
 												</>
 											)}