Footer Component

Comprehensive footer with brand info, contact details, newsletter, and social links

The Footer component provides a feature-rich footer section with brand information, contact details, location listings, newsletter subscription, and social media links.

Features

• Responsive multi-column grid layout
• Brand description with logo
• Newsletter subscription form
• Contact information (email, phone)
• Multiple location support
• Social media icon links
• Legal links section
• Custom TikTok SVG icon

Usage

import { Footer } from '../components/Footer';

function App() {
  return (
    <div>
      {/* Your page content */}
      <Footer />
    </div>
  );
}

Component Props

The Footer component does not accept any props. It’s a self-contained component that reads data from siteContent.brand.

Data Structure

The Footer expects the following data structure from siteContent:

const siteContent = {
  brand: {
    name: string;           // Company name
    description: string;    // Short brand description
    contact: {
      email: string;
      phone: string;
      locations: Array<{
        country: string;
        address: string;
      }>;
    };
    social: {
      socialLinks: Array<{
        icon: string;       // Icon identifier
        href: string;       // Social media URL
        label: string;      // Accessibility label
      }>;
    };
  },
  newsletter: {
    title: string;
    description: string;
    placeholder: string;
    buttonText: string;
  }
};

Layout Structure

The footer uses a responsive grid with 4 columns:

1. Brand & Newsletter (Column 1)
2. Contact Information (Column 2)
3. Locations (Column 3)
4. Legal Links (Column 4)

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
  {/* 4 columns */}
</div>

Social Media Icons

The component includes a dynamic icon mapper function:

const getSocialIcon = (iconName: string) => {
  switch(iconName) {
    case 'facebook': return <Facebook className="w-5 h-5" />;
    case 'linkedin': return <Linkedin className="w-5 h-5" />;
    case 'youtube': return <Youtube className="w-5 h-5" />; 
    case 'instagram': return <Instagram className="w-5 h-5" />;
    case 'tiktok': return <TikTokIcon className="w-5 h-5" />;
    default: return null;
  }
};

Supported Icons

facebook · string

Facebook icon from lucide-react

linkedin · string

LinkedIn icon from lucide-react

youtube · string

YouTube icon from lucide-react

instagram · string

Instagram icon from lucide-react

tiktok · string

Custom TikTok SVG icon component

Newsletter Form

The newsletter section includes an email input and subscribe button:

<form className="flex flex-col sm:flex-row gap-2">
  <input 
    type="email" 
    placeholder={siteContent.newsletter?.placeholder} 
    className="flex-1 bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm text-white focus:outline-none focus:border-brand-green/50 placeholder:text-white/20"
  />
  <button 
    type="button" 
    className="bg-brand-green text-brand-dark font-bold text-xs uppercase px-4 py-2 rounded-lg hover:bg-white hover:text-brand-green transition-colors"
  >
    {siteContent.newsletter?.buttonText}
  </button>
</form>

The form currently uses type="button" and does not have submit functionality. You’ll need to add form handling logic.

Contact Display

Contact information is displayed with icon prefixes:

<li className="flex items-center text-glass-muted hover:text-white transition-colors">
  <Mail className="h-5 w-5 mr-2 text-brand-green shrink-0" />
  <span>{brand.contact.email}</span>
</li>
<li className="flex items-center text-glass-muted hover:text-white transition-colors">
  <Phone className="h-5 w-5 mr-2 text-brand-green shrink-0" />
  <span>{brand.contact.phone}</span>
</li>

Locations Section

Multiple locations are mapped and displayed:

{brand.contact.locations?.map((loc, idx) => (
  <li key={idx} className="flex flex-col text-glass-muted hover:text-white transition-colors">
    <span className="font-bold text-brand-green text-xs uppercase mb-1">
      {loc.country}
    </span>
    <span className="text-sm leading-snug">{loc.address}</span>
  </li>
))}

Social Links

Social media links are rendered in the footer bottom:

{brand.social.socialLinks?.map((link, idx) => (
  <a 
    key={idx} 
    href={link.href} 
    className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-brand-green hover:text-brand-dark transition-all duration-300 hover:scale-110"
    aria-label={link.label}
  >
    {getSocialIcon(link.icon)}
  </a>
))}

Copyright Notice

Dynamic copyright year with brand name:

<p className="text-xs text-glass-muted">
  &copy; {new Date().getFullYear()} {brand.name}. Todos los derechos reservados.
</p>

Custom TikTok Icon

The component includes a custom SVG component for TikTok:

const TikTokIcon = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1v-3.5a6.37 6.37 0 0 0-.79-.05A6.34 6.34 0 0 0 3.15 15.2a6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.34-6.34V8.71a8.24 8.24 0 0 0 4.76 1.5v-3.4a4.85 4.85 0 0 1-1-.12z"/>
  </svg>
);

Styling

The footer uses these key classes:

• glass-panel: Glassmorphism effect
• border-white/10: Subtle top border
• text-glass-muted: Muted text color for secondary content
• text-brand-green: Green accent for links and icons

Component Location

components/Footer.tsx:11