Compare commits
26 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 506c52e578 | |||
| 69240277bd | |||
| e05da7ed65 | |||
| 22d2603a11 | |||
| b020c62fbe | |||
| b244452e7e | |||
| 879b3639e0 | |||
| 553ea4848b | |||
| 0949125dd7 | |||
| cb39383e83 | |||
| 5a26c1d079 | |||
| a03f120761 | |||
| 51ddf5f7f7 | |||
| eb341bc16d | |||
| f74ede57a9 | |||
| c049f3e571 | |||
| fd4199bc60 | |||
| a459d0d429 | |||
| 4c4028fe65 | |||
| 3d32598eda | |||
| 28722e8c9e | |||
| 51059ac8d1 | |||
| 7cbb0481b7 | |||
| 41b61cfcd1 | |||
| 0381957852 | |||
| 06df6fc0e5 |
20
next.config.js
Normal file
20
next.config.js
Normal 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;
|
||||
@@ -1,56 +1,29 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Manrope } from "next/font/google";
|
||||
import { DM_Sans } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const manrope = Manrope({
|
||||
variable: "--font-manrope", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const dmSans = DM_Sans({
|
||||
variable: "--font-dm-sans", subsets: ["latin"],
|
||||
});
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "EasyRecipes - AI-Powered Recipe Discovery", description: "Cook with what you already have. EasyRecipes uses AI to instantly generate personalized recipes based on your ingredients, cooking preferences, and skill level.", keywords: "recipe app, AI recipes, cooking app, ingredient-based recipes, meal planning, home cooking", openGraph: {
|
||||
title: "EasyRecipes - Cook with What You Have", description: "Discover delicious recipes instantly using only the ingredients in your kitchen. AI-powered, personalized, and immersive cooking experience.", url: "https://easyrecipes.app", siteName: "EasyRecipes", type: "website", images: [
|
||||
{
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png", alt: "EasyRecipes recipe suggestions"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "EasyRecipes - AI Recipe Generation", description: "Turn your pantry ingredients into amazing meals with AI-powered recipe discovery.", images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png"],
|
||||
},
|
||||
title: "EasyRecipes - AI-Powered Recipe Discovery", description: "Discover delicious recipes using ingredients you already have. AI-powered recipe generation, smart pantry management, and cultural cooking atmosphere."
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${manrope.variable} ${dmSans.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<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}>
|
||||
{children}
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1418,7 +1391,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
889
src/app/page.tsx
889
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
@@ -15,20 +16,366 @@ import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"
|
||||
|
||||
import {
|
||||
Award,
|
||||
ChevronRight,
|
||||
Globe,
|
||||
Heart,
|
||||
Lock,
|
||||
Shield,
|
||||
Sparkles,
|
||||
Star,
|
||||
TrendingUp,
|
||||
User,
|
||||
Users,
|
||||
Zap,
|
||||
ChefHat,
|
||||
Flame,
|
||||
Music,
|
||||
Settings,
|
||||
LogOut,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [showOnboarding, setShowOnboarding] = useState(false);
|
||||
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 = () => {
|
||||
try {
|
||||
localStorage.setItem("hasCompletedOnboarding", "true");
|
||||
setShowOnboarding(false);
|
||||
setShowDashboard(true);
|
||||
} catch (error) {
|
||||
console.error("Onboarding completion error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignOut = () => {
|
||||
try {
|
||||
localStorage.removeItem("authToken");
|
||||
localStorage.removeItem("userEmail");
|
||||
localStorage.removeItem("hasCompletedOnboarding");
|
||||
setIsAuthenticated(false);
|
||||
setShowOnboarding(false);
|
||||
setShowDashboard(false);
|
||||
setIngredients([]);
|
||||
setRecipes([]);
|
||||
setSelectedRecipe(null);
|
||||
} catch (error) {
|
||||
console.error("Sign out error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignIn = () => {
|
||||
setIsAuthenticated(true);
|
||||
setShowOnboarding(true);
|
||||
};
|
||||
|
||||
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 (
|
||||
<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 className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
<div className="max-w-2xl w-full mx-auto px-6">
|
||||
<div id="onboarding" data-section="onboarding" className="space-y-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Welcome to EasyRecipes
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
Let's personalize your cooking experience
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FeatureCardTwentyThree
|
||||
title="Two-Step Onboarding Experience"
|
||||
description="Personalize your EasyRecipes journey with a simple two-step setup process that learns your cooking preferences and cuisine preferences."
|
||||
tag="Smart Onboarding"
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "step1", title: "Welcome Screen - Understand Your Cooking Goals", tags: ["Step 1", "Introduction"],
|
||||
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", onFeatureClick: () => console.log("Feature 1 clicked")
|
||||
},
|
||||
{
|
||||
id: "step2", title: "Preferences Setup - Choose Your Cuisine & Skill", tags: ["Step 2", "Personalization"],
|
||||
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", onFeatureClick: () => console.log("Feature 2 clicked")
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Complete Setup", onClick: handleCompleteOnboarding,
|
||||
},
|
||||
]}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -51,292 +398,282 @@ export default function LandingPage() {
|
||||
{ name: "Pantry", id: "pantry" },
|
||||
{ name: "Settings", id: "settings" },
|
||||
]}
|
||||
button={{ text: "Sign In", href: "#auth" }}
|
||||
button={{
|
||||
text: isAuthenticated ? "Sign Out" : "Sign In", href: isAuthenticated ? "#" : "#auth", onClick: isAuthenticated ? handleSignOut : handleSignIn,
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
className="backdrop-blur-md bg-white/30 border border-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
title="Cook with What You Already Have"
|
||||
description="EasyRecipes helps you discover delicious meals using only the ingredients in your kitchen. Enter your ingredients, and our AI instantly generates personalized recipes tailored to your taste and cooking skill level."
|
||||
background={{ variant: "plain" }}
|
||||
tag="AI-Powered Cooking"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#auth" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-mobile-app-ingredient-input-screen-wit-1772651575762-1165d0de.png?_wi=1", imageAlt: "Ingredient input interface"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=1", imageAlt: "Recipe result cards"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-smart-digital-pantry-interface-with-gl-1772651575862-cfa26374.png", imageAlt: "Smart pantry dashboard"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-detailed-recipe-page-interface-with-gl-1772651576198-3422a9bd.png", imageAlt: "Recipe detail page"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-cultural-music-player-interface-showin-1772651576437-2be31020.png?_wi=1", imageAlt: "Cultural music player"
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
className="min-h-screen"
|
||||
containerClassName="py-20"
|
||||
/>
|
||||
</div>
|
||||
{!isAuthenticated ? (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
title="Cook with What You Already Have"
|
||||
description="EasyRecipes helps you discover delicious meals using only the ingredients in your kitchen. Enter your ingredients, and our AI instantly generates personalized recipes tailored to your taste and cooking skill level."
|
||||
background={{ variant: "plain" }}
|
||||
tag="AI-Powered Cooking"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#auth", onClick: handleSignIn },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-mobile-app-ingredient-input-screen-wit-1772651575762-1165d0de.png?_wi=1", imageAlt: "Ingredient input interface"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=1", imageAlt: "Recipe result cards"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-smart-digital-pantry-interface-with-gl-1772651575862-cfa26374.png", imageAlt: "Smart pantry dashboard"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-detailed-recipe-page-interface-with-gl-1772651576198-3422a9bd.png", imageAlt: "Recipe detail page"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-cultural-music-player-interface-showin-1772651576437-2be31020.png?_wi=1", imageAlt: "Cultural music player"
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
className="min-h-screen"
|
||||
containerClassName="py-20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="auth" data-section="auth">
|
||||
<AboutMetric
|
||||
title="Secure Authentication - Login & Create Account"
|
||||
metrics={[
|
||||
{ icon: Lock, label: "Encrypted Sessions", value: "256-bit SSL" },
|
||||
{ icon: User, label: "User Accounts", value: "Email & Password" },
|
||||
{ icon: Shield, label: "Data Protection", value: "Secure Storage" },
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Quick Access", value: "Session Persistence"
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
<div id="auth" data-section="auth">
|
||||
<AboutMetric
|
||||
title="Secure Authentication - Login & Create Account"
|
||||
metrics={[
|
||||
{
|
||||
icon: Lock,
|
||||
label: "Encrypted Sessions", value: "256-bit SSL"
|
||||
},
|
||||
{
|
||||
icon: User,
|
||||
label: "User Accounts", value: "Email & Password"
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Data Protection", value: "Secure Storage"
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Quick Access", value: "Session Persistence"
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="onboarding" data-section="onboarding">
|
||||
<FeatureCardTwentyThree
|
||||
title="Two-Step Onboarding Experience"
|
||||
description="Personalize your EasyRecipes journey with a simple two-step setup process that learns your cooking preferences and cuisine preferences."
|
||||
tag="Smart Onboarding"
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "step1", title: "Welcome Screen - Understand Your Cooking Goals", tags: ["Step 1", "Introduction"],
|
||||
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"
|
||||
},
|
||||
{
|
||||
id: "step2", title: "Preferences Setup - Choose Your Cuisine & Skill", tags: ["Step 2", "Personalization"],
|
||||
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"
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<ProductCardOne
|
||||
title="Core Features"
|
||||
description="Experience the power of AI-driven recipe discovery combined with premium Liquid Glass design and immersive cultural cooking atmosphere."
|
||||
tag="Main Features"
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
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", onProductClick: () => console.log("Product 1 clicked")
|
||||
},
|
||||
{
|
||||
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", onProductClick: () => console.log("Product 2 clicked")
|
||||
},
|
||||
{
|
||||
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", onProductClick: () => console.log("Product 3 clicked")
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<ProductCardOne
|
||||
title="Core Features"
|
||||
description="Experience the power of AI-driven recipe discovery combined with premium Liquid Glass design and immersive cultural cooking atmosphere."
|
||||
tag="Main Features"
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
<div id="recipes" data-section="recipes">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Trusted by thousands of home cooks worldwide discovering recipes with their pantry ingredients"
|
||||
cardTag="Join Our Cooking Community"
|
||||
cardTagIcon={Heart}
|
||||
testimonials={[
|
||||
{
|
||||
id: "user1", name: "Sarah Johnson", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sarah Johnson"
|
||||
},
|
||||
{
|
||||
id: "user2", name: "Marco Rossi", imageSrc: "/placeholders/placeholder2.webp", imageAlt: "Marco Rossi"
|
||||
},
|
||||
{
|
||||
id: "user3", name: "Yuki Tanaka", imageSrc: "/placeholders/placeholder3.webp", imageAlt: "Yuki Tanaka"
|
||||
},
|
||||
{
|
||||
id: "user4", name: "Elena Martínez", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Elena Martínez"
|
||||
},
|
||||
{
|
||||
id: "user5", name: "Priya Sharma", imageSrc: "/placeholders/placeholder5.webp", imageAlt: "Priya Sharma"
|
||||
},
|
||||
{
|
||||
id: "user6", name: "Lucas Silva", imageSrc: "/placeholders/placeholder6.webp", imageAlt: "Lucas Silva"
|
||||
},
|
||||
]}
|
||||
cardAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="recipes" data-section="recipes">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Trusted by thousands of home cooks worldwide discovering recipes with their pantry ingredients"
|
||||
cardTag="Join Our Cooking Community"
|
||||
cardTagIcon={Heart}
|
||||
testimonials={[
|
||||
{
|
||||
id: "user1", name: "Sarah Johnson", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sarah Johnson"
|
||||
},
|
||||
{
|
||||
id: "user2", name: "Marco Rossi", imageSrc: "/placeholders/placeholder2.webp", imageAlt: "Marco Rossi"
|
||||
},
|
||||
{
|
||||
id: "user3", name: "Yuki Tanaka", imageSrc: "/placeholders/placeholder3.webp", imageAlt: "Yuki Tanaka"
|
||||
},
|
||||
{
|
||||
id: "user4", name: "Elena Martínez", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Elena Martínez"
|
||||
},
|
||||
{
|
||||
id: "user5", name: "Priya Sharma", imageSrc: "/placeholders/placeholder5.webp", imageAlt: "Priya Sharma"
|
||||
},
|
||||
{
|
||||
id: "user6", name: "Lucas Silva", imageSrc: "/placeholders/placeholder6.webp", imageAlt: "Lucas Silva"
|
||||
},
|
||||
]}
|
||||
cardAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Choose Your Cooking Plan"
|
||||
description="Select the perfect EasyRecipes plan for your culinary journey and unlock unlimited recipe discovery."
|
||||
tag="Flexible Plans"
|
||||
tagAnimation="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "starter", badge: "Great for Beginners", badgeIcon: Zap,
|
||||
price: "Free", subtitle: "Perfect for exploring recipes", buttons: [{ text: "Get Started", href: "#auth", onClick: handleSignIn }],
|
||||
features: [
|
||||
"50 AI-generated recipes/month", "Basic ingredient input", "Standard cooking instructions", "Cultural music system"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
|
||||
price: "$9.99/mo", subtitle: "For serious home cooks", buttons: [{ text: "Start Free Trial", href: "#auth", onClick: handleSignIn }],
|
||||
features: [
|
||||
"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,
|
||||
price: "$19.99/mo", subtitle: "Master your culinary skills", buttons: [{ text: "Upgrade Now", href: "#auth", onClick: handleSignIn }],
|
||||
features: [
|
||||
"Everything in Pro", "Professional cooking techniques", "Meal planning & grocery lists", "Weekly recipe curation", "Family sharing (up to 5 members)", "Exclusive chef interviews"
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Choose Your Cooking Plan"
|
||||
description="Select the perfect EasyRecipes plan for your culinary journey and unlock unlimited recipe discovery."
|
||||
tag="Flexible Plans"
|
||||
tagAnimation="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "starter", badge: "Great for Beginners", badgeIcon: Zap,
|
||||
price: "Free", subtitle: "Perfect for exploring recipes", buttons: [{ text: "Get Started", href: "#auth" }],
|
||||
features: [
|
||||
"50 AI-generated recipes/month", "Basic ingredient input", "Standard cooking instructions", "Cultural music system"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
|
||||
price: "$9.99/mo", subtitle: "For serious home cooks", buttons: [{ text: "Start Free Trial", href: "#auth" }],
|
||||
features: [
|
||||
"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,
|
||||
price: "$19.99/mo", subtitle: "Master your culinary skills", buttons: [{ text: "Upgrade Now", href: "#auth" }],
|
||||
features: [
|
||||
"Everything in Pro", "Professional cooking techniques", "Meal planning & grocery lists", "Weekly recipe curation", "Family sharing (up to 5 members)", "Exclusive chef interviews"
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="EasyRecipes by the Numbers"
|
||||
description="See how EasyRecipes is transforming home cooking with AI-powered recipe discovery."
|
||||
tag="Performance Stats"
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "recipes", icon: Star,
|
||||
title: "Recipes Generated", value: "1M+"
|
||||
},
|
||||
{
|
||||
id: "users", icon: Users,
|
||||
title: "Active Users", value: "50K+"
|
||||
},
|
||||
{
|
||||
id: "cuisines", icon: Globe,
|
||||
title: "Cuisines Supported", value: "25+"
|
||||
},
|
||||
{
|
||||
id: "satisfaction", icon: Star,
|
||||
title: "User Satisfaction", value: "4.8/5"
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="EasyRecipes by the Numbers"
|
||||
description="See how EasyRecipes is transforming home cooking with AI-powered recipe discovery."
|
||||
tag="Performance Stats"
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "recipes", icon: Star,
|
||||
title: "Recipes Generated", value: "1M+"
|
||||
},
|
||||
{
|
||||
id: "users", icon: Users,
|
||||
title: "Active Users", value: "50K+"
|
||||
},
|
||||
{
|
||||
id: "cuisines", icon: Globe,
|
||||
title: "Cuisines Supported", value: "25+"
|
||||
},
|
||||
{
|
||||
id: "satisfaction", icon: Star,
|
||||
title: "User Satisfaction", value: "4.8/5"
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about EasyRecipes, authentication, and our AI recipe system."
|
||||
faqs={[
|
||||
{
|
||||
id: "auth-login", title: "How do I sign up and log in?", content:
|
||||
"Simply open EasyRecipes and choose 'Create Account' or 'Log In'. You can sign up with your email and password, or optionally use Google/Apple login. Your session will persist across app restarts, so you won't need to log in every time."
|
||||
},
|
||||
{
|
||||
id: "session-management", title: "Does my session stay active?", content:
|
||||
"Yes! Once you're logged in, your session remains active. Your account, saved recipes, favorite recipes, ingredient pantry, cooking history, and preferences are all saved securely. You can close the app and resume exactly where you left off."
|
||||
},
|
||||
{
|
||||
id: "onboarding-steps", title: "What are the onboarding steps?", content:
|
||||
"New users see a two-step onboarding: Step 1 is a welcome screen explaining EasyRecipes features. Step 2 asks about your cuisine preferences (Italian, Asian, Mexican, Mediterranean, American, Vegetarian, Vegan, Healthy), cooking time preference (Under 10 min, 20 min, or any time), and skill level (Beginner, Intermediate, Advanced) to personalize your recipes."
|
||||
},
|
||||
{
|
||||
id: "ingredient-input", title: "How do I input ingredients?", content:
|
||||
"You can add ingredients three ways: 1) Type them manually, 2) Use voice input for hands-free entry, 3) Use the camera scanner for AI-powered ingredient recognition. Ingredients appear as floating bubbles, and you can add as many as you need before generating recipes."
|
||||
},
|
||||
{
|
||||
id: "ai-recipes", title: "How does AI generate recipes?", content:
|
||||
"Our AI analyzes the ingredients you provide and generates recipe suggestions based on your onboarding preferences (cuisine type, cooking time, skill level). Each recipe card shows cooking time, difficulty level, calorie estimate, and ingredients. Click to see full instructions."
|
||||
},
|
||||
{
|
||||
id: "music-system", title: "What is the cultural music system?", content:
|
||||
"When you open a recipe, background music plays matching the recipe's cuisine origin. Italian recipes play Italian mandolin music, Japanese recipes play calm traditional music, Mexican recipes feature light mariachi, and so on. You can mute, adjust volume, or disable music in settings. Music fades smoothly between transitions."
|
||||
},
|
||||
{
|
||||
id: "smart-pantry", title: "What is the Smart Pantry?", content:
|
||||
"The Smart Pantry lets you save ingredients you usually have at home. The app analyzes your pantry and suggests recipes you can cook daily with what you already have. You'll receive notifications like 'You can cook 6 meals today with your pantry ingredients.'"
|
||||
},
|
||||
{
|
||||
id: "camera-scanner", title: "How does the camera ingredient scanner work?", content:
|
||||
"The camera scanner uses AI to recognize ingredients using your phone's camera. Point the camera at ingredients in your kitchen, and the app automatically identifies and adds them to your ingredient list. This makes ingredient entry fast and convenient."
|
||||
},
|
||||
]}
|
||||
textPosition="left"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about EasyRecipes, authentication, and our AI recipe system."
|
||||
faqs={[
|
||||
{
|
||||
id: "auth-login", title: "How do I sign up and log in?", content:
|
||||
"Simply open EasyRecipes and choose 'Create Account' or 'Log In'. You can sign up with your email and password, or optionally use Google/Apple login. Your session will persist across app restarts, so you won't need to log in every time."
|
||||
},
|
||||
{
|
||||
id: "session-management", title: "Does my session stay active?", content:
|
||||
"Yes! Once you're logged in, your session remains active. Your account, saved recipes, favorite recipes, ingredient pantry, cooking history, and preferences are all saved securely. You can close the app and resume exactly where you left off."
|
||||
},
|
||||
{
|
||||
id: "onboarding-steps", title: "What are the onboarding steps?", content:
|
||||
"New users see a two-step onboarding: Step 1 is a welcome screen explaining EasyRecipes features. Step 2 asks about your cuisine preferences (Italian, Asian, Mexican, Mediterranean, American, Vegetarian, Vegan, Healthy), cooking time preference (Under 10 min, 20 min, or any time), and skill level (Beginner, Intermediate, Advanced) to personalize your recipes."
|
||||
},
|
||||
{
|
||||
id: "ingredient-input", title: "How do I input ingredients?", content:
|
||||
"You can add ingredients three ways: 1) Type them manually, 2) Use voice input for hands-free entry, 3) Use the camera scanner for AI-powered ingredient recognition. Ingredients appear as floating bubbles, and you can add as many as you need before generating recipes."
|
||||
},
|
||||
{
|
||||
id: "ai-recipes", title: "How does AI generate recipes?", content:
|
||||
"Our AI analyzes the ingredients you provide and generates recipe suggestions based on your onboarding preferences (cuisine type, cooking time, skill level). Each recipe card shows cooking time, difficulty level, calorie estimate, and ingredients. Click to see full instructions."
|
||||
},
|
||||
{
|
||||
id: "music-system", title: "What is the cultural music system?", content:
|
||||
"When you open a recipe, background music plays matching the recipe's cuisine origin. Italian recipes play Italian mandolin music, Japanese recipes play calm traditional music, Mexican recipes feature light mariachi, and so on. You can mute, adjust volume, or disable music in settings. Music fades smoothly between transitions."
|
||||
},
|
||||
{
|
||||
id: "smart-pantry", title: "What is the Smart Pantry?", content:
|
||||
"The Smart Pantry lets you save ingredients you usually have at home. The app analyzes your pantry and suggests recipes you can cook daily with what you already have. You'll receive notifications like 'You can cook 6 meals today with your pantry ingredients.'"
|
||||
},
|
||||
{
|
||||
id: "camera-scanner", title: "How does the camera ingredient scanner work?", content:
|
||||
"The camera scanner uses AI to recognize ingredients using your phone's camera. Point the camera at ingredients in your kitchen, and the app automatically identifies and adds them to your ingredient list. This makes ingredient entry fast and convenient."
|
||||
},
|
||||
]}
|
||||
textPosition="left"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get in Touch with EasyRecipes"
|
||||
description="Have questions about EasyRecipes? Want to suggest a feature or report an issue? We'd love to hear from you. Contact our team and we'll respond within 24 hours."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Tell us what's on your mind...", rows: 5,
|
||||
required: true,
|
||||
}}
|
||||
buttonText="Send Message"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-subtle-aurora-gradient-background-with-1772651576808-e283b545.png"
|
||||
imageAlt="EasyRecipes dashboard"
|
||||
mediaAnimation="blur-reveal"
|
||||
mediaPosition="right"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get in Touch with EasyRecipes"
|
||||
description="Have questions about EasyRecipes? Want to suggest a feature or report an issue? We'd love to hear from you. Contact our team and we'll respond within 24 hours."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Tell us what's on your mind...", rows: 5,
|
||||
required: true,
|
||||
}}
|
||||
buttonText="Send Message"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-subtle-aurora-gradient-background-with-1772651576808-e283b545.png"
|
||||
imageAlt="EasyRecipes dashboard"
|
||||
mediaAnimation="blur-reveal"
|
||||
mediaPosition="right"
|
||||
useInvertedBackground={false}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
|
||||
Reference in New Issue
Block a user