Update src/app/recipes/page.tsx

src/app/recipes/page.tsx

@@ -1,164 +1,99 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Filter, ChefHat, Flame, Zap, Clock, Users } from 'lucide-react';
+import { Apple, Filter, Flame, Zap, TrendingDown, TrendingUp, Users, Mail } from 'lucide-react';
 
-interface Recipe {
-  id: string;
-  name: string;
-  goal: 'weight-loss' | 'muscle-gain';
-  calories: number;
-  protein: number;
-  carbs: number;
-  fat: number;
-  prepTime: number;
-  difficulty: 'easy' | 'medium' | 'hard';
-  ingredients: string[];
-  instructions: string[];
-  imageUrl?: string;
-}
-
-const recipeDatabase: Recipe[] = [
+// Recipe Database
+const recipeDatabase = [
   {
-    id: '1',
-    name: 'Peito de Frango Grelhado com Brócolis',
-    goal: 'muscle-gain',
-    calories: 450,
+    id: "1",    name: "Grilled Chicken Breast with Quinoa",    category: "Protein",    calories: 450,
     protein: 45,
     carbs: 35,
-    fat: 12,
-    prepTime: 25,
-    difficulty: 'easy',
-    ingredients: ['Peito de frango 200g', 'Brócolis 200g', 'Azeite 1 colher', 'Sal e pimenta'],
-    instructions: ['Tempere o frango', 'Grelhe em fogo alto 8 minutos cada lado', 'Cozinhe o brócolis no vapor', 'Sirva quente'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    fats: 12,
+    prepTime: "25 min",    goals: ["muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Grilled Chicken with Quinoa"
   },
   {
-    id: '2',
-    name: 'Salada Verde com Proteína',
-    goal: 'weight-loss',
-    calories: 280,
-    protein: 30,
-    carbs: 15,
-    fat: 8,
-    prepTime: 15,
-    difficulty: 'easy',
-    ingredients: ['Alface 200g', 'Peito de frango 150g', 'Cenoura 50g', 'Limão 1', 'Azeite 1 colher'],
-    instructions: ['Lave as folhas de alface', 'Corte a cenoura em palitos', 'Desfihe o frango cozido', 'Misture e tempere com limão e azeite'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    id: "2",    name: "Veggie Stir-Fry with Tofu",    category: "Vegetarian",    calories: 280,
+    protein: 18,
+    carbs: 42,
+    fats: 8,
+    prepTime: "20 min",    goals: ["weight-loss"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Veggie Stir-Fry"
   },
   {
-    id: '3',
-    name: 'Omelete de Claras com Vegetais',
-    goal: 'weight-loss',
-    calories: 200,
-    protein: 25,
-    carbs: 10,
-    fat: 5,
-    prepTime: 10,
-    difficulty: 'easy',
-    ingredients: ['Claras de ovo 5', 'Espinafre 100g', 'Tomate 100g', 'Sal e pimenta'],
-    instructions: ['Bata as claras com sal', 'Aqueça a frigideira com spray', 'Coloque os vegetais', 'Despeje as claras e cozinhe até firmar'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    id: "3",    name: "Salmon with Sweet Potato",    category: "Fish",    calories: 520,
+    protein: 38,
+    carbs: 48,
+    fats: 18,
+    prepTime: "30 min",    goals: ["muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Salmon with Sweet Potato"
   },
   {
-    id: '4',
-    name: 'Arroz Integral com Frango e Feijão',
-    goal: 'muscle-gain',
-    calories: 580,
-    protein: 40,
-    carbs: 65,
-    fat: 10,
-    prepTime: 40,
-    difficulty: 'medium',
-    ingredients: ['Arroz integral 1 xícara cozido', 'Frango 200g', 'Feijão 100g', 'Cebola e alho'],
-    instructions: ['Cozinhe o arroz integral', 'Refogue cebola e alho', 'Adicione o frango cortado', 'Misture com o feijão', 'Finalize com o arroz'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    id: "4",    name: "Egg White Omelet with Veggies",    category: "Breakfast",    calories: 180,
+    protein: 22,
+    carbs: 12,
+    fats: 4,
+    prepTime: "15 min",    goals: ["weight-loss", "muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Egg White Omelet"
   },
   {
-    id: '5',
-    name: 'Salmão ao Forno com Abóbora',
-    goal: 'muscle-gain',
-    calories: 520,
-    protein: 42,
-    carbs: 40,
-    fat: 15,
-    prepTime: 35,
-    difficulty: 'medium',
-    ingredients: ['Salmão 200g', 'Abóbora 300g', 'Alecrim', 'Azeite', 'Limão'],
-    instructions: ['Tempere o salmão com limão', 'Corte a abóbora em cubos', 'Coloque em assadeira', 'Asse a 200°C por 25 minutos'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
-  },
-  {
-    id: '6',
-    name: 'Batida de Proteína com Frutas',
-    goal: 'muscle-gain',
-    calories: 350,
+    id: "5",    name: "Turkey Meatballs with Zucchini Noodles",    category: "Protein",    calories: 320,
     protein: 35,
-    carbs: 40,
-    fat: 3,
-    prepTime: 5,
-    difficulty: 'easy',
-    ingredients: ['Whey protein 30g', 'Banana 1', 'Maçã 1', 'Leite desnatado 200ml'],
-    instructions: ['Bata tudo no liquidificador', 'Sirva imediatamente'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
-  },
-  {
-    id: '7',
-    name: 'Sopa de Legumes com Caldo de Galinha',
-    goal: 'weight-loss',
-    calories: 150,
-    protein: 15,
     carbs: 18,
-    fat: 2,
-    prepTime: 30,
-    difficulty: 'easy',
-    ingredients: ['Caldo de galinha 500ml', 'Cenoura 100g', 'Abobrinha 100g', 'Brócolis 100g', 'Sal'],
-    instructions: ['Aqueça o caldo', 'Corte os legumes em pequenos cubos', 'Cozinhe até ficarem macios', 'Tempere e sirva'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    fats: 10,
+    prepTime: "28 min",    goals: ["weight-loss"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Turkey Meatballs"
   },
   {
-    id: '8',
-    name: 'Iogurte Grego com Granola',
-    goal: 'muscle-gain',
-    calories: 320,
-    protein: 28,
-    carbs: 35,
-    fat: 8,
-    prepTime: 2,
-    difficulty: 'easy',
-    ingredients: ['Iogurte grego 200g', 'Granola 50g', 'Mel 1 colher', 'Morango fresco'],
-    instructions: ['Coloque o iogurte na tigela', 'Adicione a granola', 'Regue com mel', 'Complete com morangos'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    id: "6",    name: "Lean Beef with Brown Rice",    category: "Protein",    calories: 580,
+    protein: 42,
+    carbs: 58,
+    fats: 14,
+    prepTime: "35 min",    goals: ["muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Lean Beef with Rice"
+  },
+  {
+    id: "7",    name: "Green Salad with Grilled Chicken",    category: "Salad",    calories: 280,
+    protein: 32,
+    carbs: 22,
+    fats: 6,
+    prepTime: "18 min",    goals: ["weight-loss"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Green Salad"
+  },
+  {
+    id: "8",    name: "High-Protein Pasta with Lean Ground Meat",    category: "Pasta",    calories: 480,
+    protein: 40,
+    carbs: 52,
+    fats: 8,
+    prepTime: "25 min",    goals: ["muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "High-Protein Pasta"
   }
 ];
 
 export default function RecipesPage() {
-  const [selectedGoal, setSelectedGoal] = useState<'weight-loss' | 'muscle-gain' | null>(null);
-  const [userGoal, setUserGoal] = useState<'weight-loss' | 'muscle-gain' | null>(null);
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [selectedGoal, setSelectedGoal] = useState<"all" | "weight-loss" | "muscle-gain">("all");
 
-  useEffect(() => {
-    // Simulate checking login status from localStorage or auth context
-    const storedGoal = localStorage.getItem('userFitnessGoal');
-    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
-    
-    if (storedGoal) {
-      setUserGoal(storedGoal as 'weight-loss' | 'muscle-gain');
-    }
-    setIsLoggedIn(loggedIn);
-  }, []);
+  // Filter recipes based on selected goal
+  const filteredRecipes = selectedGoal === "all" 
+    ? recipeDatabase 
+    : recipeDatabase.filter(recipe => recipe.goals.includes(selectedGoal));
 
-  const filteredRecipes = selectedGoal || userGoal
-    ? recipeDatabase.filter(recipe => recipe.goal === (selectedGoal || userGoal))
-    : recipeDatabase;
-
-  const handleGoalChange = (goal: 'weight-loss' | 'muscle-gain' | null) => {
-    setSelectedGoal(goal);
-  };
+  // Convert filtered recipes to product format for ProductCardOne
+  const recipeProducts = filteredRecipes.map(recipe => ({
+    id: recipe.id,
+    name: recipe.name,
+    price: `${recipe.calories} cal | ${recipe.protein}g protein`,
+    imageSrc: recipe.imageSrc,
+    imageAlt: recipe.imageAlt,
+    onProductClick: () => console.log(`Selected recipe: ${recipe.name}`)
+  }));
 
   return (
     <ThemeProvider
@@ -176,7 +111,7 @@ export default function RecipesPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Dashboard", id: "/" },
+            { name: "Dashboard", id: "dashboard" },
             { name: "Treino", id: "training" },
             { name: "Receitas", id: "/recipes" },
             { name: "Comunidade", id: "community" },
@@ -187,148 +122,172 @@ export default function RecipesPage() {
         />
       </div>
 
-      <div className="min-h-screen bg-gradient-to-b from-background to-card py-16 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-6xl mx-auto">
-          {/* Header */}
-          <div className="mb-12 text-center">
-            <h1 className="text-4xl sm:text-5xl font-extrabold mb-4 flex items-center justify-center gap-3">
-              <ChefHat className="w-10 h-10" />
-              Receituário Personalizado
-            </h1>
-            <p className="text-lg text-foreground/70 mb-8">
-              {isLoggedIn && userGoal
-                ? `Suas receitas estão personalizadas para ${userGoal === 'weight-loss' ? 'perda de peso' : 'ganho de massa'}`
-                : 'Filtre receitas por seu objetivo de fitness'}
-            </p>
-          </div>
+      <div id="recipes-hero" data-section="recipes-hero">
+        <HeroSplitKpi
+          title="Receitas Inteligentes Alinhadas com Suas Metas"
+          description="Acesso a um banco de receitas nutricionais desenvolvidas por especialistas. Cada receita é otimizada para seu objetivo: perda de peso ou ganho de massa muscular."
+          tag="Nutrição Estratégica"
+          tagIcon={Flame}
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "100+", label: "Receitas Disponíveis" },
+            { value: "2", label: "Filtros por Objetivo" },
+            { value: "4.8★", label: "Avaliação Média" }
+          ]}
+          enableKpiAnimation={true}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png"
+          imageAlt="Dashboard de receitas nutricionais"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+          buttons={[
+            { text: "Explorar Receitas", href: "#recipes-grid" }
+          ]}
+        />
+      </div>
 
-          {/* Filter Section */}
-          <div className="mb-12 bg-card border border-accent/20 rounded-lg p-6">
-            <div className="flex items-center gap-3 mb-6">
-              <Filter className="w-5 h-5" />
-              <h2 className="text-xl font-semibold">Filtrar por Objetivo</h2>
-            </div>
-            <div className="flex gap-4 flex-wrap">
-              <button
-                onClick={() => handleGoalChange(null)}
-                className={`px-6 py-2 rounded-full font-semibold transition-all ${
-                  !selectedGoal && !userGoal
-                    ? 'bg-primary-cta text-background'
-                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
-                }`}
-              >
-                Todas as Receitas
-              </button>
-              <button
-                onClick={() => handleGoalChange('weight-loss')}
-                className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center gap-2 ${
-                  selectedGoal === 'weight-loss' || (userGoal === 'weight-loss' && !selectedGoal)
-                    ? 'bg-primary-cta text-background'
-                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
-                }`}
-              >
-                <Flame className="w-4 h-4" />
-                Perda de Peso
-              </button>
-              <button
-                onClick={() => handleGoalChange('muscle-gain')}
-                className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center gap-2 ${
-                  selectedGoal === 'muscle-gain' || (userGoal === 'muscle-gain' && !selectedGoal)
-                    ? 'bg-primary-cta text-background'
-                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
-                }`}
-              >
-                <Zap className="w-4 h-4" />
-                Ganho de Massa
-              </button>
-            </div>
-          </div>
+      <div id="recipes-filter" data-section="recipes-filter">
+        <FeatureCardTwentyFive
+          title="Filtre Receitas por Objetivo"
+          description="Selecione seu objetivo atual e o sistema recomendará as melhores receitas para atingir suas metas nutricionais e de transformação corporal."
+          tag="Recomendação Inteligente"
+          tagIcon={Filter}
+          features={[
+            {
+              title: "Perda de Peso",              description: "Receitas com déficit calórico otimizado. Alto em proteína para preservar músculos, baixo em carboidratos estratégicos. Ideal para queimar gordura mantendo a força.",              icon: TrendingDown,
+              mediaItems: [
+                {
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Receitas para perda de peso"
+                },
+                {
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  imageAlt: "Progresso de déficit calórico"
+                }
+              ]
+            },
+            {
+              title: "Ganho de Massa",              description: "Receitas com superávit calórico controlado. Proteína máxima (2g por kg), carboidratos pré e pós-treino, gorduras saudáveis. Perfeito para crescimento muscular.",              icon: TrendingUp,
+              mediaItems: [
+                {
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Receitas para ganho de massa"
+                },
+                {
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  imageAlt: "Progresso de ganho muscular"
+                }
+              ]
+            }
+          ]}
+          animationType="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
 
-          {/* Recipes Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredRecipes.map((recipe) => (
-              <div
-                key={recipe.id}
-                className="bg-card border border-accent/20 rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
-              >
-                {/* Image */}
-                {recipe.imageUrl && (
-                  <div className="w-full h-48 bg-background/50 overflow-hidden">
+      <div id="recipes-grid" data-section="recipes-grid">
+        <div className="w-full py-20">
+          <div className="max-w-7xl mx-auto px-6">
+            {/* Filter Buttons */}
+            <div className="flex flex-col items-center gap-8 mb-16">
+              <div className="text-center">
+                <h2 className="text-4xl font-extrabold mb-4">Receitas Recomendadas</h2>
+                <p className="text-lg text-foreground/75">Selecione seu objetivo para ver receitas personalizadas</p>
+              </div>
+              <div className="flex gap-4 flex-wrap justify-center">
+                <button
+                  onClick={() => setSelectedGoal("all")}
+                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
+                    selectedGoal === "all"
+                      ? "bg-primary-cta text-white"
+                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
+                  }`}
+                >
+                  Todas as Receitas
+                </button>
+                <button
+                  onClick={() => setSelectedGoal("weight-loss")}
+                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
+                    selectedGoal === "weight-loss"
+                      ? "bg-primary-cta text-white"
+                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
+                  }`}
+                >
+                  Perda de Peso
+                </button>
+                <button
+                  onClick={() => setSelectedGoal("muscle-gain")}
+                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
+                    selectedGoal === "muscle-gain"
+                      ? "bg-primary-cta text-white"
+                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
+                  }`}
+                >
+                  Ganho de Massa
+                </button>
+              </div>
+            </div>
+
+            {/* Recipe Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {filteredRecipes.map(recipe => (
+                <div key={recipe.id} className="bg-card rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+                  <div className="relative h-64 overflow-hidden">
                     <img
-                      src={recipe.imageUrl}
-                      alt={recipe.name}
-                      className="w-full h-full object-cover hover:scale-105 transition-transform"
+                      src={recipe.imageSrc}
+                      alt={recipe.imageAlt}
+                      className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                     />
                   </div>
-                )}
+                  <div className="p-6">
+                    <div className="flex items-start justify-between mb-3">
+                      <h3 className="text-xl font-bold text-foreground">{recipe.name}</h3>
+                      <span className="text-xs font-semibold bg-primary-cta/20 text-primary-cta px-3 py-1 rounded-full">
+                        {recipe.category}
+                      </span>
+                    </div>
+                    <p className="text-sm text-foreground/75 mb-4">Tempo: {recipe.prepTime}</p>
+                    
+                    {/* Macros */}
+                    <div className="grid grid-cols-4 gap-2 mb-4">
+                      <div className="text-center">
+                        <p className="text-xs text-foreground/60">Calorias</p>
+                        <p className="font-bold text-foreground">{recipe.calories}</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-xs text-foreground/60">Proteína</p>
+                        <p className="font-bold text-foreground">{recipe.protein}g</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-xs text-foreground/60">Carbs</p>
+                        <p className="font-bold text-foreground">{recipe.carbs}g</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-xs text-foreground/60">Gordura</p>
+                        <p className="font-bold text-foreground">{recipe.fats}g</p>
+                      </div>
+                    </div>
 
-                {/* Content */}
-                <div className="p-6">
-                  <h3 className="text-xl font-bold mb-2">{recipe.name}</h3>
-                  
-                  {/* Macros */}
-                  <div className="grid grid-cols-4 gap-3 mb-6 text-sm">
-                    <div className="bg-background/50 rounded p-2 text-center">
-                      <div className="font-semibold text-primary-cta">{recipe.calories}</div>
-                      <div className="text-xs text-foreground/60">kcal</div>
-                    </div>
-                    <div className="bg-background/50 rounded p-2 text-center">
-                      <div className="font-semibold text-primary-cta">{recipe.protein}g</div>
-                      <div className="text-xs text-foreground/60">Proteína</div>
-                    </div>
-                    <div className="bg-background/50 rounded p-2 text-center">
-                      <div className="font-semibold text-primary-cta">{recipe.carbs}g</div>
-                      <div className="text-xs text-foreground/60">Carbs</div>
-                    </div>
-                    <div className="bg-background/50 rounded p-2 text-center">
-                      <div className="font-semibold text-primary-cta">{recipe.fat}g</div>
-                      <div className="text-xs text-foreground/60">Gordura</div>
-                    </div>
-                  </div>
-
-                  {/* Info */}
-                  <div className="flex gap-4 text-sm text-foreground/70 mb-6">
-                    <div className="flex items-center gap-1">
-                      <Clock className="w-4 h-4" />
-                      {recipe.prepTime}min
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <ChefHat className="w-4 h-4" />
-                      {recipe.difficulty === 'easy' ? 'Fácil' : recipe.difficulty === 'medium' ? 'Médio' : 'Difícil'}
-                    </div>
-                  </div>
-
-                  {/* Ingredients Summary */}
-                  <div className="mb-6">
-                    <h4 className="font-semibold text-sm mb-2">Ingredientes:</h4>
-                    <ul className="text-sm text-foreground/70 space-y-1">
-                      {recipe.ingredients.slice(0, 3).map((ingredient, idx) => (
-                        <li key={idx} className="flex items-start gap-2">
-                          <span className="text-primary-cta mt-1">•</span>
-                          <span>{ingredient}</span>
-                        </li>
-                      ))}
-                      {recipe.ingredients.length > 3 && (
-                        <li className="text-primary-cta font-semibold">+{recipe.ingredients.length - 3} mais</li>
+                    {/* Goal Tags */}
+                    <div className="flex flex-wrap gap-2">
+                      {recipe.goals.includes("weight-loss") && (
+                        <span className="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">Perda</span>
                       )}
-                    </ul>
+                      {recipe.goals.includes("muscle-gain") && (
+                        <span className="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">Ganho</span>
+                      )}
+                    </div>
+
+                    <button className="w-full mt-4 bg-primary-cta text-white font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">
+                      Ver Detalhes
+                    </button>
                   </div>
-
-                  {/* Button */}
-                  <button className="w-full bg-primary-cta text-background font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">
-                    Ver Receita Completa
-                  </button>
                 </div>
-              </div>
-            ))}
-          </div>
-
-          {filteredRecipes.length === 0 && (
-            <div className="text-center py-12">
-              <Users className="w-12 h-12 mx-auto mb-4 text-foreground/30" />
-              <p className="text-lg text-foreground/70">Nenhuma receita encontrada para este filtro.</p>
+              ))}
             </div>
-          )}
+
+            {filteredRecipes.length === 0 && (
+              <div className="text-center py-12">
+                <p className="text-lg text-foreground/75">Nenhuma receita encontrada para este objetivo.</p>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
@@ -337,7 +296,7 @@ export default function RecipesPage() {
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "/" },
+                { label: "Dashboard", href: "dashboard" },
                 { label: "Treino", href: "training" },
                 { label: "Receitas", href: "/recipes" },
                 { label: "Cardio Hub", href: "cardio" }