From ab8b244f5900a2ce00540c4601a69991daa5ebf0 Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Tue, 17 Mar 2026 15:26:38 +0000
Subject: [PATCH] refactor: redesign barber item UI, update grid layout, and
 simplify specialty display in `BarberList`.

---
 web/src/components/BarberList.tsx | 55 ++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/web/src/components/BarberList.tsx b/web/src/components/BarberList.tsx
index bfd286c..aaa42ee 100644
--- a/web/src/components/BarberList.tsx
+++ b/web/src/components/BarberList.tsx
@@ -1,44 +1,53 @@
-import { Card } from './ui/card';
 import { Barber } from '../types';
 import { User, Scissors } from 'lucide-react';
 
 export const BarberList = ({ barbers }: { barbers: Barber[] }) => (
-  <div className="grid md:grid-cols-3 gap-4">
+  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
     {barbers.map((b) => (
-      <Card key={b.id} hover className="p-5 flex flex-col items-center text-center gap-4 group">
+      <div
+        key={b.id}
+        className="flex flex-col items-center text-center gap-3 group cursor-pointer"
+      >
+        {/* Foto circular */}
         <div className="relative">
-          <div className="w-full aspect-square rounded-2xl overflow-hidden border-4 border-slate-50 bg-slate-100 flex items-center justify-center shadow-sm group-hover:border-indigo-100 transition-colors">
+          <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-white bg-slate-200 flex items-center justify-center shadow-md group-hover:border-amber-400 transition-colors duration-300">
             {b.imageUrl ? (
-              <img src={b.imageUrl} alt={b.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
+              <img
+                src={b.imageUrl}
+                alt={b.name}
+                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+              />
             ) : (
-              <User size={40} className="text-slate-300" />
+              <User size={36} className="text-slate-400" />
             )}
           </div>
-          <div className="absolute -bottom-1 -right-1 w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white border-2 border-white shadow-sm">
-            <Scissors size={14} />
+          {/* Badge tesoura */}
+          <div className="absolute -bottom-1 -right-1 w-7 h-7 bg-amber-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-sm">
+            <Scissors size={12} />
           </div>
         </div>
-        
+
+        {/* Nome */}
         <div>
-          <h3 className="font-bold text-slate-900 text-lg group-hover:text-indigo-700 transition-colors">{b.name}</h3>
-          <div className="mt-2 flex flex-wrap justify-center gap-1">
-            {b.specialties.map((spec, i) => (
-              <span key={i} className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase tracking-wider">
-                {spec}
-              </span>
-            ))}
-            {b.specialties.length === 0 && (
-              <span className="text-xs text-slate-400 italic">Especialista em tudo</span>
-            )}
-          </div>
+          <p className="font-semibold text-sm text-slate-900 group-hover:text-amber-600 transition-colors leading-tight">
+            {b.name}
+          </p>
+          {b.specialties.length > 0 ? (
+            <p className="text-xs text-slate-400 mt-0.5 truncate max-w-[100px]">
+              {b.specialties[0]}
+            </p>
+          ) : (
+            <p className="text-xs text-slate-400 mt-0.5 italic">Especialista</p>
+          )}
         </div>
-      </Card>
+      </div>
     ))}
+
     {barbers.length === 0 && (
       <div className="col-span-full py-20 text-center">
-        <User size={48} className="mx-auto text-slate-200 mb-4" />
+        <User size={48} className="mx-auto text-slate-300 mb-4" />
         <p className="text-slate-500 font-medium">Esta barbearia ainda não registou barbeiros.</p>
       </div>
     )}
   </div>
-);
+);
\ No newline at end of file