Footer

Vissza
A footer komponens a weboldal láblécéhez biztosít konzisztens megjelenést.

Élő példa

A footer a BÜCHL kék háttérrel és fehér szöveggel jelenik meg:

Struktúra

A footer két fő részből áll:

1. Fő tartalom (4 oszlop)

  • Céginformációk és közösségi média linkek
  • Szolgáltatások listája
  • Cégre vonatkozó linkek
  • Kapcsolati információk és CTA gomb

2. Alsó sáv

  • Copyright szöveg
  • Jogi linkek (adatvédelem, impresszum, ÁSZF)

Design elvek

Színek

  • Háttér: BÜCHL kék (#002F5C)
  • Fő szöveg: Fehér (#FFFFFF)
  • Másodlagos szöveg: Átlátszó fehér (white/80)
  • Linkek: Átlátszó fehér hover effekttel
  • CTA gomb: BÜCHL zöld háttér kék szöveggel

Tipográfia

  • Címek: font-semibold text-lg
  • Szöveg: text-sm
  • Copyright és jogi szöveg: text-sm text-white/60

Akadálymentesség

  • Megfelelő színkontraszt a fehér szöveg és kék háttér között
  • Szemantikus HTML elemek (footer, nav, address)
  • Screen reader barát linkek (sr-only osztályok)
  • Fókusz státuszok és hover effektek

Használat

A footer komponens egyszerűen beilleszthető a default layout-ba: 

<template>
  <div>
    <!-- Page content -->
    <slot />
    <!-- Footer -->
    <TheFooter />
  </div>
</template>

Reszponzív viselkedés

Mobil (< 768px)

  • 1 oszlopos elrendezés
  • Függőleges stack a fő szekcióknál
  • Középre rendezett alsó sáv

Tablet (768px - 1024px)

  • 2 oszlopos elrendezés
  • Kompaktabb padding
  • Alsó sáv flex-row

Desktop (> 1024px)

  • 4 oszlopos elrendezés
  • Teljes padding és térközök
  • Optimális megjelenés