Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| eb341bc16d | |||
| c049f3e571 | |||
| a459d0d429 | |||
| 4c4028fe65 | |||
| 28722e8c9e | |||
| 51059ac8d1 | |||
| 7cbb0481b7 | |||
| 41b61cfcd1 | |||
| 0381957852 | |||
| 06df6fc0e5 |
@@ -1,55 +1,22 @@
|
|||||||
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>
|
<body className={inter.className}>
|
||||||
<body
|
{children}
|
||||||
className={`${halant.variable} ${inter.variable} ${manrope.variable} ${dmSans.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
|
||||||
{children}
|
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
@@ -1418,7 +1385,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
645
src/app/page.tsx
645
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,107 @@ 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,
|
||||||
} 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 [mounted, setMounted] = useState(true);
|
||||||
|
|
||||||
|
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 (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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-bubble"
|
defaultButtonVariant="hover-bubble"
|
||||||
@@ -51,292 +139,297 @@ 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 : undefined,
|
||||||
|
}}
|
||||||
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" },
|
||||||
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"
|
||||||
"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"
|
||||||
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"
|
||||||
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" }],
|
||||||
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" }],
|
||||||
},
|
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" }],
|
||||||
]}
|
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:
|
) : (
|
||||||
"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 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>
|
||||||
id: "smart-pantry", title: "What is the Smart Pantry?", content:
|
<p className="text-lg text-gray-600 mb-8">
|
||||||
"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.'"
|
Dashboard content coming soon
|
||||||
},
|
</p>
|
||||||
{
|
<button
|
||||||
id: "camera-scanner", title: "How does the camera ingredient scanner work?", content:
|
onClick={handleSignOut}
|
||||||
"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."
|
className="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
||||||
},
|
>
|
||||||
]}
|
Sign Out
|
||||||
textPosition="left"
|
</button>
|
||||||
faqsAnimation="slide-up"
|
</div>
|
||||||
useInvertedBackground={false}
|
</div>
|
||||||
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