Update App.tsx

App.tsx

@@ -5,28 +5,42 @@ import LandingPage from './components/LandingPage';
 
 // Lazy load the heavy builder component to improve initial load performance
 const Builder = React.lazy(() => import('./components/Builder'));
+const HelpPage = React.lazy(() => import('./components/HelpPage'));
 
 // Loading screen fallback for Suspense
 const LoadingScreen = () => (
   <div className="fixed inset-0 bg-slate-950 flex items-center justify-center text-white z-50">
      <div className="flex flex-col items-center gap-4">
         <Sparkles className="animate-spin text-blue-500" size={32} />
-        <p className="text-slate-400 text-sm animate-pulse font-medium">Loading Builder Environment...</p>
+        <p className="text-slate-400 text-sm animate-pulse font-medium">Loading...</p>
      </div>
   </div>
 );
 
 const App = () => {
-  const [showLanding, setShowLanding] = useState(true);
+  const [view, setView] = useState<'landing' | 'builder' | 'help'>('landing');
 
-  if (showLanding) {
-    return <LandingPage onEnterApp={() => setShowLanding(false)} />;
+  if (view === 'landing') {
+    return (
+      <LandingPage 
+        onEnterApp={() => setView('builder')} 
+        onShowHelp={() => setView('help')}
+      />
+    );
+  }
+
+  if (view === 'help') {
+    return (
+      <Suspense fallback={<LoadingScreen />}>
+        <HelpPage onBack={() => setView('landing')} />
+      </Suspense>
+    );
   }
 
   return (
     <ReactFlowProvider>
       <Suspense fallback={<LoadingScreen />}>
-        <Builder onBackToHome={() => setShowLanding(true)} />
+        <Builder onBackToHome={() => setView('landing')} />
       </Suspense>
     </ReactFlowProvider>
   );