new preference

src/App.jsx

@@ -60,6 +60,7 @@ export default function App() {
     const [language, setLanguage] = useState('PT');
     const [showLangModal, setShowLangModal] = useState(false);
     const [theme, setTheme] = useState('theme-indigo');
+    const [cardSize, setCardSize] = useState('large');
     const [weatherData, setWeatherData] = useState(null);
 
     // Estado para Partilha de Looks
@@ -154,6 +155,11 @@ export default function App() {
         saveUserSetting('weatherAlerts', newVal);
     };
 
+    const handleCardSizeChange = (newVal) => {
+        setCardSize(newVal);
+        saveUserSetting('cardSize', newVal);
+    };
+
     // Buscar o look partilhado pelo link
     const fetchSharedLook = async (lookId) => {
         if (!lookId) return;
@@ -292,6 +298,7 @@ export default function App() {
                     if (data.settings.theme !== undefined) setTheme(data.settings.theme);
                     if (data.settings.notificationsEnabled !== undefined) setNotificationsEnabled(data.settings.notificationsEnabled);
                     if (data.settings.weatherAlerts !== undefined) setWeatherAlerts(data.settings.weatherAlerts);
+                    if (data.settings.cardSize !== undefined) setCardSize(data.settings.cardSize);
                 }
             }
             else setUserProfile({});
@@ -1187,7 +1194,7 @@ export default function App() {
                             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-10">
                                 {filteredClothes.map(item => (
                                     <div key={item.id} className="group">
-                                        <Card className="overflow-hidden p-0 h-[480px] relative border-none hover:shadow-2xl transition-all duration-500" darkMode={darkMode}>
+                                        <Card className={`overflow-hidden p-0 relative border-none hover:shadow-2xl transition-all duration-500 ${cardSize === 'small' ? 'h-[240px]' : cardSize === 'medium' ? 'h-[360px]' : 'h-[480px]'}`} darkMode={darkMode}>
                                             <img src={item.imageUrl} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt={item.name} />
 
                                             <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col justify-end p-6 pb-[136px] text-white z-10 pointer-events-none">
@@ -1882,6 +1889,23 @@ export default function App() {
                                                 <div className={`w-6 h-6 rounded-full bg-white absolute top-1 transition-all ${weatherAlerts ? 'left-7' : 'left-1'}`}></div>
                                             </button>
                                         </div>
+                                        <div className="flex items-center justify-between">
+                                            <div>
+                                                <p className="font-bold text-inherit">{t('cardSize') || 'Tamanho do Card'}</p>
+                                                <p className="text-[10px] uppercase tracking-widest opacity-50 text-inherit">{t('cardSizeDesc') || 'Tamanho no armário/carrinho'}</p>
+                                            </div>
+                                            <div className="flex gap-2">
+                                                {['small', 'medium', 'large'].map(s => (
+                                                    <button
+                                                        key={s}
+                                                        onClick={() => handleCardSizeChange(s)}
+                                                        className={`px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all border-2 ${cardSize === s ? 'border-primary-600 bg-primary-600 text-white shadow-lg shadow-primary-600/30 scale-105' : 'border-transparent bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'}`}
+                                                    >
+                                                        {s === 'small' ? t('small') || 'Pequeno' : s === 'medium' ? t('medium') || 'Médio' : t('large') || 'Grande'}
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        </div>
                                         <div className="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-800">
                                             <div>
                                                 <p className="font-bold text-inherit">{t('appLanguage')}</p>

src/lib/i18n.js

@@ -192,6 +192,11 @@ export const translations = {
         selectOneColor: "Selecione pelo menos uma cor",
         addColorsToItems: "Adicione cores aos seus itens.",
         or: "OU",
+        cardSize: "Tamanho do Card",
+        cardSizeDesc: "Tamanho no armário/carrinho",
+        small: "Pequeno",
+        medium: "Médio",
+        large: "Grande",
     },
     EN: {
         loginModeIntro: "The Future of Your Style",
@@ -386,6 +391,11 @@ export const translations = {
         selectOneColor: "Select at least one color",
         addColorsToItems: "Add colors to your items.",
         or: "OR",
+        cardSize: "Card Size",
+        cardSizeDesc: "Size in closet/cart",
+        small: "Small",
+        medium: "Medium",
+        large: "Large",
     },
     ES: {
         loginModeIntro: "El Futuro de Tu Estilo",
@@ -580,6 +590,11 @@ export const translations = {
         selectOneColor: "Selecciona al menos un color",
         addColorsToItems: "Añade colores a tus artículos.",
         or: "O",
+        cardSize: "Tamaño de Tarjeta",
+        cardSizeDesc: "Tamaño en armario/carrito",
+        small: "Pequeño",
+        medium: "Medio",
+        large: "Grande",
     },
     FR: {
         loginModeIntro: "Le Futur de Ton Style",
@@ -774,6 +789,11 @@ export const translations = {
         selectOneColor: "Sélectionnez au moins une couleur",
         addColorsToItems: "Ajoutez des couleurs à vos articles.",
         or: "OU",
+        cardSize: "Taille de la Carte",
+        cardSizeDesc: "Taille dans placard/panier",
+        small: "Petit",
+        medium: "Moyen",
+        large: "Grand",
     },
     DE: {
         loginModeIntro: "Die Zukunft deines Stils",
@@ -965,8 +985,13 @@ export const translations = {
         piecesShort: "Stücke",
         editLook: "Outfit bearbeiten",
         uploadGallery: "Aus Galerie / Dateien hochladen",
-        selectOneColor: "Wähle mindestens eine Farbe",
+        selectOneColor: "Wählen Sie mindestens eine Farbe",
-        addColorsToItems: "Füge deinen Artikeln Farben hinzu.",
+        addColorsToItems: "Fügen Sie Ihren Artikeln Farben hinzu.",
         or: "ODER",
+        cardSize: "Kartengröße",
+        cardSizeDesc: "Größe in Schrank/Warenkorb",
+        small: "Klein",
+        medium: "Mittel",
+        large: "Groß",
     }
 };