Add src/app/recipes/page.tsx

src/app/recipes/page.tsx

@@ -0,0 +1,369 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Filter, ChefHat, Flame, Zap, Clock, Users } 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[] = [
+  {
+    id: '1',
+    name: 'Peito de Frango Grelhado com Brócolis',
+    goal: 'muscle-gain',
+    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'
+  },
+  {
+    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: '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: '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: '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,
+    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'
+  },
+  {
+    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'
+  }
+];
+
+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);
+
+  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);
+  }, []);
+
+  const filteredRecipes = selectedGoal || userGoal
+    ? recipeDatabase.filter(recipe => recipe.goal === (selectedGoal || userGoal))
+    : recipeDatabase;
+
+  const handleGoalChange = (goal: 'weight-loss' | 'muscle-gain' | null) => {
+    setSelectedGoal(goal);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "/" },
+            { name: "Treino", id: "training" },
+            { name: "Receitas", id: "/recipes" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Começar Agora", href: "contact" }}
+          brandName="FitFlow Pro"
+        />
+      </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>
+
+          {/* 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>
+
+          {/* 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">
+                    <img
+                      src={recipe.imageUrl}
+                      alt={recipe.name}
+                      className="w-full h-full object-cover hover:scale-105 transition-transform"
+                    />
+                  </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>
+                      )}
+                    </ul>
+                  </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>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "/" },
+                { label: "Treino", href: "training" },
+                { label: "Receitas", href: "/recipes" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}