Replace Lucide icons with Remix Icon and add footer social links

components/sections/developers-section.tsx

@@ -1,4 +1,4 @@
-import { Code2, Gauge, Workflow } from "lucide-react"
+import { RiCodeSSlashLine, RiSpeedUpLine, RiFlowChart } from "@remixicon/react"
 
 import { SectionHeading } from "@/components/shared/section-heading"
 import { cn } from "@/lib/utils"
@@ -14,17 +14,17 @@ export function DevelopersSection() {
       <div className="grid md:grid-cols-3">
         {[
           {
-            icon: Code2,
+            icon: RiCodeSSlashLine,
             title: "Change one base URL",
             text: "Keep your existing OpenAI-compatible SDK, payloads, and streaming logic.",
           },
           {
-            icon: Workflow,
+            icon: RiFlowChart,
             title: "Set a routing policy",
             text: "Choose a model directly or let Vertex optimize for cost, quality, or latency.",
           },
           {
-            icon: Gauge,
+            icon: RiSpeedUpLine,
             title: "Observe every request",
             text: "Trace performance and spend across models, applications, and environments.",
           },

components/sections/features/routing-activity.tsx

@@ -1,37 +1,37 @@
 "use client"
 
-import { Activity, CircleCheck, Route, ShieldCheck, Zap } from "lucide-react"
+import { RiPulseLine, RiCheckboxCircleLine, RiRouteLine, RiShieldCheckLine, RiFlashlightLine } from "@remixicon/react"
 
 import { AnimatedList } from "@/components/ui/animated-list"
 import { cn } from "@/lib/utils"
 
 const routingEvents = [
   {
-    icon: <Route className="size-4" />,
+    icon: <RiRouteLine className="size-4" />,
     title: "Routed to Claude Sonnet",
     meta: "342ms · 8.2k tokens",
     accent: "bg-blue-600/15 text-blue-600 dark:text-blue-400",
   },
   {
-    icon: <Zap className="size-4" />,
+    icon: <RiFlashlightLine className="size-4" />,
     title: "Prompt cache hit",
     meta: "Saved $0.018 · 42ms",
     accent: "bg-amber-500/15 text-amber-500",
   },
   {
-    icon: <Activity className="size-4" />,
+    icon: <RiPulseLine className="size-4" />,
     title: "Latency policy applied",
     meta: "Gemini Flash · 118ms",
     accent: "bg-blue-500/15 text-blue-500",
   },
   {
-    icon: <CircleCheck className="size-4" />,
+    icon: <RiCheckboxCircleLine className="size-4" />,
     title: "Fallback completed",
     meta: "OpenAI → Mistral · 621ms",
     accent: "bg-emerald-500/15 text-emerald-500",
   },
   {
-    icon: <ShieldCheck className="size-4" />,
+    icon: <RiShieldCheckLine className="size-4" />,
     title: "Guardrail passed",
     meta: "No sensitive data detected",
     accent: "bg-cyan-500/15 text-cyan-500",

components/sections/hero-section.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight } from "lucide-react"
+import { RiArrowRightLine } from "@remixicon/react"
 
 import { FrameCrosses } from "@/components/shared/frame-crosses"
 
@@ -25,7 +25,7 @@ export function HeroSection() {
             href="#pricing"
             className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-sm bg-blue-600 px-6 text-sm font-medium text-white shadow-[0_10px_32px_rgba(23,61,166,.32)] transition hover:-translate-y-0.5 hover:bg-blue-500 sm:w-auto"
           >
-            Get your API key <ArrowRight className="size-4" />
+            Get your API key <RiArrowRightLine className="size-4" />
           </a>
           <a
             href="#models"

components/sections/pricing-section.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useState } from "react"
-import { Check } from "lucide-react"
+import { RiCheckLine } from "@remixicon/react"
 
 import { SectionHeading } from "@/components/shared/section-heading"
 import { cn } from "@/lib/utils"
@@ -94,7 +94,7 @@ export function PricingSection() {
               <ul className="mt-7 space-y-3">
                 {plan.features.map((feature) => (
                   <li key={feature} className="flex items-start gap-2.5 text-sm text-muted-foreground">
-                    <Check className="mt-0.5 size-4 shrink-0 text-blue-600 dark:text-blue-400" />
+                    <RiCheckLine className="mt-0.5 size-4 shrink-0 text-blue-600 dark:text-blue-400" />
                     {feature}
                   </li>
                 ))}

components/sections/reliability-section.tsx

@@ -1,4 +1,4 @@
-import { LockKeyhole } from "lucide-react"
+import { RiLock2Line } from "@remixicon/react"
 
 import { Ripple } from "@/components/ui/ripple"
 import { cn } from "@/lib/utils"
@@ -9,7 +9,7 @@ export function ReliabilitySection() {
       <Ripple className="opacity-40" mainCircleSize={180} numCircles={9} />
       <div className="relative z-10 mx-auto max-w-3xl">
         <div className="mx-auto flex size-12 items-center justify-center rounded-2xl border bg-background shadow-sm">
-          <LockKeyhole className="size-5 text-blue-600" />
+          <RiLock2Line className="size-5 text-blue-600" />
         </div>
         <h2 className="mt-6 text-balance text-3xl font-medium tracking-[-0.045em] sm:text-4xl">
           Reliability built into every request.