Footer

Site footer with company information, navigation links, and branch locations

Overview

The Footer component displays company information, quick links, contact details, and branch locations. It adapts its layout based on the data provided, making it flexible for different configurations.

Import

import Footer from '$lib/components/Footer.svelte';

Props

footer · object · default: "{}"

Footer configuration object containing company information and branch locations.

Structure:

{
  info?: {
    description?: string;
    address?: string;
    phone?: string;
    mobile?: string;
    email?: string;
  };
  branches?: Array<{
    id: string;
    name: string;
    address?: string;
  }>;
}

logoUrl · string · default: "''"

Custom logo URL. If not provided, defaults to the built-in PROVESA logo. The logo is displayed with reduced opacity and grayscale effect.

Usage

Basic Usage

<Footer />

With Footer Data

<script>
  let footerData = {
    info: {
      description: 'Distribuidor mayorista de productos de consumo masivo en La Concordia.',
      address: 'Av. Principal 123, La Concordia, Ecuador',
      phone: '[phone]',
      mobile: '0999-123-456',
      email: '[e-mail]'
    },
    branches: [
      { id: '1', name: 'Sucursal Norte', address: 'Calle Norte 456' },
      { id: '2', name: 'Sucursal Sur', address: 'Calle Sur 789' }
    ]
  };
</script>

<Footer footer={footerData} />

Real Example from +layout.svelte

<script>
  import Footer from '$lib/components/Footer.svelte';
  
  let { data } = $props();
</script>

<Footer footer={data?.footer} logoUrl={data?.siteConfig?.logoUrl} />

Layout Structure

The footer is divided into 4 responsive columns:

Column 1: Brand

• Company logo (grayscale with hover effect)
• Company description (if provided)

Column 2: Quick Links

• Inicio (/)
• Catálogo de Productos (/productos)
• Nuestra Historia (/nosotros)
• Concursos y Eventos (/concursos)
• Trabaja con Nosotros (/empleo)

Column 3: Main Office (Conditional)

Displays only if info contains any data:

• Address (with MapPin icon)
• Phone (with Phone icon)
• Mobile (with Smartphone icon)
• Email (with Mail icon)

Column 4: Branches (Conditional)

Displays only if branches array has items:

• List of branch locations
• Each branch shows name and address
• Store icon for each branch

Icons

The component uses icons from lucide-svelte:

Icon	Usage
MapPin	Address locations
Phone	Landline phone number
Smartphone	Mobile phone number
Mail	Email address
Store	Branch locations

Conditional Rendering

Info Section Visibility

The main office column only appears if there’s contact information:

let hasInfo = $derived(
  info && (info.description || info.address || info.phone || info.mobile || info.email)
);

{#if hasInfo}
  <div>
    <h4 class="mb-6 font-bold text-slate-900">Oficina Matriz</h4>
    <!-- Contact details -->
  </div>
{/if}

Branches Section Visibility

Branches column only appears if there are branch locations:

{#if branches.length > 0}
  <div>
    <h4 class="mb-6 font-bold text-slate-900">Sucursales</h4>
    {#each branches as branch (branch.id)}
      <!-- Branch details -->
    {/each}
  </div>
{/if}

Bottom Section

The footer includes a bottom section with:

• Copyright notice with dynamic year: © {new Date().getFullYear()} Provesa SCC
• Links to legal pages:
  • Privacy Policy (/politicas/privacidad)
  • Terms of Service (/politicas/terminos)

Styling

Logo Effect

opacity-80 grayscale transition-all hover:grayscale-0

The logo is displayed in grayscale by default and transitions to full color on hover.

Responsive Grid

grid gap-12 md:grid-cols-4

The footer uses a single column on mobile and expands to 4 columns on medium screens and above.

Link Hover Effects

All links feature a smooth transition to the primary color on hover:

transition-colors hover:text-primary

Example Data Structure

const footerData = {
  info: {
    description: 'Distribuidor mayorista líder en La Concordia desde 2006.',
    address: 'Av. Principal 123, La Concordia, Santo Domingo de los Tsáchilas',
    phone: '[phone]',
    mobile: '0999-123-456',
    email: '[e-mail]'
  },
  branches: [
    {
      id: 'branch-1',
      name: 'Sucursal Centro',
      address: 'Calle Central 456, La Concordia'
    },
    {
      id: 'branch-2',
      name: 'Sucursal Norte',
      address: 'Av. Norte 789, La Concordia'
    }
  ]
};

Accessibility

• Uses semantic <footer> element
• Proper heading hierarchy (h4 for section titles)
• Descriptive icon labels
• Keyboard-accessible links
• High contrast text colors

Dependencies

• lucide-svelte - MapPin, Phone, Smartphone, Mail, Store icons
• $lib/assets/images/provesa-logo.png - Default logo

Related Components

• Navbar - Site navigation component
• RedesSociales - Social media links component