/* ═══════════════════════════════════════════════════════════ POCKET JOY — Proposta de Branding e Identidade Visual Estrutura: Proposta Geral Anebi · Identidade: Pocket Joy DS ═══════════════════════════════════════════════════════════ */ const { useState, useEffect, useRef } = React; /* ---------- Ícones (inline SVG, stroke 1.5, cantos redondos) ---------- */ const I = { Check: (p) => , Plus: (p) => , Calendar: (p) => , Layers: (p) => , Whatsapp: (p) => , Card: (p) => , Pix: (p) => , Handshake: (p) => , Instagram: (p) => , Youtube: (p) => , Linkedin: (p) => , Mail: (p) => }; /* ---------- Ícones de processo (64×64, stroke 1.5) ---------- */ const ProcessIcon = { strategy: () => , design: () => , delivery: () => }; /* ---------- Dados ---------- */ const OPTIONS = [ { id: 'branding', tag: 'Para quem quer construir uma marca com mais estratégia', accent: '#8B00FF', name: 'Branding', nameEm: 'Completo', tagline: 'Ideal para estúdios e produtos que precisam de uma identidade mais profunda, com direção visual, posicionamento e um sistema completo de aplicação.', priceKey: 'price1', duration: 'Sob consulta', scope: '10 entregas', includes: [ 'Estudo estratégico da marca', 'Direcionamento de posicionamento', 'Definição de público e personalidade da marca', 'Criação completa da identidade visual', 'Logo principal e variações', 'Paleta de cores e tipografia', 'Elementos gráficos de apoio e padrões', 'Kit digital: avatar, banner, overlay e assinatura', 'Modelos para redes sociais e páginas de loja', 'Manual da marca com organização e direcionamento'] }, { id: 'essencial', tag: 'Para quem quer uma marca mais completa', accent: '#6366f1', featured: true, badge: 'Mais escolhido', name: 'Identidade', nameEm: 'Essencial', tagline: 'Ideal para quem precisa de uma identidade visual com mais possibilidades de uso no digital e nos materiais da marca.', priceKey: 'price2', duration: '7 dias úteis', scope: '7 entregas', includes: [ 'Logo exclusivo + 1 variação', 'Definição de cores', 'Definição de fontes', 'Kit de perfil: avatar e banner', 'Assinatura de email', 'Cartão de visita digital', '1 modelo de post + 5 destaques para Instagram'] }, { id: 'inicial', tag: 'Para quem precisa começar do jeito certo', accent: '#00C2FF', name: 'Logo', nameEm: 'Inicial', tagline: 'Ideal para projetos que precisam de uma apresentação visual básica, organizada e profissional para entrar no mercado.', priceKey: 'price3', duration: '3 dias úteis', scope: '4 entregas', includes: [ 'Logotipo exclusivo', 'Definição de cores', 'Definição de fontes', 'Avatar e banner para redes'] }]; const PROCESS = [ { n: '01', label: 'estratégia', icon: 'strategy', title: 'Imersão &\nEstratégia', desc: 'Mergulhamos no universo do seu produto para extrair sua essência técnica. Mapeamos os pontos de contato e as dores do usuário para traçar um mapa que guia o design do conceito até a execução final.' }, { n: '02', label: 'design', icon: 'design', title: 'Design &\nExperiência Visual', desc: 'Construímos a identidade sob o prisma da imersão. Testamos a marca em aplicação real, no perfil, na loja e na interface, para garantir que ela funcione tão bem no ícone de 32px quanto no letreiro da tela inicial.' }, { n: '03', label: 'entrega', icon: 'delivery', title: 'Finalização\n& Entrega', desc: 'O encerramento do ciclo criativo com foco em resultados reais. Entregamos sistemas visuais escaláveis e arquivos organizados para garantir que a sua marca funcione em qualquer dispositivo ou plataforma.' }]; const PORTFOLIO = [ { src: 'assets/portfolio/1.webp' }, { src: 'assets/portfolio/2.webp' }, { src: 'assets/portfolio/3.webp' }, { src: 'assets/portfolio/4.webp' }, { src: 'assets/portfolio/5.webp' }, { src: 'assets/portfolio/6.webp' }, { src: 'assets/portfolio/7.webp' }, { src: 'assets/portfolio/8.webp' }, { src: 'assets/portfolio/9.webp' }, { src: 'assets/portfolio/10.webp' }, { src: 'assets/portfolio/11.webp' }, { src: 'assets/portfolio/12.webp' }, { src: 'assets/portfolio/13.webp' }, { src: 'assets/portfolio/14.webp' }, { src: 'assets/portfolio/15.webp' } ]; const TESTIMONIALS = [ { quote: 'Que trabalho magnífico!!! Caprichoso e cheio de atenção aos detalhes. Você é muito dedicado em seus projetos e ficou perfeito!', name: 'Fabi Passos', role: 'Anebi Studio', photo: 'assets/depoimentos/fabi-passos.png' }, { quote: 'A excelência na execução desse projeto é muito boa. Não é apenas um design bonito, é um sistema muito bem construído. O resultado ficou top!!!', name: 'Jeova Raycker', role: 'Vero Agência e Produtora', photo: 'assets/depoimentos/jeova-raycker.png' }, { quote: 'Como pode você ser o melhor designer gráfico do país e querer desenvolver os meus projetos, que sorte que tenho. Gostei bastante de tudo!!!', name: 'Narayan Silva', role: 'Miragem Games', photo: 'assets/depoimentos/narayan-silva.jpg' } ]; const FAQ = [ { q: 'Como começa o projeto após a aprovação?', a: 'Após a aprovação da proposta, você recebe um briefing (formulário) para preencher as informações do seu projeto, junto com o contrato. Com a confirmação do pagamento da entrada, damos início. E claro: se surgir qualquer dúvida nesse processo, podemos agendar uma call para te orientar com calma. Essas informações são importantes para que a criação aconteça de forma alinhada.' }, { q: 'Quantas rodadas de ajustes estão incluídas?', a: 'Cada projeto inclui rodadas de ajustes dentro do escopo combinado em cada etapa. Os ajustes são feitos sobre as direções aprovadas, sempre dentro do conceito estratégico definido no início.' }, { q: 'Em quais formatos os arquivos finais são entregues?', a: 'Você recebe os arquivos em SVG, PDF, EPS, PNG com fundo transparente e JPG, organizados em uma pasta única. Isso garante que sua marca esteja pronta para qualquer aplicação: engine, loja, redes sociais, impressão ou interface.' }, { q: 'Posso parcelar o investimento?', a: 'Sim. Trabalhamos com 50% na assinatura do contrato e 50% na entrega final. Também aceitamos parcelamento no cartão (consulte condições) e Pix com desconto à vista.' }, { q: 'E se eu já tiver um logotipo? Qual opção é a melhor?', a: 'Se sua marca já existe, desenvolvemos um projeto personalizado para entender o que já funciona, o que faz sentido manter e o que precisa evoluir. A partir desse estudo, direcionamos a melhor construção visual e estratégica para o próximo momento da marca.' }, { q: 'O que acontece depois da entrega final?', a: 'Você fica com todos os arquivos e o Manual da Marca para usar com qualquer profissional ou equipe. Se quiser, podemos seguir com a interface do jogo, o HUD, o site ou a presença digital da marca. Falamos sobre isso na reunião final.' }]; /* ---------- FX ambiente (fog + grid + sparks + beams) ---------- */ const Ambient = ({ sparks = [], beams = [], variant = '' }) => ; /* ---------- Navbar ---------- */ const Navbar = ({ scrolled }) => { const [open, setOpen] = useState(false); const links = [ ['#sobre', 'Sobre'], ['#portfolio', 'Portfólio'], ['#processo', 'Processo'], ['#opcoes', 'Investimento'], ['#depoimentos', 'Clientes'] ]; return (
Pocket Joy Aceitar proposta
{links.map(([href, label]) => setOpen(false)}>{label} )} setOpen(false)}>Aceitar proposta
); }; /* ---------- Hero ---------- */ const Hero = ({ tweaks }) =>
Rony Ribeiro

