Biblioteca de componentes v1.10.0 GitHub

Footer

<x-ui.footer>

Rodapé do site: faixa de chamada, colunas de navegação e contato, e a linha legal. Tudo alimentado pelo config/goognet-ui.php.

blade
<x-ui.footer :callout="false">
    <div class="sm:col-span-2 lg:col-span-1">
        <x-ui.text size="sm" class="text-neutral-500">
            CNPJ 00.000.000/0001-00 — Av. Paulista, 1000, São Paulo/SP
        </x-ui.text>
    </div>

    <x-slot:credit>
        <x-ui.text size="sm">
            Feito por
            <x-ui.link href="https://goognet.com.br" external underline="hover">Goognet</x-ui.link>
        </x-ui.text>
    </x-slot:credit>
</x-ui.footer>
blade
<x-ui.footer
    callout-title="Vamos conversar sobre o seu projeto?"
    callout-text="Atendemos de segunda a sexta."
    callout-action="Falar no WhatsApp"
    :validator="false"
/>
blade
<x-ui.footer description="Corte a laser e dobra de chapas sob medida." :callout="false" />
blade
<x-ui.footer logo="https://cdn.simpleicons.org/laravel/FF2D20" :callout="false" />

Props

x-ui.footer

Prop Padrão Aceita
logo null
callout true
callout-title 'Precisa de um orçamento?'
callout-text 'Resposta no mesmo dia útil.'
callout-action 'Solicite um orçamento'
description null
validator true

Personalizar

As três camadas estão explicadas em Começar aqui. Abaixo, o que este componente expõe a cada uma.

Ui::footer()

Partes

part() e replacePart() aceitam: column-title, column-link, base, callout, callout-title, callout-text, brand, description, social, extra, bottom, validator e credit.

Tokens que ele lê

Redefina no @theme do site: --radius-control.

Por que é assim 18 notas
  • A faixa de chamada vem antes dos links: quem chegou ao fim está perguntando o que fazer agora. Os textos são props (callout-title, callout-text, callout-action) e :callout="false" tira a faixa — numa política de privacidade, por exemplo. :validator="false" tira o selo do W3C.
  • Nada é escrito à mão: navegação de goognet-ui.menu, redes de goognet-ui.social, contatos e nome de goognet-ui.company, assinatura de goognet-ui.agency. Coluna sem dado não é renderizada, em vez de sair vazia.
  • O logo do rodapé pode ser definido em goognet-ui.company.footer_logo, em Ui::footer()->defaults(['logo' => 'logo-rodape.svg']), ou pela prop logo, nessa ordem de prioridade crescente. Sem uma versão própria, usa company.logo. O cabeçalho mantém o logo principal. O nome do arquivo é explícito: o sufixo -rodape não é procurado automaticamente.
  • Telefones adicionais entram na lista goognet-ui.company.phones: por exemplo, 'phones' => [env('PHONE_2'), env('PHONE_3')] no arquivo de configuração. A lista aceita quantos números forem necessários. O company.phone existente continua aparecendo primeiro. Goognet\Ui\Support\Phone::companyNumbers() reúne ambos, ignora valores vazios ou sem dígitos e remove números repetidos pela sequência de dígitos, preservando a primeira apresentação. Use o mesmo método nos contatos do site; cada telefone recebe seu próprio link tel: na coluna de contato.
  • E-mails adicionais entram em goognet-ui.company.mails: por exemplo, 'mails' => [env('CONTACT_EMAIL_2'), env('CONTACT_EMAIL_3')]. O company.mail continua primeiro. Goognet\Ui\Support\Email::companyAddresses() reúne os endereços, remove espaços nas pontas, ignora vazios e inválidos e elimina duplicatas sem diferenciar maiúsculas de minúsculas. Cada endereço recebe seu próprio link no rodapé. Use Email::url($email) para gerar o mailto: com caracteres reservados codificados.
  • O e-mail público usa CONTACT_EMAIL no .env, via goognet-ui.company.mail. Evite MAIL: no Linux, essa variável pode conter o caminho da caixa postal do usuário. Em configurações já publicadas, ajuste company.mail para env('CONTACT_EMAIL'), renomeie a chave no .env e recrie o cache de produção com php artisan config:cache.
  • O menu é achatado: a barra esconde uma página dentro de um dropdown, o rodapé não tem onde esconder. Todos os níveis são percorridos — children e groups — e os links sobem para uma lista só. O pai de um dropdown não entra, porque é rótulo e não destino, e um endereço alcançado duas vezes aparece uma. Item com route vazio não tem URL e fica fora: a barra o mostraria, o rodapé não.
  • A assinatura sai de goognet-ui.agency, e o slot credit a substitui quando o crédito é um logo, outra frase ou nada disso. Sem nome na config e sem slot, a linha inteira não é renderizada.
  • O slot padrão vira mais uma coluna na grade — CNPJ, endereço, selo. Conteúdo mais largo se resolve no próprio bloco, com sm:col-span-2.
  • A marca ocupa uma faixa própria, acima de três colunas de largura igual. Como primeira coluna ela ficava com 473px para 280px de conteúdo — 233px de vão morto ao lado, porque foi dimensionada supondo uma descrição que o boilerplate não traz preenchida.
  • O link da política aparece em Institucional, e é descartado dali se o goognet-ui.menu já o listar: um site que o punha na navegação principal mostrava o mesmo link duas vezes no rodapé.
  • O botão da faixa é uma <a> vestida de botão, não um <button> dentro de <a> — conteúdo interativo aninhado é HTML inválido, e o validador do W3C acusa.
  • O link para a política só aparece se a rota privacy existir, então o rodapé não quebra num site que ainda não tem a página.
  • Os alvos das redes sociais são de 44px no mobile e 40px de sm para cima.
  • O bloco legal são duas linhas, cada uma abrindo com o seu filete: copyright e voltar ao topo na primeira; selo e crédito da agência na segunda, cada um numa ponta. Numa linha só, agrupadas, elas liam como um bloco solto num canto.
  • O botão flutuante do WhatsApp é fixo a 12px do canto com 64px, e a última linha é o fim da página. A folga vai embaixo (pb-24), não reservada à direita: reservar largura fazia a barra terminar antes das colunas de cima, e era o desalinhamento visível. Medido em 1280px: sem sobreposição, 22px entre a última linha e o botão.
  • Voltar ao topo usa href="#", o fragmento vazio: leva ao início do documento. O smooth-anchors.js suaviza e mantém a âncora fora da barra de endereço; sem o script, continua funcionando, só que instantâneo.
  • O selo do W3C Validator aponta para a página em que está, não para a raiz do site: url()->current(), que já descarta a query string — parâmetro de rastreio não faz parte do que se valida e quebraria a busca do validador. O rel leva nofollow, porque selo de saída não deve passar ranking.