Vejo que as notificacoes estao empurrando todo o bloco pro lado e o conteudo fica cortado na esquerda. Vou arrumar o posicionamento.
O problema e que as notificacoes com absolute e -left-2 / lg:-left-10 saem do container e empurram tudo. Preciso que o celular fique centrado e as notificacoes sobreponham sem afetar o fluxo. Vou usar o celular como referencia relative e posicionar as notificacoes relativas a ele:
Agora preciso fechar a div do phone corretamente, ja que movi as notificacoes pra dentro dele:
A estrutura esta correta -- as notificacoes agora estao dentro do div do celular (que tem relative e overflow-hidden). Mas o overflow-hidden no celular vai cortar as notificacoes! Preciso tirar o overflow-hidden do phone:
Agora as notificacoes sao absolute dentro do div do celular (relative), posicionadas com -left-[140px] (no mobile) e -left-[160px] (no sm:), sobrepondo o celular pela esquerda. Como estao dentro do phone, nao afetam o fluxo do layout nem empurram nada pro lado. Removi o overflow-hidden pra garantir que as notificacoes aparecem fora da borda do celular.
Esse erro "mt is not iterable" e um bug interno do runtime do v0, nao do seu codigo. Mas vou verificar se a estrutura do hero-section esta correta pois movi as notificacoes pra dentro do phone e pode ter fechamento de tags errado.
O problema e que FadeIn esta aninhado dentro de outro FadeIn. As notificacoes usam FadeIn dentro do phone que ja esta dentro de um FadeIn. Vou verificar o componente FadeIn e remover os FadeIn aninhados das notificacoes:
O FadeIn parece ok. O erro "mt is not iterable" e do runtime do v0, nao do codigo. Mas pra garantir que nao ha conflito, vou remover os FadeIn internos das notificacoes ja que estao dentro de um FadeIn pai:
Agora vou adicionar a animacao notification-card no CSS:
Simplifiquei as notificacoes removendo os FadeIn aninhados dentro do FadeIn pai (que provavelmente causava o erro), substituindo por um .map() com animacao CSS pura (notification-card usando fadeSlideIn). Cada card recebe um animationDelay escalonado. O erro "mt is not iterable" deve sumir agora.
The code returns the following error:
Uncaught TypeError: mt is not iterable
at va (https://vm-pdptfshovsp84jtzl6hx70.vusercontent.net/v0-runtime-dist.js:1874:16103)
at RootLayout (app/layout.tsx:27:9)
25 | <body className={`${inter.variable} font-sans antialiased overflow-x-hidden`}>
26 | {children}
> 27 | <Analytics />
| ^
28 | </body>
29 | </html>
30 | )
Revise the code to address the error.
You can send messages while the preview loads