{
  "project": {
    "name": "yuji-immersive-portfolio",
    "description": "Site pessoal ultra imersivo, dark e agressivo visualmente, para divulgar serviços de criação de sites e sistemas web. Estilo e identidade alinhados com gydsstudio.com.br e guilhermeyuji.gydsstudio.com.br, com foco extremo em 3D, animações, interatividade e experiência de 'digital experience studio'.",
    "stack": {
      "framework": "Next.js 14 (App Router)",
      "language": "TypeScript",
      "styling": "TailwindCSS",
      "animations": ["GSAP", "ScrollTrigger", "Framer Motion"],
      "scroll": "Lenis",
      "three_d": "React Three Fiber + Drei + Three.js",
      "shaders": "GLSL + post-processing (bloom, blur, noise)",
      "state_management": "Zustand",
      "utils": ["clsx"]
    },
    "goals": [
      "Criar uma experiência dark, minimalista e agressiva visualmente, com foco em 3D e interação intensa.",
      "Passar a sensação de que o site é uma demo técnica do que o estúdio é capaz de entregar.",
      "Explorar animações em scroll, movimentos de câmera e elementos 3D reativos ao mouse e ao scroll.",
      "Posicionar o Yuji como especialista em sites e sistemas web premium e sob medida.",
      "Criar uma identidade visual consistente com os sites já existentes, porém mais madura, pesada e cinematográfica."
    ],
    "design_language": {
      "colors": ["#02010A", "#050816", "#111827", "#4C1D95", "#7C3AED", "#E5E7EB"],
      "style": "dark, futurista, premium, high-contrast, neon roxo, minimal no layout e exagerado na animação",
      "vibe": "site de award, digital experience studio, vibe de demo técnica de engine 3D"
    },
    "experience_overview": {
      "type": "single-page-feeling-with-multi-route",
      "behaviour": [
        "Transições de página full-screen com Framer Motion.",
        "Câmera 3D reagindo ao scroll e ao mouse.",
        "Background 3D contínuo (partículas, shapes abstratos, luzes, noise) presente em toda a navegação.",
        "Microinterações em botões, links, cards e ícones simulando responsividade e vida em cada elemento."
      ]
    },
    "pages": [
      {
        "route": "/",
        "name": "Home",
        "sections": [
          "Hero cinematográfico fullscreen com texto principal animado em Framer Motion e cena 3D em destaque (React Three Fiber) com luzes, partículas e pós-processamento.",
          "Call-to-action forte com botão animado (hover com distorção e glow roxo).",
          "Mini seção 'o que eu faço' logo abaixo, com três bullets animados por GSAP ao entrar no viewport.",
          "Efeito de scroll que desloca camadas 3D e muda a câmera, criando sensação de profundidade.",
          "Overlay sutil de ruído/grain e glitch em alguns elementos para reforçar o visual agressivo."
        ]
      },
      {
        "route": "/sobre",
        "name": "Sobre mim",
        "sections": [
          "Texto curto, direto e honesto sobre quem é o Yuji, focando em criação de sites e sistemas.",
          "Linha do tempo animada com GSAP, com cada marco aparecendo com animação sutil de escala e opacidade.",
          "Avatar/foto estilizada em card com efeito de hover 3D (tilt + glow).",
          "Highlight de tech stack (Next, React, APIs, sistemas internos, integrações) com ícones animados."
        ]
      },
      {
        "route": "/servicos",
        "name": "Serviços",
        "sections": [
          "Grid de serviços com cards 3D (leve rotate em hover, depth shadow, bordas com glow).",
          "Serviços principais: sites institucionais premium, landing pages de alta conversão, sistemas internos web, integrações com APIs, dashboards.",
          "Cada card com microcopy direta e técnica, mas acessível, reforçando performance, segurança e personalização.",
          "Seção comparando 'site comum' x 'experiência digital' com animação de antes/depois."
        ]
      },
      {
        "route": "/projetos",
        "name": "Portfólio",
        "sections": [
          "Grid de projetos em cards com mockups (pode usar placeholders inicialmente).",
          "Hover magnético: cursor grande customizado ao passar por cima dos projetos.",
          "Ao clicar em um projeto, abrir uma transição fullscreen com animação de máscara e zoom-in.",
          "Página de case com layout minimalista, mas com fundo 3D dinâmico levemente diferente para cada projeto (cor ou movimento)."
        ]
      },
      {
        "route": "/contato",
        "name": "Contato",
        "sections": [
          "Formulário simples e objetivo com validação básica.",
          "Texto chamativo do tipo: 'Se você quer um site ou sistema nesse nível, me chama.'",
          "Links para e-mail, WhatsApp e redes, com animações suaves em hover.",
          "Talvez um pequeno easter egg visual (efeito em 3D ou glitch) ao enviar o formulário com sucesso."
        ]
      }
    ],
    "components_required": [
      "Navbar fixada no topo, com hide/show baseado na direção do scroll (GSAP ou Framer Motion).",
      "Menu mobile com animação de abertura fullscreen (overlay escuro, links grandes, animação suave).",
      "Footer minimalista com créditos, contato e talvez FPS/tech info discreto.",
      "Loader inicial com a logo 'GY' em roxo, com animação de fade + scale + glitch.",
      "Componente de transição entre páginas usando Framer Motion (page transitions com sobreposição escura e linha roxa atravessando a tela).",
      "Componente Scene3D global: partículas, shapes abstratos, luzes, pós-processamento (bloom, vignette, grain).",
      "Wrapper de smooth scroll usando Lenis, aplicado globalmente no layout.",
      "Cursor customizado (círculo suave) com estados diferentes para links, botões e elementos clicáveis.",
      "Componente de SectionWrapper para padronizar paddings, max-width e triggers de animação GSAP."
    ],
    "animations_and_interactions": {
      "hero": [
        "Texto principal entrando com atraso leve e overshoot (Framer Motion).",
        "Subtítulo vindo por baixo com blur-to-sharp.",
        "Botão principal com loop de animação suave de glow/pulse.",
        "Cena 3D reagindo ao movimento do mouse (parallax, camera tilt leve)."
      ],
      "scroll": [
        "Scroll baseado em Lenis, ultra suave.",
        "Elementos entrando com fade + translate em direções diferentes por seção.",
        "Alguns elementos fixos em determinadas seções (pin) usando ScrollTrigger para sync com 3D."
      ],
      "3d": [
        "Uso de R3F com Drei para criar uma cena 3D abstrata (geometrias, partículas, linhas).",
        "Cores principais da cena: roxo, lilás, azul escuro, quase preto.",
        "Pós-processamento com efeito leve de bloom e aberration para dar cara de 'render'.",
        "Algumas interações: clicar em elementos para mudar levemente a cena, ou mudar modos de câmera."
      ]
    },
    "instructions": [
      "Criar a estrutura do projeto Next.js com App Router, TypeScript e Tailwind já configurados.",
      "Configurar Tailwind com tema dark baseado em preto, roxo e cinza claro.",
      "Implementar Lenis para smooth scroll global.",
      "Criar layout base com Navbar, Footer, transições entre páginas e Scene3D global.",
      "Criar um loader inicial com animação da logo GY.",
      "Montar o Hero com cena 3D, texto e CTA forte.",
      "Adicionar animações usando Framer Motion em textos, botões e seções.",
      "Usar GSAP + ScrollTrigger para efeitos de entrada e pinning em algumas seções-chave.",
      "Deixar tudo responsivo (mobile-first), cuidando para que a experiência mobile continue impactante.",
      "Onde não houver conteúdo real ainda (projetos, imagens), usar placeholders bem desenhados para poder trocar depois facilmente.",
      "Escrever o texto inicial (copy) em português, com tom direto, moderno e confiante, focado em mostrar que esse nível de site e sistema está disponível para o cliente."
    ],
    "business_strategy": {
      "audience": "Criadores independentes, estúdios e empresas maiores que precisam apresentar seus serviços ou produtos com a mesma intensidade visual que desejam entregar aos clientes.",
      "objectives": [
        "Gerar confiança instantânea ao transmitir domínio técnico logo nos primeiros segundos.",
        "Transformar cada sessão em uma prova social viva de que o estúdio domina 3D, animação e tecnologia web moderna.",
        "Posicionar o Yuji como parceiro estratégico capaz de liderar projetos premium com tickets altos."
      ],
      "tone": "Confiante, maduro e direto. Faz o visitante pensar: 'Esse cara conduz projetos de seis dígitos com naturalidade.'"
    },
    "seo_and_performance": {
      "performance": "Priorizar fluidez percebida (60fps, scroll suave, transições contínuas). Aceitar custos de renderização 3D desde que o carregamento inicial seja bem coreografado com loaders e lazy loading seletivo.",
      "accessibility_plan": "Adicionar navegação por teclado, labels claros e contrastes AA+ em uma segunda fase sem comprometer a identidade agressiva.",
      "keywords": [
        "estúdio digital imersivo",
        "sites premium em Next.js",
        "experiência 3D web",
        "desenvolvimento de sistemas sob medida",
        "landing page cinematográfica"
      ],
      "copy_tone": "Palavras fortes, mas controladas. Nada de textos agressivos; o impacto vem da execução visual."
    },
    "integrations_and_flows": {
      "forms": "Criar endpoint próprio no App Router para registrar leads em banco interno e disparar e-mails via Resend.",
      "contact_dashboard": "Página autenticada para o Yuji revisar mensagens, marcar status e acompanhar follow-ups.",
      "analytics": "Plausible para métricas sem scripts pesados.",
      "deployment": "Recomendar Vercel pelo suporte nativo a Next.js, mas manter opção aberta caso surja outra infraestrutura.",
      "monitoring": "Logar eventos críticos (envio de formulário, abertura de projetos) em um data layer simples."
    },
    "content_strategy": {
      "initial_copy": "Todo o texto será escrito do zero, focando em frases curtas com punch. Nada de portfólio no lançamento; apenas destaques conceituais.",
      "future_portfolio": "Adicionar cases reais na fase 2, com cenas 3D personalizadas por projeto.",
      "trust_elements": "Depoimentos e métricas podem entrar depois, priorizando primeiro a experiência sensorial."
    },
    "mobile_strategy": {
      "experience": "Interfaces reduzidas e comandos mais diretos, mas com a mesma sensação cinematográfica. 3D simplificado com shaders leves e fallback para canvas estático se necessário.",
      "breakpoints": ["<640px", "640-1024px", ">1024px"]
    },
    "roadmap": {
      "phase_1": [
        "Estrutura base, cena 3D global, hero e seções principais com copy inicial.",
        "Implementar loader, transições e scroll suave com Lenis.",
        "Configurar fluxo de formulário e dashboard interno mínimo."
      ],
      "phase_2": [
        "Camada de acessibilidade avançada, refinamento mobile e otimizações de performance.",
        "Adicionar cases reais e variações de fundo para cada projeto.",
        "Integrar métricas avançadas e automações de follow-up."
      ],
      "phase_3": [
        "Explorar modos interativos (ex.: trocar câmera, ativar easter eggs).",
        "Criar experiências paralelas (labs, experimentos shaders).",
        "Rodar testes A/B em CTAs e narrativas para leads de alto ticket."
      ]
    },
    "extra": {
      "brand": {
        "logo": "GY minimalista em roxo neon sobre fundo preto",
        "tone": "confiante, técnico, jovem, direto",
        "tagline_suggestion": "Crio sites e sistemas com cara de futuro."
      },
      "copywriting_style": "frases curtas, impacto alto, sem enrolação, foco em resultado e qualidade técnica."
    }
  }
}