Prompt

Recrie exatamente este rodapé de estúdio criativo de página única. Esta é uma tarefa de fidelidade, não um redesenho. Implemente o conteúdo, os ativos, o CSS e as interações fornecidos exatamente como estão. Construa apenas esta página de rodapé. Mantenha tudo local; não publique nem faça deploy. Não adicione cabeçalho, hero, cards, formulários, seções, botões, links, animações ou textos extras. Os snapshots de origem anexados abaixo são a especificação autoritativa. Copie-os exatamente, adaptando apenas caminhos de import ou a estrutura do framework se necessário. Não substitua por tipografia aproximada, outro logo, vídeo de banco ou um efeito genérico de olhos que seguem. 1. Aparência geral: a página inteira é um rodapé com uma coluna de informação à esquerda, um logo em script centralizado, uma coluna de texto de contato à direita com três ícones sociais e um vídeo de personagem lavanda. Em larguras de desktop, o vídeo preenche a viewport atrás de todo o conteúdo. No mobile, o conteúdo se empilha e o vídeo aparece depois dele no fluxo normal. Mantenha a composição espaçosa e minimalista, com texto muito escuro e sem tinta, scrim, gradiente, blur ou overlay cobrindo o vídeo. Não há links externos nem destinos de contato reais. Rótulos de navegação, texto de contato, ícones sociais e o logo são elementos estáticos, não âncoras clicáveis. Não invente destinos, e-mails, telefones, ações de WhatsApp ou contas sociais. Não exiba Truus em lugar nenhum. 2. Texto visível exato: preserve ortografia, maiúsculas, pontuação, apóstrofos curvos, asteriscos e quebras de linha. Badge esquerdo: “have a fresh idea?”. Título esquerdo: “imagination” / “meets craft”. Rótulos: “Made”, “Story”, “In the lab”, “Say hey”. Badge direito: “say hey”. Título direito: “let’s team up!” / “bring us your idea*”. Nota: “*good things start with one spark. let’s make yours.”. Ícones sociais na ordem: LinkedIn, Instagram, TikTok, usando os SVGs exatos fornecidos, sem rótulos de texto nem links. O logo central é o SVG script Logoipsum de BrandLogo com viewBox 169×40; fill em currentColor herdando #080909. Não trace nem regenere o logo. 3. Tipografia e cores exatas: títulos em Epilogue Black 900; demais textos em DM Sans Regular 400; use fontes reais e font-synthesis: none. Baixe DMSans-Regular.woff2 e Epilogue-Black.woff2 e sirva localmente com @font-face e font-display: swap. Texto e logo #080909; fundo desktop de fallback #dfe4f2; badge #f7f8fa; fundo mobile #f0eefa. Sem sombras, bordas decorativas, cards ou gradientes. 4. Layout desktop exato (>700px): box-sizing border-box global; body sem margem, min-height 100vh. Footer position relative, min-height 100vh, padding-top 6.54vw, isolation isolate, overflow hidden. Bloco esquerdo: margin-left 8.65vw, width 25vw; badge pill 100px, altura 1.9vw, padding .39vw .61vw, fonte .88vw; título margin-top 1.45vw, fonte 1.66vw peso 900; navegação coluna flex gap .93vw, margin-top 1.3vw, fonte 1.075vw. Logo absoluto left 40.33vw top 7.7vw width 17vw. Bloco direito absoluto left 74.3vw top 6.54vw; nota margin 1.05vw 0 0, fonte .733vw; linha social flex gap 1.43vw, ícones 1.71vw. Mantenha esses valores vw e a colocação exata de três colunas. Camada de vídeo: wrapper absoluto inset 0 z-index -1 pointer-events none; vídeo object-fit cover center atrás do texto, sem canvas de pupila. 5. Layout mobile exato (≤700px), somente dentro de @media(max-width:700px): fundo #f0eefa; footer coluna flex gap 36px, min-height 100svh, padding 40px 24px 0; ordem visual logo, esquerda, direita, vídeo; logo estático width 210px max-width 75%; badges altura 30px fonte 14px; títulos clamp(22px,6.3vw,30px); navegação grade 2 colunas column-gap 24px, fonte 17px, cada rótulo min-height 44px (linha 1 Made/Story, linha 2 In the lab/Say hey); nota max-width 34ch fonte 14px quebra normal; linha social gap 18px, wrappers 44×44px com ícones 30×30px, primeiro wrapper margin-left -7px; wrapper de vídeo relative order 3 width calc(100%+48px) aspect-ratio 4/3 margin-top -16px, full bleed abaixo do conteúdo. 6. Ativo de vídeo exato: use a URL literal completa do CloudFront sem substituir clipe, omitir segmentos, escapar underscores ou alterar o nome. Fonte 1920×1080, 24 fps, ~7.041667s: personagem lavanda peludo segurando um coração rosa em fundo lavanda pálido, olhos em círculos. Baixe como public/footer-background.mp4 e crie public/footer-scrub.mp4 com: ffmpeg -hide_banner -loglevel error -i public/footer-background.mp4 -an -c:v libx264 -preset fast -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart public/footer-scrub.mp4. Preserve dimensões, fps, duração, cores e composição; codificação all-intra para busca aleatória. O elemento deve ter muted, playsInline e preload="auto", sem controles, áudio, poster ou UI de carregamento. 7. Interação exata do mouse no desktop: scrubbing de vídeo — o cursor seleciona um frame em que as pupilas gravadas apontam para o cursor. Não redesenhe pupilas nem anime olhos em CSS. Use a tabela gaze-frames.json fornecida. Ponto médio dos olhos (948,418) em frame 1920×1080; escala cover max(w/1920,h/1080); eyeX = rect.left + rect.width/2 + (948-960)*scale; eyeY = rect.top + rect.height/2 + (418-540)*scale; subtraia do ponteiro; ignore dentro de raio 8px; atan2(dy,dx) normalizado a [0,2π); encontre a linha com menor diferença angular circular; use time + 1/240s; busque só se diferença > 1/48s, houver dado de frame e nenhuma busca em curso; limite a duration - 1/24; coalesça via requestAnimationFrame; não interpole; vídeo desktop começa pausado em 0 e permanece no frame selecionado; recalcule em resize e scroll; listeners passivos, remova tudo no unmount. Cardeais: direita 2.54167s, baixo 0.33333s, esquerda 1.0s, cima 1.70833s. 8. Reprodução mobile: em ≤700px desative o seeking por ponteiro; o vídeo abaixo do conteúdo toca normalmente, mudo e em loop; respeite prefers-reduced-motion pausando; se autoplay indisponível, deixe o frame visível, sem erro nem controles. Use listeners matchMedia para alternar corretamente no breakpoint de 700px. 9. Semântica e metadados: footer com aria-label="Footer"; wrapper de vídeo aria-hidden="true" e pointer-events:none; wrapper do logo role="img" aria-label="Studio logo" com SVG aria-hidden; wrappers sociais com rótulos LinkedIn, Instagram, TikTok. Idioma en. Título: Studio — Footer. Descrição: Fresh ideas, imagination, and creative collaboration. Favicon: mesmo logo /logo.svg com fill #080909. 10. Restrições de implementação: React e TypeScript com CSS comum; referência em app/page.tsx, app/layout.tsx e componente de vídeo client-side. Preserve a fonte fornecida quando o ambiente suportar. Sem biblioteca de animação, framework de UI ou canvas. Use os arquivos-fonte exatos; busque as duas fontes e o vídeo; para public/logo.svg converta fillRule/clipRule para fill-rule/clip-rule e defina #080909, preservando viewBox e path. Faça o build com sucesso e verifique o mapeamento de olhar cardeal, o empilhamento mobile, a quebra em 320px/390px e o layout desktop acima de 700px. Não altere conteúdo ao validar. Mantenha tudo local; não publique nem faça deploy.

Conteúdo relacionado