Merge version_2 into main #5
@@ -1,56 +1,22 @@
|
||||
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">
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1418,7 +1384,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
660
src/app/page.tsx
660
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
@@ -29,6 +30,133 @@ import {
|
||||
} from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [showOnboarding, setShowOnboarding] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
// Initialize authentication state from localStorage
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const checkAuth = () => {
|
||||
try {
|
||||
const authToken = localStorage.getItem("authToken");
|
||||
const hasCompletedOnboarding = localStorage.getItem(
|
||||
"hasCompletedOnboarding"
|
||||
);
|
||||
|
||||
if (authToken) {
|
||||
setIsAuthenticated(true);
|
||||
if (!hasCompletedOnboarding) {
|
||||
setShowOnboarding(true);
|
||||
}
|
||||
} else {
|
||||
setIsAuthenticated(false);
|
||||
setShowOnboarding(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error checking authentication:", error);
|
||||
}
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
}, []);
|
||||
|
||||
const handleSignIn = (email: string, password: string) => {
|
||||
try {
|
||||
localStorage.setItem("authToken", `token_${Date.now()}`);
|
||||
localStorage.setItem("userEmail", email);
|
||||
setIsAuthenticated(true);
|
||||
setShowOnboarding(true);
|
||||
} catch (error) {
|
||||
console.error("Sign in error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCompleteOnboarding = () => {
|
||||
try {
|
||||
localStorage.setItem("hasCompletedOnboarding", "true");
|
||||
setShowOnboarding(false);
|
||||
} catch (error) {
|
||||
console.error("Onboarding completion error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignOut = () => {
|
||||
try {
|
||||
localStorage.removeItem("authToken");
|
||||
localStorage.removeItem("userEmail");
|
||||
localStorage.removeItem("hasCompletedOnboarding");
|
||||
setIsAuthenticated(false);
|
||||
setShowOnboarding(false);
|
||||
} catch (error) {
|
||||
console.error("Sign out error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// If user is authenticated but hasn't completed onboarding, show onboarding flow
|
||||
if (isAuthenticated && showOnboarding) {
|
||||
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"},
|
||||
{
|
||||
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}
|
||||
buttons={[
|
||||
{
|
||||
text: "Complete Setup", onClick: handleCompleteOnboarding,
|
||||
},
|
||||
]}
|
||||
className="py-16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Main landing page or authenticated dashboard
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -51,292 +179,264 @@ 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 : undefined,
|
||||
}}
|
||||
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" },
|
||||
{ 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"},
|
||||
{
|
||||
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="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" }],
|
||||
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="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>
|
||||
</>
|
||||
) : (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Welcome to EasyRecipes</h1>
|
||||
<p className="text-lg text-gray-600 mb-8">
|
||||
Dashboard content coming soon
|
||||
</p>
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
className="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
@@ -353,11 +453,9 @@ export default function LandingPage() {
|
||||
items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{
|
||||
label: "Support", href: "https://support.easyrecipes.app"
|
||||
},
|
||||
label: "Support", href: "https://support.easyrecipes.app"},
|
||||
{
|
||||
label: "Documentation", href: "https://docs.easyrecipes.app"
|
||||
},
|
||||
label: "Documentation", href: "https://docs.easyrecipes.app"},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -371,11 +469,9 @@ export default function LandingPage() {
|
||||
items: [
|
||||
{ label: "Twitter", href: "https://twitter.com/easyrecipes" },
|
||||
{
|
||||
label: "Instagram", href: "https://instagram.com/easyrecipes"
|
||||
},
|
||||
label: "Instagram", href: "https://instagram.com/easyrecipes"},
|
||||
{
|
||||
label: "Facebook", href: "https://facebook.com/easyrecipes"
|
||||
},
|
||||
label: "Facebook", href: "https://facebook.com/easyrecipes"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user