From cb4a842204fab2ed39ae87caf07b257064bcf913 Mon Sep 17 00:00:00 2001 From: Gustavo Date: Thu, 8 Oct 2026 17:40:41 -0300 Subject: [PATCH] fix(portal): improve home conversion clarity and credibility Stop presenting illustrative dashboard data as customer results and make diagnosis the only primary home CTA. --- src/app/__tests__/home-conversion.test.tsx | 144 ++++++++++ src/app/page.tsx | 32 +-- .../sections/authority-real-ops-section.tsx | 63 ----- src/components/sections/faq.tsx | 5 +- src/components/sections/final-cta-v2.tsx | 18 +- src/components/sections/hero-v2.tsx | 267 ++++-------------- src/components/sections/how-it-works-hub.tsx | 15 +- src/components/sections/metrics.tsx | 70 ----- .../sections/problem-solution-section.tsx | 58 +--- src/components/sections/products-section.tsx | 4 +- src/components/sections/proof-social.tsx | 34 --- .../sections/results-social-proof-section.tsx | 85 ------ .../sections/whatsapp-product-section.tsx | 190 +++---------- src/lib/conversion-copy.ts | 16 +- 14 files changed, 292 insertions(+), 709 deletions(-) create mode 100644 src/app/__tests__/home-conversion.test.tsx delete mode 100644 src/components/sections/authority-real-ops-section.tsx delete mode 100644 src/components/sections/metrics.tsx delete mode 100644 src/components/sections/proof-social.tsx delete mode 100644 src/components/sections/results-social-proof-section.tsx diff --git a/src/app/__tests__/home-conversion.test.tsx b/src/app/__tests__/home-conversion.test.tsx new file mode 100644 index 00000000..659af79d --- /dev/null +++ b/src/app/__tests__/home-conversion.test.tsx @@ -0,0 +1,144 @@ +/** @vitest-environment jsdom */ +import { beforeEach, describe, expect, it, vi } from "vitest"; +import { fireEvent, render, screen, within } from "@testing-library/react"; +import Home from "../page"; +import { trackFunnelCtaClick, trackHomeCta } from "@/lib/analytics"; + +vi.mock("@/lib/analytics", () => ({ + trackFunnelCtaClick: vi.fn(), + trackHomeCta: vi.fn(), + trackCtaWhatsAppClick: vi.fn(), + trackCtaScroll50: vi.fn(), + trackScrollDepth: vi.fn(), + trackEcosystemLinkClick: vi.fn(), + trackToolCardClick: vi.fn(), + trackCtaDemoClick: vi.fn(), +})); + +const SECTION_ORDER = [ + "hero-heading", + "problem-solution-heading", + "how-it-works-hub-heading", + "whatsapp-product-heading", + "faq-heading", + "final-cta-v2-heading", + "tools-heading", + "products-heading", +] as const; + +const UNSUPPORTED_CLAIMS = [ + "LIVE", + "Produção", + "1.247", + "74%", + "2m12s", + "70%", + "100%", + "números reais", + "não mockup", + "não é mockup", + "Ver exemplo real", + "Operações reais", + "24/7", +]; + +describe("home conversion cleanup", () => { + beforeEach(() => { + vi.clearAllMocks(); + vi.stubEnv("NEXT_PUBLIC_WHATSAPP_NUMBER", "5511999999999"); + }); + + it("ordena a decisão antes do ecossistema e não mostra prova inventada", () => { + render(); + + const nodes = SECTION_ORDER.map((id) => { + const node = document.getElementById(id); + expect(node, id).toBeTruthy(); + return node!; + }); + + for (let index = 1; index < nodes.length; index += 1) { + const relation = nodes[index - 1].compareDocumentPosition(nodes[index]); + expect(relation & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy(); + } + + const text = document.body.textContent ?? ""; + for (const claim of UNSUPPORTED_CLAIMS) { + expect(text).not.toContain(claim); + } + + expect(text).toContain("Dados ilustrativos"); + expect(text).toContain("Demonstração da plataforma"); + expect(text).toContain("Quer entender como isso funcionaria na sua operação?"); + expect(screen.getByRole("heading", { name: "O que entra na operação" })).toBeTruthy(); + expect(screen.getByRole("heading", { name: "Como sua operação de WhatsApp sai do improviso" })).toBeTruthy(); + expect(screen.getByRole("heading", { name: "Perguntas frequentes" })).toBeTruthy(); + }); + + it("separa CTA primário, demo e WhatsApp no hero", () => { + render(); + const hero = screen.getByRole("region", { name: /Menos mensagem perdida/i }); + + const primary = within(hero).getByRole("link", { + name: "Agendar diagnóstico da operação no WhatsApp", + }); + expect(primary).toHaveAttribute("href", "/contato"); + expect(primary.className).toContain("df-btn-primary"); + + const demo = within(hero).getByRole("link", { + name: "Ver demonstração guiada de atendimento no WhatsApp", + }); + expect(demo).toHaveAttribute("href", "/demo"); + expect(demo).toHaveTextContent("Ver demo"); + expect(demo.className).not.toContain("df-btn-primary"); + + const whatsapp = within(hero).getByRole("link", { + name: "Falar no WhatsApp com a DevFlow Labs", + }); + expect(whatsapp.getAttribute("href")).toMatch(/^https:\/\/wa\.me\/5511999999999/); + expect(whatsapp.className).not.toContain("df-btn"); + + fireEvent.click(primary); + expect(trackFunnelCtaClick).toHaveBeenCalledWith({ + cta: "agendar_diagnostico", + surface: "hero_primary", + }); + expect(trackHomeCta).toHaveBeenCalledWith("hero_agendar_diagnostico"); + + fireEvent.click(demo); + expect(trackFunnelCtaClick).toHaveBeenCalledWith({ + cta: "ver_demo_guiada", + surface: "hero_secondary", + }); + }); + + it("mantém o CTA final imediatamente relevante e rastreado", () => { + render(); + const finalCta = screen.getByRole("region", { + name: "Quer entender como isso funcionaria na sua operação?", + }); + + const primary = within(finalCta).getByRole("link", { + name: "Agendar diagnóstico da operação no WhatsApp", + }); + const demo = within(finalCta).getByRole("link", { + name: "Ver demonstração guiada de atendimento no WhatsApp", + }); + + expect(primary).toHaveAttribute("href", "/contato"); + expect(demo).toHaveAttribute("href", "/demo"); + expect(demo).toHaveTextContent("Ver demo"); + + fireEvent.click(primary); + expect(trackFunnelCtaClick).toHaveBeenCalledWith({ + cta: "agendar_diagnostico", + surface: "final_cta_primary", + }); + + fireEvent.click(demo); + expect(trackFunnelCtaClick).toHaveBeenCalledWith({ + cta: "ver_demo_guiada", + surface: "final_cta_secondary", + }); + }); +}); diff --git a/src/app/page.tsx b/src/app/page.tsx index 16cde9c1..648c50fe 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,23 +5,15 @@ import { ScrollTracker } from "@/components/shared/scroll-tracker"; import { HeroV2 } from "@/components/sections/hero-v2"; import { TechnicalTrustStrip } from "@/components/sections/technical-trust-strip"; import { ProblemSolutionSection } from "@/components/sections/problem-solution-section"; -import { WhatsAppProductSection } from "@/components/sections/whatsapp-product-section"; -import { AuthorityRealOpsSection } from "@/components/sections/authority-real-ops-section"; import { HowItWorksHub } from "@/components/sections/how-it-works-hub"; -import { ResultsSocialProofSection } from "@/components/sections/results-social-proof-section"; +import { WhatsAppProductSection } from "@/components/sections/whatsapp-product-section"; +import { Faq } from "@/components/sections/faq"; import { FinalCtaV2 } from "@/components/sections/final-cta-v2"; -// Ecossistema secundário — abaixo da oferta principal -import { HubPillarsSection } from "@/components/sections/hub-pillars-section"; -import { WhereToStartSection } from "@/components/sections/where-to-start-section"; +// Ecossistema secundário — só depois da decisão de conversão import { ToolsSection } from "@/components/sections/tools-section"; import { ProductsSection } from "@/components/sections/products-section"; -// Seções existentes reaproveitadas -import { Metrics } from "@/components/sections/metrics"; -import { ProofSocial } from "@/components/sections/proof-social"; -import { Faq } from "@/components/sections/faq"; - const baseUrl = "https://devflowlabs.com.br"; const ogImage = `${baseUrl}/og-devflow.png`; @@ -91,31 +83,19 @@ export default function Home() { - - - - - - - - - + + + - - - - - - ); } diff --git a/src/components/sections/authority-real-ops-section.tsx b/src/components/sections/authority-real-ops-section.tsx deleted file mode 100644 index 6f15b9ac..00000000 --- a/src/components/sections/authority-real-ops-section.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Plug, Server, Radio } from "lucide-react"; -import { cn } from "@/lib/utils"; - -const points = [ - { - icon: Plug, - title: "API Meta de verdade", - text: "Cloud API oficial — não é atalho nem número espelhado.", - }, - { - icon: Server, - title: "Plugado no seu fluxo", - text: "Webhook, fila, handoff: desenhado pra quem recebe volume.", - }, - { - icon: Radio, - title: "Mesmo código em produção", - text: "Automações reais ativas hoje — não mockup de apresentação.", - }, -]; - -export function AuthorityRealOpsSection() { - return ( -
-
-
-
-

- Operações reais em produção — não mockup de apresentação -

-

- WhatsApp Cloud API oficial, fila priorizada, handoff humano e dashboard operacional. -

-
- -
    - {points.map((p) => ( -
  • -
    - -
    -

    {p.title}

    -

    {p.text}

    -
    • - ))} -
-
-
- ); -} diff --git a/src/components/sections/faq.tsx b/src/components/sections/faq.tsx index 867f8cb8..8af4f65d 100644 --- a/src/components/sections/faq.tsx +++ b/src/components/sections/faq.tsx @@ -28,7 +28,7 @@ const faqItems = [ { question: "Vocês só entregam o sistema ou ajudam a implementar?", answer: - "A entrega é consultiva: diagnóstico da operação, desenho dos fluxos, implementação guiada, treinamento e acompanhamento inicial com base nas métricas reais.", + "A entrega é consultiva: diagnóstico da operação, desenho dos fluxos, implementação guiada, treinamento e acompanhamento inicial com base no que a operação mostrar.", }, { question: "Para quais negócios isso faz sentido?", @@ -104,7 +104,10 @@ export function Faq() { diff --git a/src/components/sections/final-cta-v2.tsx b/src/components/sections/final-cta-v2.tsx index 86a7aa93..84d9fec5 100644 --- a/src/components/sections/final-cta-v2.tsx +++ b/src/components/sections/final-cta-v2.tsx @@ -4,9 +4,9 @@ import Link from "next/link"; import { ArrowRight } from "lucide-react"; import { trackFunnelCtaClick } from "@/lib/analytics"; import { + HOME_DEMO_CTA_LABEL, PRIMARY_CONVERT_CTA_LABEL, PRIMARY_CONVERT_HREF, - PRIMARY_DEMO_CTA_LABEL, PRIMARY_DEMO_HREF, } from "@/lib/conversion-copy"; import { cn } from "@/lib/utils"; @@ -33,17 +33,11 @@ export function FinalCtaV2() { id="final-cta-v2-heading" className="df-text-primary text-2xl font-bold tracking-tight sm:text-3xl" > - Menos mensagem perdida. Mais venda preservada. + Quer entender como isso funcionaria na sua operação?

- Agende um diagnóstico para transformar atendimento e vendas no WhatsApp em rotina previsível. -

-

- IA no repetitivo, humano no que importa — com WhatsApp Cloud API oficial, fila, handoff e dashboard. -

- -

- Operações reais em produção · implementação consultiva ponta a ponta + Em uma conversa rápida, analisamos como sua equipe usa o WhatsApp hoje e mostramos onde a DevFlow pode + organizar atendimento, distribuição e acompanhamento.

@@ -70,11 +64,11 @@ export function FinalCtaV2() { } className="df-btn-secondary inline-flex min-h-12 items-center justify-center gap-2 rounded-xl px-6 text-sm font-semibold transition-colors" > - {PRIMARY_DEMO_CTA_LABEL} + {HOME_DEMO_CTA_LABEL}

- Oferta principal: implementação de operação de atendimento e vendas no WhatsApp + O próximo passo é o diagnóstico da operação no WhatsApp.

diff --git a/src/components/sections/hero-v2.tsx b/src/components/sections/hero-v2.tsx index 4021e44e..b070b96d 100644 --- a/src/components/sections/hero-v2.tsx +++ b/src/components/sections/hero-v2.tsx @@ -1,181 +1,66 @@ "use client"; import Link from "next/link"; -import { - ArrowRight, - MessageCircle, - Check, - AlertTriangle, - Bot, - UserRound, - Clock, - BarChart3, -} from "lucide-react"; -import { trackFunnelCtaClick, trackHomeCta } from "@/lib/analytics"; +import { ArrowRight, MessageCircle, BarChart3, Bot, UserRound } from "lucide-react"; +import { trackCtaWhatsAppClick, trackFunnelCtaClick, trackHomeCta } from "@/lib/analytics"; import { HERO_TRUST_SIGNALS, + HOME_DEMO_CTA_LABEL, PRIMARY_CONVERT_CTA_LABEL, PRIMARY_CONVERT_HREF, - PRIMARY_DEMO_CTA_LABEL, PRIMARY_DEMO_HREF, PRODUCT_LIVE_HINT, QUICK_WHATSAPP_CTA_LABEL, } from "@/lib/conversion-copy"; -import { WhatsAppCta } from "@/components/shared/whatsapp-cta"; +import { getWhatsAppOrMailtoUrl, isWhatsAppNumberConfigured } from "@/lib/whatsapp"; import { cn } from "@/lib/utils"; -const bullets = [ - "Menos mensagem perdida — fila priorizada e SLA visível no dashboard", - "IA no repetitivo, humano no que importa — handoff quando o cliente precisa", - "WhatsApp Cloud API oficial, sem número espelhado — diagnóstico e operação acompanhada", -]; - -function OperationalDashboardMock() { - const metrics = [ - { label: "Msg 24h", value: "1.247", color: "df-status-brand" }, - { label: "Bot resolve", value: "74%", color: "df-status-info" }, - { label: "Com humano", value: "23", color: "df-status-warning" }, - { label: "TMR médio", value: "2m12s", color: "df-status-success" }, - ]; +const HERO_WHATSAPP_TEXT = + "Olá, vim pelo site. Quero falar sobre atendimento e vendas no WhatsApp com a DevFlow."; - const queue = [ - { - name: "Cliente B — Pedido #1042", - status: "SLA em risco", - time: "8 min", - dot: "df-dot-danger", - badge: "df-bg-danger-soft df-status-danger", - icon: AlertTriangle, - }, - { - name: "Cliente A — Status entrega", - status: "Resolvido pelo bot", - time: "agora", - dot: "df-dot-brand", - badge: "df-bg-brand-soft df-status-brand", - icon: Bot, - }, - { - name: "Cliente C — Reclamação", - status: "Handoff → Ana", - time: "2 min", - dot: "df-dot-warning", - badge: "df-bg-warning-soft df-status-warning", - icon: UserRound, - }, - ]; +const illustrativeQueue = [ + { label: "Fila", status: "Aguardando responsável", icon: UserRound }, + { label: "Automação", status: "Dúvida frequente", icon: Bot }, + { label: "Handoff", status: "Com a equipe", icon: MessageCircle }, +]; +function IllustrativeQueue() { return ( -
+
- Painel operacional + Demonstração da plataforma
- - LIVE + + Dados ilustrativos
- -
- {metrics.map((m) => ( -
-

{m.value}

-

{m.label}

-
- ))} -
- -
-

- Fila priorizada -

-
- {queue.map((item) => ( -
- -
-

{item.name}

- - - {item.status} - -
- - - {item.time} - +

+ Estrutura da fila. Não representa uma operação de cliente. +

+
+ {illustrativeQueue.map((item) => ( +
+ +
+

{item.label}

+

{item.status}

- ))} -
-
-
- ); -} - -function HandoffChatMock() { - return ( -
-
-
-
- -
-
-

Cliente C — Handoff

-

- - Ana · atendente humano -

-
- - Handoff - -
-
-
- Bot - Entendi. Vou transferir para nossa equipe agora. -
-
- ↓ Handoff para atendente -
-
- Ana - Olá! Vi sua reclamação sobre o pedido #1042. Já estou verificando. -
-
- Obrigado, preciso de uma solução rápida -
-
-
- ); -} - -function BotResolvedMock() { - return ( -
-
- -

Conversa resolvida pelo bot

-
-

- Cliente A consultou status do pedido #1042 — resposta automática em 12s, sem escalar para humano. -

-
- ✓ Resolvido - · - 12s de resposta + ))}
); } export function HeroV2() { + const whatsAppHref = getWhatsAppOrMailtoUrl(HERO_WHATSAPP_TEXT); + const whatsAppOpensChat = isWhatsAppNumberConfigured(); + return (
WhatsApp Platform · - API oficial Meta · inbox · IA - Cloud API oficial · inbox multiatendente · IA no repetitivo + Cloud API oficial · inbox da equipe
@@ -211,29 +95,11 @@ export function HeroV2() { Menos mensagem perdida. Mais resposta no tempo certo. Mais venda preservada.

- Transformamos seu WhatsApp em operação previsível com{" "} - inbox multiatendente, IA no repetitivo{" "} - e handoff humano quando importa.{" "} - - Diagnóstico, implementação guiada e operação acompanhada — ponta a ponta. - + O WhatsApp da equipe deixa de ficar espalhado no celular. A DevFlow organiza o fluxo e passa a + conversa para uma pessoa quando ela precisa de contexto.

-
    - {bullets.map((bullet, i) => ( -
  • - - - - {bullet} -
    • - ))} -
-
- {PRIMARY_DEMO_CTA_LABEL} + {HOME_DEMO_CTA_LABEL} -
+

+ { + trackCtaWhatsAppClick("hero_whatsapp"); + trackHomeCta("hero_whatsapp"); + trackFunnelCtaClick({ cta: "falar_whatsapp", surface: "hero_whatsapp" }); + }} + className="text-sm font-medium text-primary underline-offset-2 hover:underline" + > + {QUICK_WHATSAPP_CTA_LABEL} + +

{PRODUCT_LIVE_HINT}

@@ -291,14 +164,6 @@ export function HeroV2() { > Como funciona - · - trackHomeCta("hero_whatsapp_platform")} - className="font-semibold text-primary underline-offset-2 hover:underline" - > - WhatsApp Platform -

@@ -317,22 +182,8 @@ export function HeroV2() {
- {/* Mobile / tablet: composição operacional WhatsApp */} -
- - - -
- - {/* Desktop: grid operacional WhatsApp */} -
-
- -
- - -
-
+
+
diff --git a/src/components/sections/how-it-works-hub.tsx b/src/components/sections/how-it-works-hub.tsx index fe74ed44..e11cee2e 100644 --- a/src/components/sections/how-it-works-hub.tsx +++ b/src/components/sections/how-it-works-hub.tsx @@ -1,9 +1,12 @@ +"use client"; + import Link from "next/link"; import { ArrowRight, ClipboardList, GitBranch, Settings2, LineChart } from "lucide-react"; +import { trackFunnelCtaClick } from "@/lib/analytics"; import { + HOME_DEMO_CTA_LABEL, PRIMARY_CONVERT_CTA_LABEL, PRIMARY_CONVERT_HREF, - PRIMARY_DEMO_CTA_LABEL, PRIMARY_DEMO_HREF, } from "@/lib/conversion-copy"; import { cn } from "@/lib/utils"; @@ -35,7 +38,7 @@ const steps = [ number: "04", title: "Operação acompanhada", description: - "Com a operação rodando, acompanhamos métricas reais, ajustamos fluxos, treinamos a equipe e melhoramos o atendimento com base nos dados.", + "Com a operação rodando, acompanhamos o que ela mostra, ajustamos fluxos, treinamos a equipe e melhoramos o atendimento com base nesses dados.", }, ]; @@ -100,6 +103,9 @@ export function HowItWorksHub() { + trackFunnelCtaClick({ cta: "agendar_diagnostico", surface: "how_it_works_primary" }) + } className={cn( "df-btn-primary inline-flex max-w-full items-center justify-center gap-2 rounded-xl px-5 py-3.5 text-center text-sm font-bold leading-snug", "df-shadow-cta-soft transition-all hover:scale-[1.02] sm:px-7 sm:text-base" @@ -111,9 +117,12 @@ export function HowItWorksHub() { + trackFunnelCtaClick({ cta: "ver_demo_guiada", surface: "how_it_works_demo" }) + } className="df-btn-secondary inline-flex max-w-full items-center justify-center gap-2 rounded-xl px-5 py-3.5 text-center text-sm font-semibold leading-snug transition-colors sm:px-7 sm:text-base" > - {PRIMARY_DEMO_CTA_LABEL} + {HOME_DEMO_CTA_LABEL} diff --git a/src/components/sections/metrics.tsx b/src/components/sections/metrics.tsx deleted file mode 100644 index 44499d8d..00000000 --- a/src/components/sections/metrics.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { cn } from "@/lib/utils"; - -const metrics = [ - { - value: "24/7", - label: "Atendimento automático", - }, - { - value: "70%", - label: "Mensagens automatizadas", - sub: "até 70% resolvidas sem humano", - }, - { - value: "100%", - label: "Conversas registradas", - }, - { - value: "—", - label: "Handoff automático", - sub: "para equipe humana", - }, -]; - -export function Metrics() { - return ( -
-
-
-
-

- Impacto operacional -

-

- Números reais de operações usando a DevFlow. -

-
- -
- {metrics.map((metric) => ( -
-

- {metric.value} -

-

{metric.label}

- {metric.sub && ( -

{metric.sub}

- )} -
- ))} -
-
-
- ); -} diff --git a/src/components/sections/problem-solution-section.tsx b/src/components/sections/problem-solution-section.tsx index 3116774b..2a6b5b4a 100644 --- a/src/components/sections/problem-solution-section.tsx +++ b/src/components/sections/problem-solution-section.tsx @@ -1,27 +1,19 @@ -import Link from "next/link"; -import { ArrowRight, X, Check, AlertTriangle } from "lucide-react"; -import { WhatsAppCta } from "@/components/shared/whatsapp-cta"; -import { - PRIMARY_CONVERT_CTA_LABEL, - PRIMARY_CONVERT_HREF, - QUICK_WHATSAPP_CTA_LABEL, -} from "@/lib/conversion-copy"; -import { cn } from "@/lib/utils"; +import { X, Check, AlertTriangle } from "lucide-react"; const problems = [ "Mensagens importantes se perdem no volume", "Cliente espera resposta e procura outro fornecedor", "Equipe responde manualmente as mesmas dúvidas todos os dias", "Ninguém sabe exatamente o que está parado, atrasado ou em risco", - "Falta histórico, fila, prioridade e métrica", + "Falta histórico, fila e responsável", ]; -const solutions = [ - "IA responde dúvidas repetitivas 24h", - "Handoff leva a conversa para um humano quando precisa", - "Inbox multiatendente organiza a operação", - "SLA e fila priorizada mostram o que exige atenção", - "Dashboard dá visibilidade para decidir com dados", +const changes = [ + "O repetitivo deixa de depender de alguém no celular", + "A conversa que pede uma pessoa segue para a equipe com contexto", + "Dá para ver o que está parado e quem responde", + "O histórico não fica só na memória de quem atendeu", + "A implantação começa pelo diagnóstico da operação atual", ]; export function ProblemSolutionSection() { @@ -60,7 +52,7 @@ export function ProblemSolutionSection() {

- WhatsApp desorganizado gera demora, mensagem perdida, equipe sobrecarregada e venda escapando. + WhatsApp desorganizado gera demora, mensagem perdida e equipe sobrecarregada.

    {problems.map((item) => ( @@ -81,14 +73,14 @@ export function ProblemSolutionSection() {

    - A solução + O que muda

    - IA no repetitivo, humano no que importa — com fila priorizada, SLA e dashboard operacional. + A operação passa a ter dono, contexto e um caminho claro até uma pessoa.

      - {solutions.map((item) => ( + {changes.map((item) => (
    • {item} @@ -97,32 +89,6 @@ export function ProblemSolutionSection() {
    - -

    - Menos mensagem perdida. Mais resposta no tempo certo. Mais venda preservada. -

    - -
    - - {PRIMARY_CONVERT_CTA_LABEL} - - - -
    ); diff --git a/src/components/sections/products-section.tsx b/src/components/sections/products-section.tsx index ac1fcb14..056449c2 100644 --- a/src/components/sections/products-section.tsx +++ b/src/components/sections/products-section.tsx @@ -144,9 +144,7 @@ export function ProductsSection() { "transition-all duration-200", product.disabled ? "df-text-secondary cursor-default border border-dashed border-border bg-muted/20 pointer-events-none" - : product.featured - ? "df-btn-primary df-shadow-cta-soft" - : "df-surface-elevated border border-border text-foreground hover:bg-muted/20" + : "df-btn-secondary" )} tabIndex={product.disabled ? -1 : undefined} aria-disabled={product.disabled} diff --git a/src/components/sections/proof-social.tsx b/src/components/sections/proof-social.tsx deleted file mode 100644 index 9803f074..00000000 --- a/src/components/sections/proof-social.tsx +++ /dev/null @@ -1,34 +0,0 @@ -const claims = [ - "Projetado para operações com alto volume de mensagens", - "Estrutura preparada para restaurantes, lojas, clínicas e tabacarias", - "Baseado em automação real com WhatsApp Cloud API", -]; - -export function ProofSocial() { - return ( -
    -
    -
    -

    - Prova social -

    -
      - {claims.map((claim) => ( -
    • - - {claim} -
      • - ))} -
    -
    -
    -
    - ); -} diff --git a/src/components/sections/results-social-proof-section.tsx b/src/components/sections/results-social-proof-section.tsx deleted file mode 100644 index 21df9d37..00000000 --- a/src/components/sections/results-social-proof-section.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { ArrowRight, TrendingUp } from "lucide-react"; -import Link from "next/link"; -import { VER_EXEMPLO_REAL_CTA_LABEL } from "@/lib/conversion-copy"; -import { cn } from "@/lib/utils"; - -const stories = [ - { - antes: "Demorava horas pra organizar tudo", - depois: "Agora faço em minutos", - accent: "border-l-[var(--devflow-brand)]", - }, - { - antes: "Cliente esperando resposta", - depois: "Automático 24h", - accent: "border-l-[var(--devflow-success)]", - }, - { - antes: "Planilha espalhada", - depois: "Um painel, visão clara", - accent: "border-l-[var(--devflow-info)]", - }, -]; - -export function ResultsSocialProofSection() { - return ( -
    -
    -
    -
    - - Antes → depois -
    -

    Na prática, o que muda:

    -

    - Menos manual, mais fluxo -

    -
    - -
      - {stories.map((s) => ( -
    • -
      -

      - Antes -

      -

      {s.antes}

      -
      -
      -
      -

      Depois

      -

      {s.depois}

      -
      -
      • - ))} -
    - -

    - - {VER_EXEMPLO_REAL_CTA_LABEL} - - -

    -
    -
    - ); -} diff --git a/src/components/sections/whatsapp-product-section.tsx b/src/components/sections/whatsapp-product-section.tsx index 8e34fd14..18fe6f98 100644 --- a/src/components/sections/whatsapp-product-section.tsx +++ b/src/components/sections/whatsapp-product-section.tsx @@ -1,171 +1,61 @@ -"use client"; +import { Inbox, Bot, ListOrdered, Plug } from "lucide-react"; -import Link from "next/link"; -import { Check, ArrowRight, Zap, UserRound, BarChart3 } from "lucide-react"; -import { WhatsAppCta } from "@/components/shared/whatsapp-cta"; -import { - ENTENDER_APLICAR_NEGOCIO_CTA_LABEL, - PLATFORM_IN_ACTION_CTA_LABEL, -} from "@/lib/conversion-copy"; -import { cn } from "@/lib/utils"; - -const features = [ +const capabilities = [ { - icon: Zap, - title: "Resposta na hora", - description: "FAQ, status, links — 24h sem você no celular.", + icon: Inbox, + title: "Inbox da equipe", + description: "Várias pessoas atendem no mesmo número, com responsável e histórico da conversa.", }, { - icon: UserRound, - title: "Humano quando precisa", - description: "Cliente pede gente? A conversa vai pra equipe.", + icon: Bot, + title: "Automação no repetitivo", + description: + "Dúvidas frequentes, status e triagem seguem um fluxo. Quando a conversa pede uma pessoa, o handoff leva o contexto.", }, { - icon: BarChart3, - title: "Números na mesa", - description: "Volume, bot vs humano — pra decidir, não pra decorar.", + icon: ListOrdered, + title: "Fila visível", + description: "A equipe vê o que está aguardando, em atendimento ou encerrado.", + }, + { + icon: Plug, + title: "WhatsApp Cloud API oficial", + description: "Webhooks e API oficial da Meta. Não é número espelhado nem sessão presa a um celular.", }, -]; - -const highlights = [ - "API oficial Meta", - "Sem mensagem duplicada", - "Auditoria rastreável", - "Escala com a operação", ]; export function WhatsAppProductSection() { return (
    -

    - Solução principal da DevFlow Labs: -

    -
    -
    -
    -

    - WhatsApp Platform — operação previsível de atendimento e vendas -

    -

    - Mais resposta no tempo certo, com IA no repetitivo e handoff humano quando importa. - - WhatsApp Cloud API oficial, sem número espelhado — fila, SLA e dashboard operacional. - -

    -
    - -
    - {features.map((feature) => ( -
    -
    - -
    -

    {feature.title}

    -

    {feature.description}

    -
    - ))} -
    - -
      - {highlights.map((item) => ( -
    • - - {item} -
      • - ))} -
    - -
    - - {PLATFORM_IN_ACTION_CTA_LABEL} - - - -

    - Demo guiada em seguida — sem compromisso nesta etapa. -

    -
    -
    +
    +
    +

    + O que entra na operação +

    +

    + Capacidades da WhatsApp Platform. O desenho de cada fluxo sai do diagnóstico, não de um pacote genérico. +

    +
    -
    -
    -
    -

    Painel — hoje

    - - Produção - +
      + {capabilities.map((item) => ( +
    • +
      +
      -
      - {[ - { label: "Mensagens", value: "1.247", color: "df-status-brand" }, - { label: "No bot", value: "74%", color: "df-status-info" }, - { label: "Humanos", value: "23", color: "df-status-warning" }, - ].map((stat) => ( -
      -

      {stat.value}

      -

      - {stat.label} -

      -
      - ))} -
      -
      -

      - Fila recente -

      - {[ - { name: "Cliente A", status: "Resolvido pelo bot", time: "agora", dot: "df-dot-brand" }, - { name: "Cliente B", status: "Com atendente", time: "2 min", dot: "df-dot-warning" }, - { name: "Cliente C", status: "Aguardando", time: "5 min", dot: "df-dot-info" }, - ].map((conv) => ( -
      - -
      -

      {conv.name}

      -

      {conv.status}

      -
      - - {conv.time} - -
      - ))} -
      -
    -
    -

    - Sistema em produção com automações reais — API Meta, fila, handoff. -

    -
    -
    -
    +

    {item.title}

    +

    {item.description}

    + + ))} +
); diff --git a/src/lib/conversion-copy.ts b/src/lib/conversion-copy.ts index 5f85f79f..c199a09e 100644 --- a/src/lib/conversion-copy.ts +++ b/src/lib/conversion-copy.ts @@ -3,6 +3,8 @@ /** Demo guiada no portal (`/demo`). */ export const PRIMARY_DEMO_HREF = "/demo"; export const PRIMARY_DEMO_CTA_LABEL = "Ver demo guiada"; +/** Home: secundário mais curto. As outras páginas mantêm `PRIMARY_DEMO_CTA_LABEL`. */ +export const HOME_DEMO_CTA_LABEL = "Ver demo"; /** WhatsApp — baixa fricção quando o bloco já tem demo como primário. */ export const QUICK_WHATSAPP_CTA_LABEL = "Falar no WhatsApp"; @@ -14,8 +16,6 @@ export const SPECIALIST_WHATSAPP_CTA_LABEL = "Falar com especialista"; export const VER_COMO_FUNCIONA_CTA_LABEL = "Ver como funciona"; export const PLATFORM_IN_ACTION_CTA_LABEL = "Ver a plataforma em ação"; export const ENTENDER_APLICAR_NEGOCIO_CTA_LABEL = "Entender como aplicar no meu negócio"; -export const VER_EXEMPLO_REAL_CTA_LABEL = "Ver exemplo real"; - /** Landings de nicho — copy fixa do funil. */ export const NICHE_VER_NA_PRATICA_CTA_LABEL = "Ver como funciona na prática"; export const NICHE_RESOLVER_NEGOCIO_CTA_LABEL = "Resolver isso no meu negócio"; @@ -30,7 +30,7 @@ export const PRIMARY_CONVERT_HREF = "/contato"; export const HEADER_CTA_LABEL = PRIMARY_CONVERT_CTA_LABEL; export const TECH_TRUST_STRIP = - "Integrações reais · APIs oficiais · Automações em produção"; + "WhatsApp Cloud API oficial · Webhooks · Fila e handoff humano"; export const PRODUCT_LIVE_HINT = "Diagnóstico, implementação guiada e operação acompanhada"; @@ -44,12 +44,12 @@ export const ECOSYSTEM_PRODUCTS_HEADING = "Outros produtos do ecossistema"; export const ECOSYSTEM_PRODUCTS_DESCRIPTION = "Quando precisar ir além do atendimento no WhatsApp, conheça as soluções complementares."; -/** Prova social segura no hero — sem números mock. */ +/** Sinais técnicos do hero — capacidades da oferta, sem resultado de cliente. */ export const HERO_TRUST_SIGNALS = [ - "Operações reais em produção", - "API oficial Meta", - "Fluxos com fila, handoff e dashboard", - "Implementação consultiva ponta a ponta", + "WhatsApp Cloud API oficial", + "Inbox para a equipe", + "Handoff para uma pessoa", + "Implementação acompanhada", ] as const; /** Página `/contato` — diagnóstico da operação WhatsApp. */