Footer Component Showcase

Introduction

The Footer component is a versatile and customizable footer element that can adapt to different layouts and themes. Below are examples showcasing various configurations including different column counts, themes, and additional styling options.

Usage Examples

Dark Theme with 3 Columns

<Footer
  columns={3}
  theme='dark'
  content={[
    { title: 'About Us', items: [{ type: 'text', content: 'We are a company...' }] },
    { title: 'Services', items: [{ type: 'link', content: 'Service 1', href: '/service1' }] },
    { title: 'Contact', items: [{ type: 'link', content: 'Email Us', href: 'mailto:info@example.com' }] },
  ]}
  className='w-full'
  utilityLinks={[{ text: 'Privacy Policy', href: '/privacy' }]}
  copyrightText='© 2024 MyCompany. All rights reserved.'
/>

Light Theme with 4 Columns and Custom Class

<Footer
  columns={4}
  theme='light'
  className='custom-footer-class w-full'
  content={[
    { title: 'Company', items: [{ type: 'link', content: 'Home', href: '/' }] },
    { title: 'Products', items: [{ type: 'link', content: 'Product 1', href: '/product1' }] },
    { title: 'Support', items: [{ type: 'text', content: 'Help Center' }] },
    { title: 'Follow Us', items: [{ type: 'social', content: <FaFacebook />, href: 'https://facebook.com' }] },
  ]}
  utilityLinks={[{ text: 'Terms of Service', href: '/terms' }]}
  copyrightText='© 2024 MyCompany. All rights reserved.'
/>

Footer with Only Utility Links

<Footer
  columns={1}
  theme='dark'
  content={[]}
  className='w-full'
  utilityLinks={[{ text: 'Contact Us', href: '/contact' }, { text: 'FAQs', href: '/faqs' }]}
  copyrightText='© 2024 MyCompany. All rights reserved.'
/>