Criação de Landing Page

Precisamos de um desenvolvedor full-stack especializado na implementação de uma Landing Page (Next.js + React Three Fiber + Tailwind CSS + Headless CMS + Vercel):
Resumo Executivo
Este briefing destina-se a contratação de um desenvolvedor full-stack com expertise em Next.js para renderização híbrida (ssr/ssg), criação de componentes 3d interativos com react three fiber, estilização ágil via tailwind css, integração com um headless cms (ex.: Sanity) e deploy contínuo na plataforma Vercel. O profissional será responsável por entregar uma landing page inspirado no ao design e às animações do "Benchmark", garantindo performance, responsividade e manutenção via CMS.
1. Visão Geral do Projeto
• Objetivo: Criar uma landing page inspirada no Benchmark em Next.js, incluindo o efeito de “bolha” animada em WebGL, fidelidade de layout e animações suaves.
• Tecnologias Principais:
• Next.js (ssr, ssg, automatic static optimization)
• react three fiber (renderer react para three.js)
• Tailwind css (utility-first css)
• headless cms (por exemplo sanity ou contentful)
• vercel (deploy frontend-as-a-service)
2. Escopo de Trabalho
2.1 Front-End e Layout
• Construção de páginas em Next.js com roteamento baseado em arquivos.
• Uso de ssg para seções estáticas e ssr para conteúdo dinâmico quando necessário.
• Implementação de design responsivo via Tailwind CSS, garantindo adaptação para desktops, tablets e mobile.
2.2 Componente 3D ("Organic Bubble" Animada)
• Desenvolvimento de um Code Component React usando React Three Fiber para criar a esfera orgânica deformável.
• Aplicação de noise procedural (e.g., Simplex Noise) para deformação de vértices em tempo real.
• Integração do canvas WebGL como background absoluto do hero, com fallback estático se WebGL não estiver disponível.
2.3 Integração com Headless CMS
• Configuração de um repositório de conteúdo para “Indústrias”, “Depoimentos” e posts de blog usando Sanity (ou similar).
• Consumo de APIs Graphql/rest do cms via data-fetching do next.js (getStaticProps, getServerSideProps).
• Interface de administração para não-técnicos atualizarem textos, imagens e listas de clientes.
2.4 Deploy e Operações
• Configuração de ci/cd no vercel, incluindo preview deployments e produção.
• Monitoramento de performance e alertas (log de build, uso de banda e erro 5xx).
3. Requisitos Técnicos
• Next.js (v13+) com domínio de ssr, ssg, isr e server components
• react three fiber e conhecimento de three.js, GLSL ou noise functions
• Tailwind CSS e auto-layout para design responsivo
• Experiência com Headless CMS (Sanity, Contentful, Strapi) e integração via APIs
• Vercel ou outra plataforma de deploy Jamstack
• Versionamento Git (GitHub/GitLab) e procedimentos de code review
4. Responsabilidades e Entregáveis
• Prova de Conceito (POC): componente 3D integrado a Next.js, documentado e testado em desktop/mobile.
• Landing Page Completa: páginas implementadas com conteúdo dummy e links funcionando.
• CMS Setup: esquemas de conteúdo publicados e integração rodando.
• Scripts de Build & Deploy: pipelines configurados no Vercel com preview automático.
• Documentação Técnica: readme com instruções de setup local, deploy e uso do cms.