Footer

A full-width site footer with the Zostel logo, organized link columns for brand, resources, and social media, plus a copyright line.

Preview

Usage

tsx
import { Footer } from "zostel-ui";

<Footer
  columns={[
    {
      title: "Brand",
      links: [
        { label: "About Us", href: "/about" },
        { label: "Careers", href: "/careers" },
        { label: "Blog", href: "/blog" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Resources",
      links: [
        { label: "FAQs", href: "/faqs" },
        { label: "Terms of Service", href: "/terms" },
        { label: "Privacy Policy", href: "/privacy" },
      ],
    },
  ]}
  socialLinks={[
    { platform: "instagram", href: "https://instagram.com/zostel" },
    { platform: "twitter", href: "https://twitter.com/zostel" },
    { platform: "youtube", href: "https://youtube.com/zostel" },
  ]}
  copyright={`2013-${new Date().getFullYear()} Zostel Hospitality Pvt. Ltd.`}
/>

Props

columns
Type: { title: string; links: { label: string; href: string }[] }[]
Default:

Link columns to display in the footer

socialLinks
Type: { platform: string; href: string }[]
Default:

Social media link icons

copyright
Type: string
Default:

Copyright text displayed at the bottom

logo
Type: ReactNode
Default:

Custom logo element (defaults to Zostel logo)

tagline
Type: string
Default:

Short tagline below the logo

className
Type: string
Default:

Additional CSS classes