import { Linkedin, Twitter } from "lucide-react" import Image from "next/image" import Link from "next/link" import type { AppRoute } from "@/lib/routes" type FooterLink = { href: AppRoute title: string } const componentLinks = [ { href: "/components/buttons", title: "Buttons" }, { href: "/components/forms", title: "Forms" }, { href: "/components/navigation", title: "Navigation" }, { href: "/components/feedback", title: "Feedback" }, ] satisfies readonly FooterLink[] const resourceLinks = [ { href: "/docs", title: "Documentation" }, { href: "/examples", title: "Examples" }, { href: "/blocks", title: "Blocks" }, { href: "/changelog", title: "Changelog" }, ] satisfies readonly FooterLink[] const companyLinks = [ { href: "/about", title: "About" }, { href: "/blog", title: "Blog" }, { href: "/roadmap", title: "Roadmap" }, { href: "/contact", title: "Contact" }, ] satisfies readonly FooterLink[] const legalLinks = [ { href: "/terms", title: "Terms & Conditions" }, { href: "/privacy", title: "Privacy Policy" }, { href: "/license", title: "License" }, ] satisfies readonly FooterLink[] export function Footer() { return (

{/* Image banner with giant VCOS text on the border */}

{/* Background image */}

{/* Giant VCOS text — straddles the image/footer boundary */}

VCOS

{/* Footer content — light bg */}

) }

Footer Variant 2

Preview

Mega Footer

VCOS

Usage

On this page