diff --git a/src/app/page.tsx b/src/app/page.tsx index 306c846..9619375 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery"; @@ -30,7 +30,12 @@ import { export default function LandingPage() { const [isAuthenticated, setIsAuthenticated] = useState(false); const [showOnboarding, setShowOnboarding] = useState(false); - const [mounted, setMounted] = useState(true); + const [mounted, setMounted] = useState(false); + + // Hydration fix: only render after client mount + useEffect(() => { + setMounted(true); + }, []); const handleCompleteOnboarding = () => { try { @@ -53,6 +58,11 @@ export default function LandingPage() { } }; + const handleSignIn = () => { + setIsAuthenticated(true); + setShowOnboarding(true); + }; + if (!mounted) { return null; } @@ -92,12 +102,12 @@ export default function LandingPage() { { 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" + "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" + "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" @@ -140,7 +150,7 @@ export default function LandingPage() { { name: "Settings", id: "settings" }, ]} button={{ - text: isAuthenticated ? "Sign Out" : "Sign In", href: isAuthenticated ? "#" : "#auth", onClick: isAuthenticated ? handleSignOut : undefined, + text: isAuthenticated ? "Sign Out" : "Sign In", href: isAuthenticated ? "#" : "#auth", onClick: isAuthenticated ? handleSignOut : handleSignIn, }} animateOnLoad={true} className="backdrop-blur-md bg-white/30 border border-white/20" @@ -158,7 +168,7 @@ export default function LandingPage() { tagIcon={Sparkles} tagAnimation="slide-up" buttons={[ - { text: "Get Started", href: "#auth" }, + { text: "Get Started", href: "#auth", onClick: handleSignIn }, { text: "Learn More", href: "#features" }, ]} buttonAnimation="slide-up" @@ -226,15 +236,15 @@ export default function LandingPage() { 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" + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-mobile-app-ingredient-input-screen-wit-1772651575762-1165d0de.png?_wi=2", imageAlt: "Ingredient input interface", onProductClick: () => console.log("Product 1 clicked") }, { id: "recipe-generation", name: "AI Recipe Generation", price: "Instant Suggestions", imageSrc: - "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=2", imageAlt: "Recipe cards display" + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/beautiful-recipe-result-cards-with-glass-1772651576068-e357f495.png?_wi=2", imageAlt: "Recipe cards display", onProductClick: () => console.log("Product 2 clicked") }, { id: "music-system", name: "Cultural Music System", price: "Immersive Experience", imageSrc: - "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUcMfqJIbBXtBhmBEoWXMLyB4X/a-cultural-music-player-interface-showin-1772651576437-2be31020.png?_wi=2", imageAlt: "Music player interface" + "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" @@ -285,21 +295,21 @@ export default function LandingPage() { plans={[ { id: "starter", badge: "Great for Beginners", badgeIcon: Zap, - price: "Free", subtitle: "Perfect for exploring recipes", buttons: [{ text: "Get Started", href: "#auth" }], + price: "Free", subtitle: "Perfect for exploring recipes", buttons: [{ text: "Get Started", href: "#auth", onClick: handleSignIn }], features: [ "50 AI-generated recipes/month", "Basic ingredient input", "Standard cooking instructions", "Cultural music system" ], }, { id: "pro", badge: "Most Popular", badgeIcon: Sparkles, - price: "$9.99/mo", subtitle: "For serious home cooks", buttons: [{ text: "Start Free Trial", href: "#auth" }], + price: "$9.99/mo", subtitle: "For serious home cooks", buttons: [{ text: "Start Free Trial", href: "#auth", onClick: handleSignIn }], features: [ "Unlimited AI recipes", "Voice & camera ingredient scanning", "Smart pantry management", "Personalized cooking suggestions", "Advanced nutritional info", "Priority support" ], }, { id: "chef", badge: "For Enthusiasts", badgeIcon: Award, - price: "$19.99/mo", subtitle: "Master your culinary skills", buttons: [{ text: "Upgrade Now", href: "#auth" }], + price: "$19.99/mo", subtitle: "Master your culinary skills", buttons: [{ text: "Upgrade Now", href: "#auth", onClick: handleSignIn }], features: [ "Everything in Pro", "Professional cooking techniques", "Meal planning & grocery lists", "Weekly recipe curation", "Family sharing (up to 5 members)", "Exclusive chef interviews" ],