Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ashcroft08/provesa-web/llms.txt

Use this file to discover all available pages before exploring further.

​
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 />

<script>
  let footerData = {
    info: {
      description: 'Distribuidor mayorista de productos de consumo masivo en La Concordia.',
      address: 'Av. Principal 123, La Concordia, Ecuador',
      phone: '(02) 2345-678',
      mobile: '0999-123-456',
      email: 'info@provesa.com.ec'
    },
    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)
  • 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:
IconUsage
MapPinAddress locations
PhoneLandline phone number
SmartphoneMobile phone number
MailEmail address
StoreBranch 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. 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: '(02) 2345-678',
    mobile: '0999-123-456',
    email: 'contacto@provesa.com.ec'
  },
  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

Build docs developers (and LLMs) love

Get started for freeTalk to us