Rony Ribeiro

Lobotomy Games

Proposta Comercial · 2026

Branding e identidade visual

Para estúdios, games e produtos digitais que valorizam criatividade,
{' '}personalização e uma marca à altura da experiência.

Ver as opções → Conhecer o estúdio
Role para conhecer
; /* ---------- Sobre ---------- */ const About = () =>
Marcos Passos

Marcos Passos

CEO Pocket Joy

Quem é a Pocket Joy

Um estúdio de branding, identidade visual{' '} e interfaces{' '} para games & tech.

Ao longo de sete anos dedicados ao design, construí uma trajetória guiada por um princípio claro: a união entre estética e tecnologia. Como especialista em branding e identidade visual, acredito que o design vai além da aparência: ele constrói percepção, gera confiança e dá forma ao valor de uma marca.

Essa visão orienta cada projeto: transformar marcas em experiências consistentes e memoráveis, traduzindo estratégia em interfaces inteligentes, envolventes e com propósito. Mais do que entregar peças bonitas, meu trabalho busca criar conexões reais entre empresas e pessoas.

Atendimento Brasil e no Mundo 7 anos de experiência Consultoria e estratégia
{['Visual Identity', 'Branding', 'Game UI Design', 'Digital Design', 'Experience'].map((s) => {s} )}
; /* ---------- Portfólio (slides + visualizador, igual ao site) ---------- */ const PROJECTS = { 'balloomia': { title: 'Balloomia Sky Playground', slideTitle: ['Balloomia', 'Sky Playground'], tag: 'Game UI Design', desc: 'Interface completa e assets 2D para todo o jogo como Menu, conquista da steam, telas variadas entre outros.', cover: 'assets/Balloomia-capa.webp', bg: '#1a0050', folder: 'assets/balloomia/', count: 37, videos: [35], skip: [] }, 'pocket-joy': { title: 'Pocket Joy', slideTitle: ['Pocket Joy'], tag: 'Brand Identity', desc: 'Identidade visual completa logo, paleta, tipografia e sistema de marca para uma experiência memorável.', cover: 'assets/Pocket-Joy-capa.webp', bg: '#1a0a40', folder: 'assets/pocket-joy/', count: 21, videos: [2], skip: [7] }, 'fin': { title: 'FIN Agência Digital', slideTitle: ['FIN', 'Agência Digital'], tag: 'Brand Identity', desc: 'Branding estratégico para agência digital marca, linguagem visual e aplicações institucionais.', cover: 'assets/FIN-capa.webp', bg: '#0a1530', folder: 'assets/fin/', count: 15, videos: [2, 9], skip: [] } }; const PROJECT_KEYS = ['balloomia', 'pocket-joy', 'fin']; const Portfolio = ({ onOpen }) => { const [current, setCurrent] = useState(0); const trackRef = useRef(null); const wrapRef = useRef(null); const TOTAL = PROJECT_KEYS.length + 1; // Desliza o track e revela o conteúdo do slide que entra useEffect(() => { const track = trackRef.current, wrap = wrapRef.current; if (!track || !wrap) return; const x = -(current * wrap.clientWidth); if (!window.gsap) { track.style.transform = 'translateX(' + x + 'px)'; return; } gsap.to(track, { x: x, duration: 0.9, ease: 'power3.inOut' }); const slide = track.children[current]; if (!slide) return; const bg = slide.querySelector('.slide-bg'); if (bg) gsap.fromTo(bg, { scale: 1.14 }, { scale: 1, duration: 1.2, ease: 'power3.out' }); const c = slide.querySelector('.slide-content'); if (!c) return; const tag = c.querySelector('.slide-tag'); const title = c.querySelector('.slide-title'); const desc = c.querySelector('.slide-desc'); const btn = c.querySelector('.btn-view-project'); gsap.set(c, { opacity: 1 }); const tl = gsap.timeline({ delay: 0.42 }); if (tag) tl.fromTo(tag, { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out' }, 0); if (title) tl.fromTo(title, { opacity: 0, y: 34 }, { opacity: 1, y: 0, duration: 0.85, ease: 'power4.out' }, 0.08); if (desc) tl.fromTo(desc, { opacity: 0, y: 22 }, { opacity: 1, y: 0, duration: 0.55, ease: 'power3.out' }, 0.24); if (btn) tl.fromTo(btn, { opacity: 0, y: 18, scale: 0.92 }, { opacity: 1, y: 0, scale: 1, duration: 0.5, ease: 'back.out(1.6)' }, 0.36); }, [current]); // Reposiciona o track quando a janela muda de tamanho useEffect(() => { const onResize = () => { const track = trackRef.current, wrap = wrapRef.current; if (!track || !wrap) return; const x = -(current * wrap.clientWidth); if (window.gsap) gsap.set(track, { x: x }); else track.style.transform = 'translateX(' + x + 'px)'; }; window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [current]); const go = (i) => setCurrent(Math.min(Math.max(i, 0), TOTAL - 1)); // Swipe no touch const touch = useRef(0); const onTouchStart = (e) => { touch.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { const dx = e.changedTouches[0].clientX - touch.current; if (Math.abs(dx) > 50) go(dx < 0 ? current + 1 : current - 1); }; return (
{/* Slide 0 — intro */}
Seleção de trabalhos

Portfólio

Brand Identity & Game UI Design

go(1)}> {PROJECT_KEYS.map((k, i) =>
)}
03
Game UI Design Brand Identity
{/* Slides 1..3 — projetos */} {PROJECT_KEYS.map((key) => { const p = PROJECTS[key]; return (

{p.tag}

{p.slideTitle.map((l, i) => {l}{i < p.slideTitle.length - 1 &&
} )}

{p.desc}

); })}
0 ? 1 : 0 }}> {String(current).padStart(2, '0')} / 03
); }; /* ---------- Visualizador de projeto ---------- */ const ProjectViewer = ({ projectKey, onClose }) => { const p = projectKey ? PROJECTS[projectKey] : null; const scrollRef = useRef(null); useEffect(() => { if (!p) return; document.body.style.overflow = 'hidden'; if (window.__lenis) window.__lenis.stop(); if (scrollRef.current) scrollRef.current.scrollTop = 0; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => { document.body.style.overflow = ''; if (window.__lenis) window.__lenis.start(); document.removeEventListener('keydown', onKey); }; }, [p, onClose]); if (!p) return null; const media = []; for (let i = 1; i <= p.count; i++) { if (p.skip.indexOf(i) !== -1) continue; media.push(p.videos.indexOf(i) !== -1 ?