> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Footer

> How to customize the site footer, including links, social media icons, and copyright text.

The site footer provides consistent navigation and information across all pages. It includes link groups, social media icons, and legal text.

## File Location

The footer component is located at `src/components/shared/footer.tsx`. Unlike the header, the footer does not have a separate mobile version; it uses responsive Tailwind CSS classes to adapt to different screen sizes.

## How to Customize the Footer

The footer's content is mostly hardcoded directly into the JSX, making it easy to find and edit specific parts.

<Steps>
  <Step title="Editing the Brand Description">
    You can change the mission statement or description text displayed below the logo by editing the `<p>` tag in the "Brand Section".

    ```tsx src/components/shared/footer.tsx theme={null}
    // ...
    <div className="col-span-2 lg:col-span-2">
    <Logo className="mb-4" iconClassName="h-8 w-8" />
    <p className="text-sm text-muted-foreground max-w-xs mb-4">
      Your company's mission statement or a brief tagline goes here.
    </p>
    // ...
    ```
  </Step>

  <Step title="Customizing Social Media Links">
    Social media links are a series of `<Button>` components containing `<a>` tags and icons from the `react-icons` library.

    To change a link, edit the `href` attribute. To change an icon, import a new one from `react-icons` and replace the existing one (e.g., `<BsTwitterX />`).

    ```tsx src/components/shared/footer.tsx theme={null}
    // ...
    <div className="flex items-center gap-2">
    <Button variant="ghost" size="icon" className="h-9 w-9" asChild>
      <a
        href="https://your-twitter-url.com" // Change this URL
        target="_blank"
        rel="noopener noreferrer"
        aria-label="X (Twitter)"
      >
        <BsTwitterX className="h-4 w-4" /> {/* Change this icon if needed */}
      </a>
    </Button>
    {/* ... other icons */}
    </div>
    ```

    <Info>
      The footer uses icons from the `react-icons` library. While this example uses Bootstrap Icons (`react-icons/bs`), you can use any icon from the library by changing the `import` statement at the top of the file.

      For a detailed guide on using different icon libraries and optimizing performance, see the **[Icons documentation](/customization-guides/branding/icons)**.
    </Info>
  </Step>

  <Step title="Editing Link Groups">
    The footer contains four link groups: "Product", "Resources", "Company", and "Legal". All links are hardcoded as `<Link>` (for internal pages) or `<a>` (for external pages) components.

    To add, remove, or edit a link, simply modify the `<li>` elements within the desired group.

    ```tsx src/components/shared/footer.tsx theme={null}
    // ...
    <div>
    <h3 className="font-semibold mb-4">Company</h3> {/* Column Title */}
    <ul className="space-y-3">
      <li>
        <Link
          href="/about" // Change this URL
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          About Us {/* Change this Text */}
        </Link>
      </li>
      {/* ... other links */}
    </ul>
    </div>
    ```

    <Note>
      To edit the **content** of the pages in the "Legal" section (like Terms of Service or Privacy Policy), please see the **[Legal Pages documentation](/customization-guides/content-management/legal-pages)**.
    </Note>
  </Step>

  <Step title="Updating the Copyright Text">
    The copyright notice is located in the "Bottom Bar" section. You can update the year and company name by editing the text in the `<p>` tag.

    ```tsx src/components/shared/footer.tsx theme={null}
    // ...
    <p className="text-sm text-muted-foreground">
    © {new Date().getFullYear()} YourCompanyName. All rights reserved.
    </p>
    // ...
    ```

    <Tip>
      Using `{new Date().getFullYear()}` will automatically display the current year.
    </Tip>
  </Step>
</Steps>