Home page — Site Público Abracaf

A home page do Abracaf é composta por 7 seções RSC independentes em _components/home/. Cada seção é um componente separado importado em page.tsx, mantendo o arquivo de página limpo e as seções desacopladas.

Estrutura de seções

_components/home/
├── home-hero.tsx              ← Hero com vídeo + headline + stats bar
├── home-hero-video.tsx        ← Player de vídeo ('use client')
├── home-pillars.tsx           ← 3 pilares da ABRACAF
├── home-extranet-cta.tsx      ← CTA de acesso à intranet
├── home-emplacamento-cta.tsx  ← CTA do sistema de emplacamento
├── home-news.tsx              ← Seção de notícias
├── home-abracaf-tv.tsx        ← ABRACAF TV
└── home-partners.tsx          ← Parceiros

Todas as seções são RSC por padrão — nenhum 'use client' exceto home-hero-video.tsx.

Hero com vídeo

O hero tem fundo bg-abc-navy-900 e exibe um vídeo em loop. A estrutura de camadas, de baixo para cima, é:

<section bg-abc-navy-900>       ← fallback de cor se o vídeo não carregar
  <HeroVideo />                 ← vídeo absoluto, cobre a section inteira
  <div> overlay mobile          ← gradiente de baixo para cima (md:hidden)
  <div> overlay desktop         ← gradiente da esquerda para direita (hidden md:block)
  <div> listras diagonais       ← textura decorativa (pointer-events-none)
  <div> container z-10          ← headline, CTAs, stats bar

HeroVideo

home-hero-video.tsx é 'use client' porque alguns browsers bloqueiam o atributo autoPlay declarado no HTML. A solução é acionar video.play() imperativamente via useEffect:

'use client';
import { useEffect, useRef } from 'react';

export function HeroVideo() {
  const ref = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const video = ref.current;
    if (!video) return;
    video.muted = true;
    video.load();
    video.play().catch((err) => console.error('[HeroVideo] autoplay bloqueado:', err));
  }, []);

  return (
    <video
      ref={ref}
      aria-hidden
      loop
      playsInline
      preload="auto"
      poster="/images/abracaf/hero-bg-poster.png"
      className="pointer-events-none absolute inset-0 h-full w-full object-cover"
    >
      <source src="/Video/abracaf/videoplayback.mp4" type="video/mp4" />
    </video>
  );
}

O arquivo de vídeo fica em apps/web/public/Video/abracaf/. A pasta Video é excluída do matcher do middleware — ver Site Público Extranets.

Gradiente responsivo com dois overlays

Tailwind não suporta responsive prefixes em atributos style={} inline. Para ter gradientes diferentes no mobile e desktop, são usados dois <div> separados com classes de visibilidade:

{/* Mobile: gradiente de baixo para cima — texto fica na parte inferior */}
<div
  aria-hidden
  className="pointer-events-none absolute inset-0 md:hidden"
  style={{
    background: 'linear-gradient(to top, rgba(11,38,80,0.97) 0%, rgba(11,38,80,0.85) 40%, rgba(11,38,80,0.5) 70%, rgba(11,38,80,0.2) 100%)',
  }}
/>

{/* Desktop: gradiente da esquerda para direita — texto fica à esquerda */}
<div
  aria-hidden
  className="pointer-events-none absolute inset-0 hidden md:block"
  style={{
    background: 'linear-gradient(to right, rgba(11,38,80,0.95) 0%, rgba(11,38,80,0.8) 30%, rgba(11,38,80,0.05) 58%, transparent 70%)',
  }}
/>

Stats bar e layout de grid

O container principal do hero usa display: grid com gridTemplateRows: '1fr auto' para manter a headline centralizada verticalmente e as stats fixas no rodapé:

<div
  className="max-w-extranet-container relative z-10 mx-auto w-full ..."
  style={{ display: 'grid', gridTemplateRows: '1fr auto', minHeight: 760 }}
>
  <div style={{ alignSelf: 'center' }}>  {/* linha 1: headline + CTAs */}  </div>
  <div>  {/* linha 2: stats bar */}  </div>
</div>

Padrão carrossel mobile / grid desktop

home-pillars.tsx e home-news.tsx usam o mesmo padrão: AutoCarousel no mobile e layout de grid no desktop.

{/* Mobile: carrossel automático */}
<AutoCarousel className="md:hidden">
  {ITEMS.map((item) => (
    <Card key={item.id} {...item} />
  ))}
</AutoCarousel>

{/* Desktop: grid 3 colunas */}
<div className="hidden md:grid md:grid-cols-3 gap-extranet-gap">
  {ITEMS.map((item) => (
    <Card key={item.id} {...item} />
  ))}
</div>

O componente AutoCarousel é importado de @kit/ui/auto-carousel. Ver AutoCarousel para a documentação completa.

Conteúdo estático

Todo o conteúdo das seções (pilares, notícias, parceiros) é hardcoded como constantes no topo de cada arquivo de componente. Quando o backend de conteúdo for integrado, substituir as constantes por chamadas ao servidor.

Itens ocultos no mobile

Dois elementos são ocultos em mobile por questão de espaço:

• Eyebrow do hero (home-hero.tsx): a linha "ASSOCIAÇÃO BRASILEIRA DOS CONCESSIONÁRIOS DE AUTOMÓVEIS FIAT · DESDE 1977" usa hidden md:flex
• Mini-stats do emplacamento CTA (home-emplacamento-cta.tsx): "Atualização diária" e "198 concessionárias" usam hidden lg:flex