From 6687ad1aa7a3ab7eca2b467f4330262817a0ad74 Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Wed, 29 Apr 2026 08:59:30 +0100
Subject: [PATCH] style: redesign visual identity and UI components with an
 indigo-slate color palette and modern glassmorphism effects

---
 web/src/components/layout/Header.tsx | 88 ++++++++++++++++------------
 web/src/components/ui/button.tsx     | 14 ++---
 web/src/components/ui/card.tsx       |  4 +-
 web/src/components/ui/tabs.tsx       | 10 ++--
 web/src/index.css                    | 34 ++++++-----
 web/tailwind.config.cjs              |  4 +-
 6 files changed, 83 insertions(+), 71 deletions(-)

diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 8c87b39..a4575ed 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -15,37 +15,38 @@ export const Header = () => {
   }
 
   return (
-    <header className="sticky top-0 z-30 bg-white border-b border-zinc-200">
-      <div className="mx-auto flex h-16 sm:h-20 max-w-6xl items-center justify-between px-4 sm:px-6">
+    <header className="sticky top-0 z-30 bg-white/70 backdrop-blur-lg border-b border-slate-200/50 shadow-sm shadow-slate-200/20">
+      <div className="mx-auto flex h-16 sm:h-20 max-w-6xl items-center justify-between px-3 sm:px-6">
         <Link
           to="/"
-          className="text-xl font-bold tracking-tight text-black group flex items-center gap-3"
+          className="text-2xl font-black tracking-tighter text-slate-900 group flex items-center gap-2"
           onClick={() => setMobileMenuOpen(false)}
         >
-          <div className="w-8 h-8 bg-black flex items-center justify-center text-white">
-            <User size={16} fill="currentColor" />
+          <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-200">
+            <User size={18} fill="currentColor" />
           </div>
-          <span className="font-bold uppercase tracking-tight">Smart Agenda</span>
+          <span className="group-hover:text-indigo-600 transition-colors uppercase italic font-black">Smart Agenda</span>
         </Link>
 
         {/* Desktop Navigation */}
-        <nav className="hidden md:flex items-center gap-6">
+        <nav className="hidden md:flex items-center gap-8">
           {user?.role !== 'barbearia' && (
             <>
               <Link
                 to="/explorar"
-                className="text-xs font-bold uppercase text-zinc-600 hover:text-black transition-colors"
+                className="text-sm font-bold text-slate-600 hover:text-slate-900 transition-all flex items-center gap-2"
               >
-                Explorar
+                <MapPin size={16} className="text-indigo-500" />
+                <span>Descobrir Barbearias</span>
               </Link>
 
               <Link
                 to="/carrinho"
-                className="relative text-zinc-600 hover:text-black transition-colors"
+                className="relative text-slate-700 hover:text-slate-900 transition-all p-2 rounded-xl hover:bg-slate-50"
               >
-                <ShoppingCart size={20} />
+                <ShoppingCart size={20} className="text-slate-700" />
                 {cart.length > 0 && (
-                  <span className="absolute -right-2 -top-2 bg-black px-1.5 py-0.5 text-[10px] font-bold text-white">
+                  <span className="absolute -right-1 -top-1 rounded-full bg-slate-900 px-1.5 py-0.5 text-[10px] font-black text-indigo-400 shadow-md min-w-[18px] text-center">
                     {cart.length}
                   </span>
                 )}
@@ -53,40 +54,43 @@ export const Header = () => {
             </>
           )}
 
-          <div className="h-4 w-px bg-zinc-200 mx-2" />
+          <div className="h-6 w-px bg-slate-200 mx-1" />
 
           {user ? (
             <div className="flex items-center gap-4">
               <button
                 onClick={() => navigate(user.role === 'barbearia' ? '/painel' : '/perfil')}
-                className="flex items-center gap-2 text-xs font-bold uppercase text-zinc-900"
+                className="flex items-center gap-3 bg-slate-50 hover:bg-slate-100 border border-slate-200/60 pl-3 pr-4 py-1.5 rounded-full transition-all group"
                 type="button"
               >
-                <User size={14} />
-                <span>{user.name}</span>
+                <div className="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center text-white shadow-sm">
+                  <User size={14} fill="currentColor" />
+                </div>
+                <span className="text-sm font-bold text-slate-700 group-hover:text-slate-900 max-w-[120px] truncate">{user.name}</span>
               </button>
 
               <button
                 onClick={handleLogout}
-                className="text-zinc-400 hover:text-black transition-colors"
+                className="p-2 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-xl transition-all"
+                title="Sair"
                 type="button"
               >
                 <LogOut size={18} />
               </button>
             </div>
           ) : (
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-3">
               <Link
                 to="/login"
-                className="text-xs font-bold uppercase text-zinc-600 hover:text-black"
+                className="text-sm font-bold text-slate-600 hover:text-slate-900 px-4 py-2 transition-colors"
               >
                 Login
               </Link>
               <Link
                 to="/registo"
-                className="bg-black text-white px-4 py-2 text-xs font-bold uppercase tracking-wider hover:bg-zinc-800"
+                className="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-2 text-sm font-bold text-white shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all font-black uppercase italic tracking-widest"
               >
-                Registo
+                Criar Conta
               </Link>
             </div>
           )}
@@ -95,7 +99,7 @@ export const Header = () => {
         {/* Mobile Menu Button */}
         <button
           onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          className="md:hidden p-2 text-black"
+          className="md:hidden p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 transition-all"
           type="button"
         >
           {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
@@ -104,69 +108,75 @@ export const Header = () => {
 
       {/* Mobile Menu */}
       {mobileMenuOpen && (
-        <div className="md:hidden border-t border-zinc-200 bg-white">
+        <div className="md:hidden border-t border-slate-100 bg-white shadow-2xl animate-in slide-in-from-top-4 duration-300">
           <nav className="px-6 py-6 space-y-4">
             {user?.role !== 'barbearia' && (
               <>
                 <Link
                   to="/explorar"
                   onClick={() => setMobileMenuOpen(false)}
-                  className="block text-xs font-bold uppercase text-zinc-900 p-2"
+                  className="flex items-center gap-3 text-base font-black text-slate-700 hover:text-indigo-600 p-3 rounded-2xl bg-slate-50 transition-all uppercase italic"
                 >
-                  Explorar
+                  <MapPin size={18} className="text-indigo-600" />
+                  Descobrir Barbearias
                 </Link>
 
                 <Link
                   to="/carrinho"
                   onClick={() => setMobileMenuOpen(false)}
-                  className="flex items-center justify-between text-xs font-bold uppercase text-zinc-900 p-2"
+                  className="flex items-center gap-3 text-base font-black text-slate-700 hover:text-indigo-600 p-3 rounded-2xl bg-slate-50 transition-all uppercase italic"
                 >
-                  Carrinho
+                  <ShoppingCart size={18} className="text-indigo-600" />
+                  Meu Carrinho
                   {cart.length > 0 && (
-                    <span className="bg-black px-2 py-0.5 text-white">{cart.length}</span>
+                    <span className="ml-auto rounded-full bg-slate-900 px-2 py-0.5 text-[10px] font-black text-indigo-400">
+                      {cart.length}
+                    </span>
                   )}
                 </Link>
               </>
             )}
 
-            <div className="h-px bg-zinc-100 w-full" />
+            <div className="h-px bg-slate-100 w-full" />
 
             {user ? (
-              <div className="space-y-2">
+              <>
                 <button
                   onClick={() => {
                     navigate(user.role === 'barbearia' ? '/painel' : '/perfil')
                     setMobileMenuOpen(false)
                   }}
-                  className="w-full text-left text-xs font-bold uppercase text-zinc-900 p-2"
+                  className="w-full flex items-center gap-3 text-base font-bold text-slate-700 p-3 rounded-2xl hover:bg-slate-50 transition-all text-left"
                   type="button"
                 >
+                  <User size={18} className="text-slate-400" />
                   {user.name}
                 </button>
 
                 <button
                   onClick={handleLogout}
-                  className="w-full text-left text-xs font-bold uppercase text-zinc-400 p-2"
+                  className="w-full flex items-center gap-3 text-base font-bold text-rose-600 p-3 rounded-2xl hover:bg-rose-50 transition-all text-left"
                   type="button"
                 >
-                  Sair
+                  <LogOut size={18} />
+                  Sair da Conta
                 </button>
-              </div>
+              </>
             ) : (
-              <div className="flex flex-col gap-2 p-2">
+              <div className="grid grid-cols-2 gap-3">
                  <Link
                   to="/login"
                   onClick={() => setMobileMenuOpen(false)}
-                  className="text-xs font-bold uppercase text-zinc-900"
+                  className="flex items-center justify-center rounded-2xl border border-slate-200 bg-white py-3 text-sm font-bold text-slate-700"
                 >
-                  Login
+                  Entrar
                 </Link>
                 <Link
                   to="/registo"
                   onClick={() => setMobileMenuOpen(false)}
-                  className="bg-black text-white text-center py-3 text-xs font-bold uppercase"
+                  className="flex items-center justify-center rounded-2xl bg-slate-900 py-3 text-sm font-bold text-indigo-400 shadow-lg shadow-slate-200 font-black uppercase italic tracking-widest"
                 >
-                  Registo
+                  Criar Conta
                 </Link>
               </div>
             )}
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index d0a54f7..825868f 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -10,15 +10,15 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 export const Button = ({ className, variant = 'solid', size = 'md', asChild, ...props }: Props) => {
   const base = 'inline-flex items-center justify-center font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
   const variants = {
-    solid: 'bg-black text-white hover:bg-zinc-800',
-    outline: 'border border-black text-black hover:bg-zinc-50',
-    ghost: 'text-zinc-600 hover:text-black hover:bg-zinc-100',
-    danger: 'bg-red-600 text-white hover:bg-red-700',
+    solid: 'bg-gradient-to-r from-indigo-500 to-blue-600 text-white hover:from-indigo-600 hover:to-blue-700 shadow-md hover:shadow-lg focus:ring-indigo-500/50 active:scale-[0.98]',
+    outline: 'border-2 border-indigo-500 text-indigo-700 bg-white hover:bg-indigo-50 hover:border-indigo-600 focus:ring-indigo-500/50 active:scale-[0.98]',
+    ghost: 'text-indigo-700 hover:bg-indigo-50 focus:ring-indigo-500/50 active:scale-[0.98]',
+    danger: 'bg-gradient-to-r from-rose-500 to-rose-600 text-white hover:from-rose-600 hover:to-rose-700 shadow-md hover:shadow-lg focus:ring-rose-500/50 active:scale-[0.98]',
   };
   const sizes = {
-    sm: 'text-xs px-3 py-1',
-    md: 'text-sm px-4 py-2',
-    lg: 'text-base px-6 py-3',
+    sm: 'text-xs px-3 py-1.5 rounded-lg',
+    md: 'text-sm px-4 py-2.5 rounded-lg',
+    lg: 'text-base px-6 py-3 rounded-xl',
   };
   const cls = cn(base, variants[variant], sizes[size], className);
   if (asChild && React.isValidElement(props.children)) {
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index 2f3cc91..deda884 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -3,8 +3,8 @@ import { cn } from '../../lib/cn';
 export const Card = ({ children, className = '', hover = false }: { children: React.ReactNode; className?: string; hover?: boolean }) => (
   <div
     className={cn(
-      'bg-white border border-zinc-200 transition-colors',
-      hover && 'hover:bg-zinc-50',
+      'bg-white rounded-xl shadow-sm border border-slate-200/60 transition-all duration-200',
+      hover && 'hover:shadow-md hover:border-indigo-200/80',
       className
     )}
   >
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index 022f01e..07c8650 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -3,21 +3,21 @@ import { cn } from '../../lib/cn';
 type Tab = { id: string; label: string; badge?: number };
 
 export const Tabs = ({ tabs, active, onChange, className }: { tabs: Tab[]; active: string; onChange: (id: string) => void; className?: string }) => (
-  <div className={cn("flex border-b border-zinc-200 w-full", className)}>
+  <div className={cn("flex gap-1 p-1 bg-slate-100 rounded-xl overflow-x-auto scrollbar-hide w-full", className)}>
     {tabs.map((t) => (
       <button
         key={t.id}
         onClick={() => onChange(t.id)}
         className={cn(
-          "px-4 py-3 text-xs font-bold uppercase transition-all whitespace-nowrap",
+          "px-3 sm:px-6 py-1.5 sm:py-2.5 text-[10px] sm:text-sm font-black uppercase tracking-tight sm:tracking-widest transition-all rounded-lg whitespace-nowrap shrink-0",
           active === t.id
-            ? "border-b-2 border-black text-black"
-            : "text-zinc-400 hover:text-black"
+            ? "bg-slate-900 text-indigo-400 shadow-lg"
+            : "text-slate-500 hover:text-slate-900 hover:bg-white/50"
         )}
       >
         {t.label}
         {t.badge && (
-          <span className="ml-2 inline-flex items-center justify-center w-4 h-4 bg-zinc-100 text-[8px] font-bold text-zinc-600">
+          <span className="ml-1 sm:ml-2 inline-flex items-center justify-center w-3.5 h-3.5 sm:w-5 sm:h-5 text-[7px] sm:text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
             {t.badge}
           </span>
         )}
diff --git a/web/src/index.css b/web/src/index.css
index 9b0e3e8..a3c95e0 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -4,17 +4,17 @@
 
 @layer base {
   :root {
-    --brand-primary: #000000;
-    --brand-primary-light: #404040;
-    --brand-primary-dark: #000000;
-    --obsidian: #000000;
-    --obsidian-light: #171717;
-    --slate-950: #000000;
+    --brand-primary: #6366f1; /* Indigo 500 */
+    --brand-primary-light: #a5b4fc;
+    --brand-primary-dark: #4338ca;
+    --obsidian: #0f172a;
+    --obsidian-light: #1e293b;
+    --slate-950: #020617;
     color-scheme: light;
   }
 
   * {
-    @apply border-zinc-200;
+    @apply border-slate-200;
     box-sizing: border-box;
   }
 
@@ -23,31 +23,33 @@
     width: 100%;
     max-width: 100vw;
     position: relative;
-    background-color: #ffffff;
   }
 
   body {
-    @apply bg-white text-zinc-900 font-sans antialiased;
+    @apply bg-slate-50 text-slate-900 font-sans antialiased;
     touch-action: pan-y;
+    background-image: 
+      radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.03) 0px, transparent 50%),
+      radial-gradient(at 100% 0%, rgba(15, 23, 42, 0.03) 0px, transparent 50%);
     font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
     min-height: 100vh;
   }
 
   a {
-    @apply text-inherit no-underline;
+    @apply text-inherit no-underline transition-colors;
   }
 
   /* Scrollbar styling */
   ::-webkit-scrollbar {
-    @apply w-1.5 h-1.5;
+    @apply w-2 h-2;
   }
 
   ::-webkit-scrollbar-track {
-    @apply bg-zinc-100;
+    @apply bg-slate-100;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-zinc-300 rounded-none;
+    @apply bg-indigo-200 rounded-full hover:bg-indigo-300;
   }
 }
 
@@ -57,7 +59,7 @@
   }
 
   .glass-card {
-    @apply bg-white border border-zinc-200;
+    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-xl shadow-slate-200/50;
   }
 
   /* Hide scrollbar but keep scroll functionality */
@@ -70,10 +72,10 @@
   }
 
   .indigo-gradient {
-    @apply bg-black text-white;
+    @apply bg-gradient-to-br from-indigo-400 via-indigo-500 to-indigo-600;
   }
 
   .obsidian-gradient {
-    @apply bg-black text-white;
+    @apply bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950;
   }
 }
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 23fe864..1c38f62 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -7,8 +7,8 @@ module.exports = {
     extend: {
       colors: {
         amber: colors.amber,
-        slate: colors.zinc,
-        indigo: colors.black, // Solid black for the simplest look
+        slate: colors.slate,
+        indigo: colors.indigo,
         violet: colors.violet,
         emerald: colors.emerald,
       },