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 type { Metadata } from "next";
|
||||||
import { Halant } from "next/font/google";
|
|
||||||
import { Inter } 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 "./globals.css";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
|
||||||
import Tag from "@/tag/Tag";
|
|
||||||
|
|
||||||
const halant = Halant({
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
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"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
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 - AI-Powered Recipe Discovery", description: "Discover delicious recipes using ingredients you already have. AI-powered recipe generation, smart pantry management, and cultural cooking atmosphere."
|
||||||
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"],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en">
|
||||||
<ServiceWrapper>
|
<head>
|
||||||
<body
|
<script
|
||||||
className={`${halant.variable} ${inter.variable} ${manrope.variable} ${dmSans.variable} antialiased`}
|
async
|
||||||
>
|
src="https://cdn.jsdelivr.net/npm/next-images@1.0.0/dist/index.js"
|
||||||
<Tag />
|
/>
|
||||||
{children}
|
</head>
|
||||||
|
<body className={inter.className}>
|
||||||
|
{children}
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: `
|
__html: `
|
||||||
@@ -1418,7 +1391,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
889
src/app/page.tsx
889
src/app/page.tsx
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||||
@@ -15,20 +16,366 @@ import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
Award,
|
Award,
|
||||||
ChevronRight,
|
|
||||||
Globe,
|
Globe,
|
||||||
Heart,
|
Heart,
|
||||||
Lock,
|
Lock,
|
||||||
Shield,
|
Shield,
|
||||||
Sparkles,
|
Sparkles,
|
||||||
Star,
|
Star,
|
||||||
TrendingUp,
|
|
||||||
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 [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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-bubble"
|
defaultButtonVariant="hover-bubble"
|
||||||
@@ -51,292 +398,282 @@ export default function LandingPage() {
|
|||||||
{ name: "Pantry", id: "pantry" },
|
{ name: "Pantry", id: "pantry" },
|
||||||
{ name: "Settings", id: "settings" },
|
{ 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}
|
animateOnLoad={true}
|
||||||
className="backdrop-blur-md bg-white/30 border border-white/20"
|
className="backdrop-blur-md bg-white/30 border border-white/20"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
{!isAuthenticated ? (
|
||||||
<HeroBillboardGallery
|
<>
|
||||||
title="Cook with What You Already Have"
|
<div id="hero" data-section="hero">
|
||||||
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."
|
<HeroBillboardGallery
|
||||||
background={{ variant: "plain" }}
|
title="Cook with What You Already Have"
|
||||||
tag="AI-Powered Cooking"
|
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."
|
||||||
tagIcon={Sparkles}
|
background={{ variant: "plain" }}
|
||||||
tagAnimation="slide-up"
|
tag="AI-Powered Cooking"
|
||||||
buttons={[
|
tagIcon={Sparkles}
|
||||||
{ text: "Get Started", href: "#auth" },
|
tagAnimation="slide-up"
|
||||||
{ text: "Learn More", href: "#features" },
|
buttons={[
|
||||||
]}
|
{ text: "Get Started", href: "#auth", onClick: handleSignIn },
|
||||||
buttonAnimation="slide-up"
|
{ text: "Learn More", href: "#features" },
|
||||||
mediaItems={[
|
]}
|
||||||
{
|
buttonAnimation="slide-up"
|
||||||
imageSrc:
|
mediaItems={[
|
||||||
"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/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/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-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-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"
|
{
|
||||||
},
|
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"
|
mediaAnimation="blur-reveal"
|
||||||
/>
|
className="min-h-screen"
|
||||||
</div>
|
containerClassName="py-20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="auth" data-section="auth">
|
<div id="auth" data-section="auth">
|
||||||
<AboutMetric
|
<AboutMetric
|
||||||
title="Secure Authentication - Login & Create Account"
|
title="Secure Authentication - Login & Create Account"
|
||||||
metrics={[
|
metrics={[
|
||||||
{ icon: Lock, label: "Encrypted Sessions", value: "256-bit SSL" },
|
{
|
||||||
{ icon: User, label: "User Accounts", value: "Email & Password" },
|
icon: Lock,
|
||||||
{ icon: Shield, label: "Data Protection", value: "Secure Storage" },
|
label: "Encrypted Sessions", value: "256-bit SSL"
|
||||||
{
|
},
|
||||||
icon: Zap,
|
{
|
||||||
label: "Quick Access", value: "Session Persistence"
|
icon: User,
|
||||||
},
|
label: "User Accounts", value: "Email & Password"
|
||||||
]}
|
},
|
||||||
metricsAnimation="slide-up"
|
{
|
||||||
useInvertedBackground={true}
|
icon: Shield,
|
||||||
className="py-16"
|
label: "Data Protection", value: "Secure Storage"
|
||||||
/>
|
},
|
||||||
</div>
|
{
|
||||||
|
icon: Zap,
|
||||||
|
label: "Quick Access", value: "Session Persistence"
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
metricsAnimation="slide-up"
|
||||||
|
useInvertedBackground={true}
|
||||||
|
className="py-16"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="onboarding" data-section="onboarding">
|
<div id="features" data-section="features">
|
||||||
<FeatureCardTwentyThree
|
<ProductCardOne
|
||||||
title="Two-Step Onboarding Experience"
|
title="Core Features"
|
||||||
description="Personalize your EasyRecipes journey with a simple two-step setup process that learns your cooking preferences and cuisine preferences."
|
description="Experience the power of AI-driven recipe discovery combined with premium Liquid Glass design and immersive cultural cooking atmosphere."
|
||||||
tag="Smart Onboarding"
|
tag="Main Features"
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
features={[
|
products={[
|
||||||
{
|
{
|
||||||
id: "step1", title: "Welcome Screen - Understand Your Cooking Goals", tags: ["Step 1", "Introduction"],
|
id: "ingredient-input", name: "Smart Ingredient Input", price: "Voice & Camera Scanning", imageSrc:
|
||||||
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")
|
||||||
"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: "recipe-generation", name: "AI Recipe Generation", price: "Instant Suggestions", imageSrc:
|
||||||
id: "step2", title: "Preferences Setup - Choose Your Cuisine & Skill", tags: ["Step 2", "Personalization"],
|
"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")
|
||||||
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"
|
{
|
||||||
},
|
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"
|
},
|
||||||
textboxLayout="default"
|
]}
|
||||||
useInvertedBackground={false}
|
animationType="slide-up"
|
||||||
className="py-16"
|
gridVariant="three-columns-all-equal-width"
|
||||||
/>
|
textboxLayout="default"
|
||||||
</div>
|
useInvertedBackground={false}
|
||||||
|
className="py-16"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
<div id="recipes" data-section="recipes">
|
||||||
<ProductCardOne
|
<TestimonialCardTwelve
|
||||||
title="Core Features"
|
cardTitle="Trusted by thousands of home cooks worldwide discovering recipes with their pantry ingredients"
|
||||||
description="Experience the power of AI-driven recipe discovery combined with premium Liquid Glass design and immersive cultural cooking atmosphere."
|
cardTag="Join Our Cooking Community"
|
||||||
tag="Main Features"
|
cardTagIcon={Heart}
|
||||||
tagAnimation="slide-up"
|
testimonials={[
|
||||||
products={[
|
{
|
||||||
{
|
id: "user1", name: "Sarah Johnson", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sarah Johnson"
|
||||||
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: "user2", name: "Marco Rossi", imageSrc: "/placeholders/placeholder2.webp", imageAlt: "Marco Rossi"
|
||||||
{
|
},
|
||||||
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: "user3", name: "Yuki Tanaka", imageSrc: "/placeholders/placeholder3.webp", imageAlt: "Yuki Tanaka"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "music-system", name: "Cultural Music System", price: "Immersive Experience", imageSrc:
|
id: "user4", name: "Elena Martínez", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Elena Martínez"
|
||||||
"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"
|
},
|
||||||
},
|
{
|
||||||
]}
|
id: "user5", name: "Priya Sharma", imageSrc: "/placeholders/placeholder5.webp", imageAlt: "Priya Sharma"
|
||||||
animationType="slide-up"
|
},
|
||||||
gridVariant="three-columns-all-equal-width"
|
{
|
||||||
textboxLayout="default"
|
id: "user6", name: "Lucas Silva", imageSrc: "/placeholders/placeholder6.webp", imageAlt: "Lucas Silva"
|
||||||
useInvertedBackground={false}
|
},
|
||||||
className="py-16"
|
]}
|
||||||
/>
|
cardAnimation="blur-reveal"
|
||||||
</div>
|
useInvertedBackground={true}
|
||||||
|
className="py-16"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="recipes" data-section="recipes">
|
<div id="pricing" data-section="pricing">
|
||||||
<TestimonialCardTwelve
|
<PricingCardEight
|
||||||
cardTitle="Trusted by thousands of home cooks worldwide discovering recipes with their pantry ingredients"
|
title="Choose Your Cooking Plan"
|
||||||
cardTag="Join Our Cooking Community"
|
description="Select the perfect EasyRecipes plan for your culinary journey and unlock unlimited recipe discovery."
|
||||||
cardTagIcon={Heart}
|
tag="Flexible Plans"
|
||||||
testimonials={[
|
tagAnimation="slide-up"
|
||||||
{
|
plans={[
|
||||||
id: "user1", name: "Sarah Johnson", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sarah Johnson"
|
{
|
||||||
},
|
id: "starter", badge: "Great for Beginners", badgeIcon: Zap,
|
||||||
{
|
price: "Free", subtitle: "Perfect for exploring recipes", buttons: [{ text: "Get Started", href: "#auth", onClick: handleSignIn }],
|
||||||
id: "user2", name: "Marco Rossi", imageSrc: "/placeholders/placeholder2.webp", imageAlt: "Marco Rossi"
|
features: [
|
||||||
},
|
"50 AI-generated recipes/month", "Basic ingredient input", "Standard cooking instructions", "Cultural music system"
|
||||||
{
|
],
|
||||||
id: "user3", name: "Yuki Tanaka", imageSrc: "/placeholders/placeholder3.webp", imageAlt: "Yuki Tanaka"
|
},
|
||||||
},
|
{
|
||||||
{
|
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
|
||||||
id: "user4", name: "Elena Martínez", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Elena Martínez"
|
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: "user5", name: "Priya Sharma", imageSrc: "/placeholders/placeholder5.webp", imageAlt: "Priya Sharma"
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "user6", name: "Lucas Silva", imageSrc: "/placeholders/placeholder6.webp", imageAlt: "Lucas Silva"
|
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: [
|
||||||
cardAnimation="blur-reveal"
|
"Everything in Pro", "Professional cooking techniques", "Meal planning & grocery lists", "Weekly recipe curation", "Family sharing (up to 5 members)", "Exclusive chef interviews"
|
||||||
useInvertedBackground={true}
|
],
|
||||||
className="py-16"
|
},
|
||||||
/>
|
]}
|
||||||
</div>
|
animationType="slide-up"
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
className="py-16"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="pricing" data-section="pricing">
|
<div id="metrics" data-section="metrics">
|
||||||
<PricingCardEight
|
<MetricCardThree
|
||||||
title="Choose Your Cooking Plan"
|
title="EasyRecipes by the Numbers"
|
||||||
description="Select the perfect EasyRecipes plan for your culinary journey and unlock unlimited recipe discovery."
|
description="See how EasyRecipes is transforming home cooking with AI-powered recipe discovery."
|
||||||
tag="Flexible Plans"
|
tag="Performance Stats"
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
plans={[
|
metrics={[
|
||||||
{
|
{
|
||||||
id: "starter", badge: "Great for Beginners", badgeIcon: Zap,
|
id: "recipes", icon: Star,
|
||||||
price: "Free", subtitle: "Perfect for exploring recipes", buttons: [{ text: "Get Started", href: "#auth" }],
|
title: "Recipes Generated", value: "1M+"
|
||||||
features: [
|
},
|
||||||
"50 AI-generated recipes/month", "Basic ingredient input", "Standard cooking instructions", "Cultural music system"
|
{
|
||||||
],
|
id: "users", icon: Users,
|
||||||
},
|
title: "Active Users", value: "50K+"
|
||||||
{
|
},
|
||||||
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
|
{
|
||||||
price: "$9.99/mo", subtitle: "For serious home cooks", buttons: [{ text: "Start Free Trial", href: "#auth" }],
|
id: "cuisines", icon: Globe,
|
||||||
features: [
|
title: "Cuisines Supported", value: "25+"
|
||||||
"Unlimited AI recipes", "Voice & camera ingredient scanning", "Smart pantry management", "Personalized cooking suggestions", "Advanced nutritional info", "Priority support"
|
},
|
||||||
],
|
{
|
||||||
},
|
id: "satisfaction", icon: Star,
|
||||||
{
|
title: "User Satisfaction", value: "4.8/5"
|
||||||
id: "chef", badge: "For Enthusiasts", badgeIcon: Award,
|
},
|
||||||
price: "$19.99/mo", subtitle: "Master your culinary skills", buttons: [{ text: "Upgrade Now", href: "#auth" }],
|
]}
|
||||||
features: [
|
animationType="slide-up"
|
||||||
"Everything in Pro", "Professional cooking techniques", "Meal planning & grocery lists", "Weekly recipe curation", "Family sharing (up to 5 members)", "Exclusive chef interviews"
|
textboxLayout="default"
|
||||||
],
|
useInvertedBackground={true}
|
||||||
},
|
className="py-16"
|
||||||
]}
|
/>
|
||||||
animationType="slide-up"
|
</div>
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
className="py-16"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="metrics" data-section="metrics">
|
<div id="faq" data-section="faq">
|
||||||
<MetricCardThree
|
<FaqSplitText
|
||||||
title="EasyRecipes by the Numbers"
|
sideTitle="Frequently Asked Questions"
|
||||||
description="See how EasyRecipes is transforming home cooking with AI-powered recipe discovery."
|
sideDescription="Everything you need to know about EasyRecipes, authentication, and our AI recipe system."
|
||||||
tag="Performance Stats"
|
faqs={[
|
||||||
tagAnimation="slide-up"
|
{
|
||||||
metrics={[
|
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: "recipes", icon: Star,
|
},
|
||||||
title: "Recipes Generated", value: "1M+"
|
{
|
||||||
},
|
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: "users", icon: Users,
|
},
|
||||||
title: "Active Users", value: "50K+"
|
{
|
||||||
},
|
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: "cuisines", icon: Globe,
|
},
|
||||||
title: "Cuisines Supported", value: "25+"
|
{
|
||||||
},
|
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: "satisfaction", icon: Star,
|
},
|
||||||
title: "User Satisfaction", value: "4.8/5"
|
{
|
||||||
},
|
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."
|
||||||
animationType="slide-up"
|
},
|
||||||
textboxLayout="default"
|
{
|
||||||
useInvertedBackground={true}
|
id: "music-system", title: "What is the cultural music system?", content:
|
||||||
className="py-16"
|
"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."
|
||||||
/>
|
},
|
||||||
</div>
|
{
|
||||||
|
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">
|
<div id="contact" data-section="contact">
|
||||||
<FaqSplitText
|
<ContactSplitForm
|
||||||
sideTitle="Frequently Asked Questions"
|
title="Get in Touch with EasyRecipes"
|
||||||
sideDescription="Everything you need to know about EasyRecipes, authentication, and our AI recipe system."
|
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."
|
||||||
faqs={[
|
inputs={[
|
||||||
{
|
{
|
||||||
id: "auth-login", title: "How do I sign up and log in?", content:
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||||
"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."
|
},
|
||||||
},
|
{
|
||||||
{
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||||
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."
|
]}
|
||||||
},
|
textarea={{
|
||||||
{
|
name: "message", placeholder: "Tell us what's on your mind...", rows: 5,
|
||||||
id: "onboarding-steps", title: "What are the onboarding steps?", content:
|
required: true,
|
||||||
"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."
|
}}
|
||||||
},
|
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"
|
||||||
id: "ingredient-input", title: "How do I input ingredients?", content:
|
imageAlt="EasyRecipes dashboard"
|
||||||
"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."
|
mediaAnimation="blur-reveal"
|
||||||
},
|
mediaPosition="right"
|
||||||
{
|
useInvertedBackground={false}
|
||||||
id: "ai-recipes", title: "How does AI generate recipes?", content:
|
className="py-16"
|
||||||
"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."
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
</>
|
||||||
id: "music-system", title: "What is the cultural music system?", content:
|
) : null}
|
||||||
"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="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoEmphasis
|
<FooterLogoEmphasis
|
||||||
|
|||||||
Reference in New Issue
Block a user