Pular para o conteúdo
Croffi & Andrade Digital StudioCroffi & AndradeDigital Studio

Croffi & Andrade Digital Studio

Transformamos ideias emsoluções digitaisque geram resultados.

Estudamos seu negócio, alinhamos suas necessidades e desenvolvemos experiências digitais claras, rápidas e feitas para aproximar clientes.

  • Pesquisa de mercado antes do layout
  • Mobile first e acessibilidade AA
  • Publicação e domínio configurados
Este site, medidoao vivo
LCP
1,1s

meta ≤ 2,5s

CLS
0,00

meta ≤ 0,1

Acessibilidade
100

meta AA

Entrega
3 dias

meta a partir de

Um estúdio que vende performance devia mostrar a própria. Estes são os números desta página.

Olímpia · SP · desde 2026

[01]Foco

Queremos que cada cliente tenhaorgulho de mostrar seu site.

A experiência de trabalhar com a Croffi & Andrade deve ser lembrada por três atributos.

01

Clareza

Você entende o escopo, os prazos e os próximos passos. Sem termo técnico desnecessário.

02

Rapidez

Processos organizados e IA para reduzir tarefa repetitiva, sem pular etapa importante.

03

Cordialidade

Atendimento próximo e profissional. Perguntas são bem-vindas e as decisões são conjuntas.

[02]Projetos

Trabalho que a gentemostra sem ressalva

Cada um começa por um problema de negócio — aqui estão o desafio e a solução.

01

Andrade Innovations

Produtos digitais próprios · casa de software

Brasil · 2026

Desafio

Apresentar uma casa de software que constrói produto próprio, e não uma agência que presta serviço — duas coisas que o mercado confunde e que atraem cliente errado.

Solução

Site institucional com os produtos em primeiro plano, páginas legais e de suporte por app publicado, versão bilíngue e a narrativa organizada em torno do que já está no ar em vez de promessa de portfólio.

02

Trainer Pro Gym

Aplicativo de treino · iOS

App Store · 2026

Desafio

Levar um app de treino da loja para fora dela: quem descobre pelo Google precisa entender o produto e achar suporte, privacidade e termos sem depender da ficha da App Store.

Solução

Landing do produto com as telas em destaque, link direto para a App Store e as páginas obrigatórias de privacidade, termos e suporte hospedadas em domínio próprio — requisito de publicação que costuma ser resolvido no improviso.

03

Brasileiros FL

Diretório de serviços

Sul da Flórida · 2026

Desafio

Conectar a comunidade brasileira do sul da Flórida a prestadores de serviço recomendados, sem depender de indicação solta em grupo de mensagem.

Solução

Diretório com busca por serviço e filtro por condado e cidade, categorias navegáveis, painel para o anunciante gerenciar o próprio perfil e versões em português e inglês desde a estrutura de rotas.

04

LS Elétrica

Serviços elétricos

Itanhaém/SP · 2026

Desafio

Serviço técnico que depende de confiança e de ser achado no Google por quem mora na região ou tem imóvel de temporada.

Solução

Site de serviços com busca local trabalhada, seções separadas para emissão de TRT, automação residencial e planos de manutenção por contrato, e WhatsApp fixo em todas as telas para o orçamento sair na hora.

05

Raquel Duarte

Engenharia de Alimentos · Food Safety e P&D

Brasil · 2026

Desafio

Traduzir uma trajetória acadêmica e de laboratório em uma apresentação que a indústria entenda e leve a sério.

Solução

Portfólio profissional bilíngue, com a experiência organizada por competência, publicações reunidas em um só lugar e os números de laboratório em destaque logo na abertura.

06

Renan Croffi

Analista e cientista de dados

Brasil · 2026

Desafio

Portfólio de dados costuma virar lista de ferramenta. O desafio era mostrar raciocínio analítico para quem contrata, não só o stack para quem já é da área.

Solução

