feat: integrate security one-pager into website (#5234)

Co-authored-by: Daniel Riccio <[email protected]>
Co-authored-by: Matt Rubens <[email protected]>

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

@@ -1,9 +1,10 @@
-import { Code, CheckCircle, Shield, Users, Zap, Workflow } from "lucide-react"
+import { Code, CheckCircle, Shield, Users, Zap, Workflow, Lock } from "lucide-react"
 
 import { Button } from "@/components/ui"
 import { AnimatedText } from "@/components/animated-text"
 import { AnimatedBackground } from "@/components/homepage"
 import { ContactForm } from "@/components/enterprise/contact-form"
+import { EXTERNAL_LINKS } from "@/lib/constants"
 
 export default async function Enterprise() {
 	return (
@@ -385,6 +386,63 @@ export default async function Enterprise() {
 				</div>
 			</section>
 
+			{/* Security Hook Section */}
+			<section className="py-16">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="rounded-lg border border-border bg-card p-8 shadow-sm">
+						<div className="grid gap-8 md:grid-cols-2 md:items-center">
+							<div>
+								<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20">
+									<Shield className="h-6 w-6 text-blue-500" />
+								</div>
+								<h3 className="mb-4 text-2xl font-bold">Enterprise-Grade Security</h3>
+								<p className="mb-6 text-muted-foreground">
+									Built with security-first principles to meet stringent enterprise requirements while
+									maintaining developer productivity.
+								</p>
+								<ul className="space-y-3">
+									<li className="flex items-center space-x-3">
+										<CheckCircle className="h-5 w-5 text-green-500" />
+										<span>SOC 2 Type I Certified with Type II in observation</span>
+									</li>
+									<li className="flex items-center space-x-3">
+										<CheckCircle className="h-5 w-5 text-green-500" />
+										<span>End-to-end encryption for all data transmission</span>
+									</li>
+									<li className="flex items-center space-x-3">
+										<CheckCircle className="h-5 w-5 text-green-500" />
+										<span>Security-first architecture with explicit permissions</span>
+									</li>
+									<li className="flex items-center space-x-3">
+										<CheckCircle className="h-5 w-5 text-green-500" />
+										<span>Complete audit trails and compliance reporting</span>
+									</li>
+									<li className="flex items-center space-x-3">
+										<CheckCircle className="h-5 w-5 text-green-500" />
+										<span>Open-source transparency for security verification</span>
+									</li>
+								</ul>
+							</div>
+							<div className="flex flex-col items-center justify-center space-y-4">
+								<div className="rounded-lg border border-border bg-secondary/50 p-6 text-center">
+									<Lock className="mx-auto mb-3 h-12 w-12 text-blue-500" />
+									<h4 className="mb-2 text-lg font-semibold">Security-First Design</h4>
+									<p className="text-sm text-muted-foreground">
+										Every feature built with enterprise security requirements in mind
+									</p>
+								</div>
+								<Button size="lg" asChild className="w-full">
+									<a href={EXTERNAL_LINKS.SECURITY} target="_blank" rel="noopener noreferrer">
+										View Security Details
+										<Shield className="ml-2 h-4 w-4" />
+									</a>
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+
 			{/* CTA Section */}
 			<section id="contact" className="bg-secondary/50 py-16">
 				<div className="container mx-auto px-4 sm:px-6 lg:px-8">

apps/web-roo-code/src/components/chromes/footer.tsx

@@ -118,6 +118,15 @@ export function Footer() {
 											Enterprise
 										</Link>
 									</li>
+									<li>
+										<a
+											href={EXTERNAL_LINKS.SECURITY}
+											target="_blank"
+											rel="noopener noreferrer"
+											className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
+											Security
+										</a>
+									</li>
 									<li>
 										<ScrollButton
 											targetId="testimonials"

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

@@ -61,6 +61,13 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 						className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
 						Enterprise
 					</Link>
+					<a
+						href={EXTERNAL_LINKS.SECURITY}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
+						Security
+					</a>
 					<a
 						href={EXTERNAL_LINKS.DOCUMENTATION}
 						target="_blank"
@@ -142,6 +149,14 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 						onClick={() => setIsMenuOpen(false)}>
 						Enterprise
 					</Link>
+					<a
+						href={EXTERNAL_LINKS.SECURITY}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
+						onClick={() => setIsMenuOpen(false)}>
+						Security
+					</a>
 					<a
 						href={EXTERNAL_LINKS.DOCUMENTATION}
 						target="_blank"

apps/web-roo-code/src/lib/constants.ts

@@ -16,6 +16,7 @@ export const EXTERNAL_LINKS = {
 	INTEGRATIONS: "https://docs.roocode.com/community",
 	TUTORIALS: "https://docs.roocode.com/tutorial-videos",
 	MARKETPLACE: "https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline",
+	SECURITY: "https://trust.roocode.com",
 }
 
 export const INTERNAL_LINKS = {