diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index 36210f4..d462b65 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,29 +1,28 @@
-import { Tabs } from 'expo-router';
-import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
-import { View } from 'react-native';
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
export default function TabLayout() {
return (
(
),
}}
/>
-
+
(
-
+
),
}}
/>
-
+
(
-
+
),
}}
/>
-
+
(
),
@@ -69,4 +77,4 @@ export default function TabLayout() {
/>
);
-}
\ No newline at end of file
+}
diff --git a/app/(tabs)/forum.tsx b/app/(tabs)/forum.tsx
index f23e686..79c48fe 100644
--- a/app/(tabs)/forum.tsx
+++ b/app/(tabs)/forum.tsx
@@ -1,10 +1,12 @@
-import { View, Text } from 'react-native';
+import { Text, View } from "react-native";
export default function ForumScreen() {
return (
Forum Screen
- Discussions and community posts will appear here
+
+ Discussions and community posts will appear here
+
);
-}
\ No newline at end of file
+}
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 29b6e20..22539d4 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,52 +1,65 @@
-import React, { useState } from 'react';
-import { View, Text, Image, TextInput, TouchableOpacity, SafeAreaView, StatusBar, ScrollView, Alert } from 'react-native';
-import { Feather, FontAwesome, Ionicons } from '@expo/vector-icons';
-import { router } from 'expo-router';
-import * as ImagePicker from 'expo-image-picker';
+import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { router } from "expo-router";
+import React, { useState } from "react";
+import {
+ Alert,
+ Image,
+ SafeAreaView,
+ ScrollView,
+ StatusBar,
+ Text,
+ TextInput,
+ TouchableOpacity,
+ View,
+} from "react-native";
// Sample recipe data
const recipeData = [
{
id: 1,
title: "Pad Kra Pao Moo Sab with Eggs",
- image: "/placeholder.svg?height=400&width=400&query=thai basil stir fry with egg and rice",
- color: "#ffd60a"
+ image:
+ "/placeholder.svg?height=400&width=400&query=thai basil stir fry with egg and rice",
+ color: "#ffd60a",
},
{
id: 2,
title: "Chicken Curry",
- image: "/placeholder.svg?height=400&width=400&query=chicken curry with rice",
- color: "#ffd60a"
+ image:
+ "/placeholder.svg?height=400&width=400&query=chicken curry with rice",
+ color: "#ffd60a",
},
{
id: 3,
title: "Beef Steak",
- image: "/placeholder.svg?height=400&width=400&query=beef steak with vegetables",
- color: "#bb0718"
+ image:
+ "/placeholder.svg?height=400&width=400&query=beef steak with vegetables",
+ color: "#bb0718",
},
{
id: 4,
title: "Vegetable Pasta",
image: "/placeholder.svg?height=400&width=400&query=vegetable pasta",
- color: "#ffd60a"
+ color: "#ffd60a",
},
{
id: 5,
title: "Salmon Sushi",
image: "/placeholder.svg?height=400&width=400&query=salmon sushi",
- color: "#ffd60a"
- }
+ color: "#ffd60a",
+ },
];
export default function HomeScreen() {
- const [searchQuery, setSearchQuery] = useState('');
+ const [searchQuery, setSearchQuery] = useState("");
const [filteredRecipes, setFilteredRecipes] = useState(recipeData);
-
+
// Handle search
const handleSearch = (text: string): void => {
setSearchQuery(text);
if (text) {
- const filtered = recipeData.filter((recipe: Recipe) =>
+ const filtered = recipeData.filter((recipe: Recipe) =>
recipe.title.toLowerCase().includes(text.toLowerCase())
);
setFilteredRecipes(filtered);
@@ -54,63 +67,69 @@ export default function HomeScreen() {
setFilteredRecipes(recipeData);
}
};
-
+
// Handle camera
const takePhoto = async () => {
const { status } = await ImagePicker.requestCameraPermissionsAsync();
-
- if (status !== 'granted') {
- Alert.alert('Permission needed', 'Please grant camera permissions to use this feature.');
+
+ if (status !== "granted") {
+ Alert.alert(
+ "Permission needed",
+ "Please grant camera permissions to use this feature."
+ );
return;
}
-
+
const result = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
-
+
if (!result.canceled) {
// Navigate to recipe detail with the captured image
router.push({
- pathname: '/recipe-detail',
- params: {
- title: 'My New Recipe',
- image: result.assets[0].uri
- }
+ pathname: "/recipe-detail",
+ params: {
+ title: "My New Recipe",
+ image: result.assets[0].uri,
+ },
});
}
};
-
+
// Handle gallery
const pickImage = async () => {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
-
- if (status !== 'granted') {
- Alert.alert('Permission needed', 'Please grant media library permissions to use this feature.');
+
+ if (status !== "granted") {
+ Alert.alert(
+ "Permission needed",
+ "Please grant media library permissions to use this feature."
+ );
return;
}
-
+
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
-
+
if (!result.canceled) {
// Navigate to recipe detail with the selected image
router.push({
- pathname: '/recipe-detail',
- params: {
- title: 'My New Recipe',
- image: result.assets[0].uri
- }
+ pathname: "/recipe-detail",
+ params: {
+ title: "My New Recipe",
+ image: result.assets[0].uri,
+ },
});
}
};
-
+
// Navigate to recipe detail
interface Recipe {
id: number;
@@ -121,18 +140,18 @@ export default function HomeScreen() {
const goToRecipeDetail = (recipe: Recipe): void => {
router.push({
- pathname: '/recipe-detail',
- params: {
+ pathname: "/recipe-detail",
+ params: {
title: recipe.title,
- image: recipe.image
- }
+ image: recipe.image,
+ },
});
};
return (
-
+
{/* Header - Fixed at top */}
Hi! Mr. Chef
@@ -140,22 +159,22 @@ export default function HomeScreen() {
-
+
{/* Scrollable Content */}
-
- {/* Show your dishes */}
-
+ {/* Show your dishes */}
+
Show your dishes
-
+
-
-
+
-
From Camera
- Straight from Camera
+
+ Straight from Camera
+
-
-
From Gallery
- Straight from Gallery
+
+ Straight from Gallery
+
-
+
{/* Highlights Section */}
Highlights
-
-
+
+
{filteredRecipes.slice(0, 3).map((recipe) => (
- goToRecipeDetail(recipe)}
>
-
@@ -214,15 +241,15 @@ export default function HomeScreen() {
))}
-
+
{filteredRecipes.slice(3, 5).map((recipe) => (
- goToRecipeDetail(recipe)}
>
-
@@ -230,10 +257,10 @@ export default function HomeScreen() {
))}
-
+
{/* Extra space at bottom */}
);
-}
\ No newline at end of file
+}
diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx
index 37a6797..b30f751 100644
--- a/app/(tabs)/profile.tsx
+++ b/app/(tabs)/profile.tsx
@@ -1,10 +1,12 @@
-import { View, Text } from 'react-native';
+import { Text, View } from "react-native";
export default function ProfileScreen() {
return (
Profile Screen
- Your profile information will appear here
+
+ Your profile information will appear here
+
);
-}
\ No newline at end of file
+}
diff --git a/app/(tabs)/recipes.tsx b/app/(tabs)/recipes.tsx
index 31aae9f..c46c7d7 100644
--- a/app/(tabs)/recipes.tsx
+++ b/app/(tabs)/recipes.tsx
@@ -1,4 +1,4 @@
-import { View, Text } from 'react-native';
+import { Text, View } from "react-native";
export default function RecipesScreen() {
return (
@@ -7,4 +7,4 @@ export default function RecipesScreen() {
Your recipes will appear here
);
-}
\ No newline at end of file
+}
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 0b15951..79068cd 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,25 +1,25 @@
-import { Stack } from 'expo-router';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import "../global.css"
+import { Stack } from "expo-router";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import "../global.css";
export default function RootLayout() {
return (
-
-
+
);
-}
\ No newline at end of file
+}
diff --git a/app/cooking/[id].tsx b/app/cooking/[id].tsx
new file mode 100644
index 0000000..46c1fa6
--- /dev/null
+++ b/app/cooking/[id].tsx
@@ -0,0 +1,363 @@
+"use client";
+
+import { IconSymbol } from "@/components/ui/IconSymbol";
+import { Image } from "expo-image";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import {
+ Alert,
+ ScrollView,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function CookingSessionScreen() {
+ const { id } = useLocalSearchParams();
+ const [currentStep, setCurrentStep] = useState(0);
+
+ // Mock data - in a real app, you would fetch this based on the ID
+ const recipeData = {
+ id: 1,
+ name: "Pad Kra Pao Moo Sab with Eggs",
+ steps: [
+ {
+ title: "Gather and prepare all ingredients",
+ description:
+ "Chop garlic, Thai chilies, and protein of choice (chicken, pork, beef, or tofu)",
+ image: require("@/assets/images/cooking/step1.png"),
+ },
+ {
+ title: "Heat oil in a wok or large frying pan",
+ description:
+ "Use medium-high heat. The oil should be hot but not smoking.",
+ image: require("@/assets/images/cooking/step2.png"),
+ },
+ {
+ title: "Fry the eggs sunny side up",
+ description:
+ "Heat oil in a separate pan and fry eggs until whites are set but yolks are still runny. Set aside.",
+ image: require("@/assets/images/cooking/step3.png"),
+ },
+ {
+ title: "Stir-fry garlic and chilies",
+ description:
+ "Add chopped garlic and chilies to the hot oil and stir-fry until fragrant, about 30 seconds.",
+ image: require("@/assets/images/cooking/step4.png"),
+ },
+ {
+ title: "Add ground pork and cook until browned",
+ description:
+ "Break up the meat with a spatula and cook until no longer pink, about 3-4 minutes.",
+ image: require("@/assets/images/cooking/step5.png"),
+ },
+ {
+ title: "Add sauces and basil",
+ description:
+ "Add soy sauce, oyster sauce, sugar, and holy basil. Stir well and cook for another minute. Serve with rice and top with the fried egg.",
+ image: require("@/assets/images/cooking/step6.png"),
+ },
+ ],
+ };
+
+ const totalSteps = recipeData.steps.length;
+
+ const goToNextStep = () => {
+ if (currentStep < totalSteps - 1) {
+ setCurrentStep(currentStep + 1);
+ }
+ };
+
+ const goToPreviousStep = () => {
+ if (currentStep > 0) {
+ setCurrentStep(currentStep - 1);
+ }
+ };
+
+ const getHelpWithStep = () => {
+ Alert.alert(
+ "Need Help?",
+ `Tips for ${recipeData.steps[currentStep].title}:\n\n` +
+ "• Make sure ingredients are properly prepared\n" +
+ "• Watch your heat level\n" +
+ "• Don't overcook the ingredients\n\n" +
+ "Would you like to see a video tutorial?",
+ [
+ { text: "No, thanks", style: "cancel" },
+ {
+ text: "Yes, show video",
+ onPress: () => console.log("Show video tutorial"),
+ },
+ ]
+ );
+ };
+
+ const stopCookingSession = () => {
+ Alert.alert(
+ "Stop Cooking?",
+ "Are you sure you want to stop this cooking session?",
+ [
+ { text: "Cancel", style: "cancel" },
+ { text: "Yes, stop", onPress: () => router.back() },
+ ]
+ );
+ };
+
+ return (
+
+
+ {/* Header with back button */}
+
+ router.back()}
+ >
+
+
+
+
+ {/* Step Illustration */}
+
+
+
+
+ {/* Step Information */}
+
+
+ Step {currentStep + 1} of {totalSteps}
+
+
+ {recipeData.steps[currentStep].title}
+
+
+ {recipeData.steps[currentStep].description}
+
+
+
+ {/* Step Indicators */}
+
+ Steps
+
+ {recipeData.steps.map((_, index) => (
+ setCurrentStep(index)}
+ >
+
+
+ ))}
+
+
+
+ {/* Navigation Buttons */}
+
+
+ Help me!
+
+
+
+ {currentStep > 0 && (
+
+
+ Previous
+
+ )}
+
+ {currentStep < totalSteps - 1 ? (
+
+ Next Step
+
+
+ ) : (
+ router.back()}
+ >
+ Finish
+
+
+ )}
+
+
+
+
+ {/* Stop Session Button */}
+
+ Stop Session
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: "#FFFFFF",
+ },
+ scrollView: {
+ flex: 1,
+ },
+ header: {
+ paddingHorizontal: 16,
+ paddingVertical: 12,
+ },
+ backButton: {
+ width: 40,
+ height: 40,
+ borderRadius: 20,
+ backgroundColor: "#FFCC00",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ illustrationContainer: {
+ alignItems: "center",
+ marginVertical: 20,
+ },
+ stepImage: {
+ width: 200,
+ height: 200,
+ borderRadius: 100,
+ backgroundColor: "#FFCC00",
+ },
+ stepInfoContainer: {
+ paddingHorizontal: 24,
+ alignItems: "center",
+ marginBottom: 30,
+ },
+ stepCounter: {
+ fontSize: 18,
+ color: "#8BC34A",
+ fontWeight: "bold",
+ marginBottom: 8,
+ },
+ stepTitle: {
+ fontSize: 24,
+ fontWeight: "bold",
+ color: "#333333",
+ textAlign: "center",
+ marginBottom: 12,
+ },
+ stepDescription: {
+ fontSize: 16,
+ color: "#666666",
+ textAlign: "center",
+ lineHeight: 24,
+ },
+ stepIndicatorsContainer: {
+ paddingHorizontal: 24,
+ marginBottom: 24,
+ },
+ stepsLabel: {
+ fontSize: 18,
+ fontWeight: "bold",
+ color: "#333333",
+ marginBottom: 12,
+ },
+ stepDots: {
+ flexDirection: "row",
+ justifyContent: "center",
+ },
+ stepDot: {
+ width: 40,
+ height: 40,
+ borderRadius: 20,
+ backgroundColor: "#EEEEEE",
+ marginHorizontal: 8,
+ },
+ activeStepDot: {
+ backgroundColor: "#FFCC00",
+ },
+ navigationContainer: {
+ paddingHorizontal: 24,
+ marginBottom: 80,
+ },
+ helpButton: {
+ backgroundColor: "#FF6B6B",
+ borderRadius: 8,
+ paddingVertical: 16,
+ alignItems: "center",
+ marginBottom: 16,
+ },
+ helpButtonText: {
+ fontSize: 18,
+ fontWeight: "bold",
+ color: "#FFFFFF",
+ },
+ stepNavigation: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ },
+ navButton: {
+ flex: 1,
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "center",
+ paddingVertical: 16,
+ borderRadius: 8,
+ },
+ prevButton: {
+ backgroundColor: "#FFFFFF",
+ borderWidth: 1,
+ borderColor: "#DDDDDD",
+ marginRight: 8,
+ },
+ prevButtonText: {
+ fontSize: 16,
+ fontWeight: "bold",
+ color: "#333333",
+ marginLeft: 8,
+ },
+ nextButton: {
+ backgroundColor: "#FFCC00",
+ },
+ nextButtonText: {
+ fontSize: 16,
+ fontWeight: "bold",
+ color: "#333333",
+ marginRight: 8,
+ },
+ finishButton: {
+ backgroundColor: "#4CAF50",
+ },
+ finishButtonText: {
+ fontSize: 16,
+ fontWeight: "bold",
+ color: "#FFFFFF",
+ marginRight: 8,
+ },
+ stopButton: {
+ position: "absolute",
+ bottom: 0,
+ left: 0,
+ right: 0,
+ backgroundColor: "#C62828",
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: "center",
+ paddingVertical: 16,
+ },
+ stopButtonText: {
+ fontSize: 18,
+ fontWeight: "bold",
+ color: "#FFCC00",
+ marginRight: 8,
+ },
+});
diff --git a/app/food/[id].tsx b/app/food/[id].tsx
new file mode 100644
index 0000000..c582278
--- /dev/null
+++ b/app/food/[id].tsx
@@ -0,0 +1,454 @@
+"use client";
+
+import { IconSymbol } from "@/components/ui/IconSymbol";
+import { Image } from "expo-image";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import {
+ ScrollView,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function FoodDetailScreen() {
+ const { id } = useLocalSearchParams();
+ const [activeTab, setActiveTab] = useState("Ingredients");
+
+ // Mock data - in a real app, you would fetch this based on the ID
+ const foodData = {
+ id: 1,
+ name: "Pad Kra Pao Moo Sab with Eggs",
+ image: require("@/assets/images/food/padkrapao.jpg"),
+ description:
+ "Pad kra pao, also written as pad gaprao, is a popular Thai stir-fry of ground meat and holy basil.",
+ time: "30 Mins",
+ skills: "Easy",
+ ingredients: [
+ { name: "Ground pork", emoji: "🥩" },
+ { name: "Holy basil", emoji: "🌿" },
+ { name: "Garlic", emoji: "🧄" },
+ { name: "Thai chili", emoji: "🌶️" },
+ { name: "Soy sauce", emoji: "🍶" },
+ { name: "Oyster sauce", emoji: "🦪" },
+ { name: "Sugar", emoji: "🧂" },
+ { name: "Eggs", emoji: "🥚" },
+ ],
+ calories: "520 kcal",
+ nutrition: {
+ fat: 15,
+ fiber: 3,
+ protein: 25,
+ carbs: 40,
+ },
+ steps: [
+ "Gather and prepare all ingredients",
+ "Heat oil in a wok or large frying pan",
+ "Fry the eggs sunny side up and set aside",
+ "Stir-fry garlic and chilies until fragrant",
+ "Add ground pork and cook until browned",
+ "Add sauces and basil, serve with rice and egg on top",
+ ],
+ };
+
+ const startCookingSession = () => {
+ router.push(`/cooking/[id]`);
+ };
+
+ return (
+
+
+ {/* Header with back and share buttons */}
+
+ router.back()}
+ >
+
+
+
+
+
+
+
+ {/* Food Image */}
+
+
+
+
+ {/* Food Title and Description */}
+
+ {foodData.name}
+ {foodData.description}
+
+ {/* Info Tabs */}
+
+ setActiveTab("Skills")}
+ >
+ Skills
+ {foodData.skills}
+
+ setActiveTab("Time")}
+ >
+ Time
+ {foodData.time}
+
+ setActiveTab("Ingredients")}
+ >
+ Ingredients
+ {foodData.ingredients.length}
+
+ setActiveTab("Calories")}
+ >
+ Calories
+ {foodData.calories}
+
+
+
+ {/* Ingredients Section */}
+
+ Ingredients
+
+ {foodData.ingredients.map((ingredient, index) => (
+
+
+
+ {ingredient.emoji}
+
+
+ {ingredient.name}
+
+ ))}
+
+
+
+ {/* Nutrition Section - Improved UI */}
+
+ Nutrition Facts
+
+
+
+
+ {foodData.nutrition.fat}
+
+ g
+
+ Fat
+
+
+
+
+ {foodData.nutrition.fiber}
+
+ g
+
+ Fiber
+
+
+
+
+ {foodData.nutrition.protein}
+
+ g
+
+ Protein
+
+
+
+
+ {foodData.nutrition.carbs}
+
+ g
+
+ Carbs
+
+
+
+
+ {/* Steps Preview */}
+
+ Cooking Steps
+
+ {foodData.steps.slice(0, 2).map((step, index) => (
+
+
+ {index + 1}
+
+ {step}
+
+ ))}
+
+ ...and {foodData.steps.length - 2} more steps
+
+
+
+
+
+
+ {/* Cook Button */}
+
+ Let's Cook!
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: "#FFFFFF",
+ },
+ scrollView: {
+ flex: 1,
+ },
+ header: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ paddingHorizontal: 16,
+ paddingVertical: 12,
+ position: "absolute",
+ top: 0,
+ left: 0,
+ right: 0,
+ zIndex: 10,
+ },
+ backButton: {
+ width: 40,
+ height: 40,
+ borderRadius: 20,
+ backgroundColor: "#FFCC00",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ shareButton: {
+ width: 40,
+ height: 40,
+ borderRadius: 20,
+ backgroundColor: "#FFFFFF",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ imageContainer: {
+ alignItems: "center",
+ marginTop: 60,
+ marginBottom: 20,
+ },
+ foodImage: {
+ width: 200,
+ height: 200,
+ borderRadius: 100,
+ borderWidth: 5,
+ borderColor: "#FFFFFF",
+ },
+ contentContainer: {
+ paddingHorizontal: 16,
+ },
+ foodTitle: {
+ fontSize: 24,
+ fontWeight: "bold",
+ color: "#333333",
+ marginBottom: 8,
+ },
+ foodDescription: {
+ fontSize: 16,
+ color: "#666666",
+ marginBottom: 20,
+ lineHeight: 22,
+ },
+ tabsContainer: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ marginBottom: 20,
+ },
+ tabItem: {
+ alignItems: "center",
+ },
+ activeTabItem: {
+ borderBottomWidth: 2,
+ borderBottomColor: "#333333",
+ },
+ tabLabel: {
+ fontSize: 14,
+ color: "#666666",
+ },
+ tabValue: {
+ fontSize: 16,
+ fontWeight: "bold",
+ color: "#333333",
+ marginTop: 4,
+ },
+ sectionContainer: {
+ marginBottom: 20,
+ },
+ sectionTitle: {
+ fontSize: 20,
+ fontWeight: "bold",
+ color: "#333333",
+ marginBottom: 16,
+ },
+ ingredientsGrid: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ ingredientItem: {
+ width: "25%",
+ alignItems: "center",
+ marginBottom: 16,
+ },
+ ingredientIconContainer: {
+ width: 60,
+ height: 60,
+ borderRadius: 30,
+ backgroundColor: "#F8F8F8",
+ justifyContent: "center",
+ alignItems: "center",
+ marginBottom: 8,
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.1,
+ shadowRadius: 4,
+ elevation: 2,
+ },
+ ingredientEmoji: {
+ fontSize: 30,
+ },
+ ingredientName: {
+ fontSize: 12,
+ textAlign: "center",
+ color: "#333333",
+ },
+ nutritionSection: {
+ marginBottom: 20,
+ },
+ nutritionContainer: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ backgroundColor: "#FFFFFF",
+ borderRadius: 12,
+ padding: 16,
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.1,
+ shadowRadius: 4,
+ elevation: 2,
+ },
+ nutritionItem: {
+ alignItems: "center",
+ },
+ nutritionCircle: {
+ width: 60,
+ height: 60,
+ borderRadius: 30,
+ justifyContent: "center",
+ alignItems: "center",
+ marginBottom: 8,
+ },
+ nutritionValue: {
+ fontSize: 18,
+ fontWeight: "bold",
+ color: "#333333",
+ },
+ nutritionUnit: {
+ fontSize: 12,
+ color: "#333333",
+ position: "absolute",
+ bottom: 10,
+ right: 10,
+ },
+ nutritionLabel: {
+ fontSize: 14,
+ fontWeight: "500",
+ color: "#333333",
+ },
+ stepsPreviewContainer: {
+ backgroundColor: "#F8F8F8",
+ borderRadius: 12,
+ padding: 16,
+ },
+ stepPreviewItem: {
+ flexDirection: "row",
+ alignItems: "center",
+ marginBottom: 12,
+ },
+ stepNumberCircle: {
+ width: 30,
+ height: 30,
+ borderRadius: 15,
+ backgroundColor: "#FFCC00",
+ justifyContent: "center",
+ alignItems: "center",
+ marginRight: 12,
+ },
+ stepNumber: {
+ fontSize: 16,
+ fontWeight: "bold",
+ color: "#333333",
+ },
+ stepPreviewText: {
+ fontSize: 16,
+ color: "#333333",
+ flex: 1,
+ },
+ moreStepsText: {
+ fontSize: 14,
+ color: "#666666",
+ fontStyle: "italic",
+ textAlign: "center",
+ marginTop: 8,
+ },
+ cookButton: {
+ position: "absolute",
+ bottom: 0,
+ left: 0,
+ right: 0,
+ backgroundColor: "#FF0000",
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: "center",
+ paddingVertical: 16,
+ },
+ cookButtonText: {
+ fontSize: 18,
+ fontWeight: "bold",
+ color: "#FFCC00",
+ marginRight: 8,
+ },
+});
diff --git a/assets/images/cooking/step1.png b/assets/images/cooking/step1.png
new file mode 100644
index 0000000..70de86e
Binary files /dev/null and b/assets/images/cooking/step1.png differ
diff --git a/assets/images/cooking/step2.png b/assets/images/cooking/step2.png
new file mode 100644
index 0000000..70de86e
Binary files /dev/null and b/assets/images/cooking/step2.png differ
diff --git a/assets/images/cooking/step3.png b/assets/images/cooking/step3.png
new file mode 100644
index 0000000..70de86e
Binary files /dev/null and b/assets/images/cooking/step3.png differ
diff --git a/assets/images/cooking/step4.png b/assets/images/cooking/step4.png
new file mode 100644
index 0000000..70de86e
Binary files /dev/null and b/assets/images/cooking/step4.png differ
diff --git a/assets/images/cooking/step5.png b/assets/images/cooking/step5.png
new file mode 100644
index 0000000..70de86e
Binary files /dev/null and b/assets/images/cooking/step5.png differ
diff --git a/assets/images/cooking/step6.png b/assets/images/cooking/step6.png
new file mode 100644
index 0000000..70de86e
Binary files /dev/null and b/assets/images/cooking/step6.png differ
diff --git a/assets/images/food/beef.jpg b/assets/images/food/beef.jpg
new file mode 100644
index 0000000..70de86e
Binary files /dev/null and b/assets/images/food/beef.jpg differ
diff --git a/assets/images/food/jjajangmyeon.jpg b/assets/images/food/jjajangmyeon.jpg
new file mode 100644
index 0000000..4ee61a9
Binary files /dev/null and b/assets/images/food/jjajangmyeon.jpg differ
diff --git a/assets/images/food/padkrapao.jpg b/assets/images/food/padkrapao.jpg
new file mode 100644
index 0000000..99b6d80
Binary files /dev/null and b/assets/images/food/padkrapao.jpg differ
diff --git a/assets/images/food/padthai.jpg b/assets/images/food/padthai.jpg
new file mode 100644
index 0000000..d66ce2c
Binary files /dev/null and b/assets/images/food/padthai.jpg differ
diff --git a/assets/images/food/ramen.jpg b/assets/images/food/ramen.jpg
new file mode 100644
index 0000000..5b18c11
Binary files /dev/null and b/assets/images/food/ramen.jpg differ
diff --git a/assets/images/food/tiramisu.jpg b/assets/images/food/tiramisu.jpg
new file mode 100644
index 0000000..2d55164
Binary files /dev/null and b/assets/images/food/tiramisu.jpg differ
diff --git a/assets/images/food/wings.jpg b/assets/images/food/wings.jpg
new file mode 100644
index 0000000..1ea043b
Binary files /dev/null and b/assets/images/food/wings.jpg differ
diff --git a/assets/images/notebook-orange.png b/assets/images/notebook-orange.png
new file mode 100644
index 0000000..aa87d4a
Binary files /dev/null and b/assets/images/notebook-orange.png differ
diff --git a/assets/images/placeholder-food.jpg b/assets/images/placeholder-food.jpg
new file mode 100644
index 0000000..87d0b1f
Binary files /dev/null and b/assets/images/placeholder-food.jpg differ