Site pessoal com os projetos apresentados por pergunta de negócio e resultado obtido, com o método visível e a stack como consequência — não como manchete.

[03]Templates

Sete templates,todos no ar agora

Cada um é um site completo publicado — não é print nem mockup. E não são o mesmo layout repintado: mudam de stack e de arquitetura. Um é narrado em capítulos, outro se arrasta com inércia, outro é uma parede 3D que se caminha. Abra no celular e navegue no produto de verdade.

T01

BRASA

Restaurante fine dining

Tudo nasce da brasa

A página é um menu-degustação narrado em capítulos, com a cadência dos tempos de um jantar. Editorial escuro, fumaça e fogo pontual — a fotografia dos pratos é a protagonista.

Arquitetura

Narrativa em capítulos — a rolagem tem a cadência do jantar

Construído com

Astro 5 · zero JS de framework

Diferencial

Menu-degustação em capítulos com filmstrip que anda com a rolagem

Plataforma
  • CSS scroll-driven animations
  • animation-timeline
  • scroll-snap
  • Fontes self-hosted
Tipografia
Fraunces + Instrument Sans
Plano base
Premium
  • Manifesto
  • Menu em capítulos
  • Filmstrip
  • A casa
  • Reserva
T02

MARÉ

Hotel boutique à beira-mar

O tempo desacelera na maré

Claro, arejado, luz natural — o luxo aqui é o espaço em branco. Suítes com tarifa, rituais do dia e uma galeria masonry que abre em lightbox nativo, tudo na calma de quem está de férias.

Arquitetura

Página de estadia — suítes, rituais e reserva num fluxo só

Construído com

Nuxt 4 · Vue 3

Diferencial

Masonry imersiva com lightbox nativo e barra de reserva

Plataforma
  • <dialog> nativo
  • Vue Transitions
  • CSS columns masonry
  • Fontes self-hosted
Tipografia
Marcellus + Mulish
Plano base
Premium
  • Suítes com tarifas
  • Galeria masonry
  • Rituais
  • Como chegar
  • Reserva
T03

AURUM

Alta joalheria

O peso do raro

Macro extremo, luz pontual e quase silêncio. Hero escuro de veludo, resto em marfim — e uma vitrine horizontal que se arrasta com inércia de verdade, peça por peça, com preço e ficha.

Arquitetura

Vitrine de peças — o acervo se arrasta, a peça abre em ficha

Construído com

Next.js 16 · React 19

Diferencial

Vitrine drag com física de inércia e zoom que segue o cursor

Plataforma
  • Física de inércia própria
  • Cursor custom
  • next/image
  • Fontes self-hosted
Tipografia
Bodoni Moda + Jost
Plano base
Premium
  • Manifesto
  • Vitrine drag
  • Ficha da peça
  • O ateliê
  • Atendimento privado
T04

VOLT

Automotivo · lançamento

Silêncio a 300 km/h

Estúdio escuro, linguagem HUD e os dados de performance como protagonistas. O carro troca de ângulo numa sequência cinematográfica pinada enquanto os specs mudam em sincronia.

Arquitetura

Cinematografia de scroll — painéis pinados com scrub

Construído com

Vite · TypeScript puro · GSAP

Diferencial

Sequência pinada: o carro gira, os números acompanham

Plataforma
  • GSAP ScrollTrigger (pin + scrub)
  • Contadores animados
  • gsap.matchMedia
  • Fontes self-hosted
Tipografia
Sora + IBM Plex Mono
Plano base
Premium
  • Sequência pinada
  • Números
  • Linha de carga
  • Especificações
  • Reserva
T05

OCRE

Galeria e venda de arte

A parede infinita

As obras flutuam numa parede contínua em WebGL: o visitante arrasta para caminhar, o shader entorta as telas com a velocidade, e cada obra abre em ficha com preço. Sem GPU, vira trilho navegável — o acervo continua vendível.

