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

# 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

```tsx theme={null}
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`:

```typescript theme={null}
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)

```tsx theme={null}
<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:

```typescript theme={null}
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

<ParamField path="facebook" type="string">
  Facebook icon from lucide-react
</ParamField>

<ParamField path="linkedin" type="string">
  LinkedIn icon from lucide-react
</ParamField>

<ParamField path="youtube" type="string">
  YouTube icon from lucide-react
</ParamField>

<ParamField path="instagram" type="string">
  Instagram icon from lucide-react
</ParamField>

<ParamField path="tiktok" type="string">
  Custom TikTok SVG icon component
</ParamField>

## Newsletter Form

The newsletter section includes an email input and subscribe button:

```tsx theme={null}
<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>
```

<Note>
  The form currently uses `type="button"` and does not have submit functionality. You'll need to add form handling logic.
</Note>

## Contact Display

Contact information is displayed with icon prefixes:

```tsx theme={null}
<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:

```tsx theme={null}
{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:

```tsx theme={null}
{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:

```tsx theme={null}
<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:

```typescript theme={null}
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`