Replace Lucide icons with Remix Icon and add footer social links

components/layout/site-footer.tsx

@@ -1,4 +1,7 @@
+import { RiGithubFill, RiTwitterXFill } from "@remixicon/react"
+
 import { Brand } from "@/components/shared/brand"
+import { Button } from "@/components/ui/button"
 
 export function SiteFooter() {
   return (
@@ -18,8 +21,20 @@ export function SiteFooter() {
           <a className="hover:text-foreground" href="#top">Privacy</a>
         </div>
       </div>
-      <div className="mt-10 text-[11px] text-muted-foreground">
+      <div className="mt-10 flex flex-wrap items-center justify-between gap-4 text-[11px] text-muted-foreground">
         <span>© 2026 Vertex, Inc. All rights reserved.</span>
+        <div className="flex items-center gap-2">
+          <Button asChild variant="ghost" size="icon">
+            <a href="https://github.com" aria-label="GitHub">
+              <RiGithubFill className="size-4" aria-hidden="true" />
+            </a>
+          </Button>
+          <Button asChild variant="ghost" size="icon">
+            <a href="https://x.com" aria-label="X (Twitter)">
+              <RiTwitterXFill className="size-4" aria-hidden="true" />
+            </a>
+          </Button>
+        </div>
       </div>
     </footer>
   )

components/layout/site-header.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronRight } from "lucide-react"
+import { RiArrowDownSLine, RiArrowRightSLine } from "@remixicon/react"
 
 import { ThemeToggle } from "@/components/layout/theme-toggle"
 import { Brand } from "@/components/shared/brand"
@@ -24,7 +24,7 @@ export function SiteHeader() {
               className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
             >
               {label}
-              {label === "Products" && <ChevronDown className="size-3" />}
+              {label === "Products" && <RiArrowDownSLine className="size-3" />}
             </a>
           ))}
         </nav>
@@ -34,7 +34,7 @@ export function SiteHeader() {
             href="#pricing"
             className="hidden h-9 items-center gap-1.5 rounded-sm bg-blue-600 px-4 text-xs font-medium text-white shadow-[0_6px_24px_rgba(23,61,166,.28)] transition hover:bg-blue-500 sm:inline-flex"
           >
-            Get started <ChevronRight className="size-3.5" />
+            Get started <RiArrowRightSLine className="size-3.5" />
           </a>
         </div>
       </div>

components/layout/theme-toggle.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Moon, Sun } from "lucide-react"
+import { RiMoonLine, RiSunLine } from "@remixicon/react"
 import { useTheme } from "next-themes"
 import { useSyncExternalStore } from "react"
 
@@ -20,7 +20,7 @@ export function ThemeToggle() {
       onClick={() => setTheme(isDark ? "light" : "dark")}
     >
       {mounted ? (
-        isDark ? <Sun className="size-4" /> : <Moon className="size-4" />
+        isDark ? <RiSunLine className="size-4" /> : <RiMoonLine className="size-4" />
       ) : (
         <span className="size-4" aria-hidden="true" />
       )}