bender/c5cd77f2-19dd-4325-b704-91a4e982c2ec
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_2
Branches Tags
bender:main bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_5
Branches Tags
bender:main bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1

16 Commits
version_2 ... version_5

Author SHA1 Message Date
bender
506c52e578 Update src/app/page.tsx 2026-03-04 19:57:08 +00:00
bender
69240277bd Update src/app/page.tsx 2026-03-04 19:56:17 +00:00
bender
e05da7ed65 Merge version_4 into main 
Merge version_4 into main
 2026-03-04 19:49:17 +00:00
bender
22d2603a11 Update src/app/page.tsx 2026-03-04 19:49:13 +00:00
bender
b020c62fbe Merge version_4 into main 
Merge version_4 into main
 2026-03-04 19:43:54 +00:00
bender
b244452e7e Update src/app/page.tsx 2026-03-04 19:43:49 +00:00
bender
879b3639e0 Merge version_3 into main 
Merge version_3 into main
 2026-03-04 19:38:48 +00:00
bender
553ea4848b Update src/app/page.tsx 2026-03-04 19:38:44 +00:00
bender
0949125dd7 Merge version_3 into main 
Merge version_3 into main
 2026-03-04 19:38:03 +00:00
bender
cb39383e83 Update src/app/page.tsx 2026-03-04 19:37:59 +00:00
bender
5a26c1d079 Update src/app/layout.tsx 2026-03-04 19:37:59 +00:00
bender
a03f120761 Add next.config.js 2026-03-04 19:37:58 +00:00
bender
51ddf5f7f7 Merge version_2 into main 
Merge version_2 into main
 2026-03-04 19:34:08 +00:00
bender
f74ede57a9 Merge version_2 into main 
Merge version_2 into main
 2026-03-04 19:32:23 +00:00
bender
fd4199bc60 Merge version_2 into main 
Merge version_2 into main
 2026-03-04 19:30:26 +00:00
bender
3d32598eda Merge version_2 into main 
Merge version_2 into main
 2026-03-04 19:28:51 +00:00
3 changed files with 301 additions and 31 deletions
Expand all files Collapse all files

20
next.config.js Normal file
View File

@@ -0,0 +1,20 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'webuild-dev.s3.eu-north-1.amazonaws.com',
pathname: '/**',
},
{
protocol: 'https',
hostname: '**.amazonaws.com',
pathname: '/**',
},
],
unoptimized: true,
},
};
module.exports = nextConfig;

6
src/app/layout.tsx
View File

@@ -15,6 +15,12 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<head>
<script
async
src="https://cdn.jsdelivr.net/npm/next-images@1.0.0/dist/index.js"
/>
</head>
<body className={inter.className}> <body className={inter.className}>
{children} {children}

306
src/app/page.tsx
View File