Arquitetura

Espaço contínuo — a galeria se caminha, não se rola

Construído com

Vite · TypeScript · Three.js

Diferencial

Parede infinita 3D com shader de distorção e ficha de aquisição

Plataforma
  • WebGL + shader próprio
  • Render só em viewport
  • Fallback DOM completo
  • Fontes self-hosted
Tipografia
EB Garamond + Figtree
Plano base
Premium
  • Parede infinita
  • Exposição atual
  • Acervo em grade
  • Visita
  • Interesse
T06

Núcleo

Academia e studio de treino

Movimento na página, não só na foto

Fitness compete por energia. O template usa motion como argumento — grade de modalidades que reage, grade de horários real e prova social de aluno acima da tabela de preço.

Arquitetura

Página empilhada com grade de horários por dia

Construído com

HTML + CSS + JS puro · arquivo único

Diferencial

Grade de horários por modalidade e matrícula direta

Plataforma
  • Tabs sem framework
  • Marquise CSS
  • Schema.org ExerciseGym
Tipografia
Anton + Inter
Plano base
Business
  • Hero em movimento
  • Modalidades
  • Grade de horários
  • Planos
  • Alunos
  • Estrutura
  • Matrícula
T07

Marchetti

Advocacia e serviços profissionais

Autoridade construída por área de atuação

Cliente de escritório chega com um problema específico, não procurando "advogado". Cada área de atuação tem entrada própria, com linguagem que responde à dúvida antes de pedir o contato.

Arquitetura

Página empilhada com entrada por área de atuação

Construído com

HTML + CSS + JS puro · arquivo único

Diferencial

Uma landing por área de atuação, sob a mesma marca

Plataforma
  • Grid de entrada
  • Schema.org LegalService
  • Aviso OAB 205/2021
Tipografia
Libre Baskerville + Inter
Plano base
Premium
  • Hero sóbrio
  • Áreas de atuação
  • Como atendemos
  • Equipe
  • Artigos
  • Consulta
  • Contato

O template é o ponto de partida, nunca o produto final: o seu sai do formato mais perto do seu negócio e vira único a partir daí — com a sua marca, o seu conteúdo e a fotografia do seu produto.

Começar pelo meu segmento
[04]Diferenciais

A diferença aparece antesda primeira linha de código

Não começamos pelo layout. Começamos entendendo o que o seu negócio precisa que o site resolva.

01

Entendimento antes da execução

O projeto começa pelo seu negócio: objetivo, público e o resultado esperado. Só depois falamos de layout e código.

02

Pesquisa de mercado

Analisamos concorrentes e referências para identificar o que funciona no seu segmento e o que deve ser evitado.

03

Clareza acima de efeito

Animação e elemento visual só entram quando ajudam a compreender, navegar ou agir. Nada decorativo atrapalhando a leitura.

04

IA como acelerador

Usamos inteligência artificial para acelerar pesquisa, prototipação e revisão. Análise, qualidade e decisão continuam humanas.

05

Segurança e privacidade

Formulários validados, dependências controladas e deploy seguindo boas práticas. Dados de contato tratados com cuidado.

06

Acessível e mobile first

Contraste, navegação por teclado e leitura confortável no celular fazem parte do escopo, não de uma fase futura.

[05]Processo

Seis etapas, doentendimento à evolução

