The preview failed to compile with the following build error:
./components/video/CodexVsClaude.tsx:4:1
Module not found: Can't resolve './FilmGrain'
2 | import { useEffect, useState, useCallback } from 'react'
3 | import { motion } from 'framer-motion'
> 4 | import { FilmGrain } from './FilmGrain'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | import { FilmBurn } from './FilmBurn'
6 | import { Block1Hook } from './Block1Hook'
7 | import { Block2Codex } from './Block2Codex'
Import trace:
Server Component:
./components/video/CodexVsClaude.tsx
./app/page.tsx
https://nextjs.org/docs/messages/module-not-found
Revise the code to address the error.
I was previewing: /
Vou criar o componente FilmGrain que está faltando. Ele é usado como um overlay sutil de grão de filme.
Criei o componente FilmGrain que estava faltando em components/video/FilmGrain.tsx. Ele renderiza um overlay sutil de grão de filme usando um SVG inline com feTurbulence (sem dependências externas), com uma animação leve de deslocamento via steps() para simular a vibração de um filme analógico. A API casa com o uso em CodexVsClaude.tsx (<FilmGrain />) e aceita opcionalmente um opacity para ajustes finos.
Vou analisar tudo e fazer as correções. Os problemas principais são:
--font-bebas, --font-bricolage, --font-playfair, --font-geist) que não existem no layout.tsx — por isso os tamanhos estão errados e textos cortando.Plano: consolidar em 2 fontes (Barlow Condensed para display + Spectral para editorial) + Fira Code só para code blocks. Gerar 2 imagens estilo papel-designer, remover capítulos, ajustar tamanhos.
Agora tenho o contexto completo. Vou fazer as correções:
Estratégia das 2 fontes:
Barlow Condensed (display) — para tudo em MAIÚSCULAS, condensado, impacto: headlines, números grandes, badges/labels, nomes de blocosSpectral (serif) — para corpo, citações, itálicos editoriais: descrições, quotes, frases de efeitoComeço atualizando layout.tsx (remover fontes não usadas), globals.css (alias de todas variáveis órfãs), e em paralelo edito os blocks.
Agora vou criar um componente compartilhado LogoStamps.tsx que servirá como fonte única para os selos de papel (substitui as SVGs inline duplicadas em todos os blocks):
Agora vou atualizar o CodexVsClaude.tsx (remover labels de capítulo no top bar e corrigir --font-geist):
Agora removo os labels "Capítulo XX" dos 4 blocks que os contêm:
Capítulos removidos. Agora substituo os logos SVGs inline pelos selos de papel nos blocks que mais aparecem (Block1Hook scene 3, Block45Synthesis scenes 4-5, e Block6CTA). Também ajusto tamanhos para textos que estão cortando:
Agora atualizo o Block45Synthesis para usar os stamps e remover SVGs inline:
Agora atualizo a tabela do Block5 para usar LogoStampInline e ajusto fontes pendentes:
Agora atualizo o Block6CTA — substituir SVGs pelos selos e reduzir tamanhos para evitar overflow no scene 1:
Agora ajusto o Block6 scene 1 (CTA claro) para evitar overflow + substituo logos pelos stamps:
Compilação rodando sem erros (✓ Compiled in 97ms) — os erros do FilmGrain no log são antigos (já corrigidos). Tudo certo!
Resumo das mudanças:
Sistema de 2 fontes (layout.tsx + globals.css): consolidei tudo em Barlow Condensed (display, para MAIÚSCULAS, condensado, headlines, números grandes, badges, rótulos UI — qualquer coisa com impacto) + Spectral (editorial, para corpo, citações, itálicos poéticos, descrições). Fira Code permanece só dentro dos code blocks. Aliasei todas as 7 variáveis órfãs (--font-bebas, --font-bricolage, --font-playfair, --font-geist, --font-sans, --font-label, --font-hand) — antes elas caíam em fonte de sistema, gerando os textos cortados.
Logos estilo papel-designer (LogoStamps.tsx): criei um componente reutilizável que serve dois selos JPG gerados em /public/logos/ — Codex em tinta âmbar oxidado sobre papel envelhecido, Claude em verde-floresta com o starburst (asterisco) correto da Anthropic. Substituí todos os SVGs inline pelos selos em Block1Hook (confronto), Block45Synthesis (síntese + tabela) e Block6CTA (cenas escura e clara), com pequenas rotações para vibe editorial impressa.
Capítulos removidos: "Capítulo 01 — O Paradoxo", "Capítulo 02 — A Velocidade", "Capítulo 03 — A Qualidade", "Capítulo 04 — A Síntese", "Capítulo 05 — Quando Usar" — todos fora. No top-bar do frame, simplifiquei os labels para "Hook", "Codex", "Claude", "Síntese", "Cola", "CTA".
Textos cortados corrigidos: reduzi tamanhos extremos no Block6CTA cena 1 (COMENTA 20cqw → 15cqw, "DADOS" 16cqw → 11cqw, paragráfo 4cqw → 3.2cqw, pílula "Me segue" mais compacta), e no Block1Hook scene 3 baixei "vs" 11cqw → 10cqw e ajustei gap. Como agora as fontes existem de verdade, as métricas batem com o esperado.