@@ -25,17 +25,27 @@ import {
User, User,
Users, Users,
Zap, Zap,
ChefHat,
Flame,
Music,
Settings,
LogOut,
} from "lucide-react"; } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
const [isAuthenticated, setIsAuthenticated] = useState(false); const [isAuthenticated, setIsAuthenticated] = useState(false);
const [showOnboarding, setShowOnboarding] = useState(false); const [showOnboarding, setShowOnboarding] = useState(false);
const [mounted, setMounted] = useState(true); const [ingredients, setIngredients] = useState<string[]>([]);
const [currentInput, setCurrentInput] = useState("");
const [recipes, setRecipes] = useState<any[]>([]);
const [selectedRecipe, setSelectedRecipe] = useState<any>(null);
const [showDashboard, setShowDashboard] = useState(false);
const handleCompleteOnboarding = () => { const handleCompleteOnboarding = () => {
try { try {
localStorage.setItem("hasCompletedOnboarding", "true"); localStorage.setItem("hasCompletedOnboarding", "true");
setShowOnboarding(false); setShowOnboarding(false);
setShowDashboard(true);
} catch (error) { } catch (error) {
console.error("Onboarding completion error:", error); console.error("Onboarding completion error:", error);
} }
@@ -48,16 +58,48 @@ export default function LandingPage() {
localStorage.removeItem("hasCompletedOnboarding"); localStorage.removeItem("hasCompletedOnboarding");
setIsAuthenticated(false); setIsAuthenticated(false);
setShowOnboarding(false); setShowOnboarding(false);
setShowDashboard(false);
setIngredients([]);
setRecipes([]);
setSelectedRecipe(null);
} catch (error) { } catch (error) {
console.error("Sign out error:", error); console.error("Sign out error:", error);
} }
}; };
if (!mounted) { const handleSignIn = () => {
return null; setIsAuthenticated(true);
} setShowOnboarding(true);
};
if (isAuthenticated && showOnboarding) { const addIngredient = () => {
if (currentInput.trim()) {
setIngredients([...ingredients, currentInput.trim()]);
setCurrentInput("");
}
};
const removeIngredient = (index: number) => {
setIngredients(ingredients.filter((_, i) => i !== index));
};
const generateRecipes = () => {
if (ingredients.length === 0) return;
// Simulated recipe generation based on ingredients
const mockRecipes = [
{
id: "recipe1", name: "Classic Pasta Dish", cookTime: "20 min", difficulty: "Beginner", calories: "450 cal", cuisine: "Italian", instructions: "1. Boil water and add pasta\n2. Cook until al dente\n3. Add sauce and mix\n4. Serve hot", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=1"},
{
id: "recipe2", name: "Stir-Fry Vegetables", cookTime: "15 min", difficulty: "Intermediate", calories: "320 cal", cuisine: "Asian", instructions: "1. Heat oil in wok\n2. Add vegetables\n3. Stir frequently\n4. Season and serve", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=2"},
{
id: "recipe3", name: "Garden Fresh Salad", cookTime: "10 min", difficulty: "Beginner", calories: "180 cal", cuisine: "Mediterranean", instructions: "1. Wash vegetables\n2. Chop finely\n3. Mix with dressing\n4. Serve immediately", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=3"},
];
setRecipes(mockRecipes);
};
if (isAuthenticated && showOnboarding && !showDashboard) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-bubble" defaultButtonVariant="hover-bubble"
@@ -92,12 +134,12 @@ export default function LandingPage() {
{ {
id: "step1", title: "Welcome Screen - Understand Your Cooking Goals", tags: ["Step 1", "Introduction"], id: "step1", title: "Welcome Screen - Understand Your Cooking Goals", tags: ["Step 1", "Introduction"],
imageSrc: imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-premium-mobile-app-welcome-screen-with-1772651576151-a759364c.png", imageAlt: "Welcome onboarding screen" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-premium-mobile-app-welcome-screen-with-1772651576151-a759364c.png", imageAlt: "Welcome onboarding screen", onFeatureClick: () => console.log("Feature 1 clicked")
}, },
{ {
id: "step2", title: "Preferences Setup - Choose Your Cuisine & Skill", tags: ["Step 2", "Personalization"], id: "step2", title: "Preferences Setup - Choose Your Cuisine & Skill", tags: ["Step 2", "Personalization"],
imageSrc: imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-mobile-app-preferences-setup-screen-wi-1772651576088-c40d1a91.png", imageAlt: "Preferences setup interface" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-mobile-app-preferences-setup-screen-wi-1772651576088-c40d1a91.png", imageAlt: "Preferences setup interface", onFeatureClick: () => console.log("Feature 2 clicked")
}, },
]} ]}
animationType="slide-up" animationType="slide-up"
@@ -117,6 +159,223 @@ export default function LandingPage() {
); );
} }
if (isAuthenticated && showDashboard) {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="largeSmallSizeLargeTitles"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<div id="nav" data-section="nav" className="sticky top-0 z-50">
<NavbarLayoutFloatingInline
brandName="EasyRecipes"
navItems={[
{ name: "Dashboard", id: "dashboard" },
{ name: "Recipes", id: "recipes" },
{ name: "Pantry", id: "pantry" },
{ name: "Settings", id: "settings" },
]}
button={{
text: "Sign Out", href: "#", onClick: handleSignOut,
}}
animateOnLoad={true}
className="backdrop-blur-md bg-white/30 border border-white/20"
/>
</div>
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50">
{!selectedRecipe ? (
<>
{/* Ingredient Input Section */}
<div id="ingredient-input" data-section="ingredient-input" className="py-12 px-4">
<div className="max-w-4xl mx-auto">
<div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl p-8 border border-white/20">
<div className="flex items-center gap-3 mb-6">
<ChefHat className="w-8 h-8 text-indigo-600" />
<h2 className="text-3xl font-bold text-gray-900">What ingredients do you have?</h2>
</div>
<p className="text-gray-600 mb-6">Enter your available ingredients and we'll generate personalized recipes for you.</p>
{/* Input Field */}
<div className="flex gap-3 mb-6">
<input
type="text"
value={currentInput}
onChange={(e) => setCurrentInput(e.target.value)}
onKeyPress={(e) => e.key === "Enter" && addIngredient()}
placeholder="Add an ingredient (e.g., chicken, tomato, garlic)"
className="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white/50 backdrop-blur-sm"
/>
<button
onClick={addIngredient}
className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold flex items-center gap-2"
>
<Sparkles className="w-5 h-5" />
Add
</button>
</div>
{/* Ingredient Bubbles */}
{ingredients.length > 0 && (
<div className="mb-6">
<p className="text-sm text-gray-600 mb-3">Your ingredients:</p>
<div className="flex flex-wrap gap-3">
{ingredients.map((ingredient, index) => (
<div
key={index}
className="px-4 py-2 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-full text-gray-800 font-medium flex items-center gap-2 border border-indigo-200 backdrop-blur-sm"
>
{ingredient}
<button
onClick={() => removeIngredient(index)}
className="ml-2 text-gray-500 hover:text-gray-700 transition-colors"
>
×
</button>
</div>
))}
</div>
</div>
)}
{/* Generate Button */}
{ingredients.length > 0 && (
<button
onClick={generateRecipes}
className="w-full py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-all font-bold text-lg flex items-center justify-center gap-2 shadow-lg"
>
<Flame className="w-5 h-5" />
Generate Recipes
</button>
)}
</div>
</div>
</div>
{/* Recipes Section */}
{recipes.length > 0 && (
<div id="recipes" data-section="recipes" className="py-12 px-4">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-gray-900 mb-8">Your Generated Recipes</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{recipes.map((recipe) => (
<div
key={recipe.id}
onClick={() => setSelectedRecipe(recipe)}
className="bg-white/80 backdrop-blur-md rounded-xl shadow-lg overflow-hidden border border-white/20 hover:shadow-2xl transition-all cursor-pointer group"
>
<div className="relative overflow-hidden h-48">
<img
src={recipe.imageSrc}
alt={recipe.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
</div>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">{recipe.name}</h3>
<div className="flex flex-wrap gap-2 mb-4">
<span className="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-medium">
{recipe.cookTime}
</span>
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
{recipe.difficulty}
</span>
<span className="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm font-medium">
{recipe.calories}
</span>
</div>
<p className="text-gray-600 text-sm mb-4">{recipe.cuisine} Cuisine</p>
<button className="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold">
View Recipe
</button>
</div>
</div>
))}
</div>
</div>
</div>
)}
{/* Empty State */}
{recipes.length === 0 && ingredients.length === 0 && (
<div className="py-20 px-4">
<div className="max-w-2xl mx-auto text-center">
<Music className="w-16 h-16 text-indigo-300 mx-auto mb-4" />
<h3 className="text-2xl font-bold text-gray-900 mb-2">Start Your Culinary Journey</h3>
<p className="text-gray-600">Add ingredients above to discover delicious recipes powered by AI</p>
</div>
</div>
)}
</>
) : (
/* Recipe Detail View */
<div className="py-12 px-4">
<div className="max-w-3xl mx-auto">
<button
onClick={() => setSelectedRecipe(null)}
className="mb-6 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold"
>
← Back to Recipes
</button>
<div className="bg-white/80 backdrop-blur-md rounded-xl shadow-lg overflow-hidden border border-white/20">
<div className="relative h-80 overflow-hidden">
<img
src={selectedRecipe.imageSrc}
alt={selectedRecipe.name}
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
<div className="absolute bottom-6 left-6 right-6">
<h1 className="text-4xl font-bold text-white mb-2">{selectedRecipe.name}</h1>
<p className="text-gray-200">{selectedRecipe.cuisine} Cuisine</p>
</div>
</div>
<div className="p-8">
<div className="grid grid-cols-3 gap-4 mb-8">
<div className="bg-indigo-50 rounded-lg p-4 text-center">
<p className="text-gray-600 text-sm mb-1">Cooking Time</p>
<p className="text-2xl font-bold text-indigo-600">{selectedRecipe.cookTime}</p>
</div>
<div className="bg-purple-50 rounded-lg p-4 text-center">
<p className="text-gray-600 text-sm mb-1">Difficulty</p>
<p className="text-2xl font-bold text-purple-600">{selectedRecipe.difficulty}</p>
</div>
<div className="bg-pink-50 rounded-lg p-4 text-center">
<p className="text-gray-600 text-sm mb-1">Calories</p>
<p className="text-2xl font-bold text-pink-600">{selectedRecipe.calories}</p>
</div>
</div>
<div className="bg-gray-50 rounded-lg p-6 border border-gray-200">
<h2 className="text-2xl font-bold text-gray-900 mb-4">Instructions</h2>
<div className="space-y-3">
{selectedRecipe.instructions.split("\n").map((instruction, idx) => (
<p key={idx} className="text-gray-700 leading-relaxed">
{instruction}
</p>
))}
</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
</ThemeProvider>
);
}
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-bubble" defaultButtonVariant="hover-bubble"
@@ -140,7 +399,7 @@ export default function LandingPage() {
{ name: "Settings", id: "settings" }, { name: "Settings", id: "settings" },
]} ]}
button={{ button={{
text: isAuthenticated ? "Sign Out" : "Sign In", href: isAuthenticated ? "#" : "#auth", onClick: isAuthenticated ? handleSignOut : undefined, text: isAuthenticated ? "Sign Out" : "Sign In", href: isAuthenticated ? "#" : "#auth", onClick: isAuthenticated ? handleSignOut : handleSignIn,
}} }}
animateOnLoad={true} animateOnLoad={true}
className="backdrop-blur-md bg-white/30 border border-white/20" className="backdrop-blur-md bg-white/30 border border-white/20"
@@ -158,7 +417,7 @@ export default function LandingPage() {
tagIcon={Sparkles} tagIcon={Sparkles}
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[ buttons={[
{ text: "Get Started", href: "#auth" }, { text: "Get Started", href: "#auth", onClick: handleSignIn },
{ text: "Learn More", href: "#features" }, { text: "Learn More", href: "#features" },
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
@@ -226,15 +485,15 @@ export default function LandingPage() {
products={[ products={[
{ {
id: "ingredient-input", name: "Smart Ingredient Input", price: "Voice & Camera Scanning", imageSrc: id: "ingredient-input", name: "Smart Ingredient Input", price: "Voice & Camera Scanning", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-mobile-app-ingredient-input-screen-wit-1772651575762-1165d0de.png?_wi=2", imageAlt: "Ingredient input interface" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-mobile-app-ingredient-input-screen-wit-1772651575762-1165d0de.png?_wi=2", imageAlt: "Ingredient input interface", onProductClick: () => console.log("Product 1 clicked")
}, },
{ {
id: "recipe-generation", name: "AI Recipe Generation", price: "Instant Suggestions", imageSrc: id: "recipe-generation", name: "AI Recipe Generation", price: "Instant Suggestions", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=2", imageAlt: "Recipe cards display" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=2", imageAlt: "Recipe cards display", onProductClick: () => console.log("Product 2 clicked")
}, },
{ {
id: "music-system", name: "Cultural Music System", price: "Immersive Experience", imageSrc: id: "music-system", name: "Cultural Music System", price: "Immersive Experience", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-cultural-music-player-interface-showin-1772651576437-2be31020.png?_wi=2", imageAlt: "Music player interface" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-cultural-music-player-interface-showin-1772651576437-2be31020.png?_wi=2", imageAlt: "Music player interface", onProductClick: () => console.log("Product 3 clicked")
}, },
]} ]}
animationType="slide-up" animationType="slide-up"
@@ -285,21 +544,21 @@ export default function LandingPage() {
plans={[ plans={[
{ {
id: "starter", badge: "Great for Beginners", badgeIcon: Zap, id: "starter", badge: "Great for Beginners", badgeIcon: Zap,
price: "Free", subtitle: "Perfect for exploring recipes", buttons: [{ text: "Get Started", href: "#auth" }], price: "Free", subtitle: "Perfect for exploring recipes", buttons: [{ text: "Get Started", href: "#auth", onClick: handleSignIn }],
features: [ features: [
"50 AI-generated recipes/month", "Basic ingredient input", "Standard cooking instructions", "Cultural music system" "50 AI-generated recipes/month", "Basic ingredient input", "Standard cooking instructions", "Cultural music system"
], ],
}, },
{ {
id: "pro", badge: "Most Popular", badgeIcon: Sparkles, id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
price: "$9.99/mo", subtitle: "For serious home cooks", buttons: [{ text: "Start Free Trial", href: "#auth" }], price: "$9.99/mo", subtitle: "For serious home cooks", buttons: [{ text: "Start Free Trial", href: "#auth", onClick: handleSignIn }],
features: [ features: [
"Unlimited AI recipes", "Voice & camera ingredient scanning", "Smart pantry management", "Personalized cooking suggestions", "Advanced nutritional info", "Priority support" "Unlimited AI recipes", "Voice & camera ingredient scanning", "Smart pantry management", "Personalized cooking suggestions", "Advanced nutritional info", "Priority support"
], ],
}, },
{ {
id: "chef", badge: "For Enthusiasts", badgeIcon: Award, id: "chef", badge: "For Enthusiasts", badgeIcon: Award,
price: "$19.99/mo", subtitle: "Master your culinary skills", buttons: [{ text: "Upgrade Now", href: "#auth" }], price: "$19.99/mo", subtitle: "Master your culinary skills", buttons: [{ text: "Upgrade Now", href: "#auth", onClick: handleSignIn }],
features: [ features: [
"Everything in Pro", "Professional cooking techniques", "Meal planning & grocery lists", "Weekly recipe curation", "Family sharing (up to 5 members)", "Exclusive chef interviews" "Everything in Pro", "Professional cooking techniques", "Meal planning & grocery lists", "Weekly recipe curation", "Family sharing (up to 5 members)", "Exclusive chef interviews"
], ],
@@ -414,22 +673,7 @@ export default function LandingPage() {
/> />
</div> </div>
</> </>
) : ( ) : null}
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">Welcome to EasyRecipes</h1>
<p className="text-lg text-gray-600 mb-8">
Dashboard content coming soon
</p>
<button
onClick={handleSignOut}
className="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600"
>
Sign Out
</button>
</div>
</div>
)}
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoEmphasis <FooterLogoEmphasis