388 lines
19 KiB
TypeScript
388 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
|
|
import {
|
|
Award,
|
|
ChevronRight,
|
|
Globe,
|
|
Heart,
|
|
Lock,
|
|
Shield,
|
|
Sparkles,
|
|
Star,
|
|
TrendingUp,
|
|
User,
|
|
Users,
|
|
Zap,
|
|
} from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
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">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="EasyRecipes"
|
|
navItems={[
|
|
{ name: "Dashboard", id: "dashboard" },
|
|
{ name: "Recipes", id: "recipes" },
|
|
{ name: "Pantry", id: "pantry" },
|
|
{ name: "Settings", id: "settings" },
|
|
]}
|
|
button={{ text: "Sign In", href: "#auth" }}
|
|
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", 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", 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", 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="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", 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", 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", 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="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="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="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="EasyRecipes"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contact", href: "#contact" },
|
|
{
|
|
label: "Support", href: "https://support.easyrecipes.app"
|
|
},
|
|
{
|
|
label: "Documentation", href: "https://docs.easyrecipes.app"
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Twitter", href: "https://twitter.com/easyrecipes" },
|
|
{
|
|
label: "Instagram", href: "https://instagram.com/easyrecipes"
|
|
},
|
|
{
|
|
label: "Facebook", href: "https://facebook.com/easyrecipes"
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
className="backdrop-blur-sm bg-white/10"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|