Você sabe em que ponto o projeto está e o que vem a seguir. Cada etapa termina com algo concreto na sua mão.

  1. 01

    Descoberta

    Estudamos o negócio, os objetivos, o público e o resultado esperado do projeto.

    Entrega

    Resumo do desafio

  2. 02

    Alinhamento

    Definimos necessidades, escopo, prioridades, conteúdo, prazos e responsabilidades de cada lado.

    Entrega

    Escopo e cronograma

  3. 03

    Pesquisa de mercado

    Analisamos concorrentes e referências para encontrar oportunidades, padrões eficientes e práticas a evitar.

    Entrega

    Referências comentadas

  4. 04

    Planejamento

    Organizamos a arquitetura da informação, a jornada do usuário, os CTAs e a estrutura visual.

    Entrega

    Mapa de seções e jornada

  5. 05

    Desenvolvimento e validação

    Construímos a solução e testamos navegação, responsividade, segurança e clareza antes de validar com você.

    Entrega

    Ambiente de revisão

  6. 06

    Publicação e evolução

    Configuramos domínio e deploy, revisamos a entrega e seguimos com suporte ou melhorias conforme o plano contratado.

    Entrega

    Site no ar e acompanhamento

[06]Soluções

O que entregamos,e o que isso resolve

Escolha pelo resultado que você precisa. A tecnologia certa é consequência, não ponto de partida.

Landing Pages

Uma página com um objetivo claro: fazer o visitante entrar em contato.

Estrutura de conteúdo, hierarquia visual e CTAs pensados para conduzir a decisão, sem ruído e sem caminhos longos.

  • Copy orientada a conversão
  • Formulário curto e validado
  • Carregamento rápido no celular

Sites Institucionais

A credibilidade da sua empresa representada da forma certa.

Arquitetura de informação organizada para que o visitante entenda o que você faz, para quem faz e como falar com você.

  • Páginas de serviço e sobre
  • Blog ou área de conteúdo
  • Painel simples para edição

SEO

Ser encontrado por quem já está procurando o que você oferece.

SEO técnico desde a base: semântica, performance, dados estruturados e conteúdo organizado por intenção de busca.

  • Metadados e dados estruturados
  • Core Web Vitals
  • Sitemap, robots e canonical

Automações

Menos tarefa repetitiva, mais tempo para o que gera receita.

Fluxos que conectam formulários, notificações, planilhas e CRM para que nenhum contato se perca no caminho.

  • Notificação imediata de leads
  • Rotinas agendadas
  • Relatórios automáticos

Integrações

Suas ferramentas conversando entre si, sem trabalho manual.

Conexão entre site, CRM, ERP, meios de pagamento, WhatsApp e serviços de e-mail por meio de APIs e webhooks.

  • APIs e webhooks
  • CRM e atendimento
  • Pagamentos e agendamentos

Manutenção

Seu site continua rápido, seguro e atualizado depois da entrega.

Acompanhamento contínuo com atualizações, monitoramento, correções e pequenas evoluções conforme o plano contratado.

  • Atualizações de segurança
  • Monitoramento e backups
  • Ajustes e novas seções
[07]Planos

Escopo e valor fechadosantes de começar

Três pacotes com entrega definida. O que está no card é o que entra na proposta — nada aparece na fatura sem ter sido aprovado antes.

Start

Ideal para pequenos negócios.

Brasilsite .com.br
R$800
EUAsite .com
US$400

Entrega em 3 a 5 dias

  • Landing page responsiva
  • Até 6 seções
  • Formulário de contato
  • Botão do WhatsApp
  • SEO básico
  • Domínio apontado
  • Publicação
  • 15 dias de suporte
Começar com o Start
Recomendado

Business

Para quem depende do site para gerar contato todo dia.

Brasilsite .com.br
R$1.200
EUAsite .com
US$800

Entrega em 5 a 7 dias

  • Tudo do Start
  • Design personalizado
  • Copy otimizada para conversão
  • Animações leves
  • Google Analytics
  • Google Tag Manager
  • Meta Pixel
  • Integração com CRM
  • Formulário inteligente
  • 30 dias de suporte
Começar com o Business

Premium

Para empresas que investem em anúncios.

Brasilsite .com.br
R$2.000
EUAsite .com
US$1.200

Entrega em 7 a 10 dias

  • Tudo do Business
  • Pesquisa de concorrentes
  • Estratégia de conversão
  • Testes A/B iniciais
  • Dashboard de métricas
  • Otimização de velocidade
  • SEO avançado
  • 60 dias de suporte
