feat(frontend): branding "B2BCall by Handix" — logos novos em todo o app

Usuário forneceu 3 logos novos (B2BCall horizontal, B2BCall quadrado, Handix — empresa mãe). Processados com sharp (trim de whitespace + resize) e salvos em apps/frontend/public/branding/, substituindo o antigo b2blogo.png (mesmo desenho, só com mais espaço em branco ao redor). Achado ao processar: Logo_Handix.png original era RGB sem canal alpha (fundo branco opaco) — aplicar o mesmo filtro brightness-0 invert já usado no logo B2BCall pro painel escuro do login virava um retângulo branco sólido. Corrigido recolorindo pixels próximos de branco como transparentes via sharp antes de salvar. Sidebar (tenant e platform) ganha o ícone do B2BCall ao lado do nome do tenant/ "PLATFORM" no cabeçalho (canto superior esquerdo); topbar ganha o logo da Handix com link pra www.handix.com.br (canto superior direito, escondido no mobile). Login ganha "BY HANDIX" abaixo do logo principal e um rodapé com o logo da Handix + link. Testado ponta a ponta via Puppeteer: login, dashboard tenant/platform (claro e escuro), sidebar recolhida, drawer mobile. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BFaBaBSQGhyXGEgtTYZGV8
2026-08-30 11:01:55 -03:00
parent 4b927e9d9e
commit a15ea26cb5
20 changed files with 65 additions and 8 deletions
--- a/apps/frontend/src/app/globals.css
+++ b/apps/frontend/src/app/globals.css
@@ -5,7 +5,7 @@
 /*
 * Tokens (agente.md secao 165: colors/typography/spacing/radius/shadows/
 * status colors). Paleta derivada do logo real (apps/frontend/public/
- * branding/b2blogo.png): navy profundo + azul saturado + teal de apoio —
+ * branding/b2bcall-horizontal.png): navy profundo + azul saturado + teal de apoio —
 * nunca uma paleta nova escolhida livremente (agente.md secao "Brand
 * Commitments" em PRODUCT.md).
 */
--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -44,7 +44,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
      <body className="font-sans antialiased">
        {/*
          THESIS: B2BCall's dashboards read as a live instrument panel, not a generic admin table — the platform's pulse before any list.
-          OWN-WORLD: navy #0B1B3A ground, brand blue #2554FF primary, teal #2EC9C0 accent (from b2blogo.png); IBM Plex Sans UI, IBM Plex Mono tabular readouts.
+          OWN-WORLD: navy #0B1B3A ground, brand blue #2554FF primary, teal #2EC9C0 accent (from b2bcall-horizontal.png); IBM Plex Sans UI, IBM Plex Mono tabular readouts.
          STORY: a platform admin opens the dashboard and reads the whole platform's live state — tenants, calls in flight, capacity headroom — in one glance.
          FIRST VIEWPORT: sidebar+topbar shell, content opens on a grid of large mono instrument tiles for live counters, live ones pulse; a quieter row below for not-yet-available billing figures, explicitly marked pending.
          FORM: concept-seed surface/operate key ae95b901, candidate #3 (seven-segment/instrument panel) chosen over dealt lead #4 (HyperCard) — reasoned override, no interactive decision round available in this environment, disclosed to the user.
--- a/apps/frontend/src/app/login/page.tsx
+++ b/apps/frontend/src/app/login/page.tsx
@@ -66,7 +66,10 @@ export default function LoginPage() {
            backgroundSize: "40px 40px",
          }}
        />
-        <Image src="/branding/b2blogo.png" alt="B2BCall" width={180} height={44} priority className="relative brightness-0 invert" />
+        <div className="relative">
+          <Image src="/branding/b2bcall-horizontal.png" alt="B2BCall" width={180} height={59} priority className="brightness-0 invert" />
+          <p className="mt-2 text-xs font-medium uppercase tracking-[0.2em] text-white/45">by Handix</p>
+        </div>
        <div className="relative max-w-md">
          <p className="text-2xl font-semibold leading-snug text-white">
            Discador preditivo, call center e análise de IA sob um único painel de controle.
@@ -76,12 +79,18 @@ export default function LoginPage() {
            chamada.
          </p>
        </div>
+        <div className="relative flex items-center gap-3 border-t border-white/10 pt-6">
+          <Image src="/branding/handix-logo.png" alt="Handix" width={28} height={22} className="brightness-0 invert opacity-70" />
+          <a href="https://www.handix.com.br" target="_blank" rel="noopener noreferrer" className="text-xs text-white/50 hover:text-white/80">
+            www.handix.com.br
+          </a>
+        </div>
      </div>

      {/* Form */}
      <div className="flex flex-1 flex-col justify-center px-6 py-12 sm:px-12 lg:px-16">
        <div className="mx-auto w-full max-w-sm">
-          <Image src="/branding/b2blogo.png" alt="B2BCall" width={140} height={34} priority className="mb-10 lg:hidden" />
+          <Image src="/branding/b2bcall-horizontal.png" alt="B2BCall" width={140} height={46} priority className="mb-10 lg:hidden" />
          <h1 className="text-xl font-semibold text-foreground">Entrar no B2BCall</h1>
          <p className="mt-1 text-sm text-muted-foreground">Acesse com as credenciais da sua conta.</p>

--- a/apps/frontend/src/app/select-tenant/page.tsx
+++ b/apps/frontend/src/app/select-tenant/page.tsx
@@ -17,7 +17,7 @@ export default async function SelectTenantPage() {
  return (
    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
      <div className="w-full max-w-sm">
-        <Image src="/branding/b2blogo.png" alt="B2BCall" width={140} height={34} priority className="mx-auto mb-8" />
+        <Image src="/branding/b2bcall-horizontal.png" alt="B2BCall" width={140} height={46} priority className="mx-auto mb-8" />
        <h1 className="text-center text-lg font-semibold text-foreground">Qual conta você quer acessar?</h1>
        <p className="mt-1 text-center text-sm text-muted-foreground">Sua conta tem acesso a mais de um tenant.</p>
        <div className="mt-6">
--- a/apps/frontend/src/app/trocar-senha/trocar-senha-view.tsx
+++ b/apps/frontend/src/app/trocar-senha/trocar-senha-view.tsx
@@ -48,7 +48,7 @@ export function TrocarSenhaView() {
  return (
    <div className="flex min-h-dvh flex-col items-center justify-center px-6 py-12">
      <div className="mx-auto w-full max-w-sm">
-        <Image src="/branding/b2blogo.png" alt="B2BCall" width={140} height={34} priority className="mb-10" />
+        <Image src="/branding/b2bcall-horizontal.png" alt="B2BCall" width={140} height={46} priority className="mb-10" />
        <h1 className="text-xl font-semibold text-foreground">Trocar senha</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Esta é a senha temporária gerada na criação da sua conta — escolha uma nova antes de continuar.
--- a/apps/frontend/src/components/shell/mobile-nav-drawer.tsx
+++ b/apps/frontend/src/components/shell/mobile-nav-drawer.tsx
@@ -34,7 +34,7 @@ export function MobileNavDrawer({ items }: { items: NavSection[] }) {
        >
          <Dialog.Title className="sr-only">Navegação</Dialog.Title>
          <div className="flex h-16 items-center justify-between border-b border-border px-4">
-            <Image src="/branding/b2blogo.png" alt="B2BCall" width={110} height={27} />
+            <Image src="/branding/b2bcall-horizontal.png" alt="B2BCall" width={110} height={36} />
            <Dialog.Close asChild>
              <button
                type="button"
--- a/apps/frontend/src/components/shell/sidebar.tsx
+++ b/apps/frontend/src/components/shell/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { useState } from "react";
+import Image from "next/image";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { NavList } from "./nav-list";
@@ -21,7 +22,12 @@ export function Sidebar({ items, railLabel }: { items: NavSection[]; railLabel:
      )}
    >
      <div className="flex h-16 items-center justify-between border-b border-border px-4">
-        {!collapsed && <span className="text-sm font-semibold tracking-wide text-foreground">{railLabel}</span>}
+        {!collapsed && (
+          <div className="flex min-w-0 items-center gap-2.5">
+            <Image src="/branding/b2bcall-quadrado.png" alt="" width={28} height={23} className="shrink-0" />
+            <span className="truncate text-sm font-semibold tracking-wide text-foreground">{railLabel}</span>
+          </div>
+        )}
        <button
          type="button"
          onClick={() => setCollapsed((c) => !c)}
--- a/apps/frontend/src/components/shell/topbar.tsx
+++ b/apps/frontend/src/components/shell/topbar.tsx
@@ -1,5 +1,6 @@
 "use client";

+import Image from "next/image";
 import { useRouter, usePathname } from "next/navigation";
 import { LogOut } from "lucide-react";
 import { ThemeToggle } from "../platform-shell/theme-toggle";
@@ -27,6 +28,16 @@ export function Topbar({ items, fallbackTitle, userLabel }: { items: NavSection[
        </div>
      </div>
      <div className="flex shrink-0 items-center gap-2 sm:gap-4">
+        <a
+          href="https://www.handix.com.br"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Handix — empresa desenvolvedora do B2BCall"
+          className="hidden shrink-0 opacity-70 transition-opacity hover:opacity-100 sm:block"
+        >
+          <Image src="/branding/handix-logo.png" alt="Handix" width={38} height={31} />
+        </a>
+        <div className="hidden h-6 w-px bg-border sm:block" aria-hidden />
        <ThemeToggle />
        <div className="hidden h-6 w-px bg-border sm:block" aria-hidden />
        <span className="hidden max-w-[220px] truncate text-sm text-muted-foreground sm:inline">{userLabel}</span>