# Footer Components

This directory contains two footer implementations for different contexts:

## Footer.tsx (Standard)
**Use Case:** Full page layouts (homepage, documentation, etc.)
- Larger horizontal logo (200px)
- Expanded vertical spacing (pt-12 pb-4)
- Center-aligned copyright at bottom
- Full visual prominence

## CompactFooter.tsx (Compact)
**Use Case:** Modal overlays, page provider system
- Small square logo (32px desktop, 28px mobile)
- Minimal height (h-16 on desktop)
- Single-row horizontal layout (desktop)
- 2-column grid layout (mobile)
- Touch-optimized (min-h-[44px] on all links)

## Usage Examples

### Standard Footer
```tsx
import { Footer } from '@/components/shared/Footer';

export default function HomePage() {
  return (
    <div>
      <main>{/* Page content */}</main>
      <Footer />
    </div>
  );
}
```

### Compact Footer
```tsx
import { CompactFooter } from '@/components/shared/CompactFooter';

export default function ModalLayout() {
  return (
    <div className="fixed inset-0 bg-black/90">
      <main className="h-[calc(100vh-4rem)]">{/* Modal content */}</main>
      <CompactFooter />
    </div>
  );
}
```

## Accessibility Features

Both components include:
- Semantic `<footer>` with `role="contentinfo"`
- `<nav>` with `aria-label="Footer navigation"`
- WCAG 2.1 AA compliant touch targets (44px minimum)
- Proper color contrast ratios (4.5:1+)
- Keyboard navigation support
- Descriptive alt text on logos

## Responsive Breakpoints

### CompactFooter
- **Base (< 768px):** Vertical stack with 2-column link grid
- **md (>= 768px):** Horizontal single-row layout

### Footer
- **Base (< 768px):** Vertical stack with centered copyright
- **md (>= 768px):** Horizontal layout with spaced sections