Começar com o Premium

Os valores em reais valem para sites no Brasil com domínio .com.br; para projetos nos Estados Unidos com domínio .com, valem os valores em dólar. Cobrem o desenvolvimento — as assinaturas de domínio e hospedagem ficam no nome da sua empresa, para que os acessos sejam seus. Precisa de algo fora desses escopos? Peça um orçamento sob medida.

[08]Tecnologias

Ferramentas atuais,escolhidas com critério

Usamos tecnologia moderna porque ela deixa o site mais rápido, mais seguro e mais fácil de evoluir — não porque está na moda.

Interface

Rápida de carregar e confortável de usar

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Animações em CSS

Conteúdo e dados

Fácil de atualizar sem depender de código

  • Node.js
  • APIs REST
  • Webhooks
  • Zod
  • CMS headless

Performance e SEO

Encontrável no Google e leve no celular

  • Core Web Vitals
  • Dados estruturados
  • Lighthouse
  • Analytics
  • Tag Manager

Infraestrutura

Publicação segura, com histórico e rollback

  • Vercel
  • Git e GitHub
  • HTTPS
  • Domínio e DNS
  • Monitoramento
[09]FAQ

Dúvidasfrequentes

Respostas diretas sobre prazo, valor e o que acontece depois da entrega.

Trabalhamos com três pacotes fechados: Start R$ 800, Business R$ 1.200 e Premium R$ 2.000 para sites no Brasil (.com.br). Para projetos nos Estados Unidos com domínio .com, os valores são US$ 400, US$ 800 e US$ 1.200. A seção Planos mostra o que cada um inclui. Se a sua necessidade não couber em nenhum deles, montamos um orçamento sob medida com escopo e valor fechados antes de começar.

De 3 a 10 dias, conforme o pacote, contados a partir da aprovação do escopo e da entrega do conteúdo. Você recebe o cronograma antes de o projeto começar e acompanha cada etapa.

Cuidamos de toda a configuração de domínio, DNS, HTTPS e publicação. As assinaturas de domínio e de hospedagem ficam no nome da sua empresa, para que você mantenha a propriedade dos acessos. Se preferir, indicamos os planos e acompanhamos a contratação.

Sim. Existem rodadas de ajuste previstas no escopo e elas ficam registradas na proposta. Mudanças que ampliam o escopo combinado são orçadas à parte, sempre avisadas antes de qualquer execução.

Sim. Desenvolvemos mobile first: o projeto é pensado primeiro para a tela pequena e depois adaptado para telas maiores. Testamos navegação, velocidade, contraste e uso do formulário em dispositivos móveis antes da entrega.

Sim. Oferecemos planos de manutenção e evolução com atualizações, monitoramento, correções e pequenas melhorias. Você também pode contratar ajustes pontuais quando precisar, sem plano mensal.

As condições de pagamento ficam registradas na proposta comercial, aprovadas antes do início do projeto. Sem cobrança fora do que foi combinado.

Um panorama do negócio, os objetivos do site, o público que você quer atingir e o material que já existir: logotipo, textos, fotos e acessos. O que faltar, organizamos junto com você nas etapas de descoberta e alinhamento.

Ficou alguma dúvida fora desta lista? Fale com a gente.

[10]Contato

Vamoscomeçar

Vamos transformar sua ideia em uma solução que trabalha pelo seu negócio.

Conte o que você precisa. Respondemos com as próximas etapas, o que precisamos de você e uma proposta com escopo e prazo claros.

  1. 01Resposta no próximo dia útil, com um resumo do que entendemos.
  2. 02Conversa curta para alinhar objetivo, escopo e prazo.
  3. 03Proposta por escrito, sem compromisso e sem cobrança escondida.

Resposta no próximo dia útil.