Skip to main content
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. The footer’s content is mostly hardcoded directly into the JSX, making it easy to find and edit specific parts.
1

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”.
src/components/shared/footer.tsx
// ...
<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>
// ...
2

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 />).
src/components/shared/footer.tsx
// ...
<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>
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.
3

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.
src/components/shared/footer.tsx
// ...
<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>
To edit the content of the pages in the “Legal” section (like Terms of Service or Privacy Policy), please see the Legal Pages documentation.
4

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.
src/components/shared/footer.tsx
// ...
<p className="text-sm text-muted-foreground">
© {new Date().getFullYear()} YourCompanyName. All rights reserved.
</p>
// ...
Using {new Date().getFullYear()} will automatically display the current year.