Footer

A responsive footer component with logo, navigation links, social media links, and copyright information

Preview

Footer Component

Features

🎨 Responsive grid layout design
🔗 Social media links integration
📱 Mobile-friendly layout
🌐 Multi-language support
📄 Dynamic navigation sections
©️ Customize copyright information

Usage

Import and use the Footer component in your page:

page.tsx

import Footer from '@/components/footer';
 
export default function Page({ children }) {
  return (
    <>
      {children}
      <Footer />
    </>
  );
}

Customization App Name

You can change the app name by setting the NEXT_PUBLIC_APP_NAME environment variable.

NEXT_PUBLIC_APP_NAME="Your App Name"

Customization Logo

You can change the logo by replacing the public/logo.svg file.

You can customize the navigation sections by setting the footer.navs in the messages/en.json file.

messages/en.json

{
  "footer": {
    "navs": [
      {
        "title": "Product",
        "items": [
          { "name": "Features", "href": "/features" },
          { "name": "Pricing", "href": "/pricing" }
        ]
      },
      {
        "title": "Company",
        "items": [
          { "name": "About", "href": "/about" },
          { "name": "Blog", "href": "/blog" }
        ]
      }
    ]
  }
}

The social media links can be customized by modifying the socials array in the footer component:

const socials = [
  {
    name: 'GitHub',
    href: 'https://github.com/your-repo',
    icon: (props) => <TbBrandGithub {...props} />
  },
  // Add more social links as needed
];

Customization Copyright

You can customize the copyright text by setting the footer.copyright in the messages/en.json file.