From a3ea7b54ab457e6ab87d73f2ecf2fafb9f3b200f Mon Sep 17 00:00:00 2001 From: bryancalvarenga Date: Sat, 16 May 2026 22:12:56 -0300 Subject: [PATCH 1/4] Polish frontend auth and landing UI --- web/src/app/(auth)/login/page.tsx | 59 ++++---- web/src/app/(auth)/register/page.tsx | 137 +++++++++--------- web/src/app/(dashboard)/dashboard/page.tsx | 57 ++------ web/src/app/[slug]/page.tsx | 4 +- web/src/app/globals.css | 7 +- web/src/app/page.tsx | 4 +- web/src/components/layout/Topbar.tsx | 18 +-- .../features/auth/components/AuthCarousel.tsx | 52 +++---- .../components/CardProduto.tsx | 6 +- .../components/CardapioConteudo.tsx | 8 +- .../components/HeaderLoja.tsx | 6 +- 11 files changed, 163 insertions(+), 195 deletions(-) diff --git a/web/src/app/(auth)/login/page.tsx b/web/src/app/(auth)/login/page.tsx index 6015e49..a6c09a8 100644 --- a/web/src/app/(auth)/login/page.tsx +++ b/web/src/app/(auth)/login/page.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { zodResolver } from "@hookform/resolvers/zod"; -import { ArrowRight, Eye, EyeOff, ShieldCheck, Sparkles, Utensils } from "lucide-react"; +import { ArrowRight, Eye, EyeOff, ShieldCheck } from "lucide-react"; import { useForm } from "react-hook-form"; import { toast } from "sonner"; import { AuthCarousel } from "@/features/auth/components/AuthCarousel"; @@ -43,17 +43,19 @@ function AppleIcon() { function AuthBrand() { return ( - - - + + + M + + + MeVêUm - MeVêUm ); } const inputClass = - "input-base h-[54px] rounded-lg border-[#E8E0D6] bg-[#FBF7F4] px-4 text-base text-[#1C1917] placeholder:text-[#8D8780] focus:border-[#FF5C0A] focus:ring-2 focus:ring-[#FF5C0A]/15"; + "input-base h-12 rounded-lg border-[#E8E0D6] bg-[#FBF7F4] px-4 text-sm text-[#1C1917] placeholder:text-[#8D8780] focus:border-[#FF5C0A] focus:ring-2 focus:ring-[#FF5C0A]/15"; export default function LoginPage() { const router = useRouter(); @@ -85,31 +87,32 @@ export default function LoginPage() { } return ( -
-
-
+
+
+
+
- - ← Voltar ao site + + ← Voltar ao site
-
-
-
- - Bem-vindo de volta +
+
+
+ + Bem-vindo de volta
-

+

Entre na sua central de pedidos.

-

+

Acesse seu cardápio, dashboard e pedidos em um só lugar.

-
+
{[ { label: "Google", provedor: "google" as const, icon: }, { label: "Microsoft", provedor: "microsoft" as const, icon: }, @@ -120,7 +123,7 @@ export default function LoginPage() { type="button" onClick={() => iniciarOAuth(provedor)} data-testid={`social-login-${provedor}`} - className="flex h-[54px] items-center justify-center gap-3 rounded-lg border border-[#E8E0D6] bg-[#FBF7F4] text-lg font-medium text-[#2C2722] shadow-[0_2px_8px_rgba(28,25,23,0.08)] transition hover:bg-white" + className="flex h-12 items-center justify-center gap-2.5 rounded-lg border border-[#E8E0D6] bg-[#FBF7F4] text-sm font-medium text-[#2C2722] shadow-[0_2px_8px_rgba(28,25,23,0.08)] transition hover:bg-white" > {icon} {label} @@ -128,18 +131,18 @@ export default function LoginPage() { ))}
-
+
- + OU COM E-MAIL
-
+
-
+
© 2026 MeVêUm · Sistema para restaurantes brasileiros
diff --git a/web/src/app/(auth)/register/page.tsx b/web/src/app/(auth)/register/page.tsx index ced57ce..e1a3025 100644 --- a/web/src/app/(auth)/register/page.tsx +++ b/web/src/app/(auth)/register/page.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { zodResolver } from "@hookform/resolvers/zod"; -import { ArrowRight, Eye, EyeOff, ShieldCheck, Sparkles, Utensils } from "lucide-react"; +import { ArrowRight, Eye, EyeOff, ShieldCheck } from "lucide-react"; import { useForm } from "react-hook-form"; import { toast } from "sonner"; import { AuthCarousel } from "@/features/auth/components/AuthCarousel"; @@ -43,17 +43,19 @@ function AppleIcon() { function AuthBrand() { return ( - - - + + + M + + + MeVêUm - MeVêUm ); } const inputClass = - "input-base h-[54px] rounded-lg border-[#E8E0D6] bg-[#FBF7F4] px-4 text-base text-[#1C1917] placeholder:text-[#8D8780] focus:border-[#FF5C0A] focus:ring-2 focus:ring-[#FF5C0A]/15"; + "input-base h-12 rounded-lg border-[#E8E0D6] bg-[#FBF7F4] px-4 text-sm text-[#1C1917] placeholder:text-[#8D8780] focus:border-[#FF5C0A] focus:ring-2 focus:ring-[#FF5C0A]/15"; export default function RegisterPage() { const router = useRouter(); @@ -91,31 +93,32 @@ export default function RegisterPage() { } return ( -
-
-
+
+
+
+
- - ← Voltar ao site + + ← Voltar ao site
-
-
-
- - Criar conta grátis +
+
+
+ + Criar conta grátis
-

+

Comece a vender mais hoje mesmo.

-

+

Crie sua conta MeVêUm em menos de 1 minuto. Sem cartão de crédito.

-
+
{[ { label: "Google", provedor: "google" as const, icon: }, { label: "Microsoft", provedor: "microsoft" as const, icon: }, @@ -126,7 +129,7 @@ export default function RegisterPage() { type="button" onClick={() => iniciarOAuth(provedor)} data-testid={`social-register-${provedor}`} - className="flex h-[54px] items-center justify-center gap-3 rounded-lg border border-[#E8E0D6] bg-[#FBF7F4] text-lg font-medium text-[#2C2722] shadow-[0_2px_8px_rgba(28,25,23,0.08)] transition hover:bg-white" + className="flex h-12 items-center justify-center gap-2.5 rounded-lg border border-[#E8E0D6] bg-[#FBF7F4] text-sm font-medium text-[#2C2722] shadow-[0_2px_8px_rgba(28,25,23,0.08)] transition hover:bg-white" > {icon} {label} @@ -134,37 +137,37 @@ export default function RegisterPage() { ))}
-
+
- + OU COM E-MAIL
-
-
- - - {errors.nomeLoja && ( -

- {errors.nomeLoja.message} -

- )} -
+ +
+
+ + + {errors.nomeLoja && ( +

+ {errors.nomeLoja.message} +

+ )} +
-
+
+
-
-
- - - {errors.email && ( -

- {errors.email.message} -

- )} +
+ + + {errors.email && ( +

+ {errors.email.message} +

+ )} +
-
+
-
+
© 2026 MeVêUm · Sistema para restaurantes brasileiros
diff --git a/web/src/app/(dashboard)/dashboard/page.tsx b/web/src/app/(dashboard)/dashboard/page.tsx index 1691cd3..a134790 100644 --- a/web/src/app/(dashboard)/dashboard/page.tsx +++ b/web/src/app/(dashboard)/dashboard/page.tsx @@ -129,30 +129,17 @@ const graficoVazio: DadoGrafico[] = ["seg", "ter", "qua", "qui", "sex", "sab", " // ───────────────────────────────────────────────────────────────────────────── export default function DashboardPage() { const { usuario, carregando } = useSessaoAutenticada(); - const [metricas, setMetricas] = useState(null); - const [grafico, setGrafico] = useState([]); + const [metricas, setMetricas] = useState(metricasVazias); + const [grafico, setGrafico] = useState(graficoVazio); const [pedidos, setPedidos] = useState([]); const [kds, setKds] = useState([]); const [top, setTop] = useState([]); const [clientes, setClientes] = useState([]); - const [loading, setLoading] = useState(true); const [tab, setTab] = useState("todos"); useEffect(() => { - if (carregando) return; + if (carregando || !usuario?.lojaId) return; - if (!usuario?.lojaId) { - setMetricas(metricasVazias); - setGrafico(graficoVazio); - setPedidos([]); - setKds([]); - setTop([]); - setClientes([]); - setLoading(false); - return; - } - - setLoading(true); Promise.all([ buscarMetricas(), buscarGraficoSemanal(), @@ -176,14 +163,13 @@ export default function DashboardPage() { setKds([]); setTop([]); setClientes([]); - }) - .finally(() => setLoading(false)); + }); }, [carregando, usuario?.lojaId]); const pedidosFiltrados = tab === "todos" ? pedidos : pedidos.filter((p) => p.status === tab); - if (loading) { + if (carregando) { return (
+
{/* ── Métricas ────────────────────────────────────────────────────────── */} -
+

Faturamento hoje

@@ -235,26 +221,14 @@ export default function DashboardPage() { {Math.abs(metricas?.variacaoTempoMedioCozinha ?? 0)} min

-
-

Em preparo

-

- {metricas?.pedidosEmPreparo ?? 0} -

-

ativos agora

+ -
-

Novos clientes

-

- {metricas?.novosClientesHoje ?? 0} -

-

hoje

+ -
-

Recompra

-

- {metricas?.taxaRecompra ?? 0}% -

-

clientes recorrentes

+
@@ -267,7 +241,7 @@ export default function DashboardPage() { >

Pedidos recentes

-
+
{TABS.map((t) => ( -
- - {nome} - - -
+ {nome}
); diff --git a/web/src/features/auth/components/AuthCarousel.tsx b/web/src/features/auth/components/AuthCarousel.tsx index 1e981c5..aa26773 100644 --- a/web/src/features/auth/components/AuthCarousel.tsx +++ b/web/src/features/auth/components/AuthCarousel.tsx @@ -1,7 +1,7 @@ "use client"; import { useState } from "react"; -import { ChartColumn, MessageCircle, QrCode, Sparkles, Star } from "lucide-react"; +import { ChartColumn, MessageCircle, QrCode, Star } from "lucide-react"; const SLIDES = [ { @@ -10,7 +10,7 @@ const SLIDES = [ title: "Seu cardápio com QR Code, em minutos.", description: "Personalize fotos, categorias e preços. Ative a sua loja em uma URL exclusiva como meveum.com.br/sua-loja.", - badge: "+38% no ticket médio", + badge: "QR Code e loja online", }, { icon: MessageCircle, @@ -18,7 +18,7 @@ const SLIDES = [ title: "Pedidos chegam prontos no seu WhatsApp.", description: "Mensagens estruturadas, dados do cliente e endereço, sem trocar 20 mensagens por pedido.", - badge: "0 pedido perdido", + badge: "Pedido organizado", }, { icon: ChartColumn, @@ -26,15 +26,15 @@ const SLIDES = [ title: "Você comanda a operação inteira de um lugar só.", description: "Faturamento, produtos mais vendidos, horários de pico e status da cozinha em tempo real.", - badge: "Tudo em tempo real", + badge: "Operação em tempo real", }, { icon: Star, - category: "Restaurantes que confiam", - title: '"Em 30 dias dobramos os pedidos pelo WhatsApp."', + category: "Venda direta", + title: "Venda pelo WhatsApp, sem comissão de marketplace.", description: - "Mais de 2.000 restaurantes brasileiros usam o MeVêUm para vender direto, sem comissão de marketplace.", - badge: "4,9 ★ avaliação média", + "Centralize cardápio, pedidos e gestão em uma experiência pensada para restaurantes brasileiros.", + badge: "Gestão e pedidos em um só lugar", }, ]; @@ -42,15 +42,15 @@ export function AuthCarousel() { const [active, setActive] = useState(3); return ( -