import { LayoutDashboard, type LucideIcon, ShieldCheck } from "lucide-react"; import Image from "next/image"; import { getShowcaseAssets } from "@/lib/project-showcase"; import { primaryButton, textLink } from "./button-styles"; import ContactOfferLink from "./ContactOfferLink"; import type { ContactKind } from "./contact-subject"; import "./conversion.css"; import HoverPrefetchLink from "./HoverPrefetchLink"; import { Reveal } from "./Reveal"; import { Section } from "./Section"; interface Offer { id: string; title: string; description: string; /** O que a pessoa recebe: de três a quatro itens, só o que o case ou a página /ia citados já sustentam. */ deliverables: string[]; /** Primeira etapa: uma conversa e, depois dela, o escopo e a proposta por escrito (sem prazo nem preço). */ firstStep: string; /** Tipo de projeto que o botão deixa marcado no formulário de contato. */ kind: ContactKind; ctaLabel: string; /** Case cujo pôster ilustra a oferta; sem ele, o cartão não tem foto e mostra só o ícone. */ poster?: { id: string; title: string }; /** Ícone do cartão sem foto. */ icon?: LucideIcon; moreLabel: string; moreHref: string; } /** * As três ofertas da home, na ordem do H1: site que traz pedidos, sistema que tira a operação da planilha e revisão * de sistema que já existe. Cada texto só diz o que o case ou a página de /ia citados já sustentam; sem prazo nem preço. * Só o site tem foto: a Lavação 047 é um site de catálogo e tabela de preços, o que o texto descreve. O sistema e a * revisão não têm um case que mostre o que descrevem (a vitrine da SEV é uma loja, não um painel), então o cartão * traz só um ícone, e os entregáveis dizem o que a pessoa recebe. */ const OFFERS: Offer[] = [ { id: "site", title: "Site que traz pedidos pelo WhatsApp", description: "O cliente vê o que você oferece e vai para a conversa no WhatsApp, como na Lavação 047.", deliverables: [ "Catálogo ou tabela de preços", "Mensagem pronta no WhatsApp", "Painel para editar preços e fotos", "Publicação do site", ], firstStep: "Primeira conversa para entender o problema. Depois, escopo e proposta por escrito.", kind: "site", ctaLabel: "Começar pelo site", poster: { id: "lavacao-047", title: "Lavação 047" }, moreLabel: "Ver case Lavação 047", moreHref: "/cases/lavacao-047", }, { id: "sistema", title: "Sistema para tirar a operação da planilha", description: "Pedidos, estoque e rotinas que hoje vivem em planilhas e mensagens passam para um painel próprio, feito para a sua equipe. Um exemplo é a SEV Moda Íntima, com cadastro de peças, pedidos e estoque por tamanho.", deliverables: [ "Cadastro de clientes e produtos", "Pedidos e acompanhamento", "Relatórios", "Acesso por perfil", ], firstStep: "Primeira conversa para entender a operação. Depois, escopo e proposta por escrito.", kind: "sistema", ctaLabel: "Começar pelo sistema", icon: LayoutDashboard, moreLabel: "Ver case SEV Moda Íntima", moreHref: "/cases/sev-modaintima", }, { id: "revisao", title: "Revisão de sistema que já existe, inclusive feito com IA", description: "Para quem já tem um sistema, como um app feito no Lovable, no Bolt ou no Replit, e quer saber se ele está pronto para receber clientes.", deliverables: [ "As falhas de acesso a dados", "O que dá para aproveitar", "O que é melhor refazer", "Um orçamento para pôr em produção", ], firstStep: "Primeira conversa para entender o app e o que ele precisa fazer. Depois, escopo e proposta por escrito.", kind: "revisao", ctaLabel: "Começar pela revisão", icon: ShieldCheck, moreLabel: "Ver como funciona a revisão", moreHref: "/ia", }, ]; const PROCESS = [ { title: "Entender a operação", description: "Quem usa, qual problema precisa resolver e quais dados e ferramentas já existem.", }, { title: "Definir a entrega", description: "Escopo, arquitetura, riscos, investimento e critérios de aceite antes de desenvolver.", }, { title: "Construir e validar", description: "Entregas por etapa, demonstrações e testes dos fluxos, das permissões e das integrações.", }, { title: "Publicar e dar continuidade", description: "Implantação, documentação e condições de manutenção combinadas para a operação.", }, ]; /** Miniatura sem foto: um painel escuro do mesmo tamanho dos pôsteres, só com o ícone da oferta. */ function OfferIcon({ icon: Icon }: Readonly<{ icon: LucideIcon }>) { return (
); } /** Um único estilo de cartão para as três ofertas: foto ou ícone, título com altura mínima, texto, o que você recebe, primeiro passo, botão e link do case. */ function OfferCard({ offer }: Readonly<{ offer: Offer }>) { const poster = offer.poster ? getShowcaseAssets(offer.poster.id, "desktop") : null; return (
{poster && offer.poster ? ( {`Site ) : offer.icon ? ( ) : null}
{/* min-h de 3 linhas no desktop: os títulos de 2 e 3 linhas terminam na mesma altura e os textos se alinham */}

{offer.title}

{offer.description}

O que você recebe

{/* mt-auto: com cartões de alturas diferentes, o primeiro passo e o botão descem juntos até o pé do cartão */}

Primeiro passo

{offer.firstStep}

{offer.ctaLabel} {offer.moreLabel}
); } export function WorkModalities() { return (
{OFFERS.map((offer, index) => ( ))}
Ver todos os serviços {/* Lista compacta: o título e a descrição de cada etapa numa linha só, sem a grade de quatro cartões. */}

Como eu trabalho

Você acompanha as decisões e valida cada etapa. Prazo e investimento dependem do escopo, das integrações e dos riscos identificados.

    {PROCESS.map((step, index) => (
  1. {String(index + 1).padStart(2, "0")}

    {step.title}. {" "} {step.description}

    2. ))